📌 Shorthand property names
- 자바스크립트에서 오브젝트는 항상 키(Key)와 값(Value)로 이루어져 있습니다.
const person = {
name: 'baegwon',
age: '18'
};
- 만약 이 키와 값이 미리 정의되어 있다면, 해당 변수를 이용해서 새로운 오브젝트를 만들 수도 있습니다.
const name = 'baegwon';
const age = '18';
const person = {
name: name,
age: age
};
- Shorthand property names 기능을 이용하면 위와 같이 Key와 Value의 이름이 동일할 경우 다음과 같이 코드를 축약해서 작성할 수 있습니다.
const name = 'baegwon';
const age = '18';
const person = {
name,
age
};
📌 Destructuring assignment
- 자바스크립트에서 오브젝트의 Value에 접근하기 위해서는 다음과 같이 코드를 작성해주어야 했습니다.
const person = {
name: 'baegwon',
age: '18'
};
{
const name = person.name;
const age = person.age;
console.log(name, age); // "baegwon 18"
}
- Destructuring assignment를 사용할 경우 다음과 같이 코드를 축약할 수 있습니다.
const person = {
name: 'baegwon',
age: '18'
};
{
const { name, age } = person;
console.log(name, age); // "baegwon 18"
}
- 위처럼 하기 위해서는 오브젝트에 정의된 Key의 이름과 동일하게 변수의 이름을 선언해주어야 합니다.
- 만약 변수 이름을 다르게 선언하고 싶다면 다음과 같이 할 수 있습니다.
const person = {
name: 'baegwon',
age: '18'
};
{
const { name: personName, age: personAge } = person;
console.log(personName, personAge); // "baegwon 18"
}
- 해당 기능은 오브젝트 뿐만 아니라 배열에서도 동일하게 사용할 수 있습니다.
const animals = ['dog', 'cat'];
{
const [ first, second ] = animals;
console.log(first, second) // "dog cat"
}
- 차이점으로는 '{}'가 아닌 '[]'를 사용한다는 점입니다.
📌 Spread Syntax
{
const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const array = [obj1, obj2];
}
- 위 배열을 복사하기 위해서는 어떻게 해야 할까요?
- 몰론 많은 방법들이 있겠지만 Spread Syntax를 사용하면 매우 간단하게 배열을 복사할 수 있습니다.
{
const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const array = [obj1, obj2];
// array copy
const arrayCopy = [...array];
}
- 만약 배열을 복사하면서 새로운 요소를 추가하고 싶다면 다음과 같이 할 수 있습니다.
{
const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const array = [obj1, obj2];
// array copy
const arrayCopy = [...array, { key: 'key3' }];
}
- 또한 다음과 같이 배열 병합에도 사용할 수 있습니다.
const fruits1 = ['apple', 'banana'];
const fruits2 = ['melon', 'lemon'];
const fruits = [...fruits1, ...fruits2];
console.log(fruits); // ["apple", "banana", "melon", "lemon"]
- 추가로, Spread Syntax는 배열 뿐만 아니라 오브젝트 복사에도 사용할 수 있으며, 배열과 동일하게 오브젝트 병합에도 사용할 수 있습니다.
const obj1 = { key1: 'key1' };
const objCopy = {...obj1};
const obj2 = { key2: 'key2' };
const obj = { ...obj1, ...obj2 };
console.log(obj) // {key1: "key1", key2: "key2"}
- 주의해야 할 점은 '[]'가 아닌 '{}'를 사용한다는 점과, 만약 키의 이름이 동일한 오브젝트를 병합할 경우 제일 뒤에 선언된 오브젝트의 값이 제일 앞에 선언된 오브젝트의 값을 덮어씌운다는 점입니다.
- Spread Syntax의 중요한 포인트는 Spread Syntax의 경우 해당 오브젝트가 가리키고 있는 주소의 참조값만 복사해오는 것이기 때문에 복사한 오브젝트들 모두 동일한 주소값을 참조하게 됩니다.
- 따라서 하나의 오브젝트 값을 변경할 시 다른 오브젝트에도 영향을 준다는 사실을 이해하고 사용해야 합니다.
📌 Default parameters
function printMessage(message) {
console.log(message);
}
printMessage('hello'); // "hello"
- 위와 같은 함수가 존재한다고 할 때, 만약 인자로 아무런 메시지도 전달하지 않을 경우 undefined가 출력됩니다.
function printMessage(message) {
console.log(message);
}
printMessage(); // "undefined"
- 만약 인자가 전달되지 않은 경우 따로 출력할 메시지를 설정하고 싶다면 다음과 같이 할 수 있습니다.
function printMessage(message) {
if (message == null) {
message = 'default message';
}
console.log(message);
}
printMessage(); // "default message"
- Default parameters를 사용하면 위 코드를 아래와 같이 축약할 수 있습니다.
function printMessage(message = 'default message') {
console.log(message);
}
printMessage(); // "default message"
📌 Optional chaining
const person1 = {
name: 'Baegwon',
job: {
title: 'S/W Engineer',
manager: {
name: 'Bob'
}
}
};
const person2 = {
name: 'Bob'
};
- 위와 같은 오브젝트가 있다고 가정했을 때, 아래와 같은 코드를 실행하면 어떻게 될까요?
function printManager(person) {
console.log(person.job.manager.name);
}
printManager(person1); // "Bob"
printManager(person2); // Error
- 당연히 person1에는 해당하는 Key가 있고, person2에는 해당하는 키가 없기 때문에 주석과 같은 결과가 출력되게 됩니다.
- 이를 유연하게 처리하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.
function printManager(person) {
console.log(
person.job
? person.job.manager
? person.job.manager.name
: undefined
: undefined
);
}
printManager(person1); // "Bob"
printManager(person2); // "undefined"
- 또는 다음과 같은 방법을 사용할 수도 있겠죠.
function printManager(person) {
console.log(person.job && person.job.manager && person.job.manager.name);
}
printManager(person1); // "Bob"
printManager(person2); // "undefined"
- 다만, 위 두 코드의 공통적인 문제점은 중복되는 코드(person.job)가 나타난다는 것입니다.
- 이제는 이렇게 작성하는 대신 Optional chaining을 통해 다음과 같이 코드를 축약할 수 있습니다.
function printManager(person) {
console.log(person.job?.manager?.name);
}
printManager(person1); // "Bob"
printManager(person2); // "undefined"
📌 Nullish Coalescing Operator
- 많은 개발자들이 특정 값이 null일 경우, 즉 정해져 있지 않을 경우, 기본값을 할당하기 위해 다음과 같이 OR 연산자를 사용하여 코딩하곤 합니다.
// false: false, '', 0, null, undefined
const name = '';
const userName = name || 'Guest';
console.log(userName); // 'Guest'
- 다만 위처럼 코드를 작성하게 되면 name 값이 공백이거나 0인 경우에도 false로 처리되기 때문에 userName에 'Guest'가 할당되게 됩니다.
- 따라서 조금 더 명확하게 코딩하기 위해서는 다음과 같이 Nullish Coalescing Operator를 사용해야 합니다.
const name = '';
const userName = name ?? 'Guest';
console.log(userName); // ''