Skip to main content

JavaScript Variables (Live Playground)

In JavaScript, variables are used to store values that can be accessed and manipulated throughout your code.

JavaScript Variable Declaration​

There are three ways to declare variables in JavaScript: using var, let, and const. In this tutorial, we'll explore each of these methods and learn about their respective scopes and behaviors.

var​

var is the original method for declaring variables in JavaScript. Variables declared with var are function-scoped, meaning they are accessible within the entire function in which they are defined.

Example:

function example() {
  var x = 10;
  if (true) {
    var x = 20;
    console.log(x); // Output: 20
  }
  console.log(x); // Output: 20
}
example();

In the example above, both console.log() statements output 20 because the x variable is function-scoped.

Live Playground, Try it Yourself

let​

let was introduced in ECMAScript 6 (ES6) as a more modern way to declare variables. Variables declared with let are block-scoped, meaning they are accessible only within the block in which they are defined.

Example:

function example() {
  let x = 10;
  if (true) {
    let x = 20;
    console.log(x); // Output: 20
  }
  console.log(x); // Output: 10
}
example();

In the example above, the first console.log() statement outputs 20, while the second one outputs 10, because the x variable is block-scoped.

Live Playground, Try it Yourself

const​

const is another way to declare variables introduced in ES6. Like let, const is also block-scoped, but the key difference is that const variables cannot be reassigned after their initial assignment.

Example:

function example() {
  const x = 10;
  if (true) {
    const x = 20;
    console.log(x); // Output: 20
  }
  console.log(x); // Output: 10
}
example();

In the example above, the first console.log() statement outputs 20, while the second one outputs 10. The const variable inside the if block does not affect the const variable in the outer scope.

Live Playground, Try it Yourself

JavaScript Variable Scope​

In JavaScript, the scope of a variable refers to the context in which it's accessible. The scope of a variable depends on how it's declared, using the var, let, or const keyword. Understanding variable scope is essential for managing your code effectively and avoiding potential issues.

Global Scope​

A variable declared outside any function or block has a global scope, meaning it's accessible throughout the entire script.

Example:

var globalVar = 'I am a global variable';

function showGlobalVar() {
  console.log(globalVar);
}

showGlobalVar(); // Output: I am a global variable

In the example above, globalVar is a global variable and can be accessed within the showGlobalVar function.

Live Playground, Try it Yourself

Function Scope​

A variable declared within a function using the var keyword has a function scope, meaning it's accessible only within that function.

Example:

function showFunctionVar() {
  var functionVar = 'I am a function variable';
  console.log(functionVar);
}

showFunctionVar(); // Output: I am a function variable
console.log(functionVar); // Error: functionVar is not defined

In the example above, functionVar has a function scope and cannot be accessed outside the showFunctionVar function.

Live Playground, Try it Yourself

Block Scope​

A variable declared within a block (e.g., a loop or conditional statement) using the let or const keyword has a block scope, meaning it's accessible only within that block that is between the curly braces ({}).

Example:

if (true) {
  let blockVar = 'I am a block variable';
  console.log(blockVar);
}

console.log(blockVar); // Error: blockVar is not defined

In the example above, blockVar has a block scope and cannot be accessed outside the if statement block.

Live Playground, Try it Yourself

Hoisting​

Hoisting is a JavaScript mechanism that moves declarations to the top of their scope before code execution. This means that you can use a variable or function before it is declared. However, it is generally considered a bad practice and can lead to confusion and bugs.

console.log(hoistedVar); // Output: undefined
var hoistedVar = "I'm hoisted";

hoistedFunction(); // Output: I'm a hoisted function

function hoistedFunction() {
  console.log("I'm a hoisted function");
}
Live Playground, Try it Yourself

Conclusion​

Understanding the different ways to declare variables in JavaScript is crucial for managing the scope and behavior of your variables effectively. While var is the original method for declaring variables, let and const are more modern approaches that offer better control over variable scope and reassignment. Remember that variables declared with var have a function scope, while variables declared with let or const have a block scope. Global variables are accessible throughout the entire script but should be used sparingly to avoid conflicts.