Start learning free

LESSON 11 OF 410 · VARIABLES

Variable Naming Rules in JavaScript

Lesson Read the full explanation

TL ; DR:

  • In JavaScript, we use the camelCase convention to name our variables. It implies separating different words with capital letters, like this:

    let companyName = "Apple";

let foundingYear = 1976;

let isUnicorn = true;

let numberOfEmployees = 137000;


Full lesson:

Variable names must consist ONLY of letters, numbers and underscores and they must start with a letter or underscore.

Bad variable names:

let 18spam;
let x.15;

If you try to create a variable with any of these names, JavaScript will throw a SyntaxError.

Naming conventions: camelCase and snake_case

Sometimes a variable name might consist of multiple words, for example if you want to store the first name of a person. You might be tempted to separate those names by whitespaces, like this:

let first name = "Kate";

This code will also throw a SyntaxError.

When you name your variables, you want to use one of these two conventions:

snake_case = separate different words with an underscore (_), like this:

let first_name = "Jane";
let last_name = "Doe";

camelCase = separate different words with capital letters, like this:

let firstName = "Jane";
let lastName = "Doe";

It's important to be consistent with the casing technique you use. Do not combine both of them in the same code, like this:

let first_name = "Jane";
let lastName = "Doe";

Case sensitive:

Variable names are case sensitive:

let name = "Kate";
let Name = "Andy";
let NAME = "George";

console.log(name, Name, NAME); // Output: Kate Andy George

Although JavaScript allow us to do this, it's always confusing and a bad coding practice to differentiate variable names just by case!

Mnemonic Variable Names:

Since we programmers are given a choice in how we choose our variable names, there is a bit of "best practice".

Sometimes we want them short like x and y, but sometimes we want them descriptive, especially if they are important.

Here is a great example:

let a = 25;
let b = 13;
let c = a * b;
console.log(c);

compared to:

let hours = 25;
let rate = 13;
let pay = hours * rate;
console.log(pay);

JavaScript understands and is happy with both of these pieces of code. But it's clearly which version makes your reader happier.

Assignment
Follow the Coding Tutorial and let's name some variables well!

Hint
Look at the examples above if you get stuck.

STEP 1 OF 3
    Ctrl + Enter to check

    JAVASCRIPT · VARIABLES

    Variable Naming Rules in JavaScript, explained

    Introduction

    In this lesson, we will explore the rules and best practices for naming variables in JavaScript. Proper variable naming is crucial for writing clear, maintainable, and error-free code. Understanding these rules will help you avoid common pitfalls and improve your coding efficiency.

    Understanding the Basics

    Variable names in JavaScript must adhere to specific rules:

    • They can only contain letters, numbers, and underscores.
    • They must start with a letter or an underscore.
    • They are case-sensitive.

    For example, let companyName = "Apple"; is a valid variable name, while let 18spam; is not.

    Main Concepts

    There are two main naming conventions in JavaScript:

    • camelCase: Words are concatenated without spaces, and each word after the first starts with a capital letter. Example: let firstName = "Jane";
    • snake_case: Words are separated by underscores. Example: let first_name = "Jane";

    Consistency is key. Do not mix these conventions within the same codebase.

    Examples and Use Cases

    Consider the following examples:

    let firstName = "Jane";
let lastName = "Doe";

    These variables use camelCase, which is common in JavaScript. In contrast, snake_case might be used in other languages like Python.

    Common Pitfalls and Best Practices

    Avoid the following common mistakes:

    • Starting variable names with numbers.
    • Using spaces or special characters in variable names.
    • Mixing different naming conventions.

    Best practices include:

    • Using descriptive names for important variables.
    • Keeping names short for less significant variables.
    • Maintaining consistency in naming conventions.

    Advanced Techniques

    As you become more experienced, you might encounter advanced naming techniques such as:

    • Using prefixes to indicate variable types (e.g., strName for strings).
    • Adopting naming conventions specific to frameworks or libraries.

    These techniques can help improve code readability and maintainability in larger projects.

    Code Implementation

    // Example of camelCase
let companyName = "Apple";
let foundingYear = 1976;
let isUnicorn = true;
let numberOfEmployees = 137000;

// Example of snake_case
let first_name = "Jane";
let last_name = "Doe";

// Avoid mixing conventions
let first_name = "Jane";
let lastName = "Doe"; // Not recommended

// Case sensitivity
let name = "Kate";
let Name = "Andy";
let NAME = "George";
console.log(name, Name, NAME); // Output: Kate Andy George

// Mnemonic variable names
let hours = 25;
let rate = 13;
let pay = hours * rate;
console.log(pay); // Output: 325

    Debugging and Testing

    When debugging variable names, ensure they are spelled correctly and follow the naming conventions. Use descriptive names to make debugging easier. Writing tests for your functions can help catch errors related to variable naming.

    // Example test case
function calculatePay(hours, rate) {
    return hours * rate;
}

console.assert(calculatePay(25, 13) === 325, "Test case failed");

    Thinking and Problem-Solving Tips

    When naming variables, consider the following strategies:

    • Break down complex problems into smaller parts and name variables accordingly.
    • Use meaningful names that convey the purpose of the variable.
    • Practice by writing code and reviewing examples from experienced developers.

    Conclusion

    Mastering variable naming rules in JavaScript is essential for writing clear and maintainable code. By following best practices and avoiding common pitfalls, you can improve your coding efficiency and reduce errors. Keep practicing and exploring further applications to enhance your skills.

    Additional Resources

    Keep going with JavaScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free