[JavaScript 기초] 4. JavaScript 최신 문법(ES6, ES11)

📌 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);  // ''