[실전 자바스크립트] 객체와 배열의 요기능-비구조화destructuring
20116 단어 JavaScriptJavaScript
비구조화 문법 알아보기
배열이나 객체의 여러 속성값을 변수로 쉽게 꺼낼 수 있는 문법
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가 추가된다.
Author And Source
이 문제에 관하여([실전 자바스크립트] 객체와 배열의 요기능-비구조화destructuring), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@groovejumat/실전-자바스크립트-비구조화destructuring저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)