JavaScript: 함수 매개변수에 구조 분해 할당 사용

ES6에는 구조 분해 할당을 활용할 수 있는 기능이 있습니다. 문법에 익숙하지 않은 사람들에게는 조금 이상하게 보일 수 있습니다. 작동 방식을 이해하면 거의 모든 곳에서 사용하고 싶을 것입니다.

구조 분해 할당에 대한 빠른 입문서

객체를 사용한 구조 해제 할당은 JavaScript 객체를 가져오는 방법일 뿐입니다.

const myFoods = {a: 'apple', b: 'banana', c: 'carrot', d: 'donut'}

그리고 원하는 매개변수를 자체 변수로 가져옵니다.

const { a, b, c, d} = myFoods

변수가 있는지 확실하지 않은 경우 기본값을 쉽게 제공할 수 있습니다.

const {a = 'apple didn't exist', b, c, d} = myFoods

변수 중 하나의 이름을 바꾸려면 다음과 같이 할 수 있습니다.

// we renamed a to be apple 
const {a: apple, b, c, d} = myFoods

a 및 b 없이 과일( c 및 d 만 원하는 경우 다음을 수행하여 과일을 선택하고 임의의 음식을 그룹화할 수 있습니다.

// you will often see "...rest" used as a convention 
const {a, b, ...otherFoods} = myFoods  
const carrotAndDonut = {...otherFoods} 

console.log(carrotAndDonut) // prints out {c: 'carrot', d: 'donut'}

그리고 그게 전부입니다!

이것이 함수 매개변수를 대체하는 방법

다음과 같은 기능이 있다고 가정해 보겠습니다.

function printFruits(apple, banana) {
    console.log(`we should have an ${apple} and ${banana}`)
}

좋습니다. 사과와 바나나가 필요합니다. 입문서에서 설명한 것과 동일한 객체를 사용한다고 가정해 보겠습니다.

const myFoods = {a: 'apple', b: 'banana', c: 'carrot', d: 'donut'}

다음과 같이 printFruits를 사용할 수 있습니다.

// a corresponds to apple, b corresponds to banana
printFruits(myFoods.a, myFoods.b)

하지만 여기에 몇 가지 문제가 있습니다

첫째, 매개변수의 순서가 중요합니다. 다음은 매우 쉽게 발생할 수 있으며 버그를 추적하기 어렵게 만듭니다.

// an innocent swap of variables can rain hell on our software
printFruits(myFoods.b, myFoods.a)

또한 우리가 printFruits가 기대하는 과일을 추출하고 다른 모든 것을 버릴만큼 똑똑하기를 원한다면 어떻게 될까요? ES6에서 ...rest 구문을 사용하여 다음을 수행할 수 있습니다(예, 함수 매개변수에도 적용됨).

function printFruits(apple, banana, ...otherFruits) {
    console.log(`we should have an ${apple} and ${banana}`)
}

그러나 이제 우리는 사용하지 않는 변수를 갖게 되었습니다.

좋아요, 문제없습니다. 아래와 같이 전체 객체를 전달했다면 어떻게 될까요?

function printFruits(myFoods) {
    console.log(`we should have an ${myFoods.a} and ${myFoods.b}`)
}

printFruits(myFoods)

그게 좀 낫습니다. 위의 문제를 해결하지만 기능 서명의 명확성을 잃음으로써 새로운 문제를 소개합니다. 이전에는 사과와 바나나를 전달해야 한다는 것을 즉시 알았습니다. 이제 실제로 함수 정의를 살펴보고 myFoods 에서 무엇을 얻으려고 하는지 확인해야 합니다. 함수가 100줄에 걸쳐 있으면 그렇게 재미가 없습니다.

이것은 구조 분해 할당이 실제로 빛나는 곳입니다. 다음은 구조 분해 할당을 사용하는 printFruits의 모습입니다.

function printFruits(myFoods) {
    const {a, b} = myFoods
    console.log(`we should have an ${a} and ${b}`)
}

printFruits(myFoods)

한 단계 더 나아가 실제로 함수의 매개변수에서 바로 구조 분해 할당을 사용할 수 있습니다.

function printFruits({a, b}) {
    console.log(`we should have an ${a} and ${b}`)
}

printFruits(myFoods)

그리고 (의도적으로 모호한) 매개변수 이름이 마음에 들지 않으면 언제든지 이름을 바꿀 수 있습니다!

function printFruits({a: apple, b: banana}) {
    console.log(`we should have an ${apple} and ${banana}`)
}

printFruits(myFoods)

존재하지 않는 변수를 꺼내려고 하면 기본값을 제공합니다.

function printFruits({a: apple = 'default apple', b: banana = 'default banana'}) {
    console.log(`we should have an ${apple} and ${banana}`)
}

printFruits(myFoods)

Flow나 TypeScript를 사용하고 있다면 누가 신경을 쓰겠습니까?

공정하지만 이 방법을 사용하면(말장난이 아님) 여전히 매개변수의 순서에 대해 걱정하지 않아도 됩니다. TypeScript에서도 두 개의 매개변수가 모두 문자열인 경우 시스템이 이를 잡아줄 것이라고 믿었기 때문에 실수로 두 매개변수를 교환하여 Flow/TypeScript가 아닌 사용자보다 더 나쁜 위치에 놓일 수 있습니다.

즉, 이것은 주로 코드에서 좀 더 안전을 원하는 바닐라 JS 사람들을 위한 것입니다. 개발자로서 접하는 모든 프로젝트가 Flow 또는 TypeScript를 사용하는 것은 아니므로 유형 시스템이 실사를 수행하는 것을 방해해서는 안 됩니다.

마지막 생각들

이것이 JavaScript의 구조 분해 할당에 대한 실질적인 이점을 조명하는 데 도움이 되기를 바랍니다. 더 많은 응용 프로그램이 있지만 이것은 가장 일반적인 응용 프로그램 중 하나입니다. 의견 섹션에서 귀하의 생각을 알려주십시오!