Medium - Stop Putting So Many If Statements in Your JavaScript

03 Jan 2020 in Trend

Trend 파악을 위한 Medium 기고문 포스팅 - 자바스크립트에서 너무 많은 If문을 사용하지 마세요; 여러분의 조건문을 처리할 수 있는 4가지 다른방법

Photo by T R A V E L E R G E E K on Unsplash

망치를 든 남자에겐 모든게 다 못으로 보입니다 - 마크 트웨인

제 생각에 조건문의 로직은 소프트웨어의 빵과 버터입니다. 개발자들이 강력한 것을 만들 수 있도록 해주며 유용하고 재밌고 흥미롭죠. 조건문을 처리하는 로직 중에 가장 유명한 방식은 if 구문 일 것입니다. if 구문은 널리 쓰이며 유연하고 이해하기 쉽기 때문에 유명한 것입니다. 그러나 조건 로직을 다른 방식으로 처리하는 것도 개발자들 사이에서 흔히 보입니다. 모든 작업에 대해서 if 구문을 사용하는 것도 쉽지만 다른 기술을 익히신다면 여러분을 좀 더 능력있고 효율적인 개발자로 만들어 줄 것입니다.

장인은 모든 일에 똑같은 작업을 사용하지 않습니다. 실력있는 개발자도 마찬가지 일 것입니다. 이 기사에서는 고전적인 if 구문을 대체할 수 있는 4가지 방법을 알아볼 것입니다.

삼항 연산자
스위치 구문
논리 연산자 ( &&, )
룩업 맵

Ternary Operators

삼항 연산자들은 기본적인 if-else 조건문을 처리할 수 있는 좋은 방법입니다. 아래의 예제에서는 message에 할당되는 값이 hasError의 값에 따라 달라집니다. 고전적인 if 구문은 다음과 같습니다.

let message = "Thanks for contacting us! We'll be in touch shortly!"
if ( hasError ) {
  message = "Oops, that's an error. Please try again later!"
}

이것은 아마 처음에 에러가 없는 버전에서 메시지가 작성되었다가 나중에 if 구문이 필요해서 추가한 것입니다. 이제 삼항연산자를 사용한 처리를 살펴보시죠.

const message = hasError
  ? "Oops, that's an error. Please try again later!"
  : "Thanks for contacting us! We'll be in touch"

삼항연산자는 몇가지 주목할만한 장점이 있습니다.

message가 딱 한번만 할당되기 때문에 더욱 컴팩트합니다.
메시지가 재할당 될 일이 없기 때문에 let 대신에 const로 선언하여 message가 변경될 걱정이 없습니다.

삼항연산자는 이런 상황에서 명백하게 더욱 좋은 코드가 되지만 항상 이렇게 써야 하는 것은 아닙니다. 이렇게 삼항 연산자로 쓸 때에느느 로직이 매우 간단할 때이며 여러개의 삼항연산자를 한줄에 섞어서 쓰지마세요. 그래야 여러분의 코드를 보는 분들이 편할겁니다.

Switch Statements

스위치 구문은 if구문을 대체할 수 있는 가장 명백한 후보입니다. 조건이 참인지 거짓인지 결정하는 것 대신에 스위치 구문은 하나의 값을 들여다보고 그 값과 일치하는 case 블록을 실행합니다. 이 때문에 스위치 구문은 if 구문 보다는 유연함이 떨어지지만 이 말은 스위치 구문이 더욱 정확하게 로직을 표현한다는 것입니다.먼저 if 구문을 살펴보겠습니다.

if ( status === 200 ) {
  handleSuccess()
} else if ( status === 401 ) {
  handleUnauthorized()
} else if ( status === 404 ) {
  handleNotFound()
} else {
  handleUnknownError()
}

이제 스위치 구문을 살펴보겠습니다.

switch ( status ) {
  case 200:
    handleSuccess()
    break
  case 401:
    handleUnauthorized()
    break
  case 404:
    handleNotFound()
    break
  default:
    handleUnknownError()
    break
}

스위치 구문이 코드가 좀 더 많긴 하지만 값이 같은지 여러번 체크하는 것을 피할 수 있고 전체적인 흐름을 알아보기 쉽습니다. 스위치문을 작성할 때 가장 주의해야 할 것은 break를 쓸 때 입니다. if-else 체인과 달리 스위치 구문은 다음 케이스로 넘어갈 수 있습니다. 이것은 혼란을 야기하기 때문에 모든 케이스마다 break를 추가하는 것을 추천합니다.

Logical Operators (&& and ||)

&&과 || ( and 와 or ) 연산자들은 다른 프로그래밍 언어들과 달리 자바스크립트에서 다르게 동작합니다. 이 때문에 이런 연산자들은 조건물을 처리할 수 있는 고유한 특성을 갖게 되었습니다. 다음은 && 연산자가 자바스크립트에서 어떻게 동작하는 지 설명하는 것입니다.

먼저 연산자 왼쪽의 값을 살펴서 그 값이 거짓이라면 바로 리턴을 해버립니다.
왼쪽의 값이 참이라면 오른쪽 연산자의 값이 리턴됩니다.

비슷하게 || or 연산자가 어떻게 동작하는지 보겠습니다.

