Javascript 자바스크립트 코딩의 기술 4장 조건문을 깔끔하게 작성하라

---

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

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

• 불 자료형(boolean type)이라고 부르는 원시값 true, false 와 참(truthy) 또는 거짓(falsy) 값이라고 부르는 것들에 대한 차이를 살펴보자. 

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

• 배열과 객체의 경우 비어있더라도 항상 값이 참이다.(ex. [], {})
• 객체 또는 배열이 비어있는지 확인하려면 [].length 또는 Object.keys({}).length 등으로 확인해야 한다.
• 정의되지 않은 키의 값을 가져오면 undefined 이다.

1 == '1'
// true 동등 : 자료형이 다른 값을 비교할때 == 이용해서 동등인지 확인 가능

1 === '1'
// false 일치 : 동일한 값 또는 엄격히 일치하는 값이란 값뿐만 아니라 자료형도 같은것

• 간단하게 == 는 값은 같지만 자료형이 같지 않는 상태고, === 는 값과 자료형이 모두 같은 상태!!!

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

• 삼항 연산자를 사용해야 하는 이유는 단순하기만 한 것이 아니라 더 예측 가능하며, 변수의 재할당을 줄일 수 있다.
• 삼항 연산자는 코드를 단순화할 수 있어서 사용할 만한 가치가 있는 경우에만 쓴다.
• 사용할 만한 가치가 없다고 생각되면 if 문으로 돌아가는것이 좋다.
•  여러 줄로 작성해야 하는 경우에는 분리해서 독립적인 함수 로 이동시키는 것이 좋다.

if (active) {
    var display = 'bold'
} else {
    var display = 'normal'
}

// 삼항연산자로 개선한 코드
let display = active ? 'bold' : 'normal';

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

• 단락 평가(short circuiting) : 가장 타당한 정보를 먼저 위치시켜서 정보 확인을 건너뛰는 것
• || 으로 작성하는 OR연산자는 선택 가능한 값 중 하나라도 true 이면 true 반환

const name = 'joe' || 'I have no name';
console.log(name);
// 'joe'

• && 으로 작성하는 AND 연산자는 거짓값이 발생하는 즉시 중단

const name = false && 'I have no name';
console.log(name);
// false

• 이번엔 예제 코드를 통해 알아보도록 하자!

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

const icon = {
    path: 'acme/bar.png'
}

getIconPath(icon);
// "https://assets.foo.com/acme/bar.png"

// 단락평가로 개선 된 코드
function getIconPath(icon) {
    const path = icon.path || 'uploads/defaults.png';
    return `https://assets.foo.com/${path}`
}

• 단락 평가의 장점은 간결해질 뿐 아니라, 표현식 끝에 기본값을 추가할 수 있고, 오류를 예방 할 수 있다.
• 조건문을 나열 또는 삼항연산자로 사용할때 상황을 잘 구분하자.
• 코드를 줄이는 것도 좋지만 가장 중요한건 코드를 통한 소통과 가독성임을 잊지 말자.

Reference

자바스크립트 코딩의 기술 요약 / 정리