이 글은 Jecelyn Yeen의 5 Tips to Write Better Conditionals in JavaScript라는 글을 한국어로 번역한 글입니다. 원문 링크
JavaScript를 쓸 때는 많은 조건문을 사용합니다. 조건문을 더 보기 좋고, 깔끔하게 쓰는 방법을 알려드리겠습니다.
- 여러 조건에 함께 맞아야 할 때는 Array.includes를 사용하자.
- 중첩은 최대한 적게, Return은 최대한 빨리.
- 기본 파라미터와 비구조화를 사용하자.
- Switch 대신 Map과 오브젝트를 사용하자.
- 배열의 전체 조건에는 Array.every, 부분 조건에는 Array.some을 사용하자.
여러 조건에 함께 맞아야 할 때는 Array.includes를 사용하자.
아래의 예제를 봅시다.
첫눈에는 괜찮을 수도 있습니다. 하지만 우리가 '체리'나 '크랜베리' 같은 또 다른 빨간 과일을 추가해야 할 때는 어떻게 해야할까요? ||보다 더 좋은 방법이 없는 걸까요?
이렇게 조건들을 배열로 따로 작성하면 코드가 더 간결해집니다.
중첩은 최대한 적게, Return은 최대한 빨리.
1번의 예시를 조금 더 확장해보도록 하겠습니다.
- 과일값이 주어지지 않는다면 에러를 냅니다.
- 과일이 10개가 넘는다면
아주 많네요!를 출력합니다.
위의 코드에는
- 1개의 잘못된 파라미터를 골라내는 if~else 문
- 3단계의 중첩 if문(조건1, 조건2, 조건3) 이 있습니다.
제 코딩 스타일은 조건에 맞지 않으면 최대한 빨리 return 하는 겁니다.
이렇게 하면 단 하나의 중첩 if 문만 남게 됩니다. 이런 코딩 스타일은 if 문으로 실행할 코드의 길이가 길 때 유용합니다. (긴 if 문 밑에 else를 찾아야 한다고 생각해보세요!)
조건을 부정하고 빨리 return 하는 것으로 중첩을 더 줄일 수 있습니다. 아래의 두 조건문을 보시죠!
원래의 조건 2를 부정하는 것으로 우리의 코드는 if 문 중첩의 족쇄에서 벗어날 수 있었습니다! 이런 코딩 스타일은 우리가 검사해야 할 조건이 많을 때 가독성을 높이고 코드 길이를 줄이는 데 유용합니다. 이건 그렇게 어려운 규칙이 아닙니다. 자신에게 물어보세요. 이렇게 쓴 게 전에 쓴 것보다 훨씬 깔끔하고 가독성이 좋죠?
하지만 항상 적은 중첩과 빠른 리턴이 좋지는 않습니다. 여기에 관련된 기사와 Stackoverflow 글이 있습니다.
Avoid Else, Return Early: Tim Oxley
Should I return from a function early or use an if statement?
기본 파라미터와 비구조화를 사용하자.
이 코드가 당신에게는 익숙할 것 같네요. 우리는 null이나 undefined를 체크하거나 기본값을 설정하기 위해 아래와 같은 코드를 사용합니다.
기본 파라미터를 사용하면 변수 q를 사용하지 않아도 됩니다.
훨씬 쉽고 직관적이지 않나요? 함수의 각 파라미터는 기본값을 가질 수 있습니다. 예를 들어, fruit에도 기본값을 주려면 function test(fruit = 'unknown', quantity = 1)와 같이 작성할 수 있습니다.
만약 fruit가 객체라면 어떨까요? 기본값을 어떻게 지정해야 할까요?
위의 예제를 보세요! 과일의 이름이 주어진다면 이름을, 아니면 '알 수 없어요'를 출력하고자 합니다. fruit && fruit.name를 사용하지 않고도 fruit.name에 기본값을 설정할 수 있습니다.
우리는 name 프로퍼티만 필요하므로 {name}을 사용하여 객체를 비구조화할 수 있습니다. 이제부터는 fruit.name 대신 name을 변수처럼 사용할 수 있습니다.
{}를 기본값으로 지정해주었습니다. 그렇게 하지 않으면 주어진 객체에 name프로퍼티가 없을 때 test(undefined) - Cannot destructure property name of 'undefined' or 'null'라는 에러를 보게될거에요!
라이브러리를 사용하는 걸 싫어하지 않으신다면, Null check 코드를 줄일 수 있는 몇 가지 방법이 있습니다.
- Lodash의
__.get()함수 사용하기 - Babel과 함께 Facebook의 IDX라이브러리 사용하기 예제코드 함수형프로그래밍을 한다면, Lodash 대신에 Lodash FP를 사용하는 것도 좋겠어요! Lodash FP는 Lodash가 함수형 프로그래밍에 맞게 개량된 버전입니다.
Switch 대신 Map과 오브젝트를 사용하자.
색에 따라 과일을 반환하는 아래의 함수를 살펴볼까요?
별로 이상해 보이지 않는걸요. 하지만 더 간략하게 줄일 방법이 있습니다.
Map은 ES6에 추가된 키/밸류를 가지는 객체 타입입니다. 자세한 내용은 링크를 참조하세요. 과연 Case의 사용을 자제해야만 할까요? 그것은 자기 생각에 따라 달라질 겁니다.(개인적으로, 저는 가능한 Case 대신 객체를 사용하려고 합니다) 하지만 너무 하나만 사용하지 마세요. 때에 맞게 사용한다면 더욱 좋은 코드를 만들 수 있을 겁니다. Todd Motto는 Switch와 오브젝트에 대한 깊이 있는 글을 썼습니다.
코드를 재작성해봅시다
예를 들어, 우리는 아래의 코드와 같이 코드를 다시 써도 같은 결과를 얻을 수 있습니다.
같은 결과의 코드를 4개나 보여드렸어요! 항상 문제를 푸는 방법은 1가지가 아닙니다. 그래서 코딩이 재밌는 거에요!
배열의 전체 조건에는 Array.every, 부분 조건에는 Array.some을 사용하자.
마지막 팁은 새롭지만 그다지 새롭지 않은 자바스크립트 배열의 함수를 활용하는 것입니다. 다음은 모든 과일이 빨간색인지 확인하는 함수입니다.
이 코드는 너무 길어요! 몇 줄의 코드를 Array.every로 다시 쓴다면 어떨까요?
더 깔끔해졌습니다! 비슷한 예로, 과일 중 하나라도 빨간색인가를 판단하려면 Array.some을 사용할 수 있습니다.
정리
더 가독성 좋은 코드를 만들려고 노력을 해봅시다. 당신이 이 글을 읽고 뭔가를 배웠다면 좋을 것 같아요!
이게 답니다! 즐코(즐거운 코딩)하세요!