Understanding Variables and Constants in JavaScript

Understanding Variables and Constants in JavaScript

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!