How to use object manipulation in JavaScript

An object is a collection of properties. Properties are identified using key values. They’re the same as variables except they’re assigned to an object. Methods are functions assigned to the object.

JavaScript provides a range of built-in methods that can be accessed on the global object constructor. This article examines the following:

• Object constructors

• Object literals

• Accessing object properties

• Object methods

• this Keyword

• Merging objects

• Object.assign

Object constructors

Constructor functions are one way of creating objects in JavaScript. Using a constructor for an object creates a ‘blueprint’. This allows for many instances of the same object to be created using a keyword.

Property values are passed to the constructor using arguments.

Object literals

ECMAScript 2015, also known as ES6 provides shorthand for Object Literal notation when assigning variables to an object’s properties.

Accessing object properties

The examples below covers the following:

• Dot notation

• Bracket notation

Dot notation

Dot notation is used most often, as it’s the easiest to read. The syntax is: objectName.propertyName.

Bracket notation

Bracket notation allows for the use of variables that resolve a string. The syntax for bracket notation is: objectName[`propertyName’].

Object methods

Methods are actions performed on Objects. An Object Method is an object Property that contains a function definition. Below are examples of the following Object Methods:

• Object.values()

• Object.keys()

• Object.freeze()

• Object.seal()

Object.values()

Object.values() is a method that returns an array of an object's own property values.

Object.keys()

Object.keys() is a method that returns an array of an object's own property names.

Object.freeze()

The method Object.freeze freezes an object.

A frozen object can’t be changed. It prevents properties from being added and removed. It also prevents the values of properties from being changed - unless it’s an object.

You can check if an object is frozen by using: Object.isFrozen().

Object.seal()

Object.seal is a similar method to Object.freeze(). It prevents you from adding or deleting properties of an object, but you can change the value of an existing property.

Similarly, you can check if an object has been sealed by using Object.isSealed()

this Keyword

By default the ‘this’ keyword in JavaScript references an object executing the current function. It refers to a global object - the window object in the browser.

If the function is a method in an object, it refers to the object.

Merging objects

ES6 introduced the spread operator which allows objects to be easily merged. The Spread Syntax method combines the source objects in one new object.

Object.assign()

The Object.assign method copies the properties of source objects to a target object. This differs slightly from using the spread syntax as it amends an existing object.

The syntax is: Object.assign(target, …sources).

Test your skills

Working with Codehouse

Our talented development team are constantly looking at ways to improve the development process and the user experience. We work on exciting design and build projects often on platforms like Sitecore. Get in touch to find out more