[JS 코딩 테크닉] AND, OR 연산자를 사용한 코딩 테크닉

JS 코드를 작성하다 보면, 조건부로 스크립트를 실행할 때가 정말 많습니다.

보통 간단한 로깅이나 함수 하나를 호출하는 경우가 많은데, 이런 경우에 모두 조건문(if)를 사용하여 코드를 작성하면 배보다 배꼽이 더 큰 경우가 있을 수 있습니다.

 

예를 들어 아래와 같은 경우가 있습니다.

if (isMobile) { // 모바일 환경일 때,
    runMobileProcess() // 모바일 관련 로직을 실행합니다.
}

총 3줄의 코드를 AND 연산자를 사용하여 1줄로 바꾸어줄 수 있습니다.

isMobile && runMobileProcess()

위와 같이 간단히 바꾸어 사양을 만족하면서, 코드를 작성할 수 있습니다.

AND 연산자는 당연히 연산 값들이 Boolean으로 변환되었을 때 모두 true가 되어야 연산 결과로 true를 반환해줄 수 있기 때문에 AND 연산자는 모든 연산 값을 순차적으로 실행합니다.

하지만 runMobileProcess 함수가 false를 리턴할 경우가 있다면 사용이 어려울 수 있겠죠..

 

그리고 아래의 예제는 종종 사용하는 코딩 케이스 인데요, String type의 변수를 String.trim 메서드를 사용하여 빈 값이 입력되지 않았는지 유효성 검사가 필요할 때 사용합니다.

if (userInputValue && userInputValue.trim()) {
    console.log('User input value is fine')
}

앞서 서술했듯이, AND 연산자는 연산자의 목표를 위해 모든 연산 값을 순차적으로 실행합니다. (Type 변환)

그리고 순차적으로 실행하는 도중, 한 개의 연산 값이라도 false로 변환이 된다면 해당 연산 값 뒤의 연산 값들은 변환하려고 하지 않습니다.

해당 특성을 이용하여 userInputValue가 존재할 때, 해당 String type 변수의 trim 메소드를 사용하여 해당 변수에 space 문자로 값이 채워져 있지는 않은지 검사합니다. (예기치 않게 userInputValue 변수에 null, undefined 등이 할당되었을 때에도 Error를 방지할 수 있습니다)

 

코드를 작성할 때, 해당 코드가 이 함수에서 얼마나 중요한 비중을 차지하고 있는지 파악한 후 적절하게 이런 코딩 테크닉도 사용하면 중요한 것에 더욱 집중할 수 있어, 가독성이 향상될 것이라고 생각합니다.

 

관련 글

[JS] Optional chaining, Nullish coalescing operator 🛒

위 글을 참조하여 이 글에서 설명하는 케이스를 향상시킬 수 있습니다!