DEV Community

loading...
Cover image for Javascript Merge Objects

Javascript Merge Objects

frantchessico profile image Francisco Inoque ・2 min read

In this post we will merge objects in JavaScript

const user = {
      user_id: '1#inoque@20',
      first_name: 'Francisco',
      last_name: 'Inoque',
      age: 24
    }

    const user_details = {
       obj_id: '1122@ee11',
       user_id: '1#inoque@20',
       company: 'SavanaPoint',
       role: 'Full Stack Developer',
       hobby: 'Watching Movies',
       stacks: {
        languages: ['JavaScript', 'Rust', 'Go'],
        frameworks: {
          frontend: ['Angular', 'Reactjs', 'Nextjs', 'Bootstrap'],
          backend: ['Nestjs', 'Express', 'Adonisjs', 'Nodejs'],
          database: ['MongoDB', 'FaunaDB'],
          other_tech: ['firebase', 'graphql', 'TypeScript', 'Adobe XD', 'Nodejs']
        }
      }
    }
const user_complete_details = { 
  ...user, ...user_details
}

Enter fullscreen mode Exit fullscreen mode

Or we can use: Object.assign

The Object.assign () method is used to copy the values ​​of all the own enumerable properties of one or more source objects to a target object. This method will return the target object.

 const user = {
      user_id: '1#inoque@20',
      first_name: 'Francisco',
      last_name: 'Inoque',
      age: 24
    }

    const user_details = {
       obj_id: '1122@ee11',
       user_id: '1#inoque@20',
       company: 'SavanaPoint',
       role: 'Full Stack Developer',
       hobby: 'Watching Movies',
       stacks: {
        languages: ['JavaScript', 'Rust', 'Go'],
        frameworks: {
          frontend: ['Angular', 'Reactjs', 'Nextjs', 'Bootstrap'],
          backend: ['Nestjs', 'Express', 'Adonisjs', 'Nodejs'],
          database: ['MongoDB', 'FaunaDB'],
          other_tech: ['firebase', 'graphql', 'TypeScript', 'Adobe XD', 'Nodejs']
        }
      }
    }
const user_complete_details =  Object.assign(user, user_details)

console.log(user_complete_details)
Enter fullscreen mode Exit fullscreen mode

Result:

{
  user_id: '1#inoque@20',
  first_name: 'Francisco',
  last_name: 'Inoque',
  age: 24,
  obj_id: '1122@ee11',
  company: 'SavanaPoint',
  role: 'Full Stack Developer',
  hobby: 'Watching Movies',
  stacks: {
    languages: [ 'JavaScript', 'Rust', 'Go' ],
    frameworks: {
      frontend: [Array],
      backend: [Array],
      database: [Array],
      other_tech: [Array]
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

Or

{user_id: "1#inoque@20", first_name: "Francisco", last_name: "Inoque", age: 24, obj_id: "1122@ee11", }
age: 24
company: "SavanaPoint"
first_name: "Francisco"
hobby: "Watching Movies"
last_name: "Inoque"
obj_id: "1122@ee11"
role: "Full Stack Developer"
stacks:
frameworks:
backend: Array(4)
0: "Nestjs"
1: "Express"
2: "Adonisjs"
3: "Nodejs"
length: 4
__proto__: Array(0)
database: Array(2)
0: "MongoDB"
1: "FaunaDB"
length: 2
__proto__: Array(0)
frontend: Array(4)
0: "Angular"
1: "Reactjs"
2: "Nextjs"
3: "Bootstrap"
length: 4
__proto__: Array(0)
other_tech: (5) ["firebase", "graphql", "TypeScript", "Adobe XD", "Nodejs"]
__proto__: Object
languages: Array(3)
0: "JavaScript"
1: "Rust"
2: "Go"
length: 3
__proto__: Array(0)
__proto__: Object
user_id: "1#inoque@20"
__proto__: Object
Enter fullscreen mode Exit fullscreen mode

Discussion (8)

pic
Editor guide
Collapse
frantchessico profile image
Francisco Inoque Author

Thanks to everyone for the tips. So you make me strong

Collapse
vulwsztyn profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Artur Mostowski • Edited

TLDR of this "article": you can

const a = { value: 3, name: 'Artur' }
const b = { value: 5, surname: 'SomeSurname' }
const c = { ...a, ...b } // { value: 5, surname: 'SomeSurname', name: 'Artur' } 
const d = { ...b, ...a } // { value: 3, surname: 'SomeSurname', name: 'Artur' }

Enter fullscreen mode Exit fullscreen mode

Please, delete this dumpster fire of an article before more people waste time trying to read it.

  1. Your examples are overcomplicated and therefore hard to read.

  2. Your indentation is inconsistent.

  3. Your code doesn't even work properly.

  4. You made an article to explain an extremely basic concept.

  5. You (to my surprise consistently) use snake case in JS, which is not common practice.

  6. { ...a, ...b} is not the same as Object.assign(a,b) as the second modyfies the a object.

The only good thing I can say is that you did not unnecessarily use let instead of const.

Collapse
frantchessico profile image
Francisco Inoque Author

But I do not think that there is the wrong way to form a thing in the world of programming, what can exist according to my point of view is, the best way to do a certain thing, will I be clear?

Collapse
vulwsztyn profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Artur Mostowski

I will not try to parse your sentence, because it looks like you had a stroke midsentence.

Nevertheless, I can assure you you can program things wrong. The first step to that is not accepting feedback.

Of all my points you addressed only point 3.

Collapse
jwm0 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Jakub Majorek

What a terrible article, it almost looks auto-generated. First, let's skip over the fact that we generally don't use snake case when defining object properties in JS but the first example is inherently wrong. The 2 examples you showed produce a different output:

const user_complete_details = { 
  ...user, user_details
}
Enter fullscreen mode Exit fullscreen mode

Will produce an object with a brand new user_details key with a value of that object. Instead, what you want to do is:

const user_complete_details = { 
  ...user,
  ...user_details,
}
Enter fullscreen mode Exit fullscreen mode

Lastly, you should mention how object can only contain a unique set of keys and when merging 2 different objects, the one that gets spread last will overwrite the values if the keys are the same.

Collapse
frantchessico profile image
Francisco Inoque Author • Edited

Thank you.

But I do not think that there is the wrong way to form a thing in the world of programming, what can exist according to my point of view is, the best way to do a certain thing, will I be clear?

Collapse
vulwsztyn profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Artur Mostowski

Wow, and it's your comment that is marked as low quality/non-constructive by the community. when you did a better job explaining the concept than the author of this "article".

Collapse
frantchessico profile image
Francisco Inoque Author

But I do not think that there is the wrong way to form a thing in the world of programming, what can exist according to my point of view is, the best way to do a certain thing, will I be clear?