[ JavaScript ] if와 ' ? ' 를 사용한 조건 처리

 

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

· 조건에 따라 다른 결과가 나와야 할 때 if문과 조건부 연산자 '?' 사용

---

1. if문

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

let year = prompt('이글은 무슨 년도에 발행되었을까요?');

if ( year == 2022 ) alert('정답입니다!');

위 예시에선 조건(year == 2022)이 간단한 경우만 다뤘지만 조건문은 더 복잡할 수도 있다.

조건이 true일 때 복수의 문을 실행하고 싶다면 중괄호로 코드 블록을 감싸야한다.

 

if (year == 2022) {
  alert('정답입니다!');
  alert('아주 똑똑하시네요!');
}

if문을 쓸 때는 조건이 참일 경우 실행되는 구문이 단 한 줄이더라도 중괄호{}를 사용해 코드를 블록으로 감싸는 것을 추천한다.

이렇게 하면 코드 가독성이 증가한다.

 

 

2. 불린형으로의 변환

if(···)문은 괄호 안의 표현식을 평가하고 그 결과를 불린 값으로 변환한다.

· 숫자 0, 빈 문자열"", null, undefined, NaN은 불린형으로 변환 시 모두 false가 된다.

  이런 값들은 'falsy(거짓 같은)'값이라고 부른다.

· 이 외의 값은 불린형으로 변환 시 true가 되므로 'truthy(참 같은)' 값이라고 부른다.

 

이 규칙에 따르면 아래 예시의 코드 블록은 절대 실행되지 않는다.

if (0) {
	// 0은 falsy이다.
    ···
}

 

아래 예시의 코드 블록은 항상 실행된다.

if (1) {
  // 1은 truthy이다.
  ···
}

 

아래와 같이 평가를 통해 확정된 불린값을 if문에 전달 할 수도 있다.

let cond = (year == 2022);  // 동등 비교를 통해 true/false 여부를 결정한다.

if (cond) {
  ···
}

 

 

 

3. 'else'절

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

let year = prompt('이글은 무슨 년도에 발행되었을까요?');

if ( year == 2022 ) {
  alert('정답입니다!');
} else {
  alert('오답입니다!');  // 2022 이외의 값을 입력 한 경우
}

 

4. 'else if'로 복수 조건 처리하기

유사하지만 약간씩 차이가 잇는 조건 여러 개를 처리해야 할 때가 있다.

이때 else if를 사용할 수 있다.

let year = prompt('이글은 무슨 년도에 발행되었을까요?');

if ( year < 2022 ) {
  alert('숫자를 좀 더 올려보세요.');
} else if ( year > 2022 ) {
  alert('숫자를 좀 더 내려보세요.');
} else {
  alert('정답입니다!');
}

위 예시에서 자바스크립트 조건 year < 2022를 먼저 확인한다.

이 조건이 거짓이라면 다음 조건 year > 2022를 확인한다.

이 조건 또한 거짓이라면 else절 내의 alert를 실행한다.

else if블록을 더 많이 쓰는 것도 가능하다. 마지막 else는 필수가 아닌 선택 사항이다.

 

5. 조건부 연산자 '?'

조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있다.

let accessAllowed;
let age = prompt('나이를 입력해 주세요.', '');

if ( age > 18 ){
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

'물음표 연산자'라고도 불리는 '조건부 연산자'를 사용하면 위 예시를 더 짧고 간결하게 변형할 수 있다.

조건부 연산자는 물음표로 표시한다. 피연산자가 세 개이기 때문에 조건부 연산자를 '삼항 연산자'라고 부르는 사람도 있다.

참고로 자바스크립트에서 피연산자가 3개나 받는 연산자는 조건부 연산자가 유일하다.

 

문법

let result = condition ? value1 : value2;

평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2가 반환된다.

 

let accessAllowed = ( age > 18 ) ? true : false;

age > 18 주위의 괄호는 생략 가능하다.

물음표 연산자는 우선순위가 낮으므로 비교 연산자 > 가 실행되고 난 뒤에 실행된다.

 

아래 예시는 위 예시와 동일하게 동작한다.

// 연산자 우선순위 규칙에 따라 비교 연산 'age > 18'이 먼저 실행된다.
// (조건문을 괄호로 감쌀 필요가 없다.)
let accessAllowed = age > 18 ? true : false;


// 비교 연산자 자체가 true나 false를 반환하기 때문에 위 예시에서 물음표 연산자를 사용하지 않아도 된다.
// 동일하게 동작한다.
let accessAllowed = age > 18;

 

 

6. 다중 '?'

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

let age = prompt( '나이를 입력해주세요.', 18);

let message = ( age < 3 ) ? '애기 안녕!' :
              ( age < 18 ) ? '안녕!' :
              ( age < 100 ) ? '안녕하세요!' :
              '나이가 아주 많으시거나, 나이가 아닌 값을 입력하셨어요!';
 
alert( message );

1. 첫 번째 물음표에선 조건문 age < 3 을 검사한다.

2. 그 결과가 참이면 ' 애기 안녕! '을 반환한다. 그렇지 않으면 첫 번째 콜론 ' : '에 이어지는 조건문 age < 18을 검사한다.

3. 그 결과가 참이면 ' 안녕 '을 반환한다. 그렇지 않으면 다음 콜론 ' : '에 이어지는 조건문 age < 100을 검사한다.

4. 그 결과가 참이면 ' 안녕하세요! '를 반환한다. 그렇지 않다면 마지막 콜론 ' : '이후의 표현식인 ' 나이가 아주 많으시거나, 나이가 아닌 값을 입력하셨어요! '를 반환한다.

 

if..else 를 사용하면 위 예시를 아래와 같이 변형할 수 있다.

if ( age < 3 ) {
  message = '애기 안녕!';
} else if ( age < 18 ) {
  message = '안녕!'
} else if ( age < 100 ) {
  message = '안녕하세요!'
} else {
  message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력하셨어요!';
}

 

부적절한 '?'

물음표 ?를 if대용으로 쓰는 경우가 종종 있다.

let company = prompt('자바스크립트는 어떤 회사가 만들었을까?');

(company == 'Netscape') ?
  alert('정답입니다!') : alert('오답입니다!');

조건 company == 'Netscape'의 검사 결과에 따라 ? 뒤에 이어지는 첫 번째 혹은 두 번째 표현식이 실행되어 alert창이 뜬다.

위 예시에선 평가 결과를 변수에 할당하지 않고 결과에 따라 실행되는 표현식이 달라지도록 하였다.

그런데 이런 식으로 물음표 연산자를 사용하는 것은 좋지 않다.

개발자 입장에선 of문을 사용할 때 보다 코드 길이가 짧아진다는 점 때문에 물음표를 if대용으로 쓰는 게 매력적일 순 있다.

하지만 이렇게 코드를 작성하면 가독성이 떨어진다.

 

아래는 if를 사용해 변형한 코드이다. 어느 코드가 더 읽기 쉬운지 직접 비교해 보길 바란다.

let company = prompt('자바스크립트는 어떤 회사가 만들었을까?, '');

if (company == 'Netscape'){
  alert('정답입니다!');
} else {
  alert('오답입니다!');
}

코드를 읽을 때 우리의 눈은 수직으로 움직인다. 수평으로 길게 늘어진 코드보단 여러 줄로 나뉘어 작성된 코드 블록이 더 읽기 쉽다.

물음표 연산자는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다. 이런 목적에 부합하는 곳에 물음표를 사용하는 게 좋다.