비구조화 할당(구조분해), Rest 파라미터

Destructuring Assignment

객체에서 값들을 추출해서 새로운 상수로 선언해주는 것

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

object.a , object.b로 쓰지 않고 object의 key로 value를 불러올 수 있다.

함수의 파라미터에서도 비구조화 할당이 가능하다.

const object = { a: 1, b: 2 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);

배열에서도 비구조화 할당을 할 수 있다.

const array = [1, 2];
const [one, two] = array;

console.log(one); //1
console.log(two); //2

코드 출처: https://learnjs.vlpt.us/useful/06-destructuring.html

useQuery, useState 등에서 구조분해 할당으로 키/변수를 꺼낼 수 있다.

const { data, loading } = useQuery(FETCH_BOARDS)
const [state,setState]=useState("")

배열은 요소 순서가 있어서 순서가 바뀌면 값도 바뀌고
객체는 키가 정해져 있어서 순서가 상관없다.

Rest parameter

rest 파라미터(매개변수,인자)는 매개변수 이름 앞에 세개의 점을 붙여서 정의한 매개변수이다.

function foo(...rest) {
  console.log(Array.isArray(rest)); // true : 배열 타입
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

함수에 전달된 인수(argument)들의 목록을 배열로 전달받는다.

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);

...rest만 있지않고 함수 선언에 다른 파라미터가 있는 경우 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 배열에 담겨서 할당된다.

코드 출처: https://poiemaweb.com/es6-extended-parameter-handling