ECMAScript 6 쉬운 데이터 액세스를 위한 Destructuring

쉬운 데이터 액세스를 위한 Destructuring

객체와 Array 리터럴은 JavaScript에서 가장 많이 사용되는 표기법중 두가지이며, 널리 사용되는 JSON 데이터 형식 덕분에 특히 중요한 부분이되었습니다. 객체와 Array를 정의한 다음 해당 구조에서 관련 정보를 체계적으로 추출하는 것이 일반적인 사용법입니다. ECMAScript 6은 데이터 구조를 더작은 부분으로 나누는 과정인 Destructuring을 추가하여 이 작업을 단순화했습니다. 이 장에서는 객체와 Array 모두에 대해 Destructuring을 이용하는 방법을 설명합니다.

왜 Destructuring이 유용할까요?

ECMAScript 5 및 이전 버전에서는 객체 및Array의 정보를 가져와서 로컬 변수에 대입할 때 코드가 많이 생길 수 있었습니다.

let options = {
        repeat: true,
        save: false
    };

// 객체에서 데이터를 추출합니다.
let repeat = options.repeat,
    save = options.save;

위 코드는 options 객체에서 repeat와 save의 값을 추출하여 같은 이름의 로컬 변수에 저장합니다. 위 코드는 단순하지만, 만약 할당할 변수가 많은 경우를 생각해보십시오. 그들 모두를 하나씩 할당해야할 것입니다. 정보를 찾기 위해 순회하는 중첩된 데이터 구조가 있는 경우 전체 구조를 파헤쳐 한조각의 데이터를 찾아야할 수도 있습니다.

그래서 ECMAScript 6는 객체와 Array 모두에 Destructuring을 추가 했습니다. 데이터 구조를 작은 부분으로 나누면 필요한 정보를 얻는 것이 훨씬 쉬워집니다. 많은 언어들이 최소한의 문법으로 Destructuring를 구현하여 프로세스를 더 간단하게 사용합니다. ECMAScript 6의 구현은 실제로 익숙한 구문을 사용합니다(객체 및 Array 리터럴 구문).

객체 Destructuring

객체 Destructuring 문법은 할당 연산의 왼쪽에 객체 리터럴을 사용합니다.

let node = {
        type: "Identifier",
        name: "foo"
    };

let { type, name } = node;

console.log(type);      // "Identifier"
console.log(name);      // "foo"

이 코드에서 node.type의 값은 type이라는 변수에 저장되고 node.name의 값은 name이라는 변수에 저장됩니다. 이 문법은 4 장에서 소개된 객체 리터럴 프로퍼티 초기화와 동일합니다. 변수 type과 name은 지역 변수이며 node 객체에서 값을 읽어올 프로퍼티들입니다.

초기화를 잊지마세요.

Destructuring 을 사용하여 var, let 또는 const를 사용하여 변수를 선언할 때 초기화값(등호 뒤에 오는 값)를 제공해야합니다. 다음 코드는 모두 초기화 프로그램이 없어서 구문 오류를 발생시킵니다.

// syntax error!
var { type, name };

// syntax error!
let { type, name };

// syntax error!
const { type, name };

const는 Nondestructured 변수를 사용하는 경우에도 항상 초기화가 필요하고, var와 let은 Destructuring 을 사용할 때만 초기화가 필요합니다.

Destructuring 할당

지금까지 객체의 Destructuring 예제는 변수 선언을 사용했습니다. 그러나 할당에서 Destructuring을 사용할 수도 있습니다. 예를 들어, 다음과 같이 정의된 변수 값을 변경하기로 결정할 수 있습니다.

let node = {
        type: "Identifier",
        name: "foo"
    },
    type = "Literal",
    name = 5;

// destructuring 사용하여 다른 값 할당
({ type, name } = node);

console.log(type);      // "Identifier"
console.log(name);      // "foo"

이 예제에서 type과 name은 선언될 때 초기화 되고, 같은 이름의 서로 다른 변수는 각각 다른 값으로 초기화됩니다. 다음 줄은 Destructuring 할당을 사용하여 node 객체의 값을 변경합니다. Destructuring 할당문에 괄호를 써야하는 것을 잊지 마세요. 여는 중괄호는 블록문이어야하고 블록문은 할당의 왼쪽에 나타날 수 없기 때문입니다. 괄호는 다음 중괄호가 블록문이 아니며 표현식으로 해석 되어야하며 할당이 완료될 수 있음을 나타냅니다.

