[javaScript] spread와 rest, 그리고 구조분해할당

🧠자바스크립트가 획기적으로 편리해진 ES6

2015년에 출시된 ES6(ECMA Script6)에선 자바스크립트의 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가되었다.

let, const, 템플릿 리터럴, 그리고 spread와 rest까지 모두 ES6버전에서 추가된 것들이라고 한다.

---

✂️Spread :  '...array'로 배열을 푼다.

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

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers) // 1+2+3 = 6 리턴

---

🧶Rest: '...parameter'로 배열로 묶는다.

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

 

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1,2,3) // 6
sum(1,2,3,4) // 10

참고 - arr.reduce()는 배열을 받아서 어떤 계산을 축적해가면서 요소 하나하나 실행해주어(누산) 하나의 값을 내준다.

---

✂️🧶spread/rest문법의 쓰임

1. 배열 합치기	let parts = ['shoulers', 'knees']; let lyrics = ['head', ...parts, 'and', 'toes'] //lyrics 은 ['head', ''shoulers', 'knees', 'and', 'toes'] let arr1 = [0,1,2]; let arr2 = [3,4,5]; arr1 = [...arr1, ...arr2]; //arr1은 [0,1,2,3,4,5]
2. 배열 복사	let arr = [1,2,3]; let arr2 = [...arr]; //arr.slice()와 유사, 배열을 복사해옴 arr2.push(4);  //arr1은 [1,2,3] //arr2는 [1,2,3,4]
3. 객체에서 사용하기	let obj1 = { foo: 'bar' , x: 42 }; let obj2= { foo: 'baz' , y: 13 }; let clonedObj = {...obj1}; let mergedObj = {...obj1, ...obj2}; //clonedObj는 { foo: 'bar' , x: 42 } //mergedObj는 {foo: 'baz', x: 42, y: 13} //겹치는 값은 덮어씌운다.
4. 함수에서 나머지 파라미터 받아오기	function myFunc(a,b, ...manyMoreArgs){   console.log("a",a);   console.log("b",b);   console.log("manyMoreArgs", manyMoreArgs); } myFun("one", "two", "three", "four", "five", "six"); //콘솔창에  //a one //b two //manyMoreArgs ['three', 'four', 'five', 'six']

---

💡구조분해할당이란

구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식을 말한다.

다시말해, 배열이나 객체의 관절을 하나하나 잘라서, 그 부분,부분들을 이용하는 방법이다.

배열에서의 구조분해할당	const [a,b, ...rest] = [10, 20, 30, 40, 50] //a는 10 //b는 20 //rest는  [30, 40, 50]
객체에서의 구조분해할당	const {a,b, ...rest} = {a: 10, b: 20, c: 30, d: 40} //a는 10  //b는 20 //rest는 {c:30, d:40}

---

💡함수에서 이루어지는 구조분해할당

구조분해할당이 꼭 spread를 이용해서만 이루어지는 것은 아니다. 

함수를 활용해서도, 배열이나 객체의 속성을 해체하여 그 값을 분석할 수 있다. 배열이나 객체의 마디마디를 잘라서 이러쿵저러쿵 쓰면 모두 구조분해할당을 하고 있다고 볼 수 있다. 이에 대해서 mdn의 자료를 읽어보면 좋을 듯 싶다.

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name); 
  //함수가 인자로 들어오는 객체를 분해하여 변수화하고, 새롭게 사용하고있다.
  //즉, 구조분해할당이 이루어졌다.
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user) 

//jdoe is John

---

본 내용은 코드스테이츠 FE 부트캠프 수업자료와 mdn자료를 정리해서 작성하였습니다 :)