Start learning free

LESSON 102 OF 348 · DICTIONARIES

Accessing Dictionary Values in TypeScript: Brackets and Dot

Lesson Read the full explanation

In JavaScript, you can access values in an object using bracket notation or dot notation:

const scores = {"Alice": 95, "Bob": 87, "Charlie": 72};

let aliceScore = scores["Alice"];  // 95  (bracket notation)
let bobScore = scores.Bob;         // 87  (dot notation)

Bracket notation works for any key, including keys with spaces or special characters. Dot notation only works for simple keys.

if ("Alice" in scores) {
    console.log(scores["Alice"]);  // 95
}

// Returns undefined if key doesn't exist
console.log(scores["Diana"]);  // undefined

Assignment
Follow the Coding Tutorial and access Alice's score from scores!

Hint
Use scores["Alice"] and assign it to aliceScore.

STEP 1 OF 1
    Ctrl + Enter to check

    TYPESCRIPT · DICTIONARIES

    Accessing Dictionary Values in TypeScript, explained

    Reading a value by its key

    A dictionary maps keys to values, and you read a value by giving its key. In TypeScript, a dictionary is usually an object, and there are two ways to read from it: bracket notation and dot notation.

    const scores: { [key: string]: number } = {"Alice": 95, "Bob": 87, "Charlie": 72};

let aliceScore: number = scores["Alice"]; // 95   (bracket notation)
let bobScore: number = scores.Bob;        // 87   (dot notation)

    The type { [key: string]: number } says that the keys are strings and the values are numbers. Both reads give back a number, and each returns the value stored under that key.

    Brackets or dot

    Bracket notation takes any expression that evaluates to a string, so it works for every key. Dot notation takes a name written directly in the code, so it works only when the key is a valid identifier: letters, digits, _ and $, not starting with a digit.

    const info: { [key: string]: string } = {"first name": "Ada", "city": "London"};

console.log(info["first name"]); // Ada
console.log(info.city);          // London
// info.first name is a syntax error: the space ends the name

    Brackets are also the only choice when the key is stored in a variable. A dot always means the literal name that follows it:

    const scores: { [key: string]: number } = {"Alice": 95, "Bob": 87};

const student = "Bob";
console.log(scores[student]); // 87
console.log(scores.student);  // undefined: looks for a key named "student"

    Keys that are missing

    Reading a key that isn't in the object doesn't throw an error. It gives undefined:

    console.log(scores["Diana"]); // undefined

    The compiler still treats the result as a number, because the type only says what values the dictionary holds, not which keys exist. Arithmetic on the result gives NaN instead of failing, so a missing key is easy to miss. Keep two ways to check in mind:

    • The in operator asks whether the key exists: "Alice" in scores is true and "Diana" in scores is false.
    • Comparing with undefined works too: scores["Diana"] === undefined is true.
    if ("Alice" in scores) {
    console.log(scores["Alice"]); // 95
}

    There is one subtlety. The in operator also finds names that every object inherits, so "toString" in scores is true even though you never added that key. To ask only about keys you stored, use Object.hasOwn(scores, "toString"), which is false here. For ordinary names such as people's names the two checks agree.

    A default for missing keys

    Often you want a fallback value instead of undefined. The nullish coalescing operator ?? supplies one: a ?? b is b only when a is undefined or null.

    const scores: { [key: string]: number } = {"Alice": 95, "Bob": 87};

console.log(scores["Diana"] ?? 0); // 0
console.log(scores["Alice"] ?? 0); // 95

    Prefer ?? to || here. A stored score of 0 is a real value, and || would treat it as missing and replace it with the default, while ?? keeps it.

    To visit every entry, loop over the keys and read each value by its key:

    for (const name of Object.keys(scores)) {
    console.log(name, scores[name]);
}

    This prints Alice 95 and then Bob 87. The keys come out in the order they were added, for ordinary names like these. Inside the loop every key exists, so each read is safe, and the variable name holds a string, which is exactly what brackets expect.

    The lesson's exercise

    The starting code already declares the dictionary scores. The task is to read Alice's score into a new variable.

    1. Declare the variable below the dictionary. It holds a score, so give it the type number and the name aliceScore.
    2. Read the value with scores["Alice"] and assign it.
    const scores: { [key: string]: number } = {"Alice": 95, "Bob": 87, "Charlie": 72};

let aliceScore: number = scores["Alice"];

    After this line, aliceScore holds 95. It is a copy of the number, so changing aliceScore later doesn't change the dictionary.

    Gotchas

    • Case matters. scores["alice"] and scores["Alice"] are different keys, and the first one is undefined here.
    • The quotes in brackets matter. scores[Alice] without quotes looks for a variable named Alice, not the string.
    • Spelling errors don't crash. A mistyped key quietly gives undefined, so a surprising undefined or NaN is a hint to check the key.
    • Keys are strings. For an object, scores[1] and scores["1"] read the same entry.

    Key takeaways

    • Read a value with obj["key"], or with obj.key when the key is a simple name.
    • Only brackets accept keys with spaces or special characters, and keys held in variables.
    • A missing key reads as undefined, not as an error.
    • Use "key" in obj to test whether a key is present.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free