JavaScript Object Methods

Intermediate ~15 min read

Iterating Over Objects

JavaScript provides static methods to iterate over keys, values, or entries of an object.

Object.keys(obj): Returns array of keys
Object.values(obj): Returns array of values
Object.entries(obj): Returns array of [key, value] pairs

HTML

CSS

<h2>Iteration Demo</h2>
<p id='iterOutput'></p>

Cloning and Merging

Object.assign() copies all enumerable own properties from one or more source objects to a target object.

Note: In modern JavaScript, the spread operator ... is often used for this purpose too.

HTML

CSS

<h2>Merge Demo</h2>
<p id='mergeOutput'></p>

Preventing Modifications

Object.freeze() freezes an object. A frozen object can no longer be changed (new properties cannot be added, existing properties cannot be removed or changed).

HTML

CSS

<h2>Freeze Demo</h2>
<p id='freezeOutput'></p>

Summary

Use Object.keys/values/entries to iterate over object data.
Use Object.assign or spread syntax {...obj} to merge or clone objects.
Use Object.freeze to make an object immutable.

Quick Quiz

Which method returns an array of a given object's own enumerable property names?

Object.values()

Object.entries()

Object.keys()

Object.names()

Previous Objects

Next Next Module: DOM Manipulation

Iterating Over Objects

Cloning and Merging

Preventing Modifications

Summary

Quick Quiz

Enjoying these tutorials?