조건문을 깔끔하게

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

프로그래밍을 시작하면서 우리는 조건문을 활용해 특정 정보에 적합한 결과를 찾는 과정을 반복합니다. 값을 비교할 때는 ==(동등 연산자)로 값만 비교하고, ===(일치 연산자)로 자료형까지 함께 비교합니다.

참과 거짓으로 돌아가서, 빈 문자열은 false와 동등하지만 일치하지는 않습니다. 즉, 빈 문자열은 거짓값이라는 것이죠. 아래 코드를 확인해보세요:

'' == false // true 

if('') {
  return '난 false가 아니야'
} else {
  return '내가 false라니ㅠㅠ 이게 무슨 말이요'
}
// '내가 false라니ㅠㅠ 이게 무슨 말이요'가 반환됩니다.

 

MDN에서 정의하는 거짓값은 다음과 같습니다:

• false
• null
• 0
• NaN
• '' (빈 문자열)
• "" (빈 문자열)

이 중에서 특히 0, null, 빈 문자열은 꼭 기억해두세요. 물론 false가 거짓인 것도 당연합니다.

여기서 눈치채셨을 수도 있는데, 배열과 객체는 누락되어 있습니다. 배열과 객체는 비어있어도 언제나 true입니다! 그래서 비어 있는지 확인하려면 길이가 0인지 또는 다른 방법을 사용해야 합니다.

그렇다면 왜 거짓과 참값에 관심을 가져야 할까요? 바로 긴 표현식을 축약할 수 있기 때문입니다.

const employee = {
  name: 'Eric',
  training: true
}

function listCerts(employee) {
  if(employee.training) {
    employee.certificates = ['Equipment'];
    // 조작
    delete employee.training;
  }
  
  function checkAuth(employee) {
    if (!employee.training) {
      return '기계를 작동할 권한이 없습니다.';
    }
    return `반갑습니다. ${employee.name}`;
  }
  
  checkAuth(employee);
}

listCerts(employee);

이 코드의 문제는 데이터를 조작한다는 점입니다. 하지만 거짓문의 편리함을 포기하기엔 너무 큰 가치가 있죠. 함수가 데이터를 조작한다면 함수 자체를 수정하는 것이 좋습니다.

만약 함수를 수정하기 어렵다면, 엄격한 일치 연산자(===)를 이용해 값이 존재하는지, 원하는 형식인지 확인하는 것이 좋습니다.

축약의 힘

거짓값을 이해하면 코드를 더 깔끔하게 만들 수 있습니다. 아래 예시를 보세요:

// 기존 코드
if (name !== '') {
  console.log('이름이 입력되었습니다');
}

// 축약 코드
if (name) {
  console.log('이름이 입력되었습니다');
}

이렇게 거짓값의 특성을 이용하면 코드가 훨씬 간결해집니다. 단, 주의할 점은 0이나 빈 문자열도 유효한 값으로 간주해야 하는 경우에는 명시적인 비교가 필요합니다.

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

삼항 연산자는 조건 ? 참일때 : 거짓일때 형식으로, if-else 구문을 한 줄로 표현할 수 있게 해줍니다. 간단한 조건 분기에서는 코드를 획기적으로 줄일 수 있습니다.

// 기존 코드
let accessLevel;
if (user.isAdmin) {
  accessLevel = 'admin';
} else {
  accessLevel = 'user';
}

// 삼항 연산자 사용
const accessLevel = user.isAdmin ? 'admin' : 'user';

이렇게 작성하면 코드가 훨씬 깔끔해지고 한눈에 로직을 파악할 수 있습니다. 또한 const로 선언할 수 있어 변수의 재할당을 방지할 수 있는 장점도 있습니다.

주의할 점: 중첩된 삼항 연산자

삼항 연산자가 편리하다고 해서 무조건 사용하는 것은 좋지 않습니다. 특히 여러 개의 삼항 연산자를 중첩해서 사용하면 코드의 가독성이 크게 떨어집니다.

// 지양할 코드
const result = condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4;

 

이런 코드는 한눈에 이해하기 어렵고, 유지보수가 힘들어집니다. 이 경우에는 전통적인 if-else 문이나 switch 문을 사용하는 것이 더 좋습니다.

// 더 나은 방법
let result;
if (condition1) {
  result = value1;
} else if (condition2) {
  result = value2;
} else if (condition3) {
  result = value3;
} else {
  result = value4;
}

 

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

논리 연산자들은 단락 평가라는 특성을 가지고 있어서, 코드를 더 간결하고 효율적으로 만들 수 있습니다. 단락 평가란 논리 연산의 결과가 이미 확정되면 나머지 부분을 평가하지 않는 특성을 말합니다.

 

OR 연산자(||)를 활용한 기본값 설정

// 기존코드

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

// 단락 평가 활용
function iconPath(icon) {
  const path = icon.path || 'uploads/default.png';
  return `https://assets.foo.com${path}`;
}

 

개선전 코드에서는 icon.path를 두 번이나 확인하고 있습니다. 코드를 개선하기 위해 OR 연산자(||)의 특성을 활용할 수 있습니다. OR 연산자는 왼쪽 값이 참이면 그 값을 반환하고, 거짓이면 오른쪽 값을 확인합니다.

AND 연산자(&&)를 활용한 조건부 실행

AND 연산자(&&)도 단락 평가 특성을 가집니다. 왼쪽 값이 거짓이면 바로 그 값을 반환하고, 참이면 오른쪽 값을 확인합니다. 이 특성을 이용하면 조건부 실행을 간결하게 표현할 수 있습니다.

// 기존 코드
function displayUser(user) {
  if (user.isActive) {
    renderUserProfile(user);
  }
}

// 단락 평가 활용
function displayUser(user) {
  user.isActive && renderUserProfile(user);
}

이 예제에서는 user.isActive가 참일 때만 renderUserProfile(user)가 실행됩니다. 이렇게 하면 if 문을 사용하지 않고도 조건부 실행을 할 수 있습니다.

주의할 점

단락 평가를 사용할 때는 몇 가지 주의해야 할 점이 있습니다:

1. || 연산자는 모든 거짓값(0, '', false, null, undefined)에 대해 오른쪽 값을 반환합니다. 이것이 의도한 바가 아니라면 조건문이나 ?? 연산자를 사용하는 것이 좋습니다.
2. && 연산자를 사용한 조건부 실행은 코드의 의도가 명확하지 않을 수 있습니다. 팀의 코딩 컨벤션에 따라 if 문을 사용하는 것이 더 나을 수 있습니다.
3. 너무 많은 연산자를 연결하면 가독성이 떨어질 수 있습니다. 적절한 균형을 찾는 것이 중요합니다.