Destructuring Assignment & Rest parameter(구조분해 할당 & 나머지 매개변수)
Destructuring Assignment (구조 분해 할당)
구조 분해 할당 구문은 배열이나 개개체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. * mdn 공식문서
let a, b, rest
[a, b] = [10, 20]
console.log(a)
// result => 10
console.log(b)
// result => 20
위 코드와 같이 배열에 요소를 해체하여 개별 변수에 할당할 수 있다.
let c, d, rest
[c, d, ...rest] = [10, 20, 30, 40, 50];
console.log(rest)
// result => [30, 40, 50]
위 코드는 개별에 변수에 할당하고 나머지 요소를 rest에 할당한 것이다.
배열 구조 분해
// 기본 변수 할당
let color = ["red", "yellow", "green"]
let [apple, banana, mellon] = color
console.log(apple) // result => "red"
console.log(banana) // result => "yellow"
console.log(mellon) // result => "green"
위 코드는 배열에 구조 분해에 가장 기본적인 배열에 원소를 각각 다른 변수에 할당 한 것이다.
// 기본값
let a, b
[a=5, b=7] = [1]
console.log(a)
console.log(b)
위와 같이 변수에 기본값을 할당하고 분해한 값이 undefined 일 때 기존에 할당하였던 기본값을 사용한다.
// 변수 값 교환
let a = 1;
let e = 3;
[a, e] = [e, a]
console.log(a) // result => 3
console.log(e) // result => 1
위 코드는 하나의 구조 분해 표현식만으로 두 변수의 값을 교환하는 것이다.
기존에는 두 변수의 값을 교환하려면 임시 변수를 사용해서 교환 하였는데 구조 분해 할당 구문을 이용하면 코드 길이가 짧아진다.
// 함수가 반환한 배열 분해
function f() {
return [1, 2];
}
let a, b;
[a, b] = f();
console.log(a) // result => 1
console.log(b) // result => 2
우리는 함수를 사용할때 배열을 사용하는 일이 많다. 위 코드는 함수가 반환한 배열을 분해 할당하는 코드 이다.
// 반환 값 무시
function f() {
return [1, 2, 3];
}
let [a, , b] = f();
console.log(a); // result => 1
console.log(b); // result => 3
위와 코드는 필요하지 않은 요소를 무시한 것이다.
function f() {
return [1, 2, 3];
}
[,,] = f()
위와 같이 반환값을 모두 무시할 수도 있다.
// 변수에 배열의 나머지 할당
let [a, ...b] = [1, 2, 3];
console.log(a); // result => 1
console.log(b); // result => [2, 3]
위는 값을 분해 할당하고 나머지 구문을 이용해 하나의 변수에 할당한 것이다.
나머지 요소의 오른쪽 뒤에 쉼표가 있으면 에러가 발생한다.
객체 구조 분해
// 기본 할당
let o = {p: 42, q: true};
let {p, q} = o;
console.log(p); // result => 42
console.log(q); // reuslt => true
위는 객체 구조 분해 할당에 기본이다.
// 선언 없는 할당
let a, b;
({a, b} = {a: 1, b: 2});
위와 같이 구조 분해를 통해 선언과 분리하여 값을 할당할 수 있다.
// 기본값
let {a = 10, b = 5} = {a: 3};
console.log(a); // result => 3
console.log(b); // result => 5
// 기본값 동시 할당
let {a: aa = 10, b: bb = 5} = {a: 3};
console.log(aa); // result => 3
console.log(bb); // result => 5
위는 해체된 값이 udefined인 경우 변수에 기본값을 할당할 수 있고,
새로운 변수명에 할당과 기본값 할당을 한번에 할수 있다.
객체 구조 분해 또한 위에 배열 구조 분해 할당과 마찬가지로 rest를 사용하여 나머지 요소를 분해 할당 할 수도 있다.
Rest parameter (나머지 매개변수)
나머지 매개변수 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있습니다. * mdn 공식문서
나머지 매개변수 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있습니다. * mdn 공식문서
나머지 매개변수는 함수의 마지막 매개변수 앞에 ' ... ' 를 붙여 나머지 매개변수로 설정할 수 있다.
function test(a, b, ...rest){
console.log(a, b); // reulst => 1 2
console.log(rest); // reulst => [3, 4, 5]
}
test(1, 2, 3, 4, 5);
나머지 매개변수는 함수의 매개변수로 쓰여서 뒤에 남는 요소들을 배열로 받아 준다.
any(...one, ...two, ...three) // wrong
any(...one, two, three) // wrong
any(ondem two, three) // not wrong
나머지 매개변수는 함수 정의에는 하나의 ' ... ' 만 존재 가능하고 마지막 매개변수여야 한다.
Author And Source
이 문제에 관하여(Destructuring Assignment & Rest parameter(구조분해 할당 & 나머지 매개변수)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@uiop5487/Destructuring-Assignment-Rest-parameter구조분해-할당-나머지-매개변수저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)