[Typescript] 당신의 JS코드에서 if문을 줄여줄 기본 연산자 5가지

728x90

서론

이번 포스팅에서는 JS코드 상에서 if문을 줄여줄 수 있는 기본 연산자 5가지를 소개한다.
하지만 기본 연산자를 활용해 무조건적으로 if문을 줄인다고해서 가독성이 좋아지는 것은 아니니 미리 알아두고 필요할때 적절히 활용하도록 하자.

1. 논리곱(&&), 논리합(||) 연산자의 단락 평가(Short-circuit evaluation)

(결과값이 false가 되는 표현식) && (임의의 표현식)

Javascript는 && 표현식에서 좌항 표현식의 결과값이 false이면 우항의 표현식을 실행/검사하지 않는다.
그래서 위 예시를 보면, 좌항에 결과값이 false가 되는 표현식이 놓여있고 우항에는 어떤 임의의 표현식이 놓여있는데 우항의 표현식은 아예 실행되지 않는 것이다.

이와 같은 기능은 보통 값이 유효한지를 검사하고, 유효할 때만 특정 작업을 실행하도록 하는 구문에서 많이 사용된다

위 코드는 a라는 문자열 상수가 JSON.parse가 가능한 문자열이면 파싱된 결과를 콘솔에 출력하는 대충만든 예제인데, 여기서 3~5번째 줄 코드와 7번째 줄 코드가 동일한 기능을 가진다.

반대로, || 표현식에서는 좌항 표현식의 결과값이 true이면 우항의 표현식을 실행/검사하지 않는다.
그래서 위에 있는 코드를 || 표현식으로 고치면 아래처럼 된다.

위 처럼 특정 값의 유효성을 검사하고 조건이 맞을 경우 작업을 실행하기 위한 사용예도 있고,
아래 코드 처럼 유효한 값을 변수에 할당하거나 함수의 파라미터로 넘기기위해 사용하는 경우도 많이 있다.

2. 논리곱 할당 연산자 (&&=, Logical AND assignment)

"&&=" 연산자는 "&&"의 단락 평가 할당 구문을 단축화한 할당 연산자이다.
아래 예시에서 윗코드와 아랫코드는 동일한 기능을 가진다.

3. 논리합 할당 연산자 (||=, Logical OR assignment)

"||=" 연산자는 "||"의 단락 평가 할당 구문을 단축화한 할당 연산자이다.
아래 예시에서 윗코드와 아랫코드는 동일한 기능을 가진다.

4. Null 병합 연산자 (??, Nullish coalescing operator)

"??" 연산자는 기존 "&&", "||" 처럼 단락 평가 기능을 제공하는 연산자이다.
다만 "&&", "||"은 좌항 표현식 결과값이 True이나 False이냐를 검사하는 반면, "??" 연산자는 좌항 표현식 결과값이 null 또는 undefined인지 아닌지를 검사하게 된다. 만약 좌항 결과값이 null 또는 undefined일 경우 우항의 표현식을 실행/검사하게 된다.

5. Null 병합 할당 연산자 (??=, Nullish coalescing assignment)

"??=" 연산자는 "??"의 단락 평가 할당 구문을 단축화한 할당 연산자이다.
아래 예시에서 윗코드와 아랫코드는 동일한 기능을 가진다.