loading...
Cover image for Merge Two Objects And Array To Object In JavaScript

Merge Two Objects And Array To Object In JavaScript

daviddalbusco profile image David Dal Busco Originally published at Medium ・2 min read

One Trick A Day (35 Part Series)

1) How To Call The Service Worker From The Web App Context 2) Replace Environment Variables In Your Index.html 3 ... 33 3) Inject JavaScript Or CSS At Runtime And On Demand 4) Sometimes You Just Need A Dumb Library 5) Internationalization with Gatsby 6) How To Declare And Use Ionic Modals With Stencil 7) Get App Name And Version In Angular 8) Deploy Apps And Functions To Firebase From A Mono Repo With GitHub Actions 9) Starting In A New Company? Think Npmrc And Git Name 10) Test Angular Pipes With Services 11) Gatsby Tricks: Viewport, CSS Modules Transition And i18n Tricks 12) Takeover The Cordova Facebook Plugin Maintenance 13) Protect Your HTTP Firebase Cloud Functions 14) Create A Menu For Your Gatsby Website Without Libs 15) Create A Modal For Your Angular App Without Libs 16) Add A Slider To You Angular App 17) Test Angular Components and Services With HTTP Mocks 18) Merge Two Objects And Array To Object In JavaScript 19) JSX For Angular Developers 20) More JSX For Angular Developers 21) Create Your Own NPM Cli 22) Third Party Service Providers. Be transparent to each other! 23) React And Web Workers 24) Angular Testing: Mock Private Functions 25) React, Web Workers and IndexedDB 26) React, Web Workers, IndexedDB and ExcelJS 27) GitHub Actions: Hide And Set Angular Environment Variables 28) JavaScript Useful Functions 29) Deeplinking in Ionic Apps With Branch.io 30) Follow-up: Web Push Notifications And PWA In 2020 31) Angular And Web Workers 32) Git Commands I Always Forget 33) An Open Source Medium Like WYSIWYG Editor 34) Currency Picker And Formatter With Ionic React 35) Develop A Konami Code For Any Apps With Stencil

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.name] = item.genre;
    return obj;
  },
  {});

console.log(artists);

// {Ratm: "rock", Bruno: "Pop"}

Summary

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!

David

Cover photo by Ludovic Migneault on Unsplash

One Trick A Day (35 Part Series)

1) How To Call The Service Worker From The Web App Context 2) Replace Environment Variables In Your Index.html 3 ... 33 3) Inject JavaScript Or CSS At Runtime And On Demand 4) Sometimes You Just Need A Dumb Library 5) Internationalization with Gatsby 6) How To Declare And Use Ionic Modals With Stencil 7) Get App Name And Version In Angular 8) Deploy Apps And Functions To Firebase From A Mono Repo With GitHub Actions 9) Starting In A New Company? Think Npmrc And Git Name 10) Test Angular Pipes With Services 11) Gatsby Tricks: Viewport, CSS Modules Transition And i18n Tricks 12) Takeover The Cordova Facebook Plugin Maintenance 13) Protect Your HTTP Firebase Cloud Functions 14) Create A Menu For Your Gatsby Website Without Libs 15) Create A Modal For Your Angular App Without Libs 16) Add A Slider To You Angular App 17) Test Angular Components and Services With HTTP Mocks 18) Merge Two Objects And Array To Object In JavaScript 19) JSX For Angular Developers 20) More JSX For Angular Developers 21) Create Your Own NPM Cli 22) Third Party Service Providers. Be transparent to each other! 23) React And Web Workers 24) Angular Testing: Mock Private Functions 25) React, Web Workers and IndexedDB 26) React, Web Workers, IndexedDB and ExcelJS 27) GitHub Actions: Hide And Set Angular Environment Variables 28) JavaScript Useful Functions 29) Deeplinking in Ionic Apps With Branch.io 30) Follow-up: Web Push Notifications And PWA In 2020 31) Angular And Web Workers 32) Git Commands I Always Forget 33) An Open Source Medium Like WYSIWYG Editor 34) Currency Picker And Formatter With Ionic React 35) Develop A Konami Code For Any Apps With Stencil

Posted on by:

daviddalbusco profile

David Dal Busco

@daviddalbusco

Creator of DeckDeckGo | Organizer of the Ionic Zürich Meetup

Discussion

markdown guide
 

One of the things I like about JavaScript is that anything can be anythin... It's a blessing, it's a curse, but please do not treat strict typing as JavaScript const bands: {name: string, genre: string}[] = ... this may be typescript or what not but not Javascript, vanilla anyway. Kudos

 

Yes TypeScript.
I have now removed the type definition from the post.