Concatenate Object values with javascript

Question

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Im trying to concatenate firstName and lastName to get another object.

const person = {Name:"John Doe", age:50, eyeColor:"blue"};

How can i do that in javascript

Answer 1

You can use a getter to get name

Why should we use getter? You can imagine this situation, if you assign Name property, as usual, it will generate setter and getter on that, but seemingly, you're expecting to get value only.

You can check the problem I mentioned with getter and setter below (the code snippet is hidden)

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

person = {
  ...person,
  Name: person.firstName + " " + person.lastName
};


console.log(person.Name) // John Doe
person.Name = "new name" //assign a new value
console.log(person.Name) //it becomes `new name`!

Here is how we use getter instead of assigning values

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue",
  get Name() {
    return this.firstName + " " + this.lastName
  }
};


console.log(person.Name); //John Doe
person.Name = "new name"; //try to assign a new name
console.log(person.Name); //it's still `John Doe`!

You also can add another function as a class to initialize Name property without modifying the original object (person)

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

function PersonWithFullName(data) {
  return {
    ...data,
    get Name() {
      return this.firstName + " " + this.lastName
    }
  }
}

const updatedPerson = new PersonWithFullName(person)

console.log({ person })
console.log({ updatedPerson })

Answer 2

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
const { firstName, lastName, ...restOfPerson } = person;
const newPerson = { Name: `${firstName} ${lastName}`, ...restOfPerson };
console.log(newPerson);

I think you are looking for this, you can destructure the object and get the firstName and lastName and use object literal or concatenation to create your Name value.

Answer 3

You could use a person factory class:

const p1 = {
  firstName: 'John',
  lastName: 'Doe',
  age: 50,
  eyeColor: 'blue',
};

class Person {
  constructor(person) {
    this.name = `${person.firstName} ${person.lastName}`;
    this.age = person.age;
    this.eyeColor = person.eyeColor;
  }
}

const person = new Person(p1);
console.log(person);

Answer 4

function personWithName(person) {
    person['Name'] = [person.firstName, person.lastName].join(" ");
    delete person.firstName;
    delete person.lastName;
    return person;
}

you can use it as

person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = personWithName(person);