How to change an object Key without mutating original array

I have an array of objects - I want to change one of the object keys to something else without mutating the original array. what is the best method to approach this?

I understand that I could be using the Map method but unsure how this would work. thanks

const books = [
  { title: "To Kill a Mockingbird", writtenBy: "Harper Lee" }, 
  { title: "A Clockwork Orange",  author: "Anthony Burgess" },
  { title: "The Elephant Tree", writtenBy: "R.D. Ronald" } 
]

function changeKey(arr, keyChange, newKey) {

}

// i want to return so the KEY keyChange(author) is changed to newKey(writtenBy)
[
 { title: "To Kill a Mockingbird", writtenBy: "Harper Lee" },
 { title: "A Clockwork Orange",  writtenBy: "Anthony Burgess" },
 { title: "The Elephant Tree", writtenBy: "R.D. Ronald" } 
]

3 answers

  • answered 2019-06-11 22:48 Umair Sarfraz

    The following will not mutate books array.

    const books = [
      { title: "To Kill a Mockingbird", writtenBy: "Harper Lee" },
      { title: "A Clockwork Orange", author: "Anthony Burgess" },
      { title: "The Elephant Tree", writtenBy: "R.D. Ronald" }
    ];
    
    const renamedBooks = books.map(book => {
      if (book.author) {
        return {
          title: book.title,
          writtenBy: book.author
        };
      }
    
      return book;
    });
    
    console.info(renamedBooks);

  • answered 2019-06-11 22:54 ggorlen

    You can map the parameter array and copy each of the objects within it shallowly using the spread operator. For each new object, if it contains the key we'd like to remove, copy the value to the new key and delete the old key.

    const books = [ {title: "To Kill a Mockingbird", writtenBy: "Harper Lee"}, {title: "A Clockwork Orange", author: "Anthony Burgess"}, {title: "The Elephant Tree", writtenBy: "R.D. Ronald"} ];
    
    const changeKey = (arr, keyChange, newKey) =>
      arr.map(e => {
        const o = {...e};
        
        if (keyChange in o) {
          o[newKey] = o[keyChange];
          delete o[keyChange];
        }
        
        return o;
      })
    ;
    
    console.log(changeKey(books, "author", "writtenBy"));
    console.log(books);

  • answered 2019-06-11 23:27 Alejandro

    Array helpers like map, filter, reduce, etc doesn't mutate the original array they return a new array. Map receives a function as an argument (callback). Map iterate the array applying your callback in every element.

    const books = [ {title: "To Kill a Mockingbird", writtenBy: "Harper Lee"},
                    {title: "A Clockwork Orange",  author: "Anthony Burgess"},
                    {title: "The Elephant Tree", writtenBy: "R.D. Ronald"} ];
    
    //Function to use as a callback on map
    function changeKey(current) {
      if(current.author) return { title: current.title, writtenBy: current.author };
      return current;
    }
    
    //Creating new array applying changeKey in every element thanks to map
    const newBooks = books.map(changeKey);
    console.log(newBooks);