자바스크립트 고급스럽게 쓰기 Javascript Pro Tips

템플릿 리터럴(Template literals)

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.

 

const horse = {
    name:'Psy',
    size: 'large',
    skills: ['jousting', 'racing'],
    age:7
}
//'Bad String Code'
let bio = horse.name + ' is a ' + horse.size + ' hose skilled in ' + horse.skills

//'Good String Code'

const {name, size, skills} = horse;

bio = `${name} is a ${size} skilled in ${skills.join(' & ')}`

function horseAge(str, age) {
    const ageStr = age > 5 ? 'old' : 'young';
    return `${str[0]}${ageStr} at ${age} years`
}

//굳이 파라미터로 넣을 필요가 없다. 
//예전버전 : const bio2 = horseAge("This horse is", horse.age);
const bio2 = horseAge`This horse is ${horse.age}`;

 

 

반복문

좋은 코드 vs 안 좋은 코드 비교

const orders = [500, 30, 99, 15, 223];

'Bad Loop Code'
//구시대적 룹 구문
const total = 0;
const withTax = [];
const highValue = [];
for (i=0; i< orders.length; i++){
    
    //Reduce
    total += orders[i];

    //map
    withTax.push(orders[i]);

    if (orders[i] > 100){
        highValue.push(orders[i])
    }
}



'Good Loop Code'

// 단 3줄로 요약이 가능...ㄷㄷ
const total = orders.reduce((acc, cur) => acc + cur)
const withTax = orders.map(v => v * 1.1)
const highValue = orders.filter(v => v > 100);

콜백 함수

좋은 코드 vs 안 좋은 코드 비교

const random = () => {
    return Promise.resolve(Math.random())
}


'Bad Code'
const sumRandomAsyncNums = () => {
    let first;
    let second;
    let third;

    return random()
    .then(v => {
        first = v;
        return random();
    })
    .then(v => {
        second = v;
        return random();
    })
    .then(v => {
        third = v;
        return random();
    })
}

//======================================================


'Good Code'

const sumRandomAsyncNums = async() => {
    const first = await random();
    const second = await random();
    const third = await random();

    console.log(`Result ${first + second + third}`);
}

 

 

출처 : youtu.be/Mus_vwhTCq0