Have you ever wondered how JavaScript programs store and manipulate data? Variables and constants are the unsung heroes behind this magic! They serve as powerful containers that hold and manipulate information, enabling developers to create dynamic and interactive applications. In this article, we'll embark on an exciting journey into the world of variables and constants in JavaScript. We'll unravel their fundamental concepts, explore the intricacies of their declaration, and initialization, and dive into the intriguing differences between them with relevant examples. Along the way, we'll also uncover the essential rules for naming variables in JavaScript. Get ready to unleash the full potential of these programming building blocks and take your JavaScript skills to new heights!
1. What is a variable?
A variable is a container for values. It is a container to hold data. It provides a way to refer to and manipulate data throughout a program. Now that you understand what a variable is, let's delve into variable declaration and explore how we can declare them.
A. Variable Declaration
Before using a variable, we need to declare it. Variable declaration involves specifying a name for the variable without assigning a value to it. In JavaScript, there are two ways to declare variables: using the 'var' keyword or the 'let' keyword.
Example of variable declaration with var and let
// variable declaration with var and let
var greeting;
let greeting;
var job;
let job;
B. Differences between 'var' and 'let'
Both var and let are used to declare variable but they have some differences between them: Let's understand their differences
var
When JavaScript was first created, this was the only way to declare variables. var are function scoped or globally scoped. (Note: scope will be discussed in later post). You can declare a variable with var after you initialize it and it will still work because of hoisting
With var;
i. variables can be reassigned to new values. This means that you can change the value of a variable as often as you need to, without affecting the rest of your code
var greeting = "hello"
greeting = "hi"
console.log(greeting) //hi
ii. You can redeclare variables
var job = "junior developer"
var job = "mid developer"
console.log(job) //mid developer
With let,
i. You can reassign values
let greeting = "hello"
greeting = "hi
console.log(greeting) //hi
The above code will not output any error because you can reassign values
ii. You cannot redeclare variables
let greeting = "hello"
let greeting = "hi"
console.log(greeting) //Identifier 'greeting' has already been declared
The above code will output error because you cannot redeclare block scope.
C. Initializing Variables
After declaring a variable, we can initialize it by assigning a value. Initialization involves using the variable name, followed by the assignment operator (=), and the desired value. Variables can be initialized during declaration or at a later stage. If a variable is declared without initialization, its value will be 'undefined'.
Let's understand what this means by looking at code examples.
i. Variable declaration and initialization.
let greeting = "Hello"; // The variable 'greeting' is declared and initialized with the value "Hello"
console.log(greeting); // Output: Hello
ii. Variable initialization at a later stage
let name;
myName = "Ayodele"; // The variable 'name' is declared first, and later initialized with the value "John"
console.log(myName) //// Output: Ayodele
iii. Variable declared without initialization
let age; // The variable 'age' is declared but not initialized, so its value is 'undefined'
console.log(age) // Output: undefined
2. Constants in JavaScript
In addition to variables, JavaScript also supports constants. Constants are similar to variables but with a few distinctions. When a constant is declared, it must be initialized at the same time. when a value is assigned to a constant, it cannot be changed. Constants are useful when you have a value that should remain constant throughout the program. These are like variables, except that:
i. You must initialize them when you declare them
const greeting = "hello"
console.log(greeting) //hello
ii. You can't assign them a new value after you've initialized them.
const job = "junior dev"
job = "senior dev"
console.log(job) //TypeError: Assignment to constant variable
When to use const and let
i. use const when you can initialize a variable when you declare it, and don't need to reassign
ii. use let when you want to reassign values; when you know the value can change.
3. Rules for Naming JS variable
1. Variable names must contain either a letter, an underscore( _ ) or a dollar sign
let greetMe = "hey";
console.log(greetMe); //hey
let _greetHim = "hello";
console.log(_greetHim); //hello
let $greetHer = "hi";
console.log($greetHer); //hi
2. Variable name cannot start with a number
let 1job = "software developer"
console.log(1job) //Invalid or unexpected token
3. Javascript are case sensitive. So Greeting and greeting are different variable
const Greeting = "hello"
console.log(Greeting) // hello
const greeting = "hi"
console.log(greeting) //hi
4. Keywords cannot be used as variable names. For example
const new = 10
console.log(new) //// Error! new is a keyword.
Note: You can research on keywords and list of reserved words you can't use as variable names
Conclusion
Variables and constants are fundamental building blocks in JavaScript programming. They allow us to store, manipulate, and access data throughout our code. By understanding variable declaration, initialization, and the differences between 'var' and 'let', we can write more efficient and structured JavaScript programs. Remember to follow the naming rules to create meaningful and readable variable names. Now that you have a solid understanding of variables and constants, you are ready to unleash the power of JavaScript!