spead 생성자로 추가하거나 합치거나 업데이트하는 방법!

배열에 추가하는 방법

const friends = ["sora","kat"];

const newFriends = [...friends, "alex"];

console.log(newFriends);
//["sora","kat","alex"];

객체에 추가하는 방법

const person = {
	username: "sora"
};

console.log({...person, password: 123 });
//{username: "sora", password:"123"};

한눈에 볼 수 있는 코드

const first = ["mon","tue","wed"];

const weekend = ["sat","sun"];
const fullWeek = [...first, "thu", "fri"", ...weekend];

console.log(fullWeek);
//["mon","tue","wed","thu","fri","sat","sun"];

이번에는 optional object property에 대해 알아보자

const lastName = prompt("last name?");

const user = {
  username : "sora",
  age : 27
}

console.log(type of lastName);

lastName을 프롬프트로 받고, 이런 객체가 있다고 하면

콘솔에 찍히는것은 string이다. 프롬프트 값이 있는지 없는지 확인 할 수 없다.

그래서 lastName값을 받아서 그 값에 따라 값을 넣어주고 싶다면

const user = {
  username : "sora",
  age : 27,
  lastName : lastName !== ? lastName : undefined
}

이렇게 써주면 lastName이 값이 있으면 lastName이고, 없으면 언디파인으로 뜰 것이다.

근데 만약에 lastName자체를 넣고싶지 않을때는 어떻게 할까, 언디파인으로 기본값을 정해주는게 아니라 아예 안띄우고 싶을때.

(lastName의 키조차 갖기 싫을경우)

const lastName = prompt("last name?");

const user = {
  username : "sora",
  age : 27,
  ...(lastName !== "" && { lastName })
}

이 경우에는 두 조건 모두 참이어야 한다.

처음 조건문은 참일수밖에 없는데, lastName이 빈값이 아니면,

lastName의 값이 ...(lastName !== "" && lastName) && 뒤의 lastName의 값으로 들어간다

&&뒤의 lastName은 왜 하나만 쓰는걸까?

바로 변수생략에 의한 생략을 했기 때문이다(lastName의 value가 lastName이므로 줄여서 그냥 lastName)

아니 무슨 간장공장공장장도 아니고… 헷갈리….

...이 조건의 결과를 전개할 것이다.

앞의 조건은 무조건 true이고, 뒤의 lastName도 spread를 이용하여 값을 전개하려면 object여야 하므로

중괄호로 감싸주어야 한다!

중괄호로 안묶어주니까 별 이상하게 뜬다ㅋㅋ

프롬프트로 받은 모든 글자열이 배열의 각자로 들어감ㅋㅋㅋ

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)