코딩의 기술 4. 조건문을 깔끔하게 작성하라

일반적인 조건문

let color:
if (balance > 0) {
    color = "green";
} else {
    color = "red";
}

 

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

 

1. bollean 자료형 ( true, false )

2. 참 또는 거짓 값

- 둘 사이의 차이가 존재. 동일하지 않지만 대부분의 경우 유사하게 작동한다.

 

동등과 일치의 차이

- 동등 : 내용은 같지만 자료형이 서로 다른 값 ( == )

- 일치 : 내용도 같고 자료형도 같은 값 ( === )

1 === '1'  // false
1 === 1  // true


'' == false  // true
'' === false  // false

거짓 값의 목록

- false, null, 0 , NaN(숫자가 아님), ' ', " "

 

const employee = {
    name: 'Eric',
    equipmentTraining: '',
}

if (!employee.equipmentTraining) {
    return '기계를 작동할 권한이 없습니다.';
}

 

주의할점 !

- 배열과 객체는 비어 있는 경우에도 항상 참 값. [ ].length 등의 방법으로 확인해야 한다.

 

"" ? 1 : 0
// 0


[] ? 1 : 0
// 1

 

 

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

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

// 삼항연산자로 변환시

var display = active ? "bold" : "normal";

삼항 연산자를 이용하면 변수의 재할당을 줄일 수 있다.

 

if (active) {
    const display = "bold"
} else {
    const display = "normal"
}

console.log(display);
// Uncaught ReferenceError: display is not defined

const 사용시 블록 밖에서는 확인 결과를 알 수 없기 때문에 블록 유효 범위 밖에서도 접근 가능한 var로 변수를 선언하거나 let으로 변수를 선언해야 한다.

 

주의할 점은, 삼항 연산자를 여러 개 연결해서 사용할 수는 있지만 가급적 피하는 것이 좋다. 아래의 경우 삼항 연산자를 연결해서 사용하게 되면서 단순함이라는 가치를 잃어버렸다. 이 경우 원래의 if 문을 사용하는 것이 좋다.

const permissions = title === '부장' || title === '과장' ?
    title === '과장' ? ['근로시간', '초과근무승인', 수당'] : ['근로시간', '초과근무승인']
    : ['근로시간'];

 

 

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

- 단락 평가의 목적 : 가장 타당한 정보를 먼저 위치시켜서 정보 확인을 건너뛰는 것

 

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

이 코드의 목적은 단순하다. 아이콘 경로가 참 값이면 해당 경로를 사용하고 거짓 값인 경우 기본값을 사용한다. 이 코드를 좀 더 간결하게 만들어보자.

 

우선 논리 연산자가 어떻게 작동하는지를 보자. || 으로 작성하는 OR 연산자는 하나라도 true면 true를 반환한다. 즉, 어떤 값이든 true를 반환하면 다른 값은 확인할 필요가 없다. 그리고 언어 입장에서는 참 값을 구태여 true로 변경하는 것은 이득이 없다. 따라서 OR 연산자로 검사한 값 중 하나가 true를 반환하면 true 대신 검사를 통과한 참 값이 반환된다.

const name = 'joe' || 'I have no name';

name;
// 'joe'

이제 단락 평가를 이용해 삼항 연산자를 더 간결하게 바꿀 수 있다.

const path = icon.path ? icon.path : 'uploads/default.png'; // 기존 삼항연산자

const path = icon.path || 'uploads/default.png';  // 단락 평가 사용

또 다른 단락 평가로 조건문과 && 연산자를 조합할 수 있다. && 연사나로 작성한 논리 문자열은 거짓 값이 발생하는 즉시 중지된다. 따라서 존재하지 않는 메서드를 호출할 때 발생하는 TypeError를 걱정할 필요가 없다.

const images = [];
const images2 = ['apple', 'banana', 'grape'];

const newImg = images[0] || 'default.png';
// TypeError: Cannot read property '0' of undefined

const newImg = images && images.length ? images[0] : 'default.png';