Default Value & Destructuring

1. Default Value

ES6에서는 함수에 인자를 받을 때 기본값을 지정할 수 있습니다.
예를 들어

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

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

이런 함수가 있을 때 name에 값이 넘어가지 않으면 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가 나오게 됩니다.

2. Destructuring

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

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

구조 분해 할당의 종류를 하나씩 살펴볼게요 🚗

1) Array

먼저 제일 익숙한 배열을 분해해봅시다!

학생들의 이름이 담긴 배열이 있습니다 👨‍🎓

const gascoigne = ['Tommy', 'Guy', 'Jim', 'Donald'];

학생들의 이름을 변수에 하나씩 나눠서 담고 싶다면,

const [tom, guy, jim, donald] = gascoigne;

console.log(tom, guy, jim, donald); // Tommy, Guy, Jim, Donald

이렇게 담으면 배열 gascoigne에 담긴 값들이 index 0부터 차례대로 좌변의 변수명에 담기게 됩니다. 이제 Guy라는 이름을 꺼낼 때 gascoigne[1] 이렇게 사용하지 않고 구조 분해 할당을 통해 깔끔하고 쉽게 사용할 수 있습니다.

🤔 만약 Guy를 뺀 나머지를 구조 분해 할당하고 싶다면 어떻게 하나요?

const [tom, , jim, donald] = gascoigne;

이런 식으로 가져오면 비어있는 index 1 자리의 값 Guy는 guy라는 변수에 할당되지 않습니다.

2) Object

JS에서 제가 제일 사랑하는 자료형 Object도 배열과 비슷하게 구조 분해 할당을 사용할 수 있습니다.

이번에도 학생들의 정보가 담긴 Object를 먼저 만들고 시작하겠습니다.

const gascoigne = {
    tommy: {
    	name: 'Tommy',
        grade: 4
    },
    guy: {
    	name: 'Guy',
        grade: 4
    },
    harry: {
    	name: 'Harry',
        garde: 5
    },
    jim: {
    	name: 'Jim',
        grade: 4
    },
}

이제 분해해봅시다! 🛠
Object의 구조 분해 할당도 Array와 비슷한 형태를 띄고 있습니다.

const {tommy, guy, harry, jim} = gascoigne;

console.log(tommy); // {name: 'Tommy', grade: 4'}

이렇게요! 단, 배열의 구조 분해 할당과 달리 주의할 점은 Object의 key값이 같아야한다는 점입니다. 만약 저 코드에서 tommy를 tom으로 바꿔서 구조 분해 할당을 한 후 console.log(tom)을 해본다면 undefined가 출력되는 것을 볼 수 있습니다.

Object는 중첩될 수 있죠. 중첩된 Object인 경우는 어떻게 가져올까요?
중첩된 Object를 하나 생성해서 확인해보겠습니다

const harry = {
    name: {
    	first: 'Harry',
        last: 'Barclay',
    },
    grade: 5,
}

Harry라는 학생의 정보가 담긴 Object입니다. 이때 name안에 first와 last가 나누어져 있는 경우,

const {
	name: {
    	first, 
        last
    }
} = harry;

이런 식으로 분해를 하면 first와 last라는 변수에 harry.name.first, harry.name.last 값이 담기게 됩니다.
하지만! 이 때 name을 출력하려고 하면 name is not defined라는 오류를 만나게 됩니다. 위 코드에서는 name안의 first와 second만 가져오고 name은 가져오지 않았기 때문입니다. name까지 가져오고 싶은 경우는

const {
    name, 
    name: {
    	first, 
        last
    }
} = harry;

이렇게 사용하면 됩니다 💁‍♀️

3) Function

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

function graduate(student) {
    console.log(`Congratulation ${student.name.first}`); 
}

graduate({
    name: {
    	first: 'Harry',
        last: 'Barclay',
    },
    grade: 5,
}); // Conguratulation Harry

함수에 인자로 Object가 전달될 때 우리는 . 연산자를 가지고 중첩된 값을 찾곤 했습니다. 하지만 이런 경우 name이라는 Object가 없을 때 오류가 뜨기도 하고 중첩된 Object가 많다면 코드가 길어져 아름답지 않은 코드가 됩니다. 이런 경우에도 구조 분해 할당은 우리의 코드를 더 깔끔하고 효율적으로 만들어줍니다 👍

function graduate({name: {first, last}, grade}){
    console.log(`Congratulation ${first}`); 
}

graduate({
    name: {
    	first: 'Harry',
        last: 'Barclay',
    },
    grade: 5,
}); // Conguratulation Harry

짠! 훨씬 간결해졌죠? 함수에 전달되는 데이터들을 알아보기도 쉬워졌습니다.

+) 구조 분해 할당과 기본값

위에서 본 구조 분해 할당과 기본값 설정을 함께 사용할 수 있습니다. Array부터 Function까지 하나하나씩 간단하게 볼게요.

1) Array
배열의 구조 분해 할당은 index 0부터 순차적으로 좌변의 변수들에 들어가게 됩니다. gascoigne 에는 index 3에 저장된 값이 없고, 따라서 구조 분해 할당 구문에서 index 3에 있는 donald에 기본값 stranger가 들어가게 됩니다.

const gascoigne = ['Tommy', 'Guy', 'Jim'];
const [tom, guy, jim, donald = 'stranger'] = gascoigne;

console.log(tom, guy, jim, donald); // Tommy, Guy, Jim, stranger

2) Object
Object의 구조 분해 할당에서 기본값을 지정할 수 있습니다. grade에 기본값을 지정해볼게요.

const harry = {
    name: {
    	first: 'Harry',
        last: 'Barclay',
    }
};

const {
    name: {
    	first, 
        last
    },
    grade = 1
} = harry;

console.log(grade); // 1

grade가 없기 때문에 grade의 기본값 1가 들어가게 됩니다.

3) Function
함수의 구조 분해 할당+기본값 설정은 Object와 거의 같습니다.

function graduate({name: {first, last}, grade = 5}){
    console.log(`Grade ${grade}`); 
}

graduate({
    name: {
    	first: 'Harry',
        last: 'Barclay',
    },
    grade: 5,
}); // Grade 5

인자를 구조 분해 할당하는 곳에서 grade=5와 같이 기본값을 지정해주면 됩니다.

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

const {
    name: {
    	first: harryFirst, 
        last: harryLast
    },
    grade = 5
} = harry;

위 코드의 harryFirst, harryLast와 같이 renaming을 해줄 수 있습니다.

---

참고 Nomad Coders