JavaScript Object Get Value By Key

You as a JavaScript developer are always looking for a way to get the value of a key from an object. This is a very common task in JavaScript.

In this tutorial, you will learn how to extract the value of the key from the object in JavaScript.

Table Of Contents

1. Javascript object keys
2. Getting object value
   1. Using dot notation
   2. Using Square bracket
3. Get value when the key is variable
4. Get value when the key is a string
5. Get value by key in the array
6. Nested object property with variable
7. Conclusion

1. Javascript object keys

The key of an object is the name of the property.

You can think of the key as the named index of an associative array. JavaScript does not have an associative array. Instead, JavaScript objects are used to store key-value pairs.

In general, the key of the object is known, and using the key you can access the value of the object.

There are 2 ways to access the value of the object.

1. Using dot notation
2. Using square bracket

2.1. Using dot notation

The dot notation is the most commonly used way to access the value of the object.

To use this write the name of the object followed by a dot and then the name of the key. Example person.name (where the person is an object and name is the key).

var person = {
  name: "John",
  age: 30,
  city: "New York"
};

// object get value by key
// 👉 using dot notation
console.log(person.name); // John
console.log(person.age); // 30
console.log(person.city); // New York

The above code will print the value of the key name in the console.

2.2. Using square bracket

The square bracket is another way to access the value of the object.

To use this write the name of the object followed by a square bracket and then the name of the key. Example person["name"] (where the person is an object and name is the key).

var person = {
  name: "John",
  age: 30,
  city: "New York"
};

// object get value by key
// 👉 using square bracket
console.log(person["name"]); // John
console.log(person["age"]); // 30
console.log(person["city"]); // New York

2. Get Object value by key variable

Sometimes you have the key of an object stored in a variable and you want to access the value of the key. This is a very common scenario.

When you try to access the object value using dot notation it gives you undefined.

Here is an example to show this.

const person = { name: "John" };
// key stored in a variable
var userName = "name";

// 👉 accessing value using dot notation
console.log(person.userName); // undefined

The above code will print undefined in the console because Javascript treats userName as a key and not a variable. Since the variable is not a key of the object, it will give you undefined.

So to access the value of the object when you have the key stored in a variable use the square bracket notation.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// key stored in a variable
var userName = "name";

// 👉 using square bracket
console.log(person[userName]); // John

Note: Always use the square bracket notation when you have the key stored in a variable.

Here is another example where the key is passed in a Javascript function and you have to use an argument to access the value.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// using square bracket to access value
// 👉 stored in a variable (argument)
function getValue(key) {
  return person[key];
}

console.log(getValue("name")); // John

3. JS object get value by key string

Similar to the previous example, you can't use dot notation to access the value of the key if the key is a string. You have to use square bracket notation.

For example to get the value of the key name you can use person["name"].

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// key as a string
// 👉 using square bracket
console.log(person["name"]); // John
console.log(person["age"]); // 30
console.log(person["city"]); // New York

4. Get Object Value by Key in Array

As we know, the Object.keys() return an array of all the keys of the object.

So you have an array of keys and you want to access the value of the key. This is the same scenario as iterating object keys in an array.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// js object get value by key in array
// 👉 get all keys of the object
const keys = Object.keys(person);

// getting value of the keys in array
for (let i = 0; i < keys.length; i++) {
  console.log(person[keys[i]]);
}

In the above example, we are iterating over the keys of the object and storing keys in an array. Then we are accessing the value of the key using square bracket notation.

5. Access nested object property with variable

When you have a nested object, then start chaining the keys either using dot or square bracket notation. But since you have the key stored in a variable, you have to use the square bracket notation.

Let your object be like this:

const person = {
  name: "John",
  age: 30,
  hobbies: {
    music: "guitar",
    sport: "football"
  },
  education: {
    highSchool: "St. John's High School",
    marks: [{ maths: "A+" }, { science: "B+" }]
  },
  city: "New York"
}

Now you want to access the marks of the first subject. Simply start the chain with the square bracket notation. Example person["education"]["marks"][0]["maths"] will give you A+.

Here is an example to show this.

const person = {
  name: "John",
  age: 30,
  hobbies: {
    music: "guitar",
    sport: "football"
  },
  education: {
    highSchool: "St. John's High School",
    marks: [{ maths: "A+" }, { science: "B+" }]
  },
  city: "New York"
}

let edu = "education", mrk = "marks", m = "maths";
// 👉 accessing marks of first subject
console.log(person[edu][mrk][0][m]); // A+

Conclusion

In this short article, we understand how JS object get value by key. You can use dot notation or square bracket notation to access the value of the key. But if you have the key stored in a variable, you have to use the square bracket notation.

For nested objects, properties start the chain and use any of the two notation if it fits the discussed concept.

Happy coding! 🚀✨