코드스테이츠 소프트웨어엔지지어링 부트캠프 +18일

오늘 배운 것

• Spread/Rest
• 구조분해 (Destructing)

1. Spread/Rest 문법

Spread 문법

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

 

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

const numbers = [1,2,3]

sum(...numbers) // 6 
//
//배열을 풀어서 각각의 요소로 들어간다.

//sum(1,2,3) 이 된다.

Rest 문법

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

function sum(...the Args){
	return theArgs.reduce((previous, current) => {
    	return previous + current;
      });
   }
   
sum(1,2,3) // 6
sum(1,2,3,4) //10

 

배열에서 사용하기

Spread 문법은 배열에서 강력하다.

 

1. 배열 합치기

let tmp = ['a','b'];
let test = ['x','y',...tmp,'z']

console.log(test) // ["x", "y", "a", "b", "z"]

//...tmp는 ('a','b') 가 되어서 test 배열 안에 들어간다.

let arr = [1,2,3];
let arr2 = [...arr];  //arr.slice()와 유사하다.
arr2.push(4); // spread문법은 기존 배열을 변경하지 않으므로(immutable), arr2를 수정해도 arr가 바뀌지 않는다.

console.log(arr) //[1,2,3]

console.log(arr2) //[1,2,3,4]

 

객체에서 사용하기

let obj1 = {foo: 'bar', x: 42};
let obj2 = {foo: 'baz', y: 13};

let clonedObj = {...obj1};
let mergedObj = {...obj1, ...obj2};


console.log(cloneObj) // {foo: "bar", x: 42}

console.log(mergedObj) // {foo: "baz", x: 42, y: 13} 
//obj1과 obj2의 중복되는 key인 foo의 경우 obj2.foo의 값 'baz'가 obj1.foo의 값인 'bar' 를 덮는다.

함수에서 나머지 파라미터 받아오기

function myFun(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"]

 

2. 구조 분해 (Destructing)

구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정이다.

분해 후 새 변수에 할당

배열

const [a,b, ...rest] = [10,20,30,40,50]
console.log(a) // 10
console.log(b) // 20
console.log(rest) //[30,40,50]

 

객체

const {a,b,...rest} = {a:10,b:20,c:30,d:40}

console.log(a) // 10
console.log(b) // 20
console.log(rest) // {c: 30, d: 40}

객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var) 과 사용하지 않으면 에러가 발생할 수 있다.

 

나머지 요소의 오른쪽 뒤에 쉼표가 있으면 SyntaxError가 발생한다.

let [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

let [x,...y,z] = [1,2,3,4,5,6,7,8]
// SyntaxError: rest element may not have a trailing comma

let [x,z,...y] = [1,2,3,4,5,6,7,8]
console.log(x) // 1
console.log(z) // 2
console.log(y) // [3,4,5,6,7,8]