Destructuring 할당 표현식은 표현식의 오른쪽 (= 뒤)으로 평가됩니다. 즉, 값이 예상되는 모든 위치에서 Destructuring 할당 표현식을 사용할 수 있습니다. 예를 들어, 함수에 값을 전달하는 경우

let node = {
        type: "Identifier",
        name: "foo"
    },
    type = "Literal",
    name = 5;

function outputInfo(value) {
    console.log(value === node);        // true
}

outputInfo({ type, name } = node);

console.log(type);      // "Identifier"
console.log(name);      // "foo"

outputInfo() 함수는 Destructuring 할당 표현식으로 호출됩니다. 표현식은 표현식에서 오른쪽 값이기 때문에 node로 평가됩니다. type과 name에 대한 할당은 정상적으로 동작하고 node는 outputInfo()에 전달됩니다.

Destructuring 할당 표현식 (= 뒤의 표현식)의 오른쪽이 null 또는 undefined로 평가되면 에러가 발생합니다. 이는 null 또는 undefined 속성을 읽으려고 하면 런타임 오류가 발생하기 때문입니다.

Default 값

Destructuring 할당 문을 사용할 때, 객체에 존재하지 않는 프로퍼티 이름을 가진 지역 변수를 지정하면, 그 지역 변수는 undefined의 값이 할당됩니다.

let node = {
        type: "Identifier",
        name: "foo"
    };

let { type, name, value } = node;

console.log(type);      // "Identifier"
console.log(name);      // "foo"
console.log(value);     // undefined

이 코드는 value라는 추가 로컬 변수를 정의하고 값을 할당하려고 시도합니다. 그러나, node 객체에는 상응하는 value 속성이 없으므로, value 변수는 undefined 값이 할당됩니다.

선택적으로 지정된 속성이 존재하지 않을때 사용할 Default 값을 정의할 수 있습니다. 이렇게하려면 속성 이름 뒤에 등호 (=)를 삽입하고 다음과 같이 Default 값을 지정하십시오.

let node = {
        type: "Identifier",
        name: "foo"
    };

let { type, name, value = true } = node;

console.log(type);      // "Identifier"
console.log(name);      // "foo"
console.log(value);     // true

이 예제에서 변수 value는 Default 값으로 true가 주어집니다. Default 값은 프로퍼티가 node에 없거나 undefined 값을 가진 경우에만 사용됩니다. node.value 프로퍼티가 없기 때문에, 변수 값은 Default 값을 사용합니다. 이는 3장에서 논의된 것처럼 함수에 대한 Default 파라미터와 비슷하게 작동합니다.

다른 이름의 지역 변수 지정

지금까지 각 예제의 Destructuring 할당은 객체 프로퍼티 이름을 로컬 변수 이름으로 사용했습니다. 예를 들어, node.type의 값은
type 변수에 저장되었습니다. 같은 이름을 사용하고 싶을 때 잘 작동하지만 그렇지 않은 경우 어떻게 해야할까요? ECMAScript 6에는 지역 변수에 다른 이름을 할당할 수있는 확장 구문이 있으며 그 구문은 객체 리터럴 비단축 프로퍼티 초기화 구문과 비슷합니다. 다음은 그 예입니다.

let node = {
        type: "Identifier",
        name: "foo"
    };

let { type: localType, name: localName } = node;

console.log(localType);     // "Identifier"
console.log(localName);     // "foo"

이 코드는 Destructuring 할당을 사용하여 각각 node.type과 node.name 프로퍼티의 값을 포함하는 localType과 localName 변수를 선언합니다. type:localType 구문은 type이라는 프로퍼티를 읽고 그 값을 localType 변수에 저장한다는 의미입니다. 이 구문은 콜론 왼쪽에 이름이 있고 오른쪽에 값이 있는 전통적인 객체 리터럴 구문의 반대입니다. 콜론 오른쪽에 이름이 표시되고 읽을 값의 위치는 왼쪽에 있습니다.

