[TIL] spread/rest 문법 🙂

ES6 주요 문법; spread/rest문법, 구조 분해 할당(destructing)

spread문법; 배열을 풀기

const numbers = [1, 2, 3];
console.log(...numbers) // 1 2 3

**sum(...numbers) // (1, 2, 3) 배열 -> 넘버로 풀어준다.

**function sum(x, y, z) {
	return x + y + z; // numbers.[0] + numbers.[1] + numbers.[2]
}

sum(...numbers) // 6

rest문법; 배열로 묶기

function sum(...Args) { // 전달인자(1, 2, 3) => [1, 2, 3]
	return Args.reduce((previous, current) => {
    	return previous + current;
    });
}

sum(1, 2, 3) // 6

배열에서의 사용

• 배열 합치기

let word = ['a', 'b', 'c'];
let Alphbet = [...word, 'd'];

Alphbet; // ['a', 'b', 'c', 'd']

• 배열 복사

let word1 = ['a', 'b', 'c'];
let word2 = [...word];


word2.push('d'); // 4
word2; // ['a', 'b', 'c', 'd']
word1; // ['a', 'b', 'c']

객체에서의 사용

let user1 = { name: 'anna', age: '25' };
let user2 = { name: 'mary', gender: 'female' };

let Cloneuser1 = {...user1};
let Mergeusers = {...user1, ...user2};

console.log(Cloneuser1); // { name: 'anna', age: '25' };
console.log(Mergeusers); // { name: 'mary', age: '25', gender: 'female' };

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

function number(a, b, ...manyMoreArgs) {
  console.log("1", a);
  console.log("2", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

number("one", "two", "three", "four", "five", "six");
//1 one 2 two ['three', 'four', 'five', 'six']

분해 후 새 변수에 할당

• 배열

const [a, b, ...rest] = [1, 2, 3, 4, 5];

// 변수 a, b, rest에 각 값을 할당
console.log(a); // 1
console.log(a); // 2
console.log(rest); // [3, 4, 5]

• 객체

const {a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4, e: 5};

// 변수 a, b에 값만 할당 / 변수 rest에 객체로 할당
console.log(a); // 1
console.log(a); // 2
console.log(rest); // {c: 3, d: 4, e: 5}