Start learning free

LESSON 11 OF 348 · VARIABLES

Variable Naming Rules in TypeScript: camelCase and Valid Names

Lesson Read the full explanation

TL ; DR:

  • In TypeScript, 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 TypeScript 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);

TypeScript 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

    TYPESCRIPT · VARIABLES

    Variable Naming Rules in TypeScript, explained

    What a valid name looks like

    A variable name is chosen by you, but the language sets rules for it. A name in TypeScript:

    • may contain letters, digits, underscores (_) and dollar signs ($);
    • must not start with a digit;
    • cannot contain spaces, dots or hyphens;
    • cannot be a reserved word such as class.

    These names are all valid:

    let _count = 1, $price = 2, total2 = 4;

    Names that break the rules do not compile. All of these are rejected with syntax errors:

    let 18spam = 1;
let first name = "Kate";
let first-name = 1;
let class = 1;

    The first starts with a digit. The second has a space, so the compiler sees first followed by an unexpected word and reports ',' expected. In the third, the hyphen is read as a minus sign, which also fails. The fourth uses a reserved word. These are syntax errors: the code is not valid TypeScript, and the compiler reports them.

    Reserved words and other letters

    Reserved words are the words the language already uses for its own syntax, such as let, const, function, return, if and class. You cannot reuse them as variable names. The rules also allow letters outside English, so café is a valid name. In practice, stick to plain English letters so everyone can type your names.

    Case sensitivity

    Upper and lower case letters are different characters, so userName, UserName and USERNAME are three separate variables:

    let userName = "Kate";
let UserName = "Andy";
let USERNAME = "George";
console.log(userName, UserName, USERNAME);

    Kate Andy George

    This is legal and a bad idea. Names that differ only in case are easy to mix up. If you write username in all lower case, the compiler reports Cannot find name 'username'. Did you mean 'userName'? because no variable has that spelling.

    Joining several words: camelCase

    Names often need more than one word, and without spaces you need another way to show where one word ends. TypeScript code almost always uses camelCase. The first word is lower case, and every following word starts with a capital letter:

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

    Another style is snake_case, with underscores between lower-case words, such as first_name. It is valid, and common in other languages, but TypeScript code conventionally uses camelCase for variables and functions. The more important rule is to be consistent. A program that mixes first_name and lastName runs fine and reads badly.

    Constants that never change are sometimes written in capitals with underscores, such as MAX_SIZE. That is a separate convention you will meet later.

    Names should describe the value

    The compiler accepts any valid name, but the next person to read the code is a human. Compare these two programs:

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

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

    Both print 325. Only the second tells you what the number means. Boolean variables read best when they sound like a yes-or-no question, which is why names beginning with is or has, such as isEmployed or hasKey, are common.

    The lesson's exercise

    Declare three variables, each with a camelCase name and a type annotation:

    1. firstName, a string holding "John". The second word starts with a capital N.
    2. isEmployed, a boolean holding true. The is prefix makes the name read like a question that the value answers.
    3. yearsOfExperience, a number holding 5. Every word after the first is capitalized.
    let firstName: string = "John";
let isEmployed: boolean = true;
let yearsOfExperience: number = 5;

    The annotations are optional here, because TypeScript can infer each type from the value. Writing them states what you intend.

    Common mistakes

    • Starting with a digit. 2ndPlace is invalid. Write secondPlace or place2.
    • Inconsistent capitals. firstname and firstName are different variables.
    • Single-letter names for important values. Reserve them for tiny, obvious cases such as a loop counter.

    Key takeaways

    • Names use letters, digits, _ and $, and never start with a digit.
    • Names are case sensitive.
    • Use camelCase for multi-word variables and stay consistent.
    • Choose names that describe the value, and start boolean names with is or has.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free