구조분해할당(destructuring assignment), 전개연산자, toObject(배열을 객체로 전환)
배열 분해 하기
let [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20배열[10,20]이 분해 되어 각각 a와 b에 할당됨
let array = [1, 2, 3];
let [a, b, c] = array;
console.log(a, b, c); // 1 2 3array의 [1, 2, 3]을 선언후, 배열 [a, b, c]에 각각 할당함
만약 배열의 첫 번째 요소를 가져와서 변수에 담고 싶을 때,
const array = [1, 2, 3];
const first = array[0];
console.log(first); // 1배열의 0번째를 변수에 할당하는것이 가장 보편적이다.
const array = [1, 2, 3];
const [first] = array;
console.log(first); // 1그러나 이와 같이 대괄호에 아무 변수 이름만 담으면 배열의 가장 첫번째 요소가 담긴다.
const array = [1, 2, 3];
const [first, second] = array;
console.log(first, second); // 1 2또한 배열의 첫번째와 두번째 요소를 각각 변수에 담고 싶을 경우, 구조분해 할당을 사용하면 간소화 할 수 있다.
객체에서의 구조 분해 할당
- 객체에서의 구조 분해 할당은 아주아주 많이 쓰이는 문법
const a={id:"홍길동", pw:"111", address:"호탄동"};
const {id, pw, address} = a;
console.log(id); // 홍길동
console.log(pw); // 111
console.log(address); // 호탄동- a 내부의 id, pw, address 프로퍼티들을 각각 프로퍼티명과 이름이 동일한 변수들에 알아서 분해하여 할당해줌.
함수에서의 구조분해 할당
function a([v1, v2, v3]){
console.log(v1);
console.log(v2);
console.log(v3);
}
a([10,20,30])- a함수의 매개변수에 v1, v2, v3의 값에 10, 20, 30이 알아서 구조분해 할당되어 들어간다.
function a({b, c}){
console.log(b);
console.log(c);
}
a({b:10, c:20})전개 연산자(Spread Operator)
- 객체나 배열의 값을 하나하나 넘기는 용도로 사용할 수 있다.
- 점 세개(...) 를 붙여서 사용한다.
const fruits=['Apple', 'Banana', 'Cherry', 'Orange']
console.log(fruits)
console.log(...fruits)- 배열을 console.log로 출력해보면 배열의 형태로 콘솔창에 나타난다.
- 전개 연산자를 쓰는경우에는 배열로 나타나지 않고 각각의 객체로 출력된다
전개연산자를 이용한 배열 내용 조합
- 배열앞에 ...이 오는경우 배열이 없어진다. 라고 생각하면 편하다 → 배열을 풀어서 리턴
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = [...arr1, ...arr2, ...arr3];
console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]- 전개 연산자를 사용해서 2차원 배열에 전개연산된 배열을 넣으면 1차원 배열의 형태로 배열이 조합된다.
toObject : 배열을 객체로 변환
- toObject의 매개변수와 메서드의 리턴값과 구조분해 해서 key와 value로 이루어진 객체로 리턴해준다.
function toObejct(a,b,...c){
return {a,b, array:c}
}
console.log(toObejct(10,20,30,40))- 매개변수로 들어간 (10, 20, 30, 40)을 구조분해 해서 a,b,c값과 매칭시켜준다.
- c는 전개연산자를 사용해서 a와b를 제외한 나머지 인수들을 array형태로 받아들인다.
반응형