[자바스크립트 코딩의 기술] 4장

<자바스크립트 코딩의 기술>을 읽고 작성합니다.

4장 조건문을 깔끔하게 작성하라

거짓 값이 있는 조건문을 축약하라

Falsy	keyword
0	숫자
-0	음수
0n	BigInt
""	빈 문자열
null	아무 값도 없음
undefined	원시값
NaN	숫자가 아님

출처 MDN falsy

배열과 객체의 경우 비어있더라도 항상 값이 참이다.
객체 또는 배열이 비어있는지 확인하려면 [].length 또는 Object.keys({}).length 등으로 확인해야 한다.

거짓인지 버그없이 확인하는 방법은 두 가지가 있다.

1. 데이터를 조작하지 않도록 함수를 수정하라
2. 함수를 수정할 수 없다면 strict equivalency를 이용하라!

삼항 연산자로 빠르게 데이터를 확인하라

삼항 연산자를 사용해야 하는 이유? 단순하기만 한 것이 아니라 더 예측 가능하며, 변수의 재할당을 줄일 수 있다.

if/else를 사용하는 경우 블록 유효 범위이므로 블록 밖에서는 결과를 알 수 없다.
밖에서도 접근 가능하게 var로 변수를 선언하거나 let으로 변수를 선언하고 재할당을 해야 한다.
하지만 이렇게 변수를 선언하면 잠재적인 유효 범위 충돌의 위험성이 존재한다.

다만 삼항 연산자를 여러 개 연결해서 사용하는 것은 가급적 피하는 것이 좋다.
과도하게 사용하는 경우 코드의 가독성이 떨어지기 때문이다.
여러 줄로 작성해야 하는 경우에는 분리해서 독립적인 함수 로 이동시키는 것이 좋다.

단락 평가를 이용해 효율성을 극대화하라

단락 평가(short circuiting) : 가장 타당한 정보를 먼저 위치시켜서 정보 확인을 건너뛰는 것

// before
function getIconPath(icon) {
    const path = icon.path ? icon.path : 'uploads/default.png';
    return `https://assets.foo.com/${path}`;
}
// after
function getIconPath(icon) {
    const path = icon.path || 'uploads/default.png';
    return `https://assets.foo.com/${path}`;
}

// before
function getImage(userConfig) {
    let img = 'default.png';
    if (userConfig.images){
        if (userConfig.images.length) {
            img = userConfig.images[0];
        }
    }
    retrun img;
}
// after 1
function getImage(userConfig) {
    if (userConfig.images && userConfig.images.length){
        return userConfig.images[0];
    }
    retrun 'default.png';
}
// after 2
function getImage(userConfig) {
    const images = userConfig.images;
    return images && images.length ? images[0] : 'default.png';
}

단순함은 훌륭합니다. 또한 코드를 한 줄로 줄이는 똑똑한 방법을 찾는 것은 즐거운 입니다.
그렇지만 목표는 항상 코드를 통한 의사소통과 가독성입니다. 단락 평가를 사용해 코드를 좀 더 읽기 좋게 만드세요.
그저 코드를 줄이기 위한 용도는 아닙니다.