구조 분해 할당 다시 소개

JavaScript를 작성한다면 ES2015 및 도입된 모든 새로운 언어 표준에 익숙할 것입니다. 엄청난 인기를 얻은 표준 중 하나는 구조 분해 할당입니다. 배열 또는 객체에 "다이빙"하고 그 안의 무언가를 보다 직접적으로 참조하는 기능. 보통 이런 식으로 진행됩니다.

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

그러나 구조 분해 할당은 매우 강력한 구문으로, 처음 릴리스된 이후로 이를 사용해 온 많은 개발자가 할 수 있는 작업 중 일부를 잊어버립니다. 이 게시물에서 우리는 객체 및 배열 구조화(때로는 둘 다)에 대한 5가지 실제 사례를 살펴볼 것입니다! 그리고 단지 재미를 위해, 나는 바로 전날에 만났던 이상한 예를 포함할 것입니다.

1. 내포된 구조 분해

객체 내부의 최상위 키 또는 배열의 첫 번째 요소에 액세스할 수 있다는 것은 강력하지만 다소 제한적이기도 합니다. 한 수준의 복잡성만 제거하고 우리가 실제로 추구하는 것에 액세스하기 위해 일련의 점 또는 [0] 참조로 끝납니다.

결과적으로 구조 분해는 최상위 수준 이상으로 작동할 수 있습니다. 그리고 그렇게 하는 타당한 이유가 있을 수 있습니다. HTTP 요청의 객체 응답에 대한 이 예를 살펴보겠습니다. 우리는 데이터 객체를 넘어서 사용자에게만 접근하기를 원합니다. 찾고 있는 키를 알고 있는 한 문제가 되지 않습니다.

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

중첩된 배열에서도 동일한 작업을 수행할 수 있습니다. 이 경우 키가 없기 때문에 알 필요가 없습니다. 당신이 알아야 할 것은 당신이 찾고 있는 것의 위치입니다. 찾고 있는 요소까지 각 요소에 대한 참조 변수(또는 쉼표 자리 표시자)를 제공해야 합니다(나중에 설명하겠습니다). 변수는 배열 내부의 값과 일치하려고 시도하지 않으므로 아무 이름이나 지정할 수 있습니다.

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

이러한 기능은 다른 도구와 마찬가지로 신중하게 사용해야 합니다. 사용 사례와 코드 기반의 대상을 인식합니다. 가독성과 변경 용이성을 고려하십시오. 예를 들어, 하위 배열에만 액세스하려는 경우 맵이 더 적합할 수 있습니다.

2. 객체 및 배열 구조 분해

객체와 배열은 일반적인 데이터 구조입니다. 사실 너무 흔해서 하나가 다른 하나 안에 나타나는 경우가 많습니다. 중첩된 구조 해제 외에도 우리가 액세스하는 외부 데이터 구조와 다른 유형의 데이터 구조에 있는 경우에도 중첩 속성에 액세스할 수 있습니다.

객체 내부의 배열에 대한 이 예를 살펴보십시오.

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

반대의 경우도 유효합니다. 개체의 배열입니다.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

결과적으로 이 예제에는 약간의 문제가 있습니다. 우리는 첫 번째 사용자의 이름에만 액세스할 수 있습니다. 그렇지 않으면 '이름'을 사용하여 잘못된 두 개의 다른 문자열을 참조하려고 시도합니다. 우리의 다음 분해 시나리오는 이것을 해결해야 합니다.

3. 별칭

위의 예에서 보았듯이(끌어내고자 하는 다른 객체 내부에 반복되는 키가 있는 경우) "일반적인" 방식으로는 그렇게 할 수 없습니다. 변수 이름은 동일한 범위 내에서 반복될 수 없습니다.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

앨리어싱은 개체에만 적용할 수 있습니다. 배열은 기존 개체 키와 일치하지 않고 개발자가 선택한 모든 변수 이름을 사용할 수 있기 때문입니다.

4. 기본값

