Explain JavaScript Fundamentals Variables

JavaScript variables are used to store data that can be used and manipulated throughout your code. Here are the key fundamentals of JavaScript variables, along with examples and outputs:

1. Declaring Variables

In JavaScript, you can declare variables using three keywords: var, let, and const.

• var: Declares a variable, optionally initializing it to a value. var is function-scoped.
• let: Declares a block-scoped local variable, optionally initializing it to a value.
• const: Declares a block-scoped, read-only named constant.

Examples:

var x = 5;
let y = 10;
const z = 15;

console.log(x); // Output: 5
console.log(y); // Output: 10
console.log(z); // Output: 15

2. Variable Scope

• Function Scope: Variables declared with var are scoped to the function in which they are declared.
• Block Scope: Variables declared with let and const are scoped to the block in which they are declared.

Examples:

function varTest() {
    var x = 1;
    if (true) {
        var x = 2;  // same variable!
        console.log(x);  // Output: 2
    }
    console.log(x);  // Output: 2
}

function letTest() {
    let x = 1;
    if (true) {
        let x = 2;  // different variable
        console.log(x);  // Output: 2
    }
    console.log(x);  // Output: 1
}

varTest();
letTest();

3. Hoisting

• Hoisting: JavaScript's default behavior of moving declarations to the top of the current scope (function or global scope).

Example:

console.log(a); // Output: undefined
var a = 2;

// The above code is interpreted as:
// var a;
// console.log(a); // Output: undefined
// a = 2;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 3;

4. Reassigning and Redeclaring Variables

• Reassigning: Changing the value of a variable.
• Redeclaring: Declaring a variable again within the same scope.

Examples:

var x = 5;
x = 10;  // Reassigning
console.log(x); // Output: 10

let y = 20;
y = 25;  // Reassigning
console.log(y); // Output: 25

const z = 30;
// z = 35; // Error: Assignment to constant variable

var x = 40;  // Redeclaring with var
console.log(x); // Output: 40

// let y = 50; // Error: Identifier 'y' has already been declared

5. Data Types

JavaScript variables can hold different data types: numbers, strings, objects, arrays, booleans, etc.

Examples:

let num = 100; // Number
let str = "Hello, World!"; // String
let bool = true; // Boolean
let obj = { name: "John", age: 30 }; // Object
let arr = [1, 2, 3, 4, 5]; // Array

console.log(num); // Output: 100
console.log(str); // Output: Hello, World!
console.log(bool); // Output: true
console.log(obj); // Output: { name: "John", age: 30 }
console.log(arr); // Output: [1, 2, 3, 4, 5]

6. Template Literals

Template literals allow for easier string interpolation and multi-line strings.

Example:

let name = "Jane";
let greeting = `Hello, ${name}!`;

console.log(greeting); // Output: Hello, Jane!

Understanding these fundamentals will help you write more effective and efficient JavaScript code.