Lesson 1, Topic 1
In Progress

Variable Declarations

In JavaScript, a variable is a container that holds a value. Variables are used to store data, such as numbers, strings, and objects, which can be accessed and manipulated throughout your code.

Explanation of the different ways to declare variables in JavaScript (var, let, const)

In JavaScript, there are three ways to declare variables: using the var keyword, the let keyword, and the const keyword.

  • In JavaScript, variables can be declared using the var keyword. The var keyword is used to indicate that you are declaring a new variable, and it should be followed by the name of the variable you want to create. For example:
var x;
var y = 5;
var z = "hello";

In the first line, the variable x is declared without a value. In the second line, the variable y is declared and assigned the value of 5. In the third line, the variable z is declared and assigned the value of "hello".

It's worth noting that the var keyword is function scoped. This means that a variable declared with var inside a function is only accessible within that function, and is not accessible outside of it.

Also, the var keyword is hoisted. This means that a variable declared with var can be accessed before it is declared in the code.

console.log(x);
var x = 5;

In this example, the console will log undefined, not an error, because the variable x is hoisted to the top of the scope and is initialized as undefined.

Also, you should know that using var keyword to declare variables is considered as an old way and in most cases should be avoided.

  • In JavaScript, the "let" keyword is used to declare a variable. It is used to declare a block-scoped variable, which means the variable is only accessible within the block of code in which it is declared, and any nested blocks. This is different from the "var" keyword, which declares a variable that is function-scoped and accessible within the entire function.

Here is an example of using the "let" keyword to declare a variable:

let x = 5;
console.log(x); // Output: 5

It's important to note that with the "let" keyword, you can also re-declare a variable with the same name within the same block, but you cannot re-declare a variable with the same name in the same scope.

Copy codelet x = 5;
let x = 10; // This will throw a SyntaxError

Also, you can use "let" in a loop to declare a variable that changes on each iteration.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

The "let" keyword was introduced in ECMAScript 6 (ES6) as an alternative to "var" for declaring variables. It is recommended to use "let" instead of "var" for declaring variables in modern JavaScript because "let" provides better scope management and prevents accidental re-declarations within the same scope.

  • In JavaScript, "const" is used to declare a variable that cannot be reassigned. This means that once a variable is declared as a constant, its value cannot be changed. The variable is also block-scoped, meaning that it is only accessible within the block of code in which it is declared.

Declaring a variable using "const" is similar to using "let", but with the added restriction that the variable cannot be reassigned. The syntax for declaring a variable using "const" is as follows:

const variableName = value;

For example:

const PI = 3.14;

If you try to reassign a value to a const variable, it will throw an error.

PI = 3.15; //this will throw an error

It is important to note that while the value of a const variable cannot be reassigned, the value itself may still be mutable. For example, if the value of a const variable is an object or an array, properties or elements within the object or array can still be modified.

It's worth noting that let and const are not supported by all web browsers, so you may need to use a tool like Babel to transpile your code if you want to use them in older browsers.

For example:

var x = 10;
let y = 20;
const z = 30;

x = 40; // reassignment is allowed 
y = 50; // reassignment is allowed
z = 60; // reassignment is not allowed, this will throw an error

It's important to choose the right keyword when declaring a variable based on its intended use and intended scope. If you want to create a variable that can be reassigned, use var or let. If you want to create a constant that cannot be reassigned, use const.

Differences between var, let and const

The main differences between var, let, and const in JavaScript are as follows:

  • var is function scoped, while let and const are block scoped. This means that variables declared with var can be accessed within the entire function they are declared in, while variables declared with let and const can only be accessed within the block they are declared in.
  • Variables declared with var can be reassigned to a new value, while variables declared with const cannot be reassigned. Variables declared with let can be reassigned, but cannot be redeclared.
  • Variables declared with var are hoisted to the top of their scope, meaning they can be accessed before they are declared. Variables declared with let and const are not hoisted and cannot be accessed before they are declared.
  • Variables declared with const must be initialized with a value when they are declared. Variables declared with var and let do not have this requirement.

Example:

// var
if (true) {
  var x = 5; // accessible within the entire function
}
console.log(x); // 5

// let
if (true) {
  let y = 5; // only accessible within the if block
}
console.log(y); // ReferenceError: y is not defined

// const
if (true) {
  const z = 5; // only accessible within the if block, and cannot be reassigned
}
console.log(z); // ReferenceError: z is not defined

It is generally recommended to use const by default, and only use let if reassignment is needed within a block. The use of var should be avoided in modern JavaScript development.

Summing up the topic

In summary, we discussed the different ways to declare variables in JavaScript, which include var, let, and const. Var is function scoped and can be re-declared and updated. Let is block scoped and can be updated but not re-declared. Const is also block scoped, cannot be updated or re-declared. In addition, we discussed the differences between var, let, and const, which include the scope they create and the ability to re-declare or update the variable.

Types of variables

  1. What keyword is used to declare a variable in JavaScript?
  2. What happens if you try to reassign a value to a variable declared with const?
  3. What is the scope of a variable declared with var?
  4. What is the scope of a variable declared with let?
  5. What is the scope of a variable declared with const?
  6. When is a variable declared with var accessible in your code?
  7. When is a variable declared with let accessible in your code?
  8. Can a variable declared with const have properties added or removed?
  9. What happens if you try to reassign a value to a variable declared with const?

Differences between var, let and const

  1. What is the difference between the keyword var and let in JavaScript?
  2. When should you use the keyword const instead of let or var?
  3. What is the difference between const and let?
  4. When should you use var, let and const?
  5. What are the benefits of using let and const over var?

Hands-on exercises:

  1. Declare a variable using var, let and const each with a name of your choice and a value of your choice.
  2. Try to reassign a new value to the variable declared using var, let and const.
  3. Try to re-declare the variable declared using var, let and const.