[실전 자바스크립트] 객체와 배열의 요기능-비구조화destructuring

비구조화 문법 알아보기

배열이나 객체의 여러 속성값을 변수로 쉽게 꺼낼 수 있는 문법

const arr = [1, 2];
const [a, b] = arr; //다음과 같이 사용하는 형태를 비구조화 문법이라고 한다.
//a 와 b의 변수를 만들고 이를 하나씩 넣어준다.
console.log(a);
console.log(b);

let a, b;
[a, b] = [1, 2]; //비구조화 문법에 이런식으로 변수할당이 가능하다.

const arr = [1];
const [a = 10, b = 20] = arr; // a에 변수가 재할당이 된다.
console.log({ a, b });

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log({ a, b });

//비구조화를 통한 변수 할당시에 건너뛰고 할당을 할 수도 있다.
const arr = [1, 2, 3];
const [a, , c] = arr; //쉼표를 사용하였기 때문에 한칸을 건너 뛰고 사용하게 될 것이다.
console.log({ a, c });

배열에서는 순서가 중요했지만 객체 비구조화에서는 순서가 중요치않다

const obj = { age: 21, name: 'mike'};
const { age, name } = obj;
const { name, age } = obj;
const { a, b } = obj; // 존재하지 않고 있는 property를 제시하면, 각각 undefined가 나타나게 된다.

원래 속성과는 다른 이름으로 변수할당하기

const obj = { age: 21, name: 'mike' };
const { age: theAge, name } = obj;
console.log(theAge); // 출력
console.log(age); // 에러 발생

객체 비구조화에서의 기본값 정의

const obj = { age: undefined, name: null, grade: 'A' }; //원래 값이 undefined인 경우에만 기본값이 할당됩니다.
const { age = 0, name = 'noName', grade = 'F' } = obj; // 비구조화 작업에서는 age에만 할당이 될 예정이다.(null인 경우에는 할당이 안된다.)
console.log({ age, name, grade });

//속성값 이름을 정의하면서 동시에 기본값을 정의하는 것도 가능합니다.
const obj = { age: undefined, name: 'mike' };
const age = { age: theAge = 0, name } = obj; //속성값의 이름을 정의하면서, 기본값을 정의하는 것 또한 가능하다.

기본값으로 함수의 반환값을 넣을 수 있다

function getDefaultAge() {
	console.log('hello')
 	return 0;
}
const obj = { age: 21, grade: 'A' };
const { age = getDefaultAge(), grade } = obj; //기본값이 사용되어지는 경우에만 getDefaultAge()함수가 호출되어진다. (age가 undefined가 아니기에 호출이 되어지지 않을 것이다.)
console.log(age);

객체비구조화에서 ...사용하기

const obj = { grade: 21, name: 'mike', grade: 'A' };
const { age, ...rest } = obj;
console.log(rest); //...rest는 명시하지 않은 두 속성을 가지고 있는 객체가 된다.

//for문에서의 객체 비구조화 사용하기
const people = [
  { age: 21, name: 'mike' },
  { age: 51, name: 'sara' },
]

for (const { age, name } of people) { //비구조화 문법을 통해서 객체들을 출력할 수 있다.
	//... age, name을 바로 사용할 수 있다.
}

추가적으로 비구조화 안에 비구조화와 같은 중첩이 가능하다

비구조화의 문법에서 기본값의 정의는 변수로만 한정되어지지 않는다.

const [{ prop: x } = { prop: 123 }] = [];
console.log(x); //item이 없기 때문에 기본값이 할당되어 질 것이다. : 123
const [{ prop: x } = { prop: 123 }] = [{}];
console.log(x); //{}아이템이 하나가 있기 때문에 기본값이 사용되어지지 않을 것이다. 하지만 'prop'에 대한 속성값이 없기 때문에 undefined가 할당이 되어진다.

객체 비구조화에서도 계산된 속성명을 사용하는 것이 가능하다

const index = 1;
//계산되어진 별칭을 사용해야 하는 경우에는 아래의 valueOfIndex와 같이 별칭을 활용해 주어야 한다.
const { [`key${index}`]: valueOfTheIndex } = { key1: 123};
console.log(valueOfIndex);

별칭을 사용시에 단순변수명만을 입력할 수 있는 것은 아니다.

const obj = {};
const arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
console.log(obj); //obj객체에 foo prop이 추가된다.
console.log(arr); //arr객체에 true가 추가된다.