디스트럭처링에 관한 모든 것

Destructuring은 ES2015/ES6에서 도입되었습니다. 객체/배열에서 다음 작업을 수행할 수 있습니다.

값 추출

기본값 제공

값을 추출하고 변수의 이름을 바꿉니다.

다음 데이터로 이동하여 6개의 예를 살펴보겠습니다. 모든 예제는 이 데이터를 기반으로 합니다.

const response = {
  msg: "success",
  tags: ["programming", "javascript", "computer"],
  body: {
    count: 5,
    data: ["File 1", "File 2"],
  },
};

기본 구문은 다음과 같습니다.

const { 
  destructuredKey: newNameForDestructuredKey = "defaultValue"
} = obj;

1 - 키 분해msg

const { msg } = response;

2 - javascript에서 두 번째 요소(즉, response.tags)를 구조화합니다.

const {
  tags: [, secondElement],
} = response;

3 - 키msg를 구조화하고 이름을 message로 바꿉니다.

const { msg: message } = response;

4 - 존재하지 않는 키를 기본값으로 구조화

const { searchString = "programming" } = response;

5 - count에서 중첩된 키response.body를 구조화합니다.

const {
  body: { count },
} = response;

여기에서 첫 번째 본문이 구조화 해제되고 나서 count가 다시 본문에서 구조화 해제됩니다.

함정 1 - body 키가 데이터에 존재하지 않는다면? count 가 body 이므로 undefined 구조를 분해하는 동안 오류가 발생합니다.
솔루션: - body에 기본값을 제공하십시오({}).

const { body: { count } = {} } = response;

함정 2 - 응답이 정의되지 않은 경우 어떻게 됩니까?

const { msg } = undefined; // error

슈퍼 간단,

const { msg } = response || {};

응답이 거짓이면(정의되지 않았거나 null) 빈 객체로 간주합니다.

6 - File 1에서 분해response.body.data

const {
  body: {
    data: [file1],
  },
} = response;

읽어주셔서 감사합니다 💙
매일 게시물을 보려면 @codedrops.tech를 팔로우하세요.
● ● Facebook

마이크로 러닝 ● 웹 개발 ● 자바스크립트 ● MERN 스택 ● 자바스크립트
codedrops.tech