다른 변수 이름을 사용할 때 Default 값을 추가할 수 있습니다. 등호와 Default 값은 지역 변수 이름 뒤에 위치합니다.

let node = {
        type: "Identifier"
    };

let { type: localType, name: localName = "bar" } = node;

console.log(localType);     // "Identifier"
console.log(localName);     // "bar"

여기서 localName 변수는 "bar"의 Default 값을 가집니다. node.name 프로퍼티가 없으므로 변수에 Default 값이 할당됩니다.

지금까지 프로퍼티가 Primitive 값인 객체의 Destructuring을 처리하는 방법을 살펴 보았습니다. 객체의 Destructuring은 중첩된 객체 구조의 값을 검색하는 데에도 사용할 수 있습니다.

중첩된 객체 Destructuring

객체 리터럴과 유사한 구문을 사용하여 중첩된 객체 구조에서 원하는 정보만 검색할 수 있습니다. 다음은 그 예입니다.

let node = {
        type: "Identifier",
        name: "foo",
        loc: {
            start: {
                line: 1,
                column: 1
            },
            end: {
                line: 1,
                column: 4
            }
        }
    };

let { loc: { start }} = node;

console.log(start.line);        // 1
console.log(start.column);      // 1

이 예제에서 Destructuring 패턴은 중괄호를 사용하여 패턴이 node에서 loc이라는 이름의 프로퍼티로 내려 가야하고 start 프로퍼티를 찾는다는 것을 나타냅니다. 마지막 섹션에서 Destructuring 패턴에 콜론 전에 검사할 위치를 제공하는 식별자를 의미하고 오른쪽은 값을 할당한다는 것을 기억하세요. 콜론 다음에 중괄호가 있으면 목적지가 객체의 다른 레벨에 중첩되어 있음을 나타냅니다.

한단계 더 나아가 로컬 변수에 다른 이름을 사용할 수 있습니다.

let node = {
        type: "Identifier",
        name: "foo",
        loc: {
            start: {
                line: 1,
                column: 1
            },
            end: {
                line: 1,
                column: 4
            }
        }
    };

// extract node.loc.start
let { loc: { start: localStart }} = node;

console.log(localStart.line);   // 1
console.log(localStart.column); // 1

이 버전의 코드에서 node.loc.start는 localStart라는 새로운 로컬 변수에 저장됩니다. Destructuring 패턴은 임의의 레벨 깊이로 중첩될 수 있으며 각 레벨에서 모든 기능을 사용할 수 있습니다.

객체 Destructuring은 매우 강력하고 많은 옵션을 가지고 있습니다. 그러나 Array Destructuring은 Array로부터 정보를 추출할 수 있는 몇 가지 독특한 기능을 제공합니다.

Syntax Gotcha

부작용이 없는 문장을 실수로 생성할 수 있기 때문에 중첩된 Destructuring을 사용할 때는 주의해야 합니다. 빈 중괄호는 객체Destructuring에서 유효하지만 아무 것도 하지않습니다.

// 아무 변수도 선언하지 않았습니다.
let { loc: {} } = node;

이 선언문에 선언된 바인딩이 없습니다. 오른쪽에 있는 중괄호로 인해 loc는 바인딩 만들기가 아닌 검사할 위치로 사용됩니다. 이 경우, 의도를 정의하기 위해 : 대신에 Default 값을 정의하는 =를 사용하는 것이 그럴듯합니다. 이 구문이 앞으로 유효하지 않을 가능성이 있지만, 현재로서는 이 부분을 주의해야합니다.

Array Destructuring

Array Destructuring 문법은 객체 Destructuring과 매우 비슷합니다. 객체 리터럴 구문 대신 Array 리터럴 구문을 사용합니다. Destructuring은 객체에서 사용 가능한 명명된 프로퍼티가 아니라 Array 내의 위치에 작동합니다.

let colors = [ "red", "green", "blue" ];

let [ firstColor, secondColor ] = colors;

console.log(firstColor);        // "red"
console.log(secondColor);       // "green"

