DEV Community

SavagePixie
SavagePixie

Posted on

Cool Object methods in JavaScript

#javascript #devjournal #devtips

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

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

Top comments (5)

Collapse
 
squigglybob profile image
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

Collapse
 
jakewhelan profile image
Jake Whelan • • Edited

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)
Collapse
 
avalander profile image
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'
Collapse
 
squigglybob profile image
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.

Collapse
 
savagepixie profile image
SavagePixie • • Edited

Typo fixed! Thanks for the heads-up!

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

Read next

ninjasoards profile image

Easy Forms for VueJS with Formspree

David Y Soards -

temaweb10 profile image

How I made a file downloader on React and posted it on npm

temaweb10 -

jaydevm profile image

Better, Faster Apps with Next.js

Jaydev Mahadevan -

alexmercedcoder profile image

Deep Dive into Functional Programming in Javascript

Alex Merced -