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,
}


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.
  let pokemon = {
  name: 'Bulbasaur',
  type: 'Grass',
  number: 1
};

let 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'].

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

let 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.
    let pokemon = {
    name: 'Rattata',
    type: 'Normal',
    number: 19
};

let keys = Object.values(pokemon);


Object.keys()

Object.keys() is a method that returns an array of an object's own property names.
    let pokemon = {
    name: 'Rattata',
    type: 'Normal',
    number: 19
};

let 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().
    let 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()
    let 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.
   let 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.
let details = { name: 'Charmander', type: 'Fire', number: 19};
let evolution = { evolutionOne: 'Charmeleon', evolutionTwo: 'Charizard'};
let ability = { abilityOne: 'Blaze' };

let 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).
let details = { name: 'Charmander', type: 'Fire', number: 19};
let evolution = { evolutionOne: 'Charmeleon', evolutionTwo: 'Charizard'};
let ability = { abilityOne: 'Blaze' };

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

console.log(details);