rest parameter, destructuring

rest parameter

데이터의 개수가 정해져 있지 않은 다수의 데이터를 rest parameter라고 한다. 사용법은 간단하다.

// 기본 사용 방식
// 함수 파라미터 이름 앞에 ... 을 붙인다.
function func(...param) {
	console.log(param);
}
func(2,3,5,4,46,6,4,6,76,4,3);

// 파라미터가 여러개일 때는 맨 뒤에 rest parameter를 넣어야한다.
function func(a, b, ...param) {
	console.log(param);
}
func(2,3,5,4,46,6,4,6,76,4,3);

// 파라미터의 타입 선언 방식은 기존과 같다.
// 유니온 타입으로 선언해서 다양한 타입을 담을 수 있는 것도 기존과 같다.
function func(...param: (number | string | boolean)[]) {
	console.log(param);
}
func(2,3,5,4,46,6,4,6,76,4,3, "string", "string1", true);

... 문법의 다른 용도는 배열의 [] 괄호를 벗겨내는 것이다. react에서 copy하기 위해 많이 사용했을 것으로 생각된다.

 

 

destructuring

일반적으로 배열의 요소를 꺼내와서 변수로 만들어야 할 때는 다음과 같이 사용할 것이다.

let arr = [1,2];
// arr의 요소를 하나하나 변수화
let temp1 = arr[0];
let temp2 = arr[1];

굉장히 번거로운 이 작업을 하지 않을 수 있도록 해주는게 destructuring 문법이다.

이 문법은 왼쪽 오른쪽의 구조가 같을 때, 오른쪽에 있는 데이터를 왼쪽으로 바로 매핑해주는 기능을 제공한다.

또한, 함수의 파라미터로 선언했을 때도 동일한 기능을 제공해 매우 편하게 만들어준다.

// 배열의 인덱스를 안쓰고도 바로 빼낼 수 있음
var v23 = ['안녕', 100];
var [v24, v25] = v23;
console.log(v24);	// '안녕'
console.log(v25);	// 100

// object도 됨
// key는 동일한 이름이어야 함
var { nameis, age } = { nameis : "lee", age : 45 };
console.log(nameis);	// "lee"
console.log(age);		// 45

// 함수의 파라미터에 위 문법 적용
function func1([param1, param2, param3]: number[]) {
    console.log(param1);
    console.log(param2);
    console.log(param3);
}
func1([1,2,3]);


type Func2ParamType = {param1: string, param2: number, param3: boolean};
function func2({param1, param2, param3}: Func2ParamType) {
    console.log(param1);
    console.log(param2);
    console.log(param3);
}
func2({param1: "lee", param2: 23, param3: true});