Spread&Rest

Spread

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

let arr = [1, 2, 3]
console.log(...arr)//1 2 3
function multi(x, y, z) {
  return x * y * z;
}
multi(...arr);//6

spread 호출법은 ... 위의 예제 처럼 배열을 푼다.

Rest

• 파라미터를 배열의 형태로 받아서 사용, 파라미터 개수가 가변적일 때 유용

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}
console.log(sum(1, 2, 3)); //6

위는 mdn의 예제로 먼저 arr.reduce에 대해 설명하면,
리듀서 함수는 네 개의 인자를 가집니다.

누산기accumulator (acc)
현재 값 (cur)
현재 인덱스 (idx)
원본 배열 (src)
리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.
리듀서 함수의 인자에 배열이 들어가는 것이고 rest함수 역시 배열을 만든다. 위에 나온 sum(1,2,3)은 rest ...(spread와 같은 형태)를 만나 [1, 2, 3]이 된것이다.

배열 합치기

• spread를 이용해 배열을 쉽게 합칠 수 있다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, ...arr1, 8, 9];

let arr4 = [...arr1, ...arr2];
console.log(arr3); //[7, 1, 2, 3, 8, 9]
console.log(arr4); // [1, 2, 3, 4, 5, 6]

예시처럼 배열안에 spread 함수를 이용해 배열을 요소로 두는 것이 아니라 배열을 풀어서 배열안의 요소를 각각의 요소로 만들 수 있다.

배열 복사

let arr = ['a', 'b', 'c'];
let arr2 = [...arr]; 
arr2.push('d');
console.log(arr); //['a', 'b', 'c']
console.log(arr2); //['a', 'b', 'c', 'd'] arr을 복사했지만 주소를 복사한게 아닌 내용물만 복사했다.

arr2가 arr의 내용물만 복사했기 때문에 arr과 arr2는 같지 않고 그렇기 때문에 arr2에 .push를 사용해도 arr은 변하지 않고 arr2만 변화한다.

객체 사용

let obj1 = { a: 'a', b: 10 };
let obj2 = { a: 'b', c: 20 };

let clonedObj = { ...obj1 }; // { a: 'a', b: 10 }
let mergedObj = { ...obj1, ...obj2 }; // { a: 'b', b: 10, c: 20 }

clonedObj에서 사용한 ...은 spread를 이용해 obj1 의 키a,c를 풀어지게 되고 풀어진 키는 새로운 객체 clonedObj 에 들어가게 된다. 또한 obj1 과 obj2에서 겹치는 키 a의 경우 뒤에 적힌 obj2의 키값 'b'가 mergedObj에 들어가게된다.

나머지 파라미터

function argu(a, b, ...elseNum) {
	console.log(a),
    	console.log(b),
      	console.log(...elseNum);
}
argu(1, 2, 3, 4, 5, 6); 
/* 
1
2
3, 4, 5, 6
*/

1과 2를 제외한 나머지 숫자는 ...elesNum에 들어가게 되어 나머지를 모을 수 있다.

---

마지막으로...

오늘 배운것 외에도 페어와 함께한 문제풀이를 많이 풀어봐야겠다는 생각을 했다. 주말에 기회가 된다면 얕은복사와 깊은 복사에 대해서 블로깅해보자