[리뷰] spread, rest, 구조분해할당

둘 다 ...으로 표현되어서 헷갈리기 쉽다. 하지만 차이가 있다.

spread 문법

주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다.

let arr = [10, 30, 40, 20]
let value = Math.max(...arr)

//let value = Math.max(10, 30, 40, 20)과 같다

배열 arr을 풀어서 각각의 요소를 넣는다.

---

 

rest 문법

생김새는 spread와 비슷하지만 역할이 다르다.

파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다

function printMaxNums(...args) {
  console.log(args)
}

printMaxNums(10, 30, 40)

여기에서 ...args는 rest parameter이며

args는 배열의 형태로 받아 [10,20,30]이 된다.

 

---

rest문법은 spread문법과 정확히 같아보이지만, 대신 배열이나 객체를 분해할 때 사용됩니다. 어떤 면에서, 나머지 구문은 전개 구문과 반대입니다. 전개는 배열을 그 엘리먼트로 '확장' 하는 반면, 나머지는 여러 엘리먼트를 수집하며 이를 하나의 엘리먼트로 '압축' 합니다.

구조분해할당

 ⭐ 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 javascript 표현식

let myFriend = ["소영", "민영", "가영", "나영", "다영"];
let jiyeong = {
  name: "지영",
  age: "24",
  area: "서울",
  friends: [...myFriend, "수영"],
};
function introduceMe(who) {
  const { name, age, area, friends } = who;

  console.log(
    `${name}의 나이는 ${age}이며 사는 곳은 ${area} 이고 친구는 ${friends}이가 있다`
  );
}

introduceMe(jiyeong);