JavaScript как понять место в коде javascript

Question

Подскажите как понять место в коде javascript в функции editName: return {...item, name} Это деструктуризация и оператор spead или просто передача объекта в массив? Почему нельзя было написать item без "..." точек впереди?

let schools = [{
    name: "Yorktown"
  },
  {
    name: "Stratford"
  },
  {
    name: "Washington & Lee"
  },
  {
    name: "Wakefield"
  }
]

let updatedSchools = editName("Stratford", "HB Woodlawn", schools)

console.log(updatedSchools[1]) // { name: "HB Woodlawn" }

console.log(schools[1]) // { name: "Stratford" }

const editName = (oldName, name, arr) =>
  arr.map(item => {
    if (item.name === oldName) {
      return {
        ...item,
        name
      }
    } else {
      return item
    }
  })

Answer 1

Это спред.

Если бы написали item без точек, то в итоговом объекте создался бы ключ item со значением item и ключ name со строковым значением:

return {
    item, // то же самое что item: item
    name
}

А так создаётся объект с ключами как у item (ключи копируются из item в возвращаемый объект) и ключ name затирает такой же ключ, который есть в item:

return {
    ...item, // ключи из item копируются в результирующий объект
    name // ключ name затирает собой ключ, который уже скопирован из item на прошлой строке ^^^
}

Это отличается от простого return item тем, что это новый объект с теми же ключами, и тем, что в нём ключ name заменён. Возможно это сделано в целях неизменности item, чтобы в нём ключ не менять.

БЛОГ НА HUSL

JavaScript как понять место в коде javascript

Ответы (1 шт):