[JS TIL] 논리연산자 && 를 조건문처럼 쓰지말자
가독성을 높여서 동료개발자의 시간을 아껴주기
유저프로필 신호등 색상 = 유저가 접속중 ? '초록색' : '회색'
유저프로필 닉네임 = '유저닉네임' ?? '로그인해주세요'
자바스크립트에서 if 구문을 사용하지 않고 조건에 따라 달라지는 상태를 변수에 할당하고 싶다면 삼항연산자를 쓸 수 있다. 만약 조건이 '있다' 와 '없다' 두개뿐이라면 null 병합 연산자를 통해 삼항연산자 보다 더 짧게 작성할 수도 있다.
지난번에 공부한 논리 OR 연산자(||)와 마찬가지로 논리 AND 연산자(&&) 도, 조건문을 대체해서 사용할 수 없는 것은 아니고 실제로도 많이 쓰인다. 그러나 역시 논리연산자는 본래의 기능에 충실하게 피연산자들을 비교하는 논리 조건 자체로 사용하는 것이 가독성에 도움이 되는 것 같다. 다음의 코드를 보자.
https://gist.github.com/yeonwooz/0b2b5a37fb37cd714dd8ef9fb49ca71d
14번째 라인의 userSignalcolor 는 isLogin 이 참이면 AND 연산자의 오른쪽 피연산자를 값으로 반환하지만, isLogin 이 거짓이면 false 라는 불리언값을 반환한다. 논리연산자는 피연산자들을 비교하는 동안에는 불리언 타입으로 형변환을 시키기 때문에 if 문 안에 들어있을 때는 불리언으로 동작하지만, if문 없이 연산자만 사용해서 결과를 리턴시킬 때는 피연산자들을 원래의 타입으로 다시 돌려서 반환하기 때문이다.
그렇다면 20번째 라인에서 스타일이 아닌 불리언값이 스타일배열에 들어갔기 때문에 런타임에서 크래시가 나거나 컴파일타임에서 타입에 관한 경고문구가 뜨지 않을까? 놀랍게도 그렇지 않다. 리액트 네이티브의 스타일시트는 false, null, undefined 값들은 무시한다. 명확한 동작원리 혹은 이러한 설계의 이유는 찾아내지 못했지만, 아무튼 이렇게 동작하기 때문에 사실상 AND 연산자를 이용해 할당한 스타일값을 배열에 집어넣어도 문제가 없다.
하지만 동작에는 문제가 없더라도, 특정한 변수가 일관되지 않은 타입을 가질 수 있도록 허용하면 가독성에는 문제가 생기는 것 같다. 내 생각에 코드가독성이란, 특정한 맥락에서 예상되는 방식대로 코드가 작성되는 것이다. 타입규칙을 명확히 지킬수록 가독성이 높아진다. 마땅히 있어야할 타입이 있고, 없어야할 타입이 없으면 의문이 덜 생기고 걸림이 적다. 그리고 타입오류가 없으니 런타임오류가 날 만한 요소들을 일단 컴파일타임에서 제거했다고 믿고 기능에 집중할 수 있다. 그러므로 리턴하는 타입이 일정하지 않은 논리연산자를 변수 할당 조건문으로 사용하는 것보다는, if 조건문 안에 넣어 불리언 타입으로만 기능하도록 하는 것이 가독성에 도움이 된다.
Photo by Heath Vester on Unsplash
https://ko.javascript.info/logical-operators#ref-707
https://reactnative.dev/docs/stylesheet
