Objects are an important building block of JavaScript. They allow Properties and Methods to be grouped together.

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.

   function Pokemon(name, type) {
    this.name = name;
    this.type = type;
};

const pikachu = new Pokemon('Pikachu', 'Electric');
const charmander = new Pokemon('Charmander', 'Fire');

Object literals

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

   // Standard method
const name = 'Squirtle';
const type = 'Water;

const pokemon = {
   name: name,
   type: type
}

// ES6 shorthand
const name = 'Squirtle';
const type = 'Water;

const pokemon = {
   name,
   type,
}
Enjoying this article? Sign up to our newsletter

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.

   var pokemon = {
  name: 'Bulbasaur',
  type: 'Grass',
  number: 1
};

var type = pokemon.type;

Bracket notation

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

   var pokemon = {
  name: 'Bulbasaur',
  type: 'Grass',
  number: 1
};

var type = pokemon['type'];

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.

   var pokemon = {
    name: 'Rattata',
    type: 'Normal',
    number: 19
};

var keys = Object.values(pokemon);

Object.keys()

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

   var pokemon = {
    name: 'Rattata',
    type: 'Normal',
    number: 19
};

var keys = Object.keys(pokemon);

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

   var pokemon = {
    name: 'Articuno',
    type: 'Ice',
    number: 144
};

Object.freeze(pokemon);

consol.log(Object.isFrozen(pokemon));
true

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

   var pokemon = {
    name: 'Seal',
    type: 'Water',
    number: 86
};

Object.seal(pokemon);

consol.log(Object.isSealed(pokemon));
true

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.

   var pokemon = {
   name: 'Squirtle',
   type: 'Water',
   speak: function() {
     console.log(this);
   }
};

pokemon.speak();

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.

   var details = { name: 'Charmander', type: 'Fire', number: 19};
var evolution = { evolutionOne: 'Charmeleon', evolutionTwo: 'Charizard'};
var ability = { abilityOne: 'Blaze' };

var pokemon = {...details, ...evolution, ...ability};

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

   var details = { name: 'Charmander', type: 'Fire', number: 19};
var evolution = { evolutionOne: 'Charmeleon', evolutionTwo: 'Charizard'};
var ability = { abilityOne: 'Blaze' };

var pokemon = Object.assign(details, evolution, ability);

console.log(details);

Test your skills

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 CMS like Sitecore.