JavaScript 최신 문법 (ES6, ES11)

ES6

 

• shorthand property names

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

객체 초기자 - JavaScript | MDN

{
    const jiwon1 = {
        name: 'jiwon',
        age: '24',
    };

    const name = 'jiwon';
    const age = '24';

    const jiwon2 = {
        name: name,
        age: age,
    };

    // ✨
    const jiwon3 = {
        name,
        age,
    }; // key와 value가 동일하다면 하나로 생략 가능

    console.log(jiwon1, jiwon2, jiwon3);
}

key와 value가 동일하다면 하나로 생략이 가능하다.

 

• Destructuring Assignment

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

{
    // object
    const student = {
        name: 'Anna',
        level: 1.
    };

    // 💩
    {
        const name = student.name;
        const level = student.level;
        console.log(name, level); // Anna 1
    }

    // ✨
    {
        const { name, level } = student; // object 안에 정의된 key의 이름 동일하게 괄호 안에 작성해야함
        console.log(name, level); // Anna 1

        // 다른 이름으로 선언하고 싶다면
        const { name: studentName, level: studentLevel } = student;
        console.log(studentName, studentLevel);

    }

    // array
    const animals = ['🐶', '🐱'];

    // 💩
    {
        const first = animals[0];
        const second = animals[1];
        console.log(first, second);
    }

    // ✨
    {
        const [first, second] = animals;
        console.log(first, second);
    }
}

 

• Spread Syntax

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN

const obj1 = { key: 'key1' };
    const obj2 = { key: 'key2' };
    const array = [obj1, obj2];

    // array copy
    const arrayCopy = [...array]; // ... : array에 들어있는 item 하나하나씩을 낱개로 가져와서 복사해옴
    console.log(array, arrayCopy);

    const arrayCopy2 = [...array, { key: 'key3' }]; // 새로운 item 추가 가능
    console.log(arrayCopy2);

여기서 중요한 점은,

object를 가리키고 있는 변수는 실제로 object를 담고있는 것이 아니라 object가 들어있는 메모리의 주소값을 가지고있다.

따라서 복사되어오는 것들은 주소값이 복사되는 것이다. 따라서 위의 코드는 모두 동일한 object를 가르키고 있다. obj1의 key값을 변경하게 된다면 array, arrayCopy, arrayCopy2 값이 모두 변경된다.

--> spread 연산자는 Object 안에 들어있는 아이들을 모두 하나씩 복사해오는 것이 아니라, object가 가리키고있는 주소의 참조값만 복사해서오는 것이다.

spread operator를 이용해서 복사해온다고 해도, 원래의 object를 변경하게 되면 전부 다 영향 갈 수 있음을 유의해야한다.

 

    // object copy
    const obj3 = { ...obj1 };
    console.log(obj3);

    // array concatenation
    const fruits1 = ['🍑', '🍓'];
    const fruits2 = ['🍌', '🥝'];
    const fruits = [...fruits1, ...fruits2]; // [ "🍑", "🍓", "🍌", "🥝" ]
    console.log(fruits);

    // object merge
    const dog1 = { dog1: '🐩' };
    const dog2 = { dog2: '🐶' };
    const dog = { ...dog1, ...dog2 };
    console.log(dog); // { dog1: "🐩", dog2: "🐶" }
    // 만약 key가 동일한 object를 병합한다면, 제일 뒤에 오는 것이 앞에 오는 것을 덮어씌운다.

 

• Default parameters

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters

기본값 매개변수 - JavaScript | MDN

{
    // 💩
    {
        function printMessage(message) {
            if (message == null) {
                message = 'default message';
            }
            console.log(message);
        }

        printMessage('hello');
        printMessage();
    }

    // ✨
    {
        function printMessage(message = 'default message') {
            console.log(message);
        }

        printMessage('hello');
        printMessage();
    }
}

 

• Ternary Operator

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

삼항 조건 연산자 - JavaScript | MDN

{
    const isCat = true;
    // 💩
    {
        let component;
        if (isCat) {
            component = '🐱';
        } else {
            component = '🐶';
        }
        console.log(component);
    }

    // ✨
    {
        const component = isCat ? '🐱' : '🐶';
        console.log(component);
        console.log(isCat ? '🐱' : '🐶');
    }
}

 

• Template Literals

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN

{
    const weather = '🌤';
    const temparature = '16°C';

    // 💩
    console.log(
        'Today weather is ' + weather + ' and temparature is ' + temparature + '.'
    );

    // ✨
    console.log(`Today weather is ${weather} and temparature is ${temparature}.`);
}

 

ES11

• Optional Chaining

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN

{
    const person1 = {
        name: 'Ellie',
        job: {
            title: 'S/W Engineer',
            manager: {
                name: 'Bob',
            },
        },
    };
    const person2 = {
        name: 'Bob',
    };

    // 💩💩💩💩💩💩
    {
        function printManager(person) {
            console.log(person.job.manager.name);
        }
        printManager(person1);
        // printManager(person2); // error
    }

    // 💩💩💩
    {
        function printManager(person) {
            console.log(
                person.job
                    ? person.job.manager
                        ? person.job.manager.name
                        : undefined
                    : undefined
            );
        }
        printManager(person1);
        printManager(person2);
    }

    // 💩
    {
        function printManager(person) {
            console.log(person.job && person.job.manager && person.job.manager.name);
        }
        printManager(person1);
        printManager(person2);
    }

    // ✨
    {
        function printManager(person) {
            console.log(person.job?.manger?.name); // person의 job이 있으면, manager가 있으면, name 출력
        }
        printManager(person1);
        printManager(person2);
    }
}

 

• Nullish Coalescing Operator

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Nullish coalescing operator - JavaScript | MDN

{
    // Logical OR operator
    // false: false, '', 0, null, undefined
    {
        const name = 'jiwon';
        const userName = name || 'Guest'; // || 연산자는 앞에 있는 값이 false 일때만, 뒤에 것이 실행
        console.log(userName); // jiwon
    }

    {
        const name = null;
        const userName = name || 'Guest';
        console.log(userName); // Guest
    }

    // 💩
    {
        const name = '';
        const userName = name || 'Guest';
        console.log(userName); // 문자열이 비어있는 경우(아무런 이름 사용하고 싶지않은 경우)에도 Guest가 할당됨 

        const num = 0;
        const message = num || 'undefined'; // 숫자가 0으로 할당되어있음에도 undefined 출력
        console.log(message); // undefined 
    }

    // ✨
    {
        const name = '';
        const userName = name ?? 'Guest'; // 이름에 아무런 값이 없다면 Guest
        console.log(userName);

        const num = 0;
        const message = num ?? 'undefined'; // num이라는 변수에 값이 없다면 undefined
        console.log(message);
    }

}