JavaScript Built-In Object Methods (keys(), values(), entries(),etc)

In addition to defining our own custom object methods (like we did in our previous lesson), JavaScript has some built-in object methods that we can use on almost any objects like: Object.keys(), Object.values(), Object.entries(), hasOwnProperty(), Object.assign(), etc.

There are numerous built-in methods, but here we are going to explain some of the most used ones. They are as follows:

If you are new Object Methods, learn about it on our 👉 JavaScript Object Methods lesson.


JavaScript Object.keys() method 🔑

The Object.keys() method returns an array containing all the keys that the object has.

Syntax

Object.keys(obj)

Parameters

  • obj: The object whose keys we are returning as an array.

Returns

  • An array containing all the keys of the specified object.

Example

const friend = {
  name: "Monica",
  age: 26,
  livesIn: "New York, USA",
};

// Returns an array containing the keys: "name", "age" and "livesIn", of the object "friend".
console.log(Object.keys(friend));

Output

[ 'name', 'age', 'livesIn' ]

JavaScript Object.values() method 🎁

The Object.values() method returns an array containing all the values of the corresponding keys that the object has.

Syntax

Object.values(obj)

Parameters

  • obj: The object whose values we are returning as an array.

Returns

  • An array containing all the values of the corresponding keys in the specified object.

Example

const friend = {
  name: "Monica",
  age: 26,
  livesIn: "New York, USA",
};

// Returns an array containing the values: "Monica", "26" and "New York, USA", of the object "friend".
console.log(Object.values(friend));

Output

[ 'Monica', 26, 'New York, USA' ]

JavaScript Object.entries() method ⚛

The Object.entries() method returns an array containing all the key: value pairs of an object where each element is in the format [key, value].

Here, each element of the object is itself an array in the format [key, value].

Syntax

Object.entries(obj)

Parameters

  • obj: The object whose key: value pairs we are returning as an array.

Returns

  • An array containing all the key: value pairs of the object where each element is an array in the format [key, value].

Example

const friend = {
  name: "Monica",
  age: 26,
  livesIn: "New York, USA",
};

// Returns an array containing the key-value pairs: [ 'name', 'Monica' ], [ 'age', 26 ], [ 'livesIn', 'New York, USA' ], of the object "friend".
console.log(Object.entries(friend));

Output

[ [ 'name', 'Monica' ], [ 'age', 26 ], [ 'livesIn', 'New York, USA' ] ]

The JavaScript hasOwnProperty() method 👍

The hasOwnProperty() in JavaScript is used to check whether an object has a certain property or not. It returns either true or false depending upon whether the given property exists on the object or not.

Syntax

obj.hasOwnProperty(property)

Parameter

  • property: The name of the property we are trying to search.

Note: The property name is case-sensitive. Meaning, even the casing of the letters will be checked.

Returns

  • true: when the given property exists on the object
  • false: when the given property does not exist on the object

Example

const friend = {
  name: "Monica",
  age: 26,
  livesIn: "New York, USA",
};

// Returns "false". As, property names are case-senstive, so even the casing of the letters will be checked.
console.log(friend.hasOwnProperty("Name"));
// Returns "true"
console.log(friend.hasOwnProperty("name"));
// Returns "true"
console.log(friend.hasOwnProperty("age"));
// Returns "false"
console.log(friend.hasOwnProperty("lastName"));

Output

false
true
true
false

JavaScript Object.assign() method 🤯

The Object.assign() method copies properties from the source object to the target object.

Note: While copying properties, if the target object has the same key as that of the source object, then the value of that key in the target object gets replaced or overwritten by the value of that same key in the source object.

Syntax

Object.assign(target, ...sources)

Parameters

  • target: The target object where the properties of the source is to be copied to.
  • sources: There can be one or more sources whose properties we are copying and sending to the target object.

Returns

  • The target object after receiving the properties of the source objects.

Note: The Object.assign() method also changes the target object.

Example 1 (Making copies of an object) 😏

const fruit1 = {
  name: "Apple",
  color: "Red",
};

// We copied all the properties from "fruit1" into an empty object "{}", returned the new object containing all those properties and storing them in "fruit2".
const fruit2 = Object.assign({}, fruit1);

console.log(fruit1);
console.log(fruit2);

Output

{ name: 'Apple', color: 'Red' }
{ name: 'Apple', color: 'Red' }

Example 2 (Merging two objects) 🤝

const obj1 = {
  a: "1",
  b: "2",
};

const obj2 = {
  c: "3",
  d: "4",
};

const mergedObj = Object.assign(obj1, obj2);
console.log(mergedObj);
// Here, mergedObj and obj1 will be identical because, "Object.assign()" not only returns a merged object but also changes the "target" object.
console.log(obj1);

Output

{ a: '1', b: '2', c: '3', d: '4' }
{ a: '1', b: '2', c: '3', d: '4' }

Example 3 (Merging and replacing similar properties) 😲

const fruit1 = {
  name: "Apple",
  color: "Red",
};

const fruit2 = {
  name: "Orange",
  contains: "Vitamin C",
  shape: "round",
  otherName: "Tangerine",
};

// Here, "fruit2" and "fruit1" have the same key called "name".
// So, the value from source object "fruit1" which is "Apple", replaces the value from target object "fruit2" which is "Orange".
const fruit3 = Object.assign(fruit2, fruit1);

console.log(fruit2);
// As "Object.assign()" changes the target object but also returns a new object having all the properties of the modified target object, "fruit2" and "fruit3" will be exactly the same.
console.log(fruit3);

Output

{
  name: 'Apple',
  contains: 'Vitamin C',
  shape: 'round',
  otherName: 'Tangerine',
  color: 'Red'
}
{
  name: 'Apple',
  contains: 'Vitamin C',
  shape: 'round',
  otherName: 'Tangerine',
  color: 'Red'
}

Example 4 (More than one source objects) 😎

const targetObj = {
  a: 1,
  b: 2,
};

const sourceObjects = [
  { c: 3, d: 4 },
  { a: 100, d: 400 },
];

// We can also have more than one source objects.
// Here, sourceObjects[0] returns "{ c: 3, d: 4 }" and sourceObjects[1] returns "{ a: 100, d: 400 }".
// As, the properties "a" and "d" are repeated, the latest or most recent value is put in the "newObj".
const newObj = Object.assign(targetObj, sourceObjects[0], sourceObjects[1]);

console.log(newObj);

Output

{ a: 100, b: 2, c: 3, d: 400 }

In this way, built-in object methods in JavaScript like: Object.keys(), Object.values(), Object.entries(), etc. help us in simplifying much of the object related tasks.