Tutorials Tonight
Follow Us

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 article, you will learn how Javascript object get value by key.

Javascript object get value by key

    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

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

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).

Example

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

// access value of object
// 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. 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).

Example

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

// access value of object
// using square bracket
console.log(person["name"]); // John
console.log(person["age"]); // 30
console.log(person["city"]); // New York

Javascript object get 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 value now using the variable it gives you undefined.

Here is an example to show this.

Example

const person = {
  name: "John",
  age: 30,
  city: "New York"
};
// key stored in a variable
var userName = "name";

// trying to access 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.

Example

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 function and you have to use an argument to access the value.

Example

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

Javascript object get value by key string

Similar to the previous example, when you just have the key as a string, you can access the value of the key.

The same as the previous example, you can't use dot notation to access the value of the key. You have to use square bracket notation.

Example

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

Javascript object get 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.

Example

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

// 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.


JavaScript 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.

Example

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 Javascript 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.