ES6 구조 분해 함수 매개변수에서 루트 객체 이름 지정

ES6는 객체와 배열의 속성을 변수로 추출하는 간결한 방법으로 구조 분해를 제공합니다. 그러나 함수 인수를 분해할 때 루트 개체의 이름을 유지하는 것이 어려울 수 있습니다.

ES5 상속 메타포

ES5에서는 전체 옵션 개체를 전달할 수 있습니다. 상속 체인을 상위 클래스로 "위로" 이동하여 모든 매개변수에 액세스할 수 있도록 합니다:

// ES5:
var setupParentClass5 = function(options) {
    textEditor.setup(options.rows, options.columns);
};

var setupChildClass5 = function(options) {
    rangeSlider.setup(options.minVal, options.maxVal);
    setupParentClass5(options); // pass the options object UP
};

ES6 구조 분해

ES6 구조 분해를 사용하면 특정 매개변수 추출이 더욱 편리해집니다.

// ES6:
var setupParentClass6 = ({rows, columns}) => {
    textEditor.setup(rows, columns);
};

var setupChildClass6 = ({minVal, maxVal}) => {
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6( /* ??? */ );  // how to pass the root options object?
};

옵션: 개별 추출 또는 루트 객체 전달

한 가지 옵션은 setupChildClass6()에서 각 옵션을 개별적으로 추출한 다음 setupParentClass6()에 전달하는 것입니다. 그러나 이 접근 방식은 많은 매개변수를 사용하여 장황해질 수 있습니다:

// ugh.
var setupChildClass6b = ({minVal, maxVal, rows, columns}) => {
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6({rows, columns});
};

임시 변수 사용

보다 간결한 해결책은 임시 변수를 사용하여 루트 옵션 객체를 setupParentClass6()에 전달하기 전에 유지하는 것입니다:

const setupChildClass6 = options => {
    const {minVal, maxVal} = options;
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6(options);
};

이 메소드를 사용하면 setupChildClass6()에 필요한 특정 매개변수의 구조를 해제하는 동시에 전체 옵션 객체를 setupParentClass6()에 전달할 수 있습니다.