Differences Between var, let, and const

1. Overview of var, let, and const

2. Scope Differences

Example:

if (true) {
  var x = 10;
  let y = 20;
  const z = 30;
}
console.log(x); // 10 (accessible because of function scope)
console.log(y); // ReferenceError (block-scoped)
console.log(z); // ReferenceError (block-scoped)

3. Re-declaration and Re-assignment

Example:

// Re-declaration
var a = 10;
var a = 20; // Allowed

let b = 30;
// let b = 40; // SyntaxError: Identifier 'b' has already been declared

const c = 50;
// const c = 60; // SyntaxError: Identifier 'c' has already been declared

// Re-assignment
a = 15; // Allowed
b = 35; // Allowed
// c = 55; // TypeError: Assignment to constant variable

4. Hoisting Behavior

Example:

console.log(a); // undefined (hoisted)
var a = 10;

console.log(b); // ReferenceError (temporal dead zone)
let b = 20;

console.log(c); // ReferenceError (temporal dead zone)
const c = 30;

5. Similarities Between let and const

6. When to Use Which?

7. Explanation of Hoisting

What is Hoisting?

Hoisting is JavaScript's default behavior of moving declarations to the top of their scope during the compile phase.

• var: Hoisted and initialized to undefined.
• let / const: Hoisted but not initialized. This creates a temporal dead zone (TDZ) from the start of the block until the declaration is encountered.

Why Hoisting Works This Way?

1. Compilation Phase: JavaScript first scans the code to create a memory space for variable and function declarations. At this stage:

• var variables are initialized to undefined.
• let and const variables are "hoisted" but left uninitialized, hence the TDZ.
• Function declarations are fully hoisted.

1. Execution Phase: JavaScript starts executing code line by line. Variables and functions are assigned values during this phase.

8. Summary of Hoisting

Example:

// var
console.log(foo); // undefined
var foo = 10;

// let
console.log(bar); // ReferenceError
let bar = 20;

// const
console.log(baz); // ReferenceError
const baz = 30;

Conclusion

1. Use const whenever possible for variables that do not need reassignment.
2. Use let for variables that need to be reassigned within the same scope.
3. Avoid var unless working with legacy code or requiring function-scoped behavior.

JavaScript Data Types

JavaScript has various data types classified into Primitive and Non-Primitive (Reference) types. Here's an explanation of each with examples and differences:

1. Primitive Data Types

Primitive types are immutable, meaning their values cannot be changed after they are created. They are stored directly in memory.

2. Non-Primitive (Reference) Data Types

Non-primitive types are mutable and stored by reference. They are used to store collections of data or more complex entities.

3. Key Differences Between Primitive and Non-Primitive Types

4. Special Cases

typeof Operator

• typeof null: Returns "object" due to a historical bug in JavaScript, but null is not an object.
• typeof NaN: Returns "number", even though it means "Not-a-Number."
• typeof function: Returns "function", which is a subtype of object.

Dynamic Typing

JavaScript allows variables to hold values of different types at runtime:

let value = 10; // Number
value = 'Ten'; // String
value = true; // Boolean

5. Examples for Each Data Type

Primitive Types

let str = 'Hello, World'; // String
let num = 42; // Number
let big = 123456789012345678901n; // BigInt
let bool = true; // Boolean
let notDefined; // Undefined
let emptyValue = null; // Null
let uniqueId = Symbol('id'); // Symbol

Non-Primitive Types

let obj = { name: 'John', age: 25 }; // Object
let arr = [1, 2, 3, 4]; // Array
let greet = function () {
  // Function
  console.log('Hello');
};
let today = new Date(); // Date
let regex = /abc/; // RegExp
let map = new Map(); // Map
let set = new Set([1, 2, 3]); // Set

6. Summary of typeof Results