자바스크립트 코딩의 기술_조건문 깔끔하게 작성하기

(본 포스팅은 길벗의 '자바스크립트-코딩의 기술' 책을 공부하면서 작성되었습니다_내돈내산)

 

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

• 값을 빠르게 검증하는 방법은 boolean type이라고 부르는 원시값 true, false와 참(truthy) 또는 거짓(falsy)값이라고 부르는 값 사이의 미묘한 차이를 이해하는데 있다.
• '동등'과 '일치'의 차이를 짚고 넘어가야 한다. ( 1 === '1' // false, 1 === 1 // true )
  '==' 를 이용하는 경우가 동등 >> 두 값이 동일함
  '===' 를 이용하는 경우가 일치 >> 두값이 서로 동일하고 자료형도 같다.
•  객체와 배열의 인스턴스인 경우에는 동일여부를 판단할때, 참조를 기준으로 한다.

'' == false  // true
if('') {
	return '난 false가 아니야!'
} else {
	return '내가 false라니....:( !'
}

// '내가 false라니....:( !'

• MDN 에 제시되어있는 거짓값들 
  >>  false, null, 0, NaN(숫자가 아님), '', "" (이 중에서도 0, null, 빈문자열이 거짓 값이라는걸 기억해야 한다.)
• 거짓값의 목록에는 배열과 객체가 없다. 배열과 객체의 경우 빈 배열 또는 빈 객체라도 항상 참 값이다. 그러므로 객체 또는 배열이 비어있는지 확인하려면 숫자를 반환하는 다른방법(대표적으로 length확인)을 사용해야 한다.
• 참과 거짓 값이 중요한 이유는 긴 표현식을 축약하는데 매우 좋기 때문이다.
• 의도와 다른 거짓값을 만드는 경우를 주의해야 한다.(배열메서드의 indexOf 메서드는 위치를 반환하면서 false값이 0을 반환할 때가 있다.)
• '==='인 엄격한 일치를 이용해 값과 형태를 모두 비교하여 버그를 방지할 수 있다.

---

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

• 삼항 연산자를 이용하면 변수의 재할당을 줄일 수 있게 된다. 새로운 변수 선언 방식은 if / else 문을 과도하게 사용하는 문제로 이어지기도 한다.
• 삼항연산자는 코드가 단순해지며, 더 예측가능한 형태를 가지게 된다.

// 일반 if문을 사용한 표현식
if (active) {
	var display = 'bold';
} else {
	var display = 'normal';
}

// 삼항연산자를 사용해 간결해진 코드
var display = active ? 'bold' : 'normal';

• 조건문 안에서 새로운 변수를 선언할 때 블록유효범위를 가지는 변수의 경우 블록 밖에서는 확인 결과를 알수 없다.

  if (title === 'manager') {
    const permissions = ['time', 'pay'];
  } else {
    const permissions = ['time'];
  }
  permissions;
  // ReferenceError: permissions is not defined

• 위의 경우에서는 블록 유효범위 밖에서도 접근가능한 var로 변수를 선언하거나, let으로 변수를 선언하고 if/else문 내부에서 재할당 해야 한다.
• 위의 조건문을 삼항연산자를 이용해 처리하는 경우 유효범위 충돌이나 변수의 생성시점 등 다양한 고려사항이 사라지게 된다.

const permissions = title === 'manager' ? ['time', 'pay'] : ['time'];

 // 삼항연산자를 여러개 연결하는 경우
 const permissions = title === 'supervisor' || title === 'manager' ?
    title === 'manager' ?
      ['time', 'overtimeAuthorization', 'pay'] : ['time', 'overtimeAuthorization']
    : ['time'];
    
// 삼항연산자를 여러개 사용하기보다 독립적인 함수로 이동시킨 경우
function getTimePermissions({ title }) {
  if (title === 'manager') {
    return ['time', 'overtimeAuthorization', 'pay'];
  }

  if (title === 'supervisor') {
    return ['time', 'overtimeAuthorization'];
  }
  return ['time'];
}

const permissions = getTimePermissions({ title: 'employee' });

---

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

• 단락 평가(short circuiting): 가장 타당한 정보를 먼저 위치시켜서 정보 확인을 건너뛰도록 한다.
• 아래의 예시는 불필요한 데이터의 확인작업이 수반되는 경우이다.

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

• 위의 코드에서 icon.path 가 True를 반환할 경우 icon.path를 변수에 할당하는 과정을 가지고 있다. 즉 icon.path를 두 번 연속해서 확인하는 과정을 가지고 있는 코드이다. 참인경우 바로 그값을 할당하도록 코드를 설계하는 방법이 있다.
• 위 문제를 해결하기 전에 논리연산자가 어떻게 작동하는지 잠시 들여다 볼 필요가 있다. || 으로 작성하는 OR 연산자는 선택 가능한 값 중 하나라도 true를 반환할 경우 실제로는 true 대신 검사를 통과한 참 값이 반환되게 된다.

// 논리연산자인 OR연산자(||)를 사용하여 로직을 한단계 줄여나갔음.
function getIconPath(icon) {
  const path = icon.path || 'uploads/default.png';
  return `https://assets.foo.com/${path}`;
}

• 단락 평가에서 가장 좋은 부분은 표현식의 끝에 기본값을 추가할 수 있다는 것이다.(default 부분) 따라서 변수가 거짓 값이 될 가능성을 염려하지 않아도 된다. 마지막에는 무조건 참값(기본값)을 넣을 수 있기 때문.

function getImage(userConfig) {
  if (userConfig.images && userConfig.images.length > 0) {
    return userConfig.images[0];
  }
  return 'default.png';
}

• 다음은 조건문과 && 연산자를 조합하여 TypeError를 피할 수 있도록 한다. && 연산자로 작성한 논리 문자열은 거짓값이 발생하는 즉시 중지되어진다. 따라서 존재하지 않는 메서드를 호출할 때 발생하는 TypeError 를 걱정할 필요가 없으며, 컬렉션의 존재 여부를 안전하게 확인하고 메서드를 호출 할 수 있다.

단락평가를 삼항연산자와 조합해서 확인과정을 줄이는 방법도 있지만. 다루기가 어려워져 주의를 요한다.