여기서 Destructuring Array는 colors Array에서 "red"와 "green"값을 꺼내서 firstColor와 secondColor 변수에 저장합니다. 이러한 값은 Array에서의 위치 때문에 선택됩니다. 실제 변수 이름은 무엇이든 될 수 있습니다. Destructuring 패턴에서 명시적으로 언급되지 않은 항목은 무시됩니다. Array 자체는 어떤식으로든 변경되지 않는다는 것을 명심하십시오.

Destructuring 패턴의 항목을 생략하고 관심있는 항목에 대해서만 변수 이름을 제공할 수도 있습니다. 예를 들어 Array의 세 번째 값만 원하면 첫 번째 및 두 번째 항목에 변수 이름을 제공할 필요가 없습니다. 방식은 다음과 같습니다.

let colors = [ "red", "green", "blue" ];

let [ , , thirdColor ] = colors;

console.log(thirdColor);        // "blue"

이 코드는 Destructuring 할당을 사용하여 colors에서 세 번째 항목을 검색합니다. 패턴에서 thirdColor 앞에 오는 쉼표는 그앞에 오는 Array 항목의 자리 표시입니다. 이 접근법을 사용하면 변수 이름을 제공할 필요없이 Array의 중간에 있는 슬롯에서 값을 쉽게 선택할 수 있습니다.

객체 Destructuring 과 마찬가지로 Array Destructuring을 var, let 또는 const로 사용할 때 항상 초기화를 해야 합니다.

Destructuring 할당

할당에서 Array Destructuring을 사용할 수 있지만 객체 Destructuring과는 달리 괄호 안에 표현식을 감쌀 필요는 없습니다.

let colors = [ "red", "green", "blue" ],
    firstColor = "black",
    secondColor = "purple";

[ firstColor, secondColor ] = colors;

console.log(firstColor);        // "red"
console.log(secondColor);       // "green"

이 코드에서 Destructuring 할당은 마지막 Array Destructuring 예제와 비슷한 방식으로 작동합니다. 유일한 차이점은 firstColor와 secondColor가 이미 정의되었다는 것입니다. 지금까지 설명한 내용이 Array Destructuring 할당에 대해 알아야할 것이 전부이지만 조금 더 유용한 내용이 있습니다.

Array Destructuring 할당은 두변수의 값을 쉽게 바꿀 수있게 해주는 매우 독특한 사용 사례입니다. 값 교환은 정렬 알고리즘에서 일반적인 작업이며 ECMAScript 5 변수값 교환 방법은 아래 예제에서와 같이 세 번째 임시 변수를 사용합니다.

// ECMAScript 5에서 변수값 교환
let a = 1,
    b = 2,
    tmp;

tmp = a;
a = b;
b = tmp;

console.log(a);     // 2
console.log(b);     // 1

임시변수 tmp는 a와 b 값을 교환하기 위해 필요합니다. 그러나 Array Destructuring 할당을 사용하면 추가 변수가 필요하지 않습니다. ECMAScript 6에서 변수를 교환하는 방법은 다음과 같습니다.

// ECMAScript 6에서 변수값 교환
let a = 1,
    b = 2;

[ a, b ] = [ b, a ];

console.log(a);     // 2
console.log(b);     // 1

이 예제에서 Destructuring Array는 미러 이미지처럼 보입니다. 할당의 왼쪽(등호 앞에)은 다른 Array Destructuring의 예제와 마찬가지인 Destructuring 패턴입니다. 오른쪽은 교환에 대해 임시로 생성되는 Array 리터럴입니다. Destructuring은 임시 Array에서 발생합니다. 이 Array는 b와 a 값이 첫 번째와 두 번째 위치에 복사됩니다. 결과는 변수 값을 바꿉니다.

객체의 Destructuring 할당과 마찬가지로 Array의 Destructuring 할당 표현식의 오른쪽이 null 또는 undefined로 평가되면 에러가 발생합니다.

Default 값

Array Destructuring 할당은 Array의 어느 위치에 대해서도 Default 값을 지정할 수 있게합니다. Default 값은 주어진 위치의 프로퍼티가 존재하지 않거나 undefined 값을 가질 때 사용됩니다.

let colors = [ "red" ];

let [ firstColor, secondColor = "green" ] = colors;

