자바스크립트 기본 1.10 if 와 '?' 를 사용한 조건 처리

♠ 자바스크립트 기본

♣ 1.10 if 와 '?' 를 사용한 조건 처리

'if’문

if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행됩니다.

if (…) 문은 괄호 안의 표현식을 불린형으로 변환합니다.

  • 숫자 0, 빈 문자열""nullundefinedNaN은 불린형으로 변환 시 모두 false가 됩니다. 이런 값들은 ‘falsy(거짓 같은)’ 값이라고 부릅니다.
  • 이 외의 값은 불린형으로 변환시 true가 되므로 ‘truthy(참 같은)’ 값이라고 부릅니다.

if문엔 else절을 붙일 수 있습니다. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행됩니다.

유사하지만 약간씩 차이가 있는 조건 여러 개를 처리해야 할 때가 있습니다. 이때 else if를 사용할 수 있습니다.

조건부 연산자 ‘?’

조건부 연산자는 물음표?로 표시합니다. 피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자’라고 부르는 사람도 있습니다. 참고로, 자바스크립트에서 피연산자를 3개나 받는 연산자는 조건부 연산자가 유일합니다.

다중 ‘?’

물음표 연산자?를 여러 개 연결하면 복수의 조건을 처리할 수 있습니다.

예시:

let age = prompt('나이를 입력해주세요.', 18); let message = (age < 3) ? '아기야 안녕?' : (age < 18) ? '안녕!' : (age < 100) ? '환영합니다!' : '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'; alert( message );

eddy’s point

개발자 입장에선 if문을 사용할 때 보다 코드 길이가 짧아진다는 점 때문에 물음표?를 if대용으로 쓰는 게 매력적일 순 있습니다. 하지만 코드를 읽을 때 우리의 눈은 수직으로 움직입니다. 수평으로 길게 늘어진 코드보단 여러 줄로 나뉘어 작성된 코드 블록이 더 읽기 쉽죠.

물음표 연산자?는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌습니다. 이런 목적에 부합하는 곳에 물음표를 사용하시길 바랍니다. 여러 분기를 만들어 처리할 때는 if를 사용하세요.

JP
이중표Frontend Engineer

3년차 프론트엔드 개발자. Next.js, React, TypeScript 기반 웹 애플리케이션 개발 전문. 대규모 트래픽 환경에서 SSR·ISR 렌더링 전략 설계 경험.

이력서 보기