Merge Two Objects And Array To Object In JavaScript

April 02, 2020 · 2 min read

#javascript #codenewbie #beginners #webdev

Photo by Ludovic Migneault on Unsplash

I share one trick a day until the end of the COVID-19 quarantine in Switzerland, April 19th 2020. Seventeen days left until hopefully better days.

To be really honest with you, I did not had that much idea for today’s blog post. For my defense, this is the eighteenth blog post I write every day in a row, it might explains my lack of today’s inspiration 😅.

That being said, I will share with you the following two tricks which I find useful.

Merge Two Objects

Thanks to the introduction of Spread Operator in ES6, it is now more than ever before really easy to merge two objects. No more loops, comparison or rocket science, the merge operation can be written in a single line of code.

It is also worth to notice that in case both objects would contain the same key, the value of the last object, “the one on the right in the line of code”, is the winning value.

const bruno = { sing: true, song: 'Treasure' }; const ratm = { type: 'band', song: 'Bombtrack' }; const result = {...bruno, ...ratm}; console.log(result); // -> {sing: true, song: "Bombtrack", type: "band"}

Array To Object

In order to transform an array to an object in JavaScript, I did not find so far the magic line of code which would do all the job in one single line of code. If you do know how to achieve this, ping me with your comments and best pieces of code, I would love to hear about it 😁.

Meanwhile, I use the reduce function. Fun fact, that’s probably one of the few times that I am using it. I use often forEach , map , filter and find but reduce , truly rarely.

// {name: string, genre: string}[] const bands = [ { name: 'Ratm', genre: 'rock' }, { name: 'Bruno', genre: 'Pop' } ]; // {ratm: string, bruno: string} const artists = bands.reduce( (obj, item) => { obj[] = item.genre; return obj; }, {}); console.log(artists); // {Ratm: "rock", Bruno: "Pop"}


It is interesting to notice that the more the language evolves, the more basic operations become easy to implement with few lines of code. Also interesting is the fact that sometimes it takes time to these new options to be rolled out to me. ES6 has been around for a while and I am still writing about it in 2020 😉.

Stay home, stay safe!



Read the article

Tweet From GitHub Actions

March 5th 2021 · 3 min read

#javascript #showdev #webdev #tutorial

Read the article

Introducing The Playlists Made By Devs

February 22nd 2021 · 3 min read

#showdev #webdev #motivation #music

Read the article

How To Download A File With Node.js

February 10th 2021 · 2 min read

#javascript #nodejs #webdev

More articles

My company address

Fluster GmbH c/o The Hub Zürich Association Sihlquai 131 8005 Zürich

On the web

This website is open source. Its code is available on GitHub