JavaScript의 구조 분해 기능

안녕하세요! 제 이름은 Jose이고 이것은 저의 첫 번째 DEV 게시물입니다! 저는 현재 Flatiron School의 소프트웨어 엔지니어링 학생, 즉 초보자입니다. 지금까지의 여정은 꽤 어려웠지만 보람 있고 솔직히 재미있었습니다!

아마도 당신도 초보자이고 한두 가지 요령을 익히고자 한다면 올바른 장소를 찾았을 것입니다! JavaScript를 계속 배우면서 좋아하는 것 중 하나는 더 간결한 코드로 목표를 달성하는 데 도움이 되는 멋진shorthand 기술을 접하게 되는 것입니다. 이 게시물에서는 내가 가장 좋아하는 것 중 하나인 디스트럭처링에 대해 이야기할 것입니다.

파괴란 무엇인가?

MDN은 구조 분해 할당을 다음과 같이 정의합니다.

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

몇 가지 예를 들어 살펴보겠습니다...

객체 파괴

당신은 이미 객체와 속성 값을 변수에 저장하는 방법에 익숙할 것입니다.

다음 예를 고려하십시오.

const employee = {
  firstName: "Peter",
  lastName: "Gibbons",
  jobTitle: "Programmer",
  programmingLanguage: "JavaScript"
};

const firstName = employee.firstName;
const lastName = employee.lastName;
const jobTitle = employee.jobTitle;
const programmingLanguage = employee.programmingLanguage;

console.log(firstName); //LOG: "Peter"
console.log(lastName); //LOG: "Gibbons"
console.log(jobTitle); //LOG: "Programmer"
console.log(programmingLanguage); //LOG: "JavaScript"

이것은 완벽하게 잘 작동하고 우리가 원하는 것을 달성하지만 그것은 많은 타이핑입니다... 점employee 표기법으로 . 개체를 사용하여 각 속성의 이름을 명시적으로 지정한 다음 그에 따라 변수를 선언해야 합니다.

하지만 더 좋은 방법이 있습니다. 더 간결하고 그냥.. 더 멋져 보이는 방법입니다.

const employee = {
  firstName: "Peter",
  lastName: "Gibbons",
  jobTitle: "Programmer",
  programmingLanguage: "JavaScript"
};


const { firstName, lastName, jobTitle, programmingLanguage } = employee;


console.log(firstName); //LOG: "Peter"
console.log(lastName); //LOG: "Gibbons"
console.log(jobTitle); //LOG: "Programmer"
console.log(programmingLanguage); //LOG: "JavaScript"

표현식의 왼쪽에는 중괄호{ }로 묶인 작업 중인 개체의 속성에 해당하는 변수가 포함되어 있습니다. 표현식의 오른쪽은 객체 자체입니다.




출처: https://www.educative.io/answers/what-is-object-destructuring-in-javascript

꽤 멋지지 않나요? 객체 속성에 각각 해당하는 여러 변수를 모두 한 줄의 코드로 정의할 수 있습니다.

이제 변수를 초기화하지 않고 미리 선언하려는 시나리오를 상상해 보십시오. let 또는 const 를 사용하지 않고 변수에 속성 ​​값을 할당하기 위해 분해 할당을 사용하려고 하면 어떻게 될까요?

let firstName;

const employee = {
  firstName: "Peter",
  lastName: "Gibbons",
  jobTitle: "Programmer",
  programmingLanguage: "JavaScript"
};

{ firstName } = employee;

console.log(firstName); //Uncaught SyntaxError: expected expression, got '='

let 및 const 키워드는 비구조화 할당에 필수적입니다. 둘 다 사용되지 않았기 때문에 JavaScript는 중괄호{ } 안에 있는 내용을 코드 블록으로 해석하려고 했습니다.

이 시나리오에서 올바른 구문은 구조 분해 표현식을 괄호로 묶는 것입니다( ).

({ firstName } = employee)

console.log(firstName) //LOG: "Peter"

별칭 만들기

이제 우리가 선택한 이름으로 일부 변수를 정의하려면 어떻게 해야 할까요? 다행스럽게도 다음과 같이 할 수 있습니다.

const employee = {
  firstName: "Peter",
  lastName: "Gibbons",
  jobTitle: "Programmer",
  programmingLanguage: "JavaScript"
};


const { jobTitle: title, programmingLanguage: language } = employee;


console.log(title); //LOG: "Programmer"
console.log(language); //LOG: "JavaScript"

보시다시피 구문은 { propertyName: alias }입니다.jobTitle 또는 programmingLanguage에 액세스하려고 하면 오류가 발생합니다.

console.log(jobTitle) //Uncaught ReferenceError: jobTitle is not defined

배열 구조 분해

배열에서도 구조 분해가 가능하며 배열에서 데이터를 훨씬 더 간단하게 추출할 수 있습니다.

다행스럽게도 객체를 사용한 구조 분해 할당과 달리 변수 이름이 각 항목의 이름과 일치할 필요가 없습니다.

const animals = ["dog", "cat", "bird"];
const [animal1, animal2, animal3] = animals;

console.log(animal1); //LOG: "dog"
console.log(animal2); //LOG: "cat"
console.log(animal3); //LOG: "bird"

배열 구조 분해 할당을 사용하면 변수를 배열 리터럴[ ]에 넣고 각 변수는 배열 요소의 정확한 위치에 매핑됩니다.

변수 수가 배열의 요소 수를 초과하면 마지막 변수는 단순히 undefined를 반환합니다.

const animals = ["dog", "cat", "bird"];
const [animal1, animal2, animal3, animal4] = animals;

console.log(animal4) //LOG: undefined

또한 객체 구조 분해와 달리 배열을 사용하면 할당을 괄호로 묶을 필요 없이 미리 변수를 선언하고 나중에 초기화할 수 있습니다.

let a, b, c;
const arr = [1, 2, 3];

[a, b, c] = arr

console.log(a) //LOG: 1
console.log(b) //LOG: 2
console.log(c) //LOG: 3

함수에서 반환된 배열로 작업하기

배열 반환 값으로 구조를 분해하면 구문이 더 간결해집니다.

function returnArray() {
   return [1, 2, 3];
}

let a, b, c;
[a, b, c] = returnArray();

console.log(a) //LOG: 1
console.log(b) //LOG: 2
console.log(c) //LOG: 3

나머지 매개변수

배열의 모든 요소에 대해 변수를 생성하는 대신 나머지 매개변수를 사용하면 무한한 수의 요소가 있는 배열로 작업할 수 있습니다. 구문은 spread operator 의 구문과 유사합니다. '남은' 요소는 다른 배열로 수집됩니다.

let a, b, rest;

[a, b, ...rest] = [10, 20, 30, 40, 50]

console.log(a) //LOG: 10
console.log(b) //LOG: 20
console.log(rest) //LOG: Array [30, 40, 50]

당신은 그것을 가지고 있습니다. 계속해서 다음 프로젝트에서 사용하십시오. 코드를 더 간결하게 만들고 삶을 더 쉽게 만드십시오!