console.log(firstColor);        // "red"
console.log(secondColor);       // "green"

위 코드에서 colors Array에는 하나의 항목만 있으므로 secondColor가 일치하는 항목은 없습니다. 하지만 Default 값이 있기 때문에 secondColor는 undefined 대신에 "green"으로 설정됩니다.

중첩된 Destructuring

중첩된 객체를 Destructuring하는 것과 비슷한 방식으로 중첩된 Array를 Destructuring 시킬 수 있습니다. 전체 패턴에 다른 Array 패턴을 삽입하면 Destructuring은 다음과 같이 중첩 Array로 내려갑니다.

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];

// later

let [ firstColor, [ secondColor ] ] = colors;

console.log(firstColor);        // "red"
console.log(secondColor);       // "green"

여기서 secondColor 변수는 colors Array 안의 "green"값을 가리킵니다. 이 항목은 두 번째 Array에 포함되어 있으므로 Destructuring 패턴에서 secondColor 주위에 여분의 대괄호가 필요합니다. 객체와 마찬가지로 Array를 반복적으로 중첩시킬 수 있습니다.

Rest 아이템

3 장에서는 함수에 대한 Rest 파라미터를 소개했고, Array Destructuring에는 Rest 아이템이라는 유사한 개념이 있습니다. Rest 아이템은 ... 구문을 사용하여 Array의 나머지 아이템을 특정 변수에 지정합니다.

let colors = [ "red", "green", "blue" ];

let [ firstColor, ...restColors ] = colors;

console.log(firstColor);        // "red"
console.log(restColors.length); // 2
console.log(restColors[0]);     // "green"
console.log(restColors[1]);     // "blue"

colors의 첫 번째 항목은 firstColor에 할당되고 나머지는 새로운 restColors Array에 할당됩니다. 그러므로restColors Array에는 두개의 항목, "green"과 "blue"가 입력됩니다. Rest 아이템은 Array에서 특정 아이템을 추출하고 나머지 아이템을 유지하는데 유용하지만 또 다른 유용한 용도가 있습니다.

JavaScript Array에서 눈에 띄지 않는 부분중 하나는 복제본을 쉽게 만들 수 있는 기능입니다. ECMAScript 5에서 개발자는 Array을 복제하는 쉬운 방법으로 concat() 메서드를 자주 사용했습니다.

// ECMAScript 5에서 Array 복제본 만들기
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();

console.log(clonedColors);      //"[red,green,blue]"

concat() 메서드는 두개의 Array를 연결 하기위한 것이지만, 인자없이 호출하면 Array의 복제본을 반환합니다. ECMAScript 6에서는 Rest 아이템을 사용하여 같은 방식으로 작동하도록 할 수 있습니다.

// ECMAScript 6에서 Array 복제본 만들기
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;

console.log(clonedColors);      //"[red,green,blue]"

이 예제에서 Rest 아이템은 colors Array의 값을 clonedColors Array에 복제하는데 사용됩니다. 이 기법이 concat() 메서드를 사용하는 것보다 개발자의 의도를 더 명확하게 하는지 여부에 대한 문제는 있지만 유용한 기능입니다.

Rest 아이템은 Destructuring Array의 마지막 엔트리여야하며 뒤에 쉼표를 붙일 수 없습니다. Rest 아이템 뒤에 쉼표를 포함시키면 구문 오류가 발생합니다.

혼합된 Destructuring

객체와 Array Destructuring은 더 복잡한 표현식을 만들기 위해 함께 사용될 수 있습니다. 이렇게하면 객체와 Array을 혼합하여 원하는 정보만 추출할 수 있습니다.

let node = {
        type: "Identifier",
        name: "foo",
        loc: {
            start: {
                line: 1,
                column: 1
            },
            end: {
                line: 1,
                column: 4
            }
        },
        range: [0, 3]
    };

let {
    loc: { start },
    range: [ startIndex ]
} = node;

console.log(start.line);        // 1
console.log(start.column);      // 1
console.log(startIndex);        // 0

