Demystifying JavaScript Variable Declarations

Hi techie, today we’ll learn about the differences between variable declarations in JavaScript. But first, let’s refresh our memory on JavaScript.

JavaScript is a programming language that enhances interactivity on webpages and works across different platforms with an object-oriented approach. The functions of Javascript enhances interactivity on the webpage is due to its ability to enable a developer to enhance website interactivity, focus on optimizing user experience, incorporate responsive design, and ensure smooth navigation of web pages.

JavaScript employs variable declarations, also known as identifiers, serving as symbolic names for values. These variable declarations or Javascript keywords include the var, let and const statements. Furthermore, variable declarations in JavaScript must follow the following rules.

RULES FOR VARIABLE DECLARATIONS IN JAVASCRIPT

There are Certain rules that must be enforced when using variable declarations in JavaScript. Some of these rules include:

1. Variable names must start with a letter, an underscore (_) or a dollar sign ($).

2. Variable names cannot contain spaces.

3. Variables cannot be the same as reserved keywords such as if or const.

4. Variables should be given descriptive names that indicate their content and usage (e.g. Name and age rather than x and y).

Now let’s learn more about the different types of variables declaration statements.

THE VAR VARIABLE DECLARATION

• The var statement is a keyword that enables you declare a normal variable in JavaScript. E.g

var x = 10

var is the keyword enabling you to declare your variable, x is the variable to be declared and = is an operator in JavaScript

• After a variable has been declared using var, such variable can be referenced anywhere in the code by inputting the variable. For example:

var x = 100;

x + 50;

Output: 150

• One can reassign values using the var statement. For example:

var temperature = “10°C

weather = “cool”

weather;

Output: “cool”

• variable declarations with “var,” regardless of their placement in a script, are processed before any code execution takes place.

THE LET VARIABLE DECLARATION

• The let statement is used to declare a block scoped variable in JavaScript. For example:

Let message = “Welcome to News Channel One”

console.log(message);

Output: Welcome to News Channel One.

• Variables defined with the let keyword cannot be redeclared and must be declared before use. For example:

let categoryName = ‘Swimwear collection’

let categoryName = ‘Gymnwear collection’

Output: The second categoryName displays a syntax error

• Variables declared with let are hoisted but not initialized. This means the variable exists during the entire block but cannot be accessed until after the declaration is encountered.

THE CONST VARIABLE DECLARATION

• const is a keyword used to declare a variable that cannot be reassigned a new

• The const declaration declares block-scoped local variables.

• The const variable must be initialized at the time of declaration with the variable name, e.g., const x=6;

• A const variable cannot be hoisted, which means that a variable declared/initialized using var keyword cannot be reassigned using const.

• The const variable creates only reference to the value.

• In const. usage,objects properties can be changed but the reference to an object cannot be changed.

DIFFERENCES BETWEEN THE LET, CONST AND VAR STATEMENTS

1. Scope: var has function scope, meaning it is visible throughout the entire function, regardless of block scope while let and const have block scope, meaning they are confined to the block (e.g., within {}) in which they are defined.

2. Hoisting: Variables declared with var are hoisted to the top of their function or global scope during compilation, allowing them to be used before the declaration while let and const are also hoisted, but unlike var, they are not initialized until their actual declaration. An attempt at accessing them before declaration results in a ReferenceError.

3. Reassignment: Variables declared with var can be redeclared and reassigned, let allows reassignment but not redeclaration within the same scope while const variables cannot be reassigned after declaration, and attempting to do so results in an error. However, their internal values can be modified if they are objects or arrays.

GUIDELINES FOR CHOOSING THE APPROPRIATE DECLARATION FOR USE

1. Use const for variables that won’t be reassigned after initialization.

2. Use let for variables that need reassignment

3. Use const not only for constant values but also for variables representing objects or arrays if their structure remains unchanged.

4. Avoid declaring variables in the global scope using var. Instead, use let or const within a block or function to limit their scope

CONCLUSION

In conclusion, understanding the differences between let, var and const in JavaScript is crucial for writing neat codes and promoting code clarity.

SOURCES

https://sentry.io/answers/naming-variables-in-javascript/#

https://www.javascript.com/learn/variables#:~:text=var%20is%20the%20keyword%20that,value%20is%20coming%20up%20next.