[좋은 조건문 작성하기 4] JSON 객체를 활용한 조건문 형태

※ 대부분에 언어에 해당될 수 있는 내용이지만, javascipt 언어에 가장 적합한 글입니다.

---

꼭 <if문>, <switch/case문>을 써야만 조건문인 것은 아니다.
JSON 객체를 활용해서도 조건문을 만들 수 있다.

function getFruitByName(name) {
    if (name === 'apple') {
        return '🍎'
    } else if (name === 'banana') {
        return '🍌';
    } else if (name === 'kiwi') {
        return '🥝';
    } else if (name === 'lemon') {
        return '🍋';
    } else {
        return '';
    }
}

위의 조건문을 <switch/case문>으로 바꿔보자.

function getFruitByName(name) {
    switch (name) {
        case 'apple' :
            return '🍎';
        case 'banana' :
            return '🍌';
        case 'kiwi' :
            return '🥝';
        case 'lemon' :
            return '🍋';
        default :
            return '';
    }
}

JSON 객체를 활용해서 같은 로직을 표현해보자.

function getFruitByName(name) {
    const fruits = {
        'apple': '🍎',
        'banana': '🍌',
        'kiwi': '🥝',
        'lemon': '🍋'
    }
    return fruits[name] || ''
}

훨씬 라인수가 줄었고, 객체는 재활용 가능한 형태가 되었다.
자바스크립트에서 함수는 1급 객체(First-class citizen) 이기 때문에
JSON 객체에서 충분히 활용 가능하다.

※ 1급 객체(First-class citizen)
- 함수를 변수나 데이터에 할당할 수 있다.
- 함수를 인자로 전달할 수 있다.
- 함수를 리턴할 수 있다.

function getAppleName() {
    return '🍎';
}

function getBananaName() {
    return '🍌';
}

function getKiwiName() {
    return '🥝';
}

function getLemonName() {
    return '🍋';
}

function getDefaultName() {
    return '';
}

function getFruitByName(name) {
    const fruits = {
        'apple': getAppleName,
        'banana': getBananaName,
        'kiwi': getKiwiName,
        'lemon': getLemonName
    }
    const getFruit = fruits[name] || getDefaultName;
    return getFruit();
}

이렇게 활용할 수도 있기 때문에 대부분의 조건문을 위와 같이 리팩토링할 수 있다!

여기서 아래의 bad 조건문처럼 모든 함수를 객체 내에서 실행시켜 담는 경우
분기에 해당되는 함수만 실행되는 게 아니라 모든 함수가 실행되어 성능이 떨어지므로 주의해야 한다.

//good
function getFruitByName(name) {
    const fruits = {
        'apple': getAppleName,
        'banana': getBananaName,
        'kiwi': getKiwiName,
        'lemon': getLemonName
    }
    const getFruit = fruits[name] || getDefaultName;
    return getFruit();
}

//bad
function getFruitByName(name) {
    const fruits = {
        'apple': getAppleName(),
        'banana': getBananaName(),
        'kiwi': getKiwiName(),
        'lemon': getLemonName()
    }
    return fruits[name];
}

또 주의해야 할 점은 디버깅 시 소스 라인에서 조건에 해당되는 JSON 객체 값에서 멈추지 않기 때문에
우측의 로컬 스코프 영역을 통해 데이터를 파악해야 한다!

* 출처 : https://soeunlee.medium.com/javascript%EC%97%90%EC%84%9C-%EC%99%9C-%ED%95%A8%EC%88%98%EA%B0%80-1%EA%B8%89-%EA%B0%9D%EC%B2%B4%EC%9D%BC%EA%B9%8C%EC%9A%94-cc6bd2a9ecac