JavaScript Variables

In JavaScript, variables are essential for storing and manipulating data. Understanding how to declare and use variables is crucial for effective programming.

1. Variable Declaration

Variables in JavaScript can be declared using var, let, or const. Each keyword has specific characteristics:

Using var

The var keyword declares a variable that is function-scoped or globally-scoped. It can be re-assigned and re-declared within its scope.

var name = 'John';
name = 'Jane'; // The variable can be re-assigned
var name = 'Doe'; // The variable can be re-declared

Using let

The let keyword declares a block-scoped variable that can be re-assigned but not re-declared within the same block.

let age = 25;
age = 30; // The variable can be re-assigned within its block scope
// let age = 35; // Error: Identifier 'age' has already been declared

Using const

The const keyword declares a block-scoped variable that cannot be re-assigned or re-declared. However, objects and arrays assigned to a const variable can still be modified.

const pi = 3.14;
// pi = 3.1415; // Error: Assignment to constant variable

const person = {
    name: 'Alice',
    age: 30
};
person.age = 31; // Allowed: modifying object properties

2. Data Types

JavaScript supports various data types. Understanding these types is important for manipulating and performing operations on data.

  • String: Represents textual data.
  • Number: Represents numeric values.
  • Boolean: Represents true or false values.
  • Object: Represents a collection of key-value pairs.
  • Array: Represents a list-like collection of values.
  • Null: Represents the intentional absence of any value.
  • Undefined: Represents a variable that has not been assigned a value.
// Examples of data types
let message = 'Hello, World!'; // String
let age = 25; // Number
let isStudent = true; // Boolean
let person = { name: 'Bob', age: 40 }; // Object
let numbers = [1, 2, 3, 4, 5]; // Array
let nothing = null; // Null
let unknown; // Undefined

3. Variable Scope

Variable scope defines the accessibility of a variable in different parts of your code. JavaScript has global scope, function scope, and block scope.

Global Scope

Variables declared outside of any function or block have global scope and can be accessed anywhere in the code.

var globalVar = 'I am global';

function showGlobal() {
    console.log(globalVar); // Accessible here
}
showGlobal();
console.log(globalVar); // Accessible here

Function Scope

Variables declared inside a function using var are function-scoped and not accessible outside the function.

function exampleFunction() {
    var localVar = 'I am local';
    console.log(localVar); // Accessible here
}
exampleFunction();
console.log(localVar); // Error: localVar is not defined

Block Scope

Variables declared using let and const are block-scoped and can only be accessed within the block they are defined in.

{
    let blockVar = 'I am block-scoped';
    console.log(blockVar); // Accessible here
}
console.log(blockVar); // Error: blockVar is not defined

4. Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope during the compile phase.

Variable Hoisting

Variables declared with var are hoisted, meaning their declarations are moved to the top of the function or global scope, but their initializations remain in place.

console.log(hoistedVar); // undefined
var hoistedVar = 'I am hoisted';

Function Hoisting

Function declarations are also hoisted. You can call a function before it is defined in the code.

hoistedFunction(); // Works

function hoistedFunction() {
    console.log('Function is hoisted');
}