The Ultimate Guide to Variables in JavaScript: Syntax, Naming, and Reassignment | A Beginner’s Guide to let, const, and var

Variables in JavaScript are like containers that hold data. Think of them as labeled boxes where you can store information, such as names, ages, or even lists of items. In this guide, we'll go over how to create and use variables, as well as a few rules and tips to keep in mind.

Declaring a Variable

In JavaScript, we create variables using one of three keywords:

• var
• let
• const

These keywords tell JavaScript how we intend to use the variable. Although var was the original way to declare variables, it’s mostly replaced by let and const in modern JavaScript because they work better in most cases.

Why Use let and const?

In JavaScript, let and const were introduced to solve issues with var, especially around something called "scoping." Don’t worry too much about "scope" right now—just know that it has to do with where variables can be used in your code. Generally, you’ll see let and const in most modern JavaScript code, so we'll focus on those.

Creating a Variable

To create a variable, you use one of the keywords (let or const) followed by the variable’s name. Here’s an example of how to create a variable to store a person’s name and city:

let personName = 'Alice';
let city = 'Wonderland';

// We can print these values to the console
console.log(personName, city);

You can also store numbers or other data types in variables:

let score = 42;

console.log(score);

Naming Variables

When naming variables, there are some rules to follow:

• Variable names can only contain letters, numbers, underscores _, and dollar signs $.
• Variable names cannot start with a number.

Multi-Word Variable Names

In JavaScript, you’ll often see multi-word variable names written in a style called camelCase. This means that the first word is lowercase, and every word after that starts with an uppercase letter.

let favoriteBook = 'Harry Potter';
let birthYear = 1995;

Other styles you might see include:

• Snake case: let favorite_book = 'Harry Potter';
• Pascal case: let FavoriteBook = 'Harry Potter'; (usually used for class names)

Using consistent naming conventions helps make your code easier to read.

Reassigning Variables

You can change the value of a variable created with let. For example:

let gameLevel = 1;
gameLevel = 2; // The value of gameLevel is now 2

However, if you use const to declare a variable, it stands for "constant," meaning the value can’t be changed once it’s set.

const maxScore = 100;
maxScore = 200; // This will cause an error because maxScore was declared with const

Working with const

When you declare a variable with const, you have to give it a value right away, and you can’t change that value later.

const birthYear = 2000;
// birthYear = 2001; // This would cause an error

const with Objects and Arrays

There’s one exception with const: while you can’t reassign a constant, you can still change the contents of objects and arrays created with const. For example:

const colors = ['red', 'green', 'blue'];

// You can't reassign the array
// colors = ['yellow', 'purple']; // This would cause an error

// But you can change the contents
colors.push('yellow'); // colors is now ['red', 'green', 'blue', 'yellow']
colors[0] = 'orange'; // colors is now ['orange', 'green', 'blue', 'yellow']

Similarly, with objects:

const car = {
  make: 'Toyota',
  model: 'Camry'
};

// You can't reassign the object
// car = { make: 'Honda', model: 'Civic' }; // This would cause an error

// But you can change properties
car.make = 'Honda';
car.year = 2021;

Declaring Multiple Variables at Once

You can declare multiple variables in one line, separating each declaration with a comma.

let width = 100, height = 200, depth = 50;
const maxSpeed = 120, minSpeed = 0;

Using let or const this way can save space, but it can also make your code harder to read if you declare too many variables at once.

Choosing Between let and const

When should you use let and when should you use const? Here’s a simple rule:

• Use const if you don’t plan to change the variable’s value.
• Use let if the value needs to be updated later.

For example, if you’re keeping track of a player’s score in a game, use let because the score will change:

let playerScore = 0;
playerScore = playerScore + 10; // Update score as the game progresses

But if you’re setting a value that won’t change, like the number of players, use const:

const totalPlayers = 4;

Some developers prefer to always use const unless they know they’ll need to reassign a value, which can help avoid accidental changes to important variables.

---

Final Thoughts

By following these guidelines, you can keep your code organized, readable, and error-free. Variables are one of the foundational parts of programming, so getting comfortable with let, const, and variable naming conventions will make coding much easier as you progress. Happy coding!

Previous Article:

Mastering Comments in Programming: Types and Best Practices for Writing Comments (For Professional Developers)

Next Article:

JavaScript Data Types Deep Dive: Learn Primitives and References Data Types in JS | Data Types in Js

Ashraf JavaScript Tutorial