Intermediate JavaScript

Keys and Values

JavaScript and NodeJS Fundamentals

Keys and Values

Dynamic Access
Dynamic Assignment
Symbol Type

Every property in a JavaScript object has a key (also called a property name) and a value.

For example:

const user = {
  name: "Alice",
  age: 30
}

In this object, "name" and "age" are the keys, and "Alice" and 30 are their values.

Dynamic Access

Sometimes, you don’t know the name of a property in advance...maybe you’re getting it from user input, or reading it from a variable. You can still access it using bracket notation, like myObject["keyName"].

const user = {
  name: "Alice",
  age: 30
}

console.log(user["name"]) // Alice

We passed the string name to the object in order to get the corresponding value.

We can save a key to a variable and use it to access the corresponding value later, like

const user = {
  name: "Alice",
  age: 30
}

const key = "name"

console.log(user[key]) // Alice

Dynamic Assignment

You can also create or update object properties using variables as keys.

const settings = {}

const key = "theme"
settings[key] = "dark"

console.log(settings) // { theme: "dark" }

This is helpful when you want to build an object step by step. For example:

const user = {}

user["username"] = "bananaFan123"
user["email"] = "[email protected]"

console.log(user)
// { username: "bananaFan123", email: "[email protected]" }

You can even use a dynamic key while creating the object using square brackets:

const key = "language"
const config = {
  [key]: "JavaScript"
}

console.log(config.language) // JavaScript

This is called a computed property. The value inside the square brackets is evaluated, and the result is used as the key.

Symbol Type

In addition to strings, JavaScript also lets you use a special type called Symbol as an object key.

Let’s start with a simple example:

const id = Symbol("userID")

const user = {
  name: "Bob",
  [id]: 12345
}

console.log(user[id]) // 12345

In this example, id is a Symbol. It’s not a string, but it still works as a key. If you try to log user to the console, you will see this:

console.log(user) // { name: 'Bob', [Symbol(userID)]: 12345 }

Another important thing: every symbol you create is unique, even if they are created using the same string.

const a = Symbol("label")
const b = Symbol("label")

console.log(a === b) // false

Symbols allow you to define keys that will not clash with regular keys. For example, let's say you have an object with a name property, but the object will be customizable by a user in the future, in ways you cannot predict, and that user might add a name property as well. If the original name property was defined with a string, it would be overwritten by the new one, like this:

const obj = {
  name: "John"
}

obj.name = "Jimmy"

console.log(obj) // { name: 'Jimmy' }

If we use a Symbol instead:

const name = Symbol("name")

const obj = {
  [name]: "John"
}

obj.name = "Jimmy"

console.log(obj) // { name: 'Jimmy', [Symbol(name)]: 'John' }

As you can see, the original name property is somehow preserved this way. This can be useful in certain edge cases.