Destructuring은 종종 참조하는 값이 거기에 있다고 가정하지만, 그렇지 않으면 어떻게 될까요? 정의되지 않은 값으로 코드를 흩뜨리는 것은 결코 유쾌하지 않습니다. 그럴 때 기본값이 유용합니다.

객체에 대해 어떻게 작동하는지 살펴보겠습니다.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

참조된 키에 이미 값이 있는 경우 기본값은 무시됩니다. 키가 개체에 없으면 기본값이 사용됩니다.

배열에 대해서도 비슷한 작업을 수행할 수 있습니다.

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

개체 예제와 마찬가지로 값이 존재하면 기본값이 무시됩니다. 위의 예를 보면 배열에 존재하는 것보다 더 많은 요소를 구조화하고 있음을 알 수 있습니다. 더 적은 수의 요소를 분해하는 것은 어떻습니까?

5. 값 무시

Destructuring의 가장 좋은 점 중 하나는 더 큰 데이터 구조의 일부인 값에 액세스할 수 있다는 것입니다. 여기에는 원하는 경우 해당 값을 격리하고 나머지 콘텐츠를 무시하는 것이 포함됩니다.

우리는 실제로 이것의 예를 더 일찍 보았지만 우리가 말하는 개념을 분리해 봅시다.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

이 예에서 우리는 organization 을 구조화하지 않으며 완벽하게 괜찮습니다. user 개체 내에서 여전히 참조용으로 사용할 수 있습니다.

 user.organization

배열의 경우 실제로 요소를 "무시"하는 두 가지 방법이 있습니다. 개체 예제에서는 연결된 키 이름을 사용하여 내부 값을 구체적으로 참조하고 있습니다. 배열이 비구조화되면 변수 이름은 위치별로 할당됩니다. 배열 끝에 있는 요소를 무시하는 것으로 시작하겠습니다.

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

배열의 첫 번째 및 두 번째 요소를 구조화하고 나머지는 관련이 없습니다. 그러나 이후 요소는 어떻습니까? 위치 기반인 경우 원하는 항목에 도달할 때까지 각 요소를 구조화해야 하지 않습니까?

결과적으로 우리는 그렇지 않습니다. 대신 쉼표를 사용하여 해당 요소의 존재를 암시하지만 참조 변수가 없으면 무시됩니다.

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

그리고 동시에 둘 다 할 수 있습니다. 쉼표 자리 표시자를 사용하여 원하는 위치에서 요소를 건너뜁니다. 그리고 다시, 개체 예제와 마찬가지로 "무시된" 요소는 여전히 roleCounts 배열 내에서 참조할 수 있습니다.

이상한 예

Destructuring의 강력함과 다재다능함은 또한 진정으로 기이한 일을 할 수 있음을 의미합니다. 그들이 편리하게 올 것인지 아닌지는 말하기 어렵지만 그것이 옵션이라는 것을 아는 가치가 있습니다!

그러한 예 중 하나는 구조 제거를 사용하여 얕은 복사본을 만들 수 있다는 것입니다.

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

Destructuring이 사용될 수 있는 또 다른 것은 역참조입니다.

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

항상 그렇듯이 가독성이 가장 중요하며 이러한 모든 예는 법적으로 사용해야 합니다. 그러나 모든 옵션을 알고 있으면 최상의 옵션을 선택하는 데 도움이 됩니다.

결론

JavaScript는 복잡한 객체와 배열로 가득 차 있습니다. HTTP 요청의 응답이든, 정적 데이터 세트이든 상관없이 포함된 콘텐츠에 효율적으로 액세스할 수 있는 것이 중요합니다. Destructuring 할당을 사용하는 것은 그렇게 하는 좋은 방법입니다. 여러 수준의 중첩을 처리할 뿐만 아니라 집중 액세스를 허용하고 정의되지 않은 참조의 경우 기본값을 제공합니다.

몇 년 동안 Destructuring을 사용해 왔다고 해도 사양에 너무 많은 세부 사항이 숨겨져 있습니다. 이 기사가 언어가 제공하는 도구를 상기시키는 역할을 하기를 바랍니다. 다음에 코드를 작성할 때 그 중 하나가 유용할 것입니다!