Default Value & Destructuring

개인적으로 ES6+에서 새롭게 추가된 기능 중 가장 편리하다고 생각하는 기능이다!

Default Value

ES6+에서는 함수에 인자를 받을 때 기본값을 지정할 수 있다.

function sayHi(name) {
    return `hello ${name}`;
}

sayHi('HYEON'); // hello HYEON
sayHi(); // hello undefined

sayHi라는 함수가 있을 때, name에 값이 넘어가지 않으면 undefined가 뜬다. 이렇게 원치 않는 undefined가 뜨는 것을 방지하기 위해

function sayHi(name) {
    if(!name) name = 'stranger';
    return `hello ${name}`;
}

조건문으로 넘어온 값이 없는 경우 값을 세팅해주는 경우도 있다. 하지만 위에서 말했듯 ES6부터 함수의 인자에 기본값을 지정할 수 있기 때문에 undefined 걱정도, 기본값 세팅을 위한 조건문도 필요 없게 되었다.

function sayHi(name = 'stranger') { // 일반 함수
    return `hello ${name}`;
}

const sayHi = (name = 'stranger') => `hello ${name}`; // 화살표 함수

이렇게 함수를 작성하고 name = 'stranger'처럼 인자에 기본값을 세팅해주면 name 값이 넘어오지 않을 경우 stranger가 대신 출력된다.

Destructuring

Destructuring은 구조 분해 할당이라는 뜻으로, 배열이나 Object에 있는 값들을 나누어 개별의 변수에 담을 수 있는 표현식이다.

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
MDN Document

구조 분해 할당의 종류를 하나씩 살펴보자 🚗💨

Array

이름이 담긴 배열이 있다.

const enterprise = ['Kirk', 'Spock', 'Sulu', 'Uhura'];

학생들의 이름을 변수에 하나씩 나누어 담고 싶을 때 구조 분해 할당을 사용하지 않는다면

const kirk = enterprise[0];
const spock = enterprise[1];
const sulu = enterprise[2];
const uhura = enterprise[3];

이런 식으로 작성해야 할 것이다. 하지만 구조 분해 할당을 사용하면 위와 같이 하나하나 변수에 매칭 시켜줄 필요도 없고 반복문을 사용할 필요도 없이 깔끔한 한 줄로 처리할 수 있다.

const [kirk, spock, sulu, uhura] = enterprise;

console.log(sulu); // Sulu

위와 같이 작성하면 각각 kirk,spock,sulu,uhura 변수에 enterprise 배열의 값들이 index 0부터 순서대로 좌변의 변수명들에 저장된다.

 

🤔 만약 특정 값을 뺀 나머지를 구조 분해 할당하고 싶다면?

const [kirk, spock, , uhura] = enterprise;

위와 같이 작성하면 비어있는 index 2 자리의 값 Sulu는 구조 분해 할당되지 않는다.

Object

Object도 배열과 비슷하게 구조 분해 할당을 사용할 수 있다. 선원들의 정보가 담긴 Object가 있다.

const enterprise = {
    kirk: {
        name: 'Kirk',
        rank: 'captain'
    },
    spock: {
        name: 'Spock',
        rank: 'commander'
    },
    sulu: {
        name: 'Sulu',
        rank: 'lieutenant'
    },
    uhura: {
        name: 'Uhura',
        rank: 'lieutenant'
    }
};

Object의 구조 분해 할당도 Array와 비슷한 형태를 띠고 있다.

const {kirk, spock, sulu, uhura} = enterprise;

console.log(kirk); // {name: 'Krik', rank: 'captain}

단, Array의 구조 분해 할당과 달리 주의할 점은 구조 분해 할당하는 변수명과 Object의 key가 같아야 한다는 점이다. 만약 kirk를 jim으로 바꿔서 구조 분해 할당을 한 후 console.log(jim)을 실행하면 undefined가 출력된다.

중첩된 Object

Object가 중첩된 경우라면 어떻게 가져와야 할까?

const sulu = {
    name: {
        first: 'Hikaru',
        last: 'Sulu'
    },
    rank: 'lieutenant'
};

