객체 디스트럭처링 (구조 분해 할당)
MDN은 디스트럭처링(destructuring)을 다음과 같이 정의한다.
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
const person = {
first: "fibo",
last: "nacci",
};
const { first, last } = person;
console.log(first + last); //fibonacci디스트럭처링을 사용하여 person이 가진 속성에 접근하고 해당속성의 이름으로 변수선언이 가능한 모습을 볼 수 있다.
cconst person = {
first: "fibo",
last: "nacci",
profile: {
link: {
velog: "https://velog.io",
},
},
};
const { velog } = person.profile.link;
console.log(velog); //https://velog.io
const { velog: vg } = person.profile.link;
console.log(vg); // https://velog.io중첩된 객체 형태로 데이터가 주어진 경우에도 이런식으로 디스트럭처링을 할 수 있다.
velog를 대상으로 지정하고 vg라는 이름으로 const 변수를 만들 수 도 있다.
배열의 디스트럭처링
배열을 디스트럭처링 할떄는 {}가 아닌 []을 사용한다.
const plane = ["Boeing", "747", "-8i"];
const [company, type, sub_type] = plane;
console.log(company + type + sub_type); //Boeing747-8i배열을 디스트럭처링 할때는 이런식으로 하면된다.
const plane = ["Boeing", "747", "-8i"];
const [company, type] = plane;
console.log(company + type); //Boeing747만약 생성하려는 변수의 수가 배열의 원소보다 적다면 그냥 뺴면 알아서 할당하지 않는다.
코드를 입력하세요
const [first, second, ...other] = plane
console.log(first + second + other); //B747B737B787,B767,B777나머지값을 모두 얻고싶을땐 레스트 연산자를 이용해서 한번에 할당 받는다.
...이 레스트 연산자를 의미한다.
first와 second에만 직접 값을 할당받고 나머지는 other에 입력받는다.
나머지값을 받는다고 해서 레스트 연산자라고 불린다고 한다.
디스트럭처링을 통한 스왑
let first = "fibo";
let second = "nacci";
[first, second] = [second, first];
console.log(first, second); // nacci fibo이런식으로 간단하게 값을 바꿀 수 있다.
쩌는듯
루프
for of loop
배열에 대한 반복
const planes = ['b737', 'b747', 'b757'];
for (const plane of planes) {
console.log(plane); // b737 b747 b757
}ES6에서 새로 도입된 for of 루프이다.
객체에 대한 반복
객체는 이터러블이 아니다. 그러면 반복을 어떻게 구현할 수 있을까?
먼저 이터러블은 자료를 반복할 수 있는 객체를 뜻한다.
MDN에서는 iterable을 다음과 같이 이야기한다.
String, Array, TypedArray, Map and Set 는 모두 내장 iterable이다. 이 객체들의 프로토타입 객체들은 모두 @@iterator 메소드를 가지고 있기 때문이다.
문자열 배열은 iterable 이라고한다.
하지만 객체는 이터러블이 아니다.
그래서 객체의 key-value쌍은 반복을 어떻게 구현할까?
Object.keys()를 사용하여 객체의 모든 키를 가져온 다음에 키에 대한 반복을 수행 하면서 값에 접근하는게 가능하다고 한다.
const planes = {
company: "airbus",
type: "330",
sub_type: "-300",
};
for (const prop of Object.keys(planes)) {
const value = planes[prop];
console.log(prop, value); //company airbus type 330 sub_type -300
}간단한 코드를 보면서 이해하면 더 쉬울것 같다.
새로운 ES6 함수인 Object.entries()를 사용하여 객체의 모든 key-value를 가져온후 key-value에 대해 반복을 수행할수도 있다고한다.
for in loop
for in loop는 순서 없이 객체의 모든 열거 가능한 속성을 반복하기 때문에
for of loop와는 살짝 다르다고 한다.
열거 가능한 속성이란 무엇일까.
'Enumerable properties'(열거 가능한 속성)는 내부 열거 형 플래그가 true로 설정된 property로, 이는 간단한 할당 또는 property initializer (Object.defineProperty를 통해 정의 된 특성 및 이러한 기본 열거 형을 false로 정의한 특성)를 통해 작성된 property의 기본값입니다.
MDN 공식문서에서는 이렇다고 한다. 무슨말인지 모르겠다.
가장 중요한건 이해하려는것보다 익숙해지는거라고 했다. 일단 예시 코드를 보자.
const planes = {
company: "airbus",
type: "330",
sub_type: "-300",
};
for (const prop in planes) {
console.log(prop, planes[prop]); //company airbus type 330 sub_type -300
}열거가능한속성을 반복하기 때문에 객체의 속성을 추가 수정 삭제하지 않는것이 좋다.
for of와 for in의 차이점
let list = [4, 5, 6];
for (let i in list) {
console.log(i); // 0 1 2
}
for (let i of list) {
console.log(i); // 4 5 6
}for in은 인덱스를 반환하는 반면
for of는 값을 반환하는 모습을 볼 수 있다.
