JavaScript Variables for Beginners: What You Need to Know?

JavaScript is a popular programming language for creating dynamic and interactive web pages.
It’s essential for building modern web applications, and understanding variables is a fundamental building block in learning JavaScript.

Variables are like containers that store data within a program. They allow you to manipulate and use data throughout your code.
In this blog post, we’ll explore what JavaScript variables are, their different types, how to declare them, and common mistakes to avoid.

What are JavaScript Variables?

Definition of Variables

In programming, a variable is like a storage box that holds data. As you label boxes to remember what’s inside, you give variables names to identify the data they store.
Variables allow you to store, retrieve, and manipulate information in your programs.

Purpose of Variables in JavaScript

In JavaScript, variables store values that can be referenced and manipulated throughout your code.
This could include numbers, strings of text, or even complex data structures like arrays and objects.
Using variables, you can write more dynamic and flexible programs that can react to user input, perform calculations, and manage data efficiently.

Types of Variables in JavaScript

JavaScript offers three keywords to declare variables: var, let, and const. Each has its own characteristics and specific use cases.

1- var

Characteristics and Usage

The var keyword is the oldest way to declare variables in JavaScript. It has been around since the inception of the language.
Variables declared with var are function-scoped, meaning they are accessible within the function they are declared in, or globally if declared outside any function.

Example:

var x = 10;
var name = "Hanady";

Scope of Variables Declared with var

A variable declared with var can be accessed from anywhere within its function scope.
If you declare a var variable inside a function, it won’t be accessible outside that function.
However, if you declare it outside any function, it becomes globally scoped and can be accessed from any part of your code.

Example:

function exampleVar() {
    var message = "Hello, World!";
    console.log(message); // Outputs: Hello, World!
}

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

2- let

Characteristics and Usage

Introduced in ECMAScript 6 (ES6), let is a modern way to declare variables.
Unlike var, let is block-scoped, meaning it is only accessible within the block (i.e., within curly braces {}) in which it is declared.
This makes let more predictable and less prone to errors compared to var.

Scope of Variables Declared with let

A variable declared with let is confined to the block where it is declared.
If you declare a let variable inside a loop, for example, it will only be accessible within that loop.

Example:

function exampleLet() {
    let message = "Hello, World!";
    if (true) {
        let blockMessage = "Hello, Block!";
        console.log(blockMessage); // Outputs: Hello, Block!
    }
    console.log(message); // Outputs: Hello, World!
    console.log(blockMessage); // Error: blockMessage is not defined
}

exampleLet();

3- const

Characteristics and Usage

Also introduced in ES6, const is used to declare variables that should not be reassigned.
Once you assign a value to a const variable, you cannot change it.
However, this does not mean that the value itself is immutable—if the const holds an object or an array, the contents of that object or array can still be modified.

Scope of Variables Declared with const

Like let, const is block-scoped, meaning it is only accessible within the block it was declared in.

Example:

function exampleConst() {
    const message = "Hello, World!";
    console.log(message); // Outputs: Hello, World!

    // Uncommenting the next line will cause an error
    // message = "Hello, Universe!"; // Error: Assignment to constant variable.
}

exampleConst();

Declaring Variables

Syntax for Declaring Variables

To declare a variable in JavaScript, you use one of the keywords var, let, or const, followed by the variable name and an optional assignment of a value.

Example:

var name = "Hanady";
let age = 33;
const isEngineer = true;

Importance of Using Descriptive Names

When naming variables, it’s important to use descriptive names that clearly indicate what the variable represents.
This makes your code easier to read and understand.

Example:

Instead of naming a variable x, name it userName if it stores a user’s name.

let userName = "Hanady"; // Descriptive name

Variable Naming Conventions

Rules for Naming Variables

  • Start with a letter, underscore (_), or dollar sign ($): Variable names cannot start with a number.
  • Case-sensitive: userName and username would be considered different variables.
  • No spaces or special characters: You can’t use spaces or most special characters in variable names.

Best Practices for Readability

  • CamelCase: Use camelCase for variable names, starting with a lowercase letter. Example: userName, totalAmount.
  • Descriptive names: Choose names that clearly indicate the purpose of the variable. Example: totalPrice, isLoggedIn.

Data Types Associated with Variables

Variables in JavaScript can store different types of data. These are broadly categorized into primitive types and reference types.

Primitive Types

1. String:

A sequence of characters used to represent text. Example:

let name = "Hanady";

2. Number:

Represents both integer and floating-point numbers. Example:

let age = 33;

3. Boolean:

Represents a logical value, either true or false. Example:

let isEngineer = true;

4. Null:

Represents the intentional absence of any object value. Example:

let data = null;

5. Undefined:

Indicates that a variable has been declared but not yet assigned a value. Example:

let result;

6. Symbol:

A unique and immutable value is often used for object property keys. Example:

let symbol = Symbol('description');

Reference Types

1. Object:

A collection of key-value pairs. Example:

let user = { name: "Hanady", age: 33 };

2. Array:

An ordered list of values. Example:

let numbers = [1, 2, 3, 4, 5];

3. Function:

A reusable block of code that can be executed. Example:

function greet() {
    console.log("Hello, World!");
}

Variable Scope

Explanation of Scope

Scope determines where in your code a variable can be accessed. In JavaScript, variables can have either global or local scope.

Global vs Local Scope

  • Global Scope: Variables declared outside of any function or block have global scope and can be accessed from anywhere in your code.
  • Local Scope: Variables declared inside a function or block have local scope and can only be accessed within that function or block.

Hoisting Concept

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase.
However, only the declarations are hoisted, not the initialization.

Example:

console.log(name); // Outputs: undefined
var name = "Hanady";

In the example above, the declaration of name is hoisted, but its initialization (name = "Alice") is not.

Reassigning Variables

How to Reassign Values?

Variables declared with var or let can be reassigned to new values.

Example:

let name = "Hanady";
name = "Hind"; // Reassignment is allowed with let

Differences Between var, let, and const in Reassignment

  • var: Allows reassignment and redeclaration within the same scope.
  • let: Allows reassignment but not redeclaration within the same scope.
  • const: Neither reassignment nor redeclaration is allowed.

Example:

var x = 10;
var x = 20; // Allowed with var

let y = 10;
// let y = 20; // Error: y has already been declared

const z = 10;
// z = 20; // Error: Assignment to constant variable.

Common Errors with JavaScript Variables

Common Mistakes Beginners Make

  • Using undeclared variables: Forgetting to declare a variable before using it.
  • Incorrect scope usage: Accessing a variable outside its scope.
  • Reassigning const variables: Trying to reassign a value to a const variable.

Tips for Troubleshooting

  • Use strict mode: Start your scripts with “use strict“; to catch common mistakes.
  • Check the scope: Ensure variables are declared in the correct scope.
  • Understand hoisting: Be aware of how hoisting affects your code.

Conclusion of JavaScript Variables

Variables are a fundamental concept in JavaScript that every beginner must master.
Understanding how to declare, assign, and scope variables will give you a solid foundation to build upon as you continue learning.
Remember to use descriptive names, follow naming conventions, and pay attention to the specific behaviors of var, let, and const.
With practice, working with variables will become second nature, and you’ll be well on your way to becoming proficient in JavaScript.

If you are new to JavaScript, we recommend that you visit this post (“JavaScript Fundamentals: Building Blocks for Web Interactivity“) to learn the basics of the JavaScript language.

If you have any questions about JavaScript variables, all you have to do is contact us from here.
We hope that this article will be useful to you, and we are happy to share with you the latest technicals and learn together the most famous programming languages.

Additional Resources

Related Posts:

Related Posts