Cool Object methods in JavaScript

This is a compilation of a few Object methods that may come in handy.

• Object.assign
• Object.entries
• Object.freeze
• Object.fromEntries
• Object.is

Object.assign

This copies all enumerable own properties from one or more source objects to a target object. So we can use it to add specific properties or change their values by passing other objects to the method. If more than one object have the same key, it will always use the one that's passed last. It returns the target object.

Syntax

Object.assign(target, ...sources)

• target is the object onto which properties will be copied.
• sources are all the objects from which properties will be copied.

Examples

const pony = {
  colour: 'pink',
  species: 'unicorn',
}
Object.assign(pony, { cutieMark: 'star' }, { colour: 'pruple' })
console.log(pony) //{ colour: 'purple', species: 'unicorn', cutieMark: 'star' }

Object.assign can also be used to create new objects:

const pony = {
  colour: 'pink',
  species: 'unicorn',
}
const newPony = Object.assign({}, pony, { cutieMark: 'star' }, { colour: 'pruple' })
console.log(pony) //{ colour: 'pink', species: 'unicorn' }
console.log(newPony)//{ colour: 'purple', species: 'unicorn', cutieMark: 'star' }

Since arrays are objects, Object.assign also works on them:

const array = [ 0, 1, 2, 3, 4, 5 ]
Object.assign(array, { 1: 3, 3: 1 })
console.log(array) //[ 0, 3, 2, 1, 4, 5 ]

Object.entries

This method returns an array of the object's own enumerable properties in [ key, value ] pairs.

Syntax

Object.entries(object)

Example

const pony = {
  colour: 'pink',
  cutieMark: 'star',
  species: 'unicorn',
}
const arrayedPony = Object.entries(pony)
console.log(arrayedPony) //[[ 'colour', 'pink' ], [ 'cutieMark', 'star'], [ 'species', 'unicorn' ]]

Note Object.keys and Object.values function similarly but only return keys and values respectively.

Object.freeze

This one keeps an object from being changed at all. After freezing it, you can't add properties, remove them or change their value. It returns the same object that was passed.

Syntax

Object.freeze(object)

Example

const pony = {
  colour: 'pink',
  species: 'unicorn',
}

Object.freeze(pony)
Object.assign(pony, { cutieMark: 'star' }) //Throws error

Object.fromEntries

This method does the opposite of Object.entries. It takes an array of [ key, value ] pairs and turns them into an object.

Syntax

Object.fromEntries(array)

Object.is

This one compares two values and determines if they are the same value.

This is different from the equality operator (==) in that it doesn't do any sort of type coercion.

It is also different from the identity operator (===) in that it makes a difference between -0 and +0 and it treats NaN as equal to NaN and to Number.NaN.

Syntax

Object.is(value1, value2)

Examples

console.log(NaN === NaN) //false
console.log(Object.is(NaN, NaN)) //true

console.log(Number.NaN === NaN) //false
console.log(Object.is(Number.NaN, NaN)) //true

console.log(NaN === +'potato') //false
console.log(Object.is(NaN, +'potato')) //true

console.log(+0 === -0) //true
console.log(Object.is(+0, -0)) //false

Two different objects will only be evaluated as true if they refer to the same object.

const ponyA = {
  colour: 'pink',
  species: 'unicorn',
}

const ponyB = ponyA

console.log(Object.is(ponyA, ponyB)) //true

const ponyC = {
  colour: 'pink',
  species: 'unicorn',
}

console.log(Object.is(ponyA, ponyC)) //false

//But we can still compare their properties' values:
console.log(Object.is(ponyA.colour, ponyC.colour)) //true

Comments

[squigglybob]

Nice :0) I had heard of freeze recently. What would you do with the output of entries though?

P.s. typo in the last eg should be const ponyB = ponyA

[Jake Whelan]

entries and fromEntries are awesome because they allows you to use Array.prototype.filter, map, reduce with objects (and their keys too!)

Use them to mutate and create objects from existing objects.

For example:

import { resolve } from 'path'

const paths = {
  home: './src/home/*',
  settings: './src/settings/*'
}

const resolvedPaths = Object.entries(paths)
  .reduce((acc, [key, value]) => {
    return {
      ...acc,
      [key]: resolve(__dirname, path)
    } 
  }, {})

const normalisedPaths = Object.entries(paths)
  .reduce((acc, [key, value]) => {
    return {
      ...acc,
      [key]: value.replace('/*', '')
    } 
  }, {})

const renamedPaths = Object.entries(paths)
  .reduce((acc, [key, value]) => {
    return {
      ...acc,
      [`${key}Path`]: value
    } 
  }, {})

const pathsWithoutSettings = Object.entries(paths)
  .filter(([key]) => key !== 'settings')
  .reduce((acc, [key, value]) => {
    return { 
      ...acc,
      [key]: value
    }
  }, {})

console.log(resolvedPaths.home) // C:/Users/jake/dev/my-project/src/home
console.log(normalisedPaths.home) // ./src/home
console.log(renamedPaths.homePath) // ./src/home/*
console.log(Object.keys(pathsWithoutSettings)) // ['home']

and now thanks to fromEntries you can do the same without reduce:

const paths = {
  home: './src/home/*',
  settings: './src/settings/*'
}

const renamedPathEntries = Object.entries(paths)
  .map(([key, value]) => [`${key}Path`, value])

const renamedPaths = Object.fromEntries(renamedPathEntries)

[Avalander]

What would you do with the output of entries though?

It's quite useful to convert objects to other formats, like query strings or SQL queries:

const query {
  page: 3,
  type: 'unicorn',
}

const toQueryString = query =>
  '?' + Object.entries(query)
    .map(([ key, value ]) => [ key, value ].join('=')) // Or .map(x => x.join('='))
    .join('&')

toQueryString(query) // '?page=3&type=unicorn'

[squigglybob]

Yep, that's nice. Object.keys(obj) always bothered me as then you needed to grab the value from the obj with the index of the key, but this way you have it there when you map etc.

[SavagePixie]

Typo fixed! Thanks for the heads-up!

As for the output of entries, I think I shall refer to the others' replies :D