이 코드는 node.loc.start와 node.range[0]을 start와 startIndex로 각각 추출합니다. Destructuring 패턴의 loc:과 range:는 node 객체의 프로퍼티에 해당하는 위치에 지나지 않습니다. 객체와 Array Destructuring의 조합을 사용할 때 node에서 Destructuring을 사용하여 모두 추출 가능합니다. 이 방법은 전체 구조를 탐색하지 않고도 JSON 설정에서 값을 가져 오는데 특히 유용합니다.

Destructuring 파라미터

Destructuring은 특히 유용한 유스케이스를 가지고 있으며, 그것은 함수 파라미터를 전달할 때입니다. JavaScript 함수가 많은 수의 Optional 파라미터를 가질때의 공통 패턴은 다음과 같이 추가 파라미터를 지정하는 프로퍼티가 있는 options 객체를 만드는 것입니다.

// options의 프로퍼티는 추가 파라미터를 나타냅니다.
function setCookie(name, value, options) {

    options = options || {};

    let secure = options.secure,
        path = options.path,
        domain = options.domain,
        expires = options.expires;

    // code to set the cookie
}

// 세 번째 파라미터가 options에 매핑됩니다.
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

많은 JavaScript 라이브러리에는 위 예제와 비슷한 setCookie() 함수를 가지고 있습니다. 이 함수에서 name과 value 파라미터는 있지만 secure, path, domain, expires는 없습니다. 다른 데이터에 대한 우선 순위가 없으므로 이름이 붙은 속성을 가진 options 객체를 파라미터로 받는 것은 효율적입니다. 하지만 이 접근 방식은 잘 작동하지만 함수 정의를 보면 함수가 예상하는 입력을 알 수 없고 함수 본문을 봐야합니다.

Destructured 파라미터는 함수가 예상하는 인수를 명확하게 하는 대안을 제공합니다. Destructured 파라미터는 명명된 파라미터 대신에 객체 또는 Array Destructuring 패턴을 사용합니다. 이것을 실제로 보기위해 setCookie() 함수를 다시 작성해 보겠습니다.

function setCookie(name, value, { secure, path, domain, expires }) {

    // code to set the cookie
}

setCookie("type", "js", {
    secure: true,
    expires: 60000
});

이 함수는 이전 예제와 비슷하게 동작하지만, 이제는 세 번째 파라미터가 Destructuring을 사용하여 필요한 데이터를 추출합니다. Destructured 파라미터 밖의 파라미터는 명확하게 예상되는 동시에 setCookie()를 사용하는 사람에게는 여분의 인수로 options를 사용할 수 있다는 것을 분명히합니다. 물론 세 번째 파라미터가 필요한 경우에는 그 값을 명확히 해야합니다. Destructured 파라미터는 전달되지 않는 경우 undefined로 설정된다는 점에서 일반 파라미터 처럼 작동합니다.

Destructured 파라미터는 지금까지 이 장에서 배웠던 Destructuring의 모든 기능을 가지고 있습니다. Default 값, 혼합 객체 및 Array 패턴을 사용할 수 있으며, 읽고있는 프로퍼티 이름과 다른 변수 이름을 사용할 수 있습니다.

Destructured 파라미터는 필수 항목 입니다.

Destructured 파라미터의 한가지 단점은 기본적으로 함수 호출에서 파라미터가 제공되지 않으면 오류가 발생한다는 것입니다. 예를 들어, 마지막 예제에서 setCookie() 함수를 아래와 같이 호출하면 에러가 발생합니다.

// Error!
setCookie("type", "js");

세 번째 파라미터가 누락되어 예상대로 undefined으로 평가됩니다. 이것은 Destructured 파라미터가 Destructuring 선언의 축약이기 때문에 오류가 발생합니다. setCookie() 함수가 호출될 때, JavaScript 엔진은 실제로 아래와 같이 수행합니다.

function setCookie(name, value, options) {

    let { secure, path, domain, expires } = options;

    // code to set the cookie
}

오른쪽 표현식이 null 또는 undefined로 평가될 때 Destructuring은 에러를 던지기 때문에 세 번째 파라미터가 setCookie()함수에 전달되지 않을 때도 마찬가지입니다.

Destructured 파라미터가 필요하다면 이 동작이 문제가 되지 않습니다. 그러나 Destructured 파라미터를 Optional로 하고 싶다면 다음과 같이 Destructured 파라미터에 Default 값을 제공하면 이 문제를 해결할 수 있습니다.

