jsNote 13: 최신 자바스트립트 문법(ES6, ES11)

1. Shorthand property names 객체 초기자

js에서 object는 아래처럼 항상 key(name, age)와 value(Emma, 18)로 이루어져 있다

const emma1 = {
            name = 'Emma',
            age: '18'
        };

만약 name과 age라는 변수가 미리 정의되어 있을 때 emma2라는 새로운 object를 만들면

const name = 'Emma';
const age = '18';

const emma2 = {
            name: name,
            age: age,
        }

name이라는 key의 값에 name이라는 변수가 가르키고 있는 Emma가 들어가게 되고, age라는 key의 값은 key라는 변수가 가르키고 있는 18이 들어간다.

만약 key와 value의 이름이 똑같을 때는 아래처럼 축약해서 작성 가능하다

const emma3 = {
            name,
            age,
        }

2. Destructuring assignment

const student = {
            name = 'Jake',
            level = '1'
        }

//object의 key와 value에 접근하기 위해 쩜을 써야 했지만

const name = student.name;
const level = student.level;
console.log(name, level); //Jake 1

//아래처럼 object의 key의 이름을 괄호 안에 정의한 것 equel은 object이라고 정의해주면 값이 각각 할당된다

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

//다른 이름으로 선언하고 싶으면 : 를 이용해서 원하는 이름을 작성하면 가능하다

const { name: studentName, level: studentLevel } = student;
console.log(studentName, studentLevel); //Jake 1

//배열에서는 

const animals = ['🐷', '🐗'];

//인덱스를 이용해서 접근해야 했지만

const first = animals[0];
const second = animals[1];
console.log(first, second); //🐷 🐗

//아래처럼 표현할 수도 있다

const [first, second] = animals;
console.log(first, second); //🐷 🐗

3. Spread Syntax

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

//obj를 담고 있는 배열을 복사하기 위해서 '...' 를 이용할 수 있다

const arrayCopy = [...array];
console.log(array, arrayCopy); //동일한 배열

//배열을 복사하면서 새로운 아이템을 추가하려면 아래처럼 표현할 수 있다

const arrayCopy2 = [...array, {
     key: 'key3'
}];

//하지만 spread operator를 이용해서 복사해올 때

obj1.key = 'newKey'; //값이 변경되면
console.log(array, arrayCopy, arrayCopy2); 
//배열 안의 obj1 값이 모두 newKey로 변경되는 점을 주의해야 한다

//Array concatenation 배열을 병합할 때도 쩜쩜쩜 이용 가능

const fruit1 = ['🍒', '🍑'];
const fruit2 = ['🍉', '🍌'];
const fruits = [...fruit1, ...fruit2];
console.log(fruits); //['🍒', '🍑', '🍉', '🍌']

//object merge 오브젝트도 스프레드 연산자를 이용하여 병합 가능
const car1 = {
    car1: '🚙'
};
const car2 = {
    car2: '🚗'
};
const car = {
   ...car1,
   ...car2
};
console.log(car); //{car1: '🚙', car2: '🚗'}

//key가 동일한 obj를 병합한다면 뒤에 오는 것이 앞에 있는 것을 덮어씌운다

const car1 = {
    car: '🚙'
};
const car2 = {
    car: '🚗'
};
const car = {
    ...car1,
    ...car2
};
console.log(car); //{car: '🚗'};

4. Default parameters

function printMessage(message) {
console.log(message);

printMessage('hello'); //hello
printMessage(); //undefine

위처럼 인자를 받아오는 함수에서 인자를 전해주지 않는 경우에는 undefined라고 출력한다. 이 때 디폴트를 출력하고 싶다면 아래처럼 표현 가능.

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

5. Ternary operator

const isCat = true
let component;
if (isCat) {
    component = '😻';
} else {
    component = '🐔';
}
console.log(component);

isCat에 따라 다른 컴포넌트를 정의하고 싶을 때 보통 위처럼 표현하지만 아래처럼 컴포넌트에 할당하는 isCat이 트루이면 😻, 아니면 🐔라고 아래처럼 표현할 수 있다.

const component = isCat ? '😻' : '🐔';
console.log(component);
console.log(isCat ? '😻' : '🐔');

6. Template literals

const weather = '⛅';
const temparature = '16도'
console.log('Today weather is' + weaher + 'and temparature is' + temparature + '.'
);
console.log(`Today weather is ${weather} and teaparature is ${temparature}.`);

7. Opational chaining (ES11)

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

const person2 = {
    name: 'Bob',
};

{
    function printManager(person) {
        conosle.log(person.job.manager.name);
    }
    printManager(person1); //Bob
    printManager(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); //under
}

//아래처럼 간단하게 person에 job이 있으면, job에 manager가 있으면, manager의 이름이 있으면 출력

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

8. Nullish Coalescing Operator (ES11)

Logical OR operator
false: false, ''(비어져 있는 문자열), 0, null, undefined

{
    const name = 'Emma';
    const userName = name || 'Guest'; //앞의 값이 false 일 때만 뒤의 값이 실행
    console.log(userName); //Emma

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

name이 null이거나 undefined인 경우에만 Guest라는 이름을 할당하고 싶은데 빈 문자열일 경우에도 false로 간주한다. 즉, 사용자가 아무런 이름을 쓰고 싶지 않을 때도 Guest라는 이름을 써야한다.

{
    const num = 0;
    const message = num || 'undefined';
    console.log(message); //undefined
} 

이 경우에도 값이 할당되었지만 0이 false 값이라 undefined가 출력된다.

{
    const name = '';
    const userName = name ?? 'Guest'; //이름에 값이 없으면 Guest를 사용
    console.log(userName); //''
    const num = 0;
    const meggase = num ?? 'undefined'; //숫자에 값이 없다면 undefined 사용
    console.log(message); //0
}