프로처럼 어레이 디스트럭처링 사용하기 😎

안녕하세요 여러분 👋,

이전 기사에서 예제를 통해 배웠습니다. 이번 글에서는 Array Destructuring을 효과적으로 사용하는 방법에 대해 공유하고자 합니다.

배열 파괴

배열 구조 분해는 배열에서 값을 압축 해제하고 변수에 기본값을 할당하고 쉼표를 사용하여 요소를 무시하는 데 도움이 됩니다.

예제를 통해 각 기능을 알아봅시다.

배열에서 값의 압축을 풉니다.

색상 코드 목록이 있는 배열이 있다고 가정합니다.

const colorsCode = ['r', 'g', 'b'];

3개의 변수를 만들고 여기에 값을 할당해야 합니다. 먼저 Array Destructuring 없이 수행하는 방법을 살펴보겠습니다.

const red = colorsCode[0]; // r
const green = colorsCode[1]; // g
const blue = colorsCode[2]; // b

이 코드는 완벽하며 예상대로 작동합니다. 그것을하는 데 4 줄이 걸렸습니다. 그러나 Array Destructuring을 사용하면 다음과 같이 한 줄에 작성할 수 있습니다.

const [red, green, blue] = colorsCode;

와우, 하지만 방금 무슨 일이 있었나요?

오른쪽 배열의 첫 번째 값( r )은 왼쪽 배열 선언의 첫 번째 변수( red )에 할당됩니다. 마찬가지로 나머지 값이 할당됩니다.



변수 순서는 배열의 값 위치와 일치해야 합니다. 할당하는 동안 변수의 순서를 변경하면 어떻게 되는지 봅시다.

const [red, blue, green] = colorsCode;
console.log(red); // r
console.log(blue); // g
console.log(green); // b

위의 예에서 왼쪽의 파란색과 녹색을 교체했습니다. 변수 순서를 변경함에 따라 g는 blue에 할당되고 b는 green에 할당됩니다. 따라서 오른쪽 배열 값에 따라 순서대로 변수 이름을 선언해야 합니다.

변수에 기본값 할당

배열이 비어 있거나 값을 사용할 수 없는 경우 변수에 기본값을 할당할 수 있습니다.

예 1:

const [red, green, blue] = []
console.log(red, green, blue); // prints undefined undefined undefined

// assign default value
const [red = 'r', green = 'g', blue = 'b'] = []
console.log(red, green, blue); // prints r g b

예 2:

const [red, green, blue] = ['r', 'g']
console.log(red, green, blue); // prints r g undefined

// assign default value for a single variable
const [red, green, blue = 'b'] = ['r' ,'g']
console.log(red, green, blue); // prints r g b

배열 요소 무시

,(commas) 를 사용하여 배열 분해로 요소를 무시할 수 있습니다.
red & blue 코드만 필요한 경우 구문에서 green를 선언할 필요가 없습니다.

const [red, blue, green] = ['r', 'g', 'b'];

사용하지 않는 변수blue를 만들지 않으려면 blue를 변수 할당을 건너뛰는 ,로 바꿉니다.

const [red, , green] = ['r', 'g', 'b'];

다음은 요소를 무시하는 또 다른 예입니다. 이렇게 하면 짝수에 대해서만 변수가 생성됩니다.

const [ ,second, ,fourth, ,sixth, ,eight] = [1, 2, 3, 4, 5, 6, 7, 8];

이렇게 하면 second , fourth , sixth & eight 와 같은 4개의 변수만 생성됩니다. 배열 순서에 따라 변수에 해당 값을 할당합니다.

객체 분해 + 배열 분해

Object & Array Destructuring을 시뮬레이션으로 사용하는 힘을 봅시다. (참고: 내 Object Destructuring 기사를 읽지 않았다면 먼저 읽어보십시오)

    const user = {
       firstName: 'John',
       lastName: 'Doe',
       phone: '9999999999',
       address: 'India',
       preferences: {
           mode: 'light', // light (or) dark mode
           autoSave: true,
           bookmarks: [ {name: 'bookmark 1', readCount: 10}, {name: 'bookmark 2'}]   
      }
  }

우리의 목표는 firstName , phone , address , 첫 번째 북마크name 및 두 번째 북마크readCount만 가져오는 것입니다. readCount 속성을 사용할 수 없는 경우 기본값0이 설정됩니다.

구조 분해 없이 코드는 다음과 같을 수 있습니다.

const firstName = user.firstName;
const phone = user.phone;
const address = user.address;
const firstBookmarkName = user.preferences.bookmarks[0].name;
const secondBookmarkReadCount = user.preferences.bookmarks[1]?.count || 0;
// prints John 9999999999 India bookmark 1 0
console.log(firstName, phone, address, firstBookmarkName, secondBookmarkReadCount); 

구조 분해를 사용하면 다음과 같이 단순화할 수 있습니다.

const {
  firstName,
  phone,
  address,
  preferences: {
    bookmarks: [
      { name: firstBookmarkName },
      { count: secondBookmarkReadCount = 0 },
    ],
  },
} = user

// prints John 9999999999 India bookmark 1 0
console.log(firstName, phone, address, firstBookmarkName, secondBookmarkReadCount); 

와우, 멋지지 않나요? 😍

모든 할당, 기본값, 별칭은 한 줄에 표시됩니다(포맷되지 않은 경우). 놀랍지 않나요?

첫 번째 책갈피에서 이름을 가져오는 논리를 설명하겠습니다.

첫 번째 책갈피의 이름을 얻으려면 먼저 Array Destructuring을 사용하여 Array에서 첫 번째 요소를 추출할 수 있습니다.

const { preferences: { bookmarks: [firstBookmark] } } = user; 
console.log(firstBookmark); // prints {name: 'bookmark 1', readCount: 10},

그런 다음 객체 구조 분해를 사용하여 속성name을 압축 해제할 수 있습니다. 또한 이에 대한 별칭 키를 설정합니다.

const { name: firstBookmarkName } = {name: 'bookmark 1', readCount: 10};

두 가지를 합치면 간단히 다음과 같이 쓸 수 있습니다.

const { preferences: { bookmarks: [{ name: firstBookmarkName }] } } = user; 

마찬가지로, readCount는 배열 분해를 먼저 사용한 다음 객체 분해를 적용하여 가져올 수 있습니다.

예이! Modern JavaScript로 단순화되고 훨씬 읽기 쉽습니다. Array & Object Destructuring 덕분입니다. 😍🎉

보너스:

문자열로도 배열 구조 분해를 수행할 수 있습니다.

 const [d, e, v] = 'DEV';
console.log(d, e, v); // D E V

제 글을 읽어주셔서 감사합니다. 내 기사가 마음에 들면 친구들과 공유하십시오!