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');
}