function setCookie(name, value, { secure, path, domain, expires } = {}) {

    // ...
}

이 예제는 새로운 객체를 세 번째 파라미터의 Default 값으로 제공합니다. setCookie()의 세 번째 파라미터인 Destructured 파라미터에 Default 값을 지정하면 secure, path, domain, expires는 undefined가 제공되며 오류가 발생하지 않습니다.

Destructuring 파라미터의 Default 값

Destructured 파라미터에 Default 값을 지정할 수 있습니다. 파라미터에 등호를 추가하고 Default 값을 지정하면됩니다.

function setCookie(name, value,
    {
        secure = false,
        path = "/",
        domain = "example.com",
        expires = new Date(Date.now() + 360000000)
    } = {}
) {

    // ...
}

Destructured 파라미터의 각 프로퍼티는 이 코드에서 Default 값을 가지므로 올바른 값을 사용하기 위해 주어진 프로퍼티가 포함되었는지 확인하는 것을 피할 수 있습니다. 또한, 전체 Destructured 파라미터는 빈 객체의 기본값을 가지며, 파라미터는 Optional 입니다. 이렇게 하면 함수 선언이 평소보다 약간 더 복잡해 보이지만 각 파라미터에 사용할 수있는 값이 있는지 확인하는데 드는 비용이 더 적습니다.

요약

Destructuring은 JavaScript에서 객체와 Array로 작업하는 것을 더 쉽게 만듭니다. 익숙한 객체 리터럴 및 Array 리터럴 구문을 사용하면 관심있는 정보만 얻을 수 있는 데이터 구조를 선택할 수 있습니다. 객체 패턴을 사용하면 객체에서 데이터를 추출할 수 있으며 Array 패턴을 사용하면 Array에서 데이터를 추출할 수 있습니다.

객체와 Array Destructuring은 undefined인 프로퍼티나 항목에 대해 Default 값을 지정할 수 있으며, 할당의 오른쪽이 null 또는
undefined로 평가되면 오류를 던집니다. 임의의 깊이로 내림차순으로 오브젝트와 Array Destructuring을 사용하여 깊이 중첩된 데이터 구조를 탐색할 수도 있습니다.

Destructuring 선언은 변수를 만들기 위해 var, let 또는 const를 사용하며 항상 초기화를 해야합니다. Destructuring 할당은 다른 할당 대신에 사용되며, 객체 프로퍼티와 이미 존재하는 변수로 분해할 수 있습니다.

Destructured 파라미터는 Destructuring 구문을 사용하여 함수 파라미터로 사용될 때 "options"객체를 더 투명하게 만듭니다. 관심있는 실제 데이터를 다른 명명된 파라미터와 함께 나열할 수 있습니다. Destructured 파라미터는 Array 패턴, 오브젝트 패턴 또는 혼합 패턴이 될 수 있으며 Destructuring의 모든 기능을 사용할 수 있습니다.

---

이 내용은 나중에 참고하기 위해 제가 공부하며 정리한 내용입니다.
의역, 오역, 직역이 있을 수 있음을 알려드립니다.
This post is a translation of this original article [https://leanpub.com/understandinges6/read#leanpub-auto-destructuring-for-easier-data-access]

참고

• ECMAScript 6 Block Binding
• ECMAScript 6 문자열과 정규 표현식
• ECMAScript 6 함수
• ECMAScript 6 객체의 확장된 기능
• ECMAScript 6 쉬운 데이터 액세스를 위한 Destructuring
• ECMAScript 6 Symbol과 Symbol 프로퍼티
• ECMAScript 6 Set과 Map
• ECMAScript 6 Iterator와 Generator
• ECMAScript 6 JavaScript 클래스 소개
• ECMAScript 6 Array 기능 향상
• ECMAScript 6 Promise와 비동기 프로그램밍
• ECMAScript 6 프록시와 리플렉션 API
• ECMAScript 6 Module로 코드 캡슐화하기
• ECMAScript 6 부록 A. 작은 변경 사항
• ECMAScript 6 부록 B. ECMAScript 7(2016) 이해하기