위와 같이 중첩된 Object가 있을 때 아래와 같이 구조 분해 할당을 실행해보자.

const {
    name: {
        first,
        last
    },
    rank
} = sulu;

이 코드에서 first와 last에는 sulu.name.first와 sulu.name.last의 값이 제대로 담기지만 name을 출력하려고 하면 name is not defined라는 오류를 만나게 된다. 이 코드는 name안의 first와 last는 가져오지만 name 자체를 구조 분해 할당하지 않기 때문이다. name까지 가져오고 싶은 경우는 아래와 같이 작성한다.

const {
    name, // name 전체 가져오기
    name: {
        first,
        last
    },
    rank
} = sulu;

Function

구조 분해 할당은 함수에서도 사용할 수 있다.

function onTheBridge(crew) {
    console.log(`${crew.name.last} is on the bridge!`);
}

onTheBridge({
    name: {
        first: 'Hikaru',
        last: 'Sulu'
    },
    rank: 'lieutenant'
}); // Sulu is on the bridge!

함수에 인자로 Object가 전달될 때 우리는 . 연산자로 중첩된 값을 조회한다. 하지만 이런 경우 name이라는 Object 자체가 없을 때 오류가 뜨기도 하고 중첩된 Object가 많다면 . 연산자로 연결되는 길이가 길어져 아름답지 않은 코드가 된다. 이런 경우에도 구조 분해 할당은 코드를 더 깔끔하고 편리하게 만들어준다.

function onTheBridge({name: {first, last}, rank}){
    console.log(`${last} is on the bridge!`);
}

onTheBridge({
    name: {
        first: 'Hikaru',
        last: 'Sulu'
    },
    rank: 'lieutenant'
}); // Sulu is on the bridge!

훨씬 간결해지고 함수에 전달되는 데이터들을 알아보기도 쉬워졌다.

구조 분해 할당 + 기본값

위에서 살펴본 구조 분해 할당과 기본값을 함께 사용할 수 있다.

Array

배열의 구조 분해 할당은 index 0부터 순차적으로 좌변의 변수에 할당된다. enterprise에는 index 3에 저장된 값이 없으므로 구조 분해 할당 구문에서 index 3에 있는 uhura에 기본값 stranger가 할당된다.

const enterprise = ['kirk', 'spock', 'sulu'];
const [kirk, spock, sulu, uhura = 'stranger'] = enterprise;

Object

Object의 구조 분해 할당에서도 기본값을 지정할 수 있다. rank에 기본값을 지정해보자.

const sulu = {
    name: {
        first: 'Hikaru',
        last: 'Sulu'
    }
};

const {
    name: {
        first,
        last
    },
    rank = 'ensign'
} = sulu;

console.log(rank); // ensign

sulu Object에 rank가 없기 때문에 지정한 기본값 ensign이 출력된다.

Function

함수의 구조 분해 할당 + 기본값은 Object와 유사하다.

function onTheBridge({name: {first, last}, rank = 'ensign'}){
    console.log(`${last} is ${rank}`);
}

onTheBridge({
    name: {
        first: 'Hikaru',
        last: 'Sulu'
    }
}); // Sulu is ensign;

함수에 전달된 인자를 구조 분해 할당하는 곳에서 rank = 'ensign'과 같이 기본값을 지정해주면 된다.

 

🤔 구조 분해 할당에서 이름을 바꾸고 싶다면?
Object의 구조 분해 할당은 변수명과 Object의 key가 같아야 가능하다. 만약 같은 구조와 같은 key를 가진 Object가 여러 개이고 그 여러 개의 Object를 모두 구조 분해 할당하고 싶은 경우 변수명이 겹칠 수도 있다. 이럴 경우 변수명을 변경할 수 있다.

const {
    name: {
        first: suluFirst,
        last: suluLast,
    }
} = sulu;

위처럼 작성하면 key값 우측에 적힌 suluFirst와 suluLast에 각각 first와 last가 할당된다.

 

---

원글

velog.io/@hellohyeon/Default-Value-Destructuring