(배열,객체) 구조화, 스프레드 연산자

배열 구조화

const nested = [2, 4, [5, 6]];
const [i, , j] = nested;
console.log(i, j); // 2 [5, 6]

const [i, , [j, k]] = nested;
console.log(i, j, k); // 2 5 6

const [p, q, r] = [8, 9];
console.log(p, q, r); // 8 9 undefined

const [p = 1, q = 1, r = 1] = [8, 9];
console.log([p, q, r]); // [8, 9, 1]

 

객체 구조화

let a = 111;
let b = 999;
const obj = { a: 23, b: 7, c: 14 };
({ a, b } = obj); 4️⃣
console.log(a, b); // 23 7

4️⃣에서 괄호를 하지 않으면 중괄호로 둘러쌓인 블록에 아무것도 할당할 수 없기 때문에

'SyntaxError: Unexpected token' 에러가 발생한다.

 

스프레드 연산자(...)

const arr = [7, 8, 9];
const badNewArr = [1, 2, arr[0], arr[1], arr[2]];
console.log(badNewArr); // [1, 2, 7, 8, 9]

// es6 이후
const newArr = [1, 2, ...arr];
console.log(newArr); // [1, 2, 7, 8, 9]

// 스프레드 연산자(...)를 사용하지 않았을 때
const newArr = [1, 2, arr];
console.log(newArr); // [1, 2, [7, 8, 9]]

console.log(...newArr);      // 1 2 7 8 9
console.log(1, 2, 7, 8, 9);  // 1 2 7 8 9
console.log(newArr);         // [1, 2, 7, 8, 9]

스프레드 연산자(...)를 사용하지 않으면 배열안에 새배열로 값을 리턴한다.

마지막은 스프레드 연산자를 쓰고 안쓰고의 리턴값 차이를 보여준다.

 

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

const [a, b, ...others] = [1, 2, 3, 4, 5];
console.log(a, b, others); // 1 2 [3, 4, 5]

 

const add = function (...numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) sum += numbers[i];
  console.log(sum);
};

add(2, 3);                  // 5
add(5, 3, 7, 2);            // 17
add(8, 2, 5, 3, 2, 1, 4);   // 25

매개변수에도 스프레드 연산자를 사용할 수 있다.