자바스크립트 코드 프로처럼 쓰는 팁

원본 영상 : https://youtu.be/BUAhpB3FmS4?si=24vbNlld56sNsVoO 

 

01. 삼항 연산자(Terary Operator)

// Ternary Operator
// Bad Code
function getResult(score) {
    let result;
    if (score > 5) {
        result = '👍'
    } else if (score <= 5) {
        result = '👎'
    }
    return result;
}

// Good Code
function getResult(score) {
    return score > 5 ? '👍' : '👎';
}

if~else 문을 사용하기 전에 삼항연산자의 사용 가능성을 먼저 확인해보자.

 

02. Nullish Coalescing Operator

// Nullish Coalescing Operator
// 🙅‍♂️ 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');
printMessage(undefined);
printMessage(null);

정상적인 text가 전달되면 해당 text를 출력하지만, undefined나 null은 뒤쪽의 Nothing to display가 호출된다.

 

02-1. Default Parameter와의 차이점

// 🙆‍♂️ Good Code
function printMessage(text) {
    const message = text ?? "Nothing to display";
    console.log(message);
}

// Default Parameters는 undefined일 경우에만 적용된다.
function printMessage(text = 'Nothing to display') {
    console.log(text);
}

printMessage('Hello');
printMessage(undefined);
printMessage(null);

위쪽 메소드 실행 시 결과값은 아래와 같음.
[결과값]

Hello
Nothing to display
Nothing to display

 

Default Parameter사용 시 null을 그대로 받아옴.

[결과값]

Hello
Nothing to display
null

 

02-2. Logical OR(||) Operator

 // Logical OR Operator
 function printMessage(text) {
    const message = text || 'Nothing to display';
    console.log(message);
 }

 printMessage('Hello');
 printMessage(undefined);
 printMessage(null);
 printMessage(0);
 printMessage('');

leftExpr || rightExpr

왼쪽이 falsy이면 오른쪽이 실행

falsy에 해당하는 것들

undefined, null, false, 0, -0, NaN, "", '', ``

[결과값]

Hello
Nothing to display
Nothing to display
Nothing to display
Nothing to display

 

02-2. nullish-coalescing 메소드 비교

const result = getInitialState() ?? fetchFromServer();
console.log(result);

function getInitialState() {
    return null;
}

function fetchFromServer() {
    return 'fetch From Server!';
}

nullish-coalescing의 경우 객체간의 비교도 가능함.

A() ?? B() 일 경우 A 메서드의 결값이 null이나 undefined일 경우 B()를 실행한다.

 

03. Object Destructuring

// Object Destructuring
const person = {
    name: 'Tim',
    age: 30,
    phone: '01012345678'
};

// 🙅‍♂️ Bad Code
function displayPerson(person) {
    displayAvatar(person.name);
    displayName(person.name);
    displayProfile(person.name, person.age);
}

// 🙆‍♂️ Good Code
function displayPerson(person) {
    const { name, age } = person;
    displayAvatar(name);
    displayName(name);
    displayProfile(name, age);
}

person object를 더 이상 반복할 필요가 없다.

 

04. Spread Syntax - Object (Object 하나로 합치기)

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

// 🙅‍♂️ Bad Code
item['price'] = detail.price;

// 🙆‍♂️ Good Code
// 구 버전의 문법
const shirt0 = Object.assign(item, detail); 
// Spread Syntax를 이용한 방법
const shirt1 = { ...item, ...detail }; 
// 필드값 업데이트를 원할 경우
// Spread Syntax 이용 및 detail.price 값을 20에서 40으로 업데이트
const shirt2 = { ...item, ...detail, price: 40};

 

04-1. Spread Syntax - Array

// Spread Syntax - Array
let character = ['A', 'B', 'C'];
let character2 = ['E', 'F', 'G'];
// Push
character = [...character, 'D']; // A, B, C, D
// Unshift
character = ['Z', ...character]; // Z, A, B, C, D
// 배열 합치기
let combined = character.concat(character2);
// OR
combined = [...character, ...character2];
// 중간에 값 추가 원할 시
combined = [...character, '추가', ...character2];

 