먼저 왼쪽의 연산자의 값을 봅니다. 참이라면 그 값을 리턴합니다.
왼쪽 값이 거짓일 경우 연산자 오른쪽에 있는 값을 리턴합니다.

여기서 주목하셔야 할 점은 앤드 연산자와 오어 연산자가 항상 불린 값을 리턴할 필요가 없다는 것입니다. 이 때문에 혼란스러울 수 있지만 매우 유용하게 사용될 수 있습니다.

Putting the && Operator into Action

종종 여러분은 프로퍼티 내부의 객체에 접근하고 싶을 것입니다. 그러나 그 전에 먼저 객체가 존재하는지 아닌지 항상 체크를 하실 겁니다. 예를 들어 여러분이 user의 이름 프로퍼티를 사용해서 다음과 같은 환영문구를 작성하려고 한다고 칩시다.

const message = `Welcome, ${user.name}!`

그렇지만 만약 user가 null이나 false, undefined면 어떻게 하나요? 아마 타입에러가 발생할 것입니다. 때문에 이를 피하기 위해서 다음과 같이 if 구문을 사용할 것입니다.

let message = null
if ( user && user.name ) {
  message = `Welcome, ${user.name}!`
}

위의 코드도 잘 동작하지만 앤드 연산자는 더욱 정확하게 일을 처리할 수 있습니다.

const message = user && user.name && `Welcome, ${user.name}!`

이것은 메시지가 const가 될 수 있게 해주며 모든 작업이 한줄의 코드로 수행될 수 있게 해줍니다. 훨씬 낫죠.

Using the || operator

오어 연산자는 의존적인 값을 할당할 때 매우 좋습니다. 예를 들어서 여러분이 현재 유저를 위해 handle 변수를 만든다고 생각해 봅시다. 유저가 유효한 이름을 가지고 있으면 사용될 것이고 그렇지 않다면 Guest로 설정되는 것입니다. 먼저 일반적인 if 구문은 다음과 같을 것입니다.

let handle = 'Guest'
if ( username ) {
  handle = username
}

오어 연산자를 사용하면 다음과 같이 처리할 수 있습니다.

const handle = user name || 'Guest'

또 다시 한줄의 코드로 더욱 깔끔해 졌습니다. 매우 좋은 개선입니다.

Lookup Maps

룩업 맵은 하나와 관련된 값을 찾는 데 매우 적합합니다. 예를 들어서 메시지 박스의 상태와 연관된 색깔을 얻으려고 합니다. 아마 일반적으로 다음과 같이 설정할 것입니다. 성공은 초록, 경고는 노랑, 정보는 파랑, 에러는 빨강, 그렇다면 if 구문으로 이루어진 함수를 작성해 봅시다.

function getStatusColor ( status ) {
  if ( status === 'success' ) {
    return 'green'
  }
  if ( status === 'warning' ) {
    return 'yellow'
  }
  if ( status === 'info' ) {
    return 'blue'
  }
  if ( status === 'error' ) {
    return 'red'
  }
}

이 방식도 괜찮지만 룩업 맵을 사용하는 것이 더욱 적절할 것입니다. 객체 리터럴은 자바스크립트에서 룩업 맵을 개선하는 하나의 방법입니다.

function getStatusColor ( status ) {
  return {
    success: 'green',
    warning: 'yellow',
    info: 'blue',
    error: 'red'
  }[status]
}

이 코드가 좀 더 반복하는 것이 적고 깔끔합니다. 추가적인 이익으로 룩업 맵은 하드코딩이 필요하지 않습니다. 상태값과 색깔의 관계는 동적으로 이뤄지며 그래도 이 패턴은 동작할 것입니다.

Summary

if 구문은 자바스크립트 개발자들이 항상 손에 익혀둬야 하는 강력한 도구입니다만 조건문을 처리하는 다른 도구들이 때로는 더욱 적절할 때가 있습니다. 삼항연산자는 if-else 로직을 한줄의 코드로 처리하기에 아주 완벽할 것입니다. 그러나 아주 일반적이고 간단한 경우에만 사용해야 합니다.

스위치 구문은 특정 값이 여러개의 구분되는 값들 중 하나일 때 아주 이상적일 것입니다. if 구문처럼 강력하진 않지만 훨씬 가독성이 좋습니다. 다른 프로그래밍 언어와 달리 앤드 연산자와 오어 연산자는 자바스크립트에서 항상 참/거짓 값을 리턴하는 것이 아니기 때문에 매우 유용합니다. 앤드 연산자는 객체의 프로퍼티에 접근할 때 에러를 피하기 위해 자주 사용되며 오어 연산자는 의존적인 값을 할당할 때 매우 유용합니다.

룩업 맵은 하나의 값이 다른 것과 연관되어 있을 때 매우 유용합니다. 예를 들어 메시지의 상태와 연관된 색깔같은 것 말이죠. 이런 4가지 조건문 패턴을 익히신다면 여러분에게 자바스크립트 코드를 구성하는데 더욱 도움이 될 것이며 코드를 전체적으로 보기 좋게 할 것입니다. 적재적소에 올바른 도구를 사용한다면 여러분의 코드는 더욱 우아하고 정확하고 유지보수 쉽게 될 것입니다.