[ES6, ES2020] 유용한 자바스크립트 최신 문법

🔷Nullish coalescing operator

leftExper ?? rightExpr

leftExper가 null or undefined인 경우에 rightExpr를 실행한다

//Bad Code💩
function printMessage(text){
    let message = text;
    if(text == null || text == undefined){
        message = 'Nothing to display';
    }
    console.log(message);
}

//Good code🌈
function printMessage(text){
    const message = text ?? 'Nothing to display';
    console.log(message);
}

printMessage('Hello"); //Hello✔
printMessage(undefined); //Nothing to display✔
printMessage(null); //Nothing to display✔

🔸Default parameter

function printMessage(text = 'Nothing to display'){
    console.log(text);
}
printMessage('Hello"); //Hello✔
printMessage(undefined); //Nothing to display✔
printMessage(null); //null✖

Default parameter는 undefined인 경우에만 기본값을 할당하고, null이나 특정 값을 명시적으로 할당하면 동작하지 않는다.

🔸Logical OR operator

leftExpr || rightExpr

leftExpr이 falsy인 경우에만 rightExpr을 실행한다
falsy인 경우: null, undefined, false, 0, -0, NaN, '', "" 등

function printMessage(text){
    const message = text || 'Nothing to display';
    console.log(message);
}
printMessage('Hello"); //Hello 
printMessage(undefined); //Nothing to display ✔
printMessage(null); //Nothing to display ✔
printMessage(0); //Nothing to display ✔
printMessage(''); //Nothing to display ✔

🔸tip

함수의 return 결과를 가지고도 활용할 수 있다

//getInitialState의 결과가 null이므로 fetchFromServer를 실행하고 그 결과인 'Hello'를 result에 할당한다
const result = getInitialState() ?? fetchFromServer();
console.log(result); //Hello

function getInitialState(){
    return null;    
}

function fetchFromServer(){
    return 'Hello';
}

🔷Spread Syntax

//Spread Syntax
const item = {type: '', size : 'M'};
const detail = {price: 20, made: 'Korea'};

//Bad Code💩: 원본 데이터의 변경은 좋지 않다
item['price'] = 20;
item['made'] = 'Korea';

//Bad Code💩: 수동적인 할당
const newObject = new Object();
newObject['type'] = item.type;
newObject['size'] = item.size;
newObject['price'] = detail.price;
newObject['made'] = detail.made;

//Good Code🌈: 두 객체의 key와 value가 할당되어 새로운 객체가 생성된다
const shirt = Object.assign(item, detail);

//Better🌈🔥: Spread Syntax를 이용해 두 객체의 key와 value를 꺼내 새로운 객체에 할당한다
const shirt1 = {...item, ...detail};
const shirt2 = {...item, ...detail, price: 40}; //두 객체의 값을 가져오되 하나의 속성만 변경해야 할 경우 이렇게 할당과 동시에 변경할 수 있다

//배열의 경우
let foods = ['🍕', '🍔', '🍟', '🌭'];

//foods.push('🥪');
food = [...foods, '🥪'];

//foods.unshift('🥪');
food = ['🥪', ...foods];

//let beverage = ['🥛', '🧃', '☕', '🍺'];
//foods.concat(beverage);
foods = [...foods, ...beverage];

🔷Optional Chaning

const bob = {
    name: 'bob',
    age: 20
};

const anna = {
    name: 'anna',
    age: 20,
    job : {
        title: 'Software Engineer'
    }
};


//Bad Code💩
function displayJobTitle(person){
    if(person.job && person.job.title){
        console.log(person.job.title);
    }
}

//Good Code🌈: job이 있다면 title이 있는지 확인하고 job이 없다면 false가 되면서 if문은 실행되지 않는다
function displayJobTitle(person){
    if(person.job?.title){
        console.log(person.job.title);
    }
}

//Good Code🌈: Nullish coalescing operator과 함께 사용하면 job이 있고, title이 있을 때는 출력하고 없으면 기본값을 출력할 수 있다
function displayJobTitle(person){
    const title = person.job?.title ?? 'No Job Yet';
    console.log(title);
}

❗ 유튜브의 자바스크립트 프로처럼 쓰는 팁 ✨ (+ 보너스 인터뷰 문제 하나!) '드림코딩 by 엘리' 영상을 보고 정리한 포스트입니다.

https://www.youtube.com/watch?v=BUAhpB3FmS4