JavaScript Variables

JavaScript is a versatile and widely-used programming language that plays a central role in web development. One of its fundamental features is variables. Variables are essential for storing and managing data within your programs. In this comprehensive guide, we’ll explore JavaScript variables in depth, from their basics to advanced usage, with plenty of code examples along the way.

In JavaScript, a variable is a named container for storing data. Variables allow you to work with information that can change during the execution of your program. These data can be numbers, text, arrays, objects, or any other JavaScript data type.

Variable Declaration

JavaScript provides three ways to declare variables:


var name = "John";
var age = 30;

In older versions of JavaScript, var was the primary way to declare variables. However, it has some quirks and is generally not recommended for modern code due to its function-level scope and potential hoisting issues.


let city = "New York";
let population = 8.4 million;

Introduced in ECMAScript 6 (ES6), let provides block-level scope and is preferred for most variable declarations in modern JavaScript.


const pi = 3.14159;
const daysInAWeek = 7;

Like let, const was also introduced in ES6. It is used for declaring constants, and variables declared with const cannot be reassigned.

Naming Conventions and Best Practices

When naming variables in JavaScript, it’s essential to follow some conventions and best practices:

  • Variable names are case-sensitive (myVar is different from myvar).
  • Use meaningful and descriptive names.
  • Start variable names with a letter, underscore (_), or dollar sign ($).
  • Avoid using reserved keywords like var, let, const, and others as variable names.
  • Use camelCase for multi-word variable names (e.g., myVariableName).

Data Types

JavaScript is a dynamically typed language, which means variables can hold different types of data. The primary data types in JavaScript are:

  • Primitive Types:

    • undefined: Represents an uninitialized variable.
    • null: Represents the absence of value.
    • boolean: Represents true or false.
    • number: Represents both integers and floating-point numbers.
    • string: Represents textual data.
    • symbol: Represents unique and immutable values (ES6).
  • Composite Types:

    • object: Represents a collection of key-value pairs.
    • array: A special type of object that stores an ordered list of values.

Assigning and Reassigning Variables

You can assign values to variables during declaration or later in your code. Additionally, you can reassign values to variables declared with let, but not to those declared with const.

Assigning Values

let name = "Alice";
let age = 25;

Reassigning Values

let score = 100;
score = 200; // Reassigning the variable score


const pi = 3.14159;
pi = 22 / 7; // This will result in an error, as you can't reassign constants


Scope determines where a variable is accessible in your code. JavaScript has three main types of scope:

Global Scope

Variables declared outside of any function or block have global scope, making them accessible throughout your entire program.


let globalVar = "I'm global";

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


Local Scope

Variables declared inside a function have local scope and are only accessible within that function.


function exampleFunction() {
let localVar = "I'm local";
console.log(localVar); // Accessible here

console.log(localVar); // This will result in an error


Block Scope

Variables declared with let and const have block scope, meaning they are confined to the block in which they are defined.


if (true) {
let blockVar = "I'm in a block";
console.log(blockVar); // Accessible here

console.log(blockVar); // This will result in an error



Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during compilation, before the code is executed. However, only the declarations are hoisted, not the initializations.

Variable Hoisting

console.log(myVar); // Outputs 'undefined'
var myVar = 42;

In the code above, the var myVar declaration is hoisted to the top, but the assignment (myVar = 42) is not. This is why myVar is initially undefined.

Variable Hoisting

Variable hoisting can lead to unexpected behavior and bugs in your code, especially when using var. To avoid hoisting-related issues, it’s recommended to use let and const, which have block-level scope and are not hoisted.


JavaScript variables are a fundamental concept that allows you to store and manipulate data within your programs. Understanding variable declaration, scoping rules, and best practices for naming and usage is crucial for writing clean and maintainable JavaScript code. By following these guidelines and using let and const for variable declaration, you can avoid common pitfalls and write more reliable and efficient JavaScript applications.

Build something ULTIMATE!

About Us

Learn about HTML, CSS, SASS, Javascript, jQuery, PHP, SQL, WordPress. From basics to tips and tricks.

Connect With us

© 2023 Ultimate WebDev

This website uses cookies to improve your experience. By browsing this website, you agree to our cookies. Accept Read More