05. Optional Chaining

// Optional chaining
const bob = {
    name: 'bob',
    age: 30
};
const anna = {
    name: 'anna',
    age: 30,
    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를 리턴
function displayJobTitle(person) {
    if(person.job?.title) {
        console.log(persion.job.title);
    }
}

// 🙆‍♂️ Good Code
function displayJobTitle(persion) {
    // job이 없는 경우, 또는 job은 있는데 title이 없는 경우에는 우측 출력
    const title = person.job?.title ?? 'No Job Yet';
    console.log(title);
}

 

06. Template Literals

// Template Literals(Template String)
const person = {
    name: 'Tim',
    score: 4
};

// 🙅‍♂️ Bad Code
console.log(
    'Hello ' + person.name + ', Your current score is : ' + person.score
);

// 🙆‍♂️ Good Code
console.log(`Hello ${person.name}, Your current score is : ${person.score}`);
// OR
const { name, score } = person;
console.log(`Hello ${name}, Your current score is : ${score}`);
// OR 공용함수로 빼놓는 경우
function greetings(person) {
    const { name, score } = person;
    console.log(`Hello ${name}, Your current score is : ${score}`);
}

 

07. Loops

// Looping
const items = [1, 2, 3, 4, 5, 6];
// ...중략
const evens = getAllEvens(items); // 짝수만 구하기
const multiple = multiplyByFour(evens); // evens 각 필드에 4씩 곱하기
const sum = sumArray(multiple); // 곱한 값을 다 더하기
console.log(sum); // 출력하기

// 🙅‍♂️ Bad code
function getAllEvens(items) {
    const result = [];
    for (let i = 0; i < items.length; i++) {
        if (items[i] % 2 === 0) {
            result.push(items[i]);
        }
    }
    return result;
}

function multiplyByFour(items) {
    const result = [];
    for (let i = 0; i < items.length; i++) {
        result.push(items[i] * 4);
    }
    return result;
}

function sumArray(items) {
    let sum = 0;
    for (let i = 0; i < items.length; i++) {
        sum += items[i];
    }
    return sum;
}

// 🙆‍♂️ Good Code
function getAllEvens(items) {
    return items.filter((num) => num % 2 === 0);
}

function multiplyByFour(items) {
    // 값을 하나하나씩 변경하려면 map을 활용
    return items.map((num) => num * 4);
}

function sumArray(items) {
    items.reduce((a, b) => a + b, 0);
}

// 🙆‍♂️🙆‍♂️ Good Code
const evens = items.filter((num) => num % 2 === 0);
const multiple = evens.map((num) => num * 4);
const sum = multiple.reduce((a, b) => a + b, 0);
console.log(sum);

// 🙆‍♂️🙆‍♂️🙆‍♂️ Good Code
const result = items
    .filter((num) => num % 2 === 0)
    .map((num) => num & 4)
    .reduce((a, b) => a + b, 0);
console.log(result);

 

08. Async / Await

// Promise -> Async / Await

// 🙅‍♂️ Bad Code
function displayUser() {
    fetchUser()
    .then((user) => {
        fetchProfile(user)
        .then((profile) => {
            updateUI(user, profile);
        });
    });
}

// 🙆‍♂️ Good Code
// 무분별한 Promise사용으로 인한 then의 연속을 해결해야 함
// async / await 문법으로 해결 가능
async function displayUser() {
    const user = await fetchUser();
    const profile = await fetchProfile(user);
    updateUI(user, profile);
}

 

09. Array Remove Duplicates

// Remove Duplicates
const array = ['A', 'B', 'C', 'A', 'D', 'B'];
// Array 자료형은 기본적으로 중복을 허용하기에 중복 제거가 쉽지 않음
console.log(array); 
// Set 자료형은 기본적으로 중복을 허용하지 않기에 중복을 자동으로 제거할 수 있음
// Array를 Set으로 새롭게 변환하여 만들면 Set이 만들어지며 자연스럽게
// 배열 내 중복을 제거할 수 있음
console.log([...new Set(array)]);