[모던JS] 014. [기본] if와 물음표를 사용한 조건 처리(삼항 연산자, 물음표 연산자, 조건부 연산자)

원문

if문 (?)

조건을 걸 때는 if(...)문을 사용한다. 괄호 안의 표현식을 평가한다.

if문 기본형

if(확인 할 조건) {참이면 실행할 값}

let year = prompt('장원영은 어느 그룹의 멤버일까요?', '');

if (year === "아이브" || year === "ive") {
    alert('정답입니다!');
} else {
    alert('오답입니다!');
}

alert를 연속해서 띄울 수도 있다. 중괄호 안에 계속 넣으면 된다.

let group = prompt('장원영은 어느 그룹의 멤버일까요?', '');

if (group === "아이브" || group === "ive") {
    alert('정답입니다!');
    alert('훌륭하네요.');
} else {
    alert('오답입니다!');
    alert('아쉽습니다!');
}

if문의 불린형으로의 변환 (truty, falsy)

자료형	불린형
0	falsy
""	falsy
null	falsy
undefined	falsy
NaN	fasly
그 외 전부	truthy

자료형의 형 변환 편에서 자료형 별로 불린형으로는 어떤 값을 반환하는지에 대해 알아본 내용이었다.
그런데 false, true가 아니라 falsy, truthy로 말한 이유는 엄밀히 말하면 참과 거짓이 아니라 참과 같은 값, 거짓과 같은 값이기 때문이다.

if (1) {코드블럭} // 1은 truthy이므로 무조건 실행된다.
if (0) {코드블럭} // 0은 falsy이므로 무조건 실행되지 않는다.

let cond = (group == '아이브');
if (cond) {alert("정답입니다!")};
// group의 값이 '아이브'가 맞는지(true) 아닌지(false) 반환하며 cond에 할당
// 그 변수 cond 자체를 if문으로 평가하여 코드블럭 실행 여부 결정

else절 (...아니면)

if...else의 형태로 사용하며, if(참-거짓 평가할 조건) {참이면 실행할 코드블럭}의 형태로 if문을 사용했었는데, 참이 아니면 실행할 코드블럭을 else 절을 추가하여 실행시킬 수 있다.

else절 기본형

if (참, 거짓 평가할 조건) {
    참이면 실행할 코드블럭
} else {
    거짓이면 실행할 코드블럭
}

if (group == "장원영") {
    alert("정답입니다!");
} else {
    alert("오답입니다!");
}

else...if를 통한 복수 조건 처리

if...else가 계속 반복되어야 할 때 if...else가 아닌 if...else if...else 형태로 계속해서 조건을 붙인다.

if (year > 2015) {
    alert("조금 더 내려 보세요.");
} else if (year < 2015) {
    alert("조금 더 올려 보세요.");
} else {
    aleart("정답입니다!");
}

위 코드는 먼저 if()안의 표현식을 평가하는데, year의 값이 2015보다 큰 지 확인한 후 크다면 "조금 더 내려 보세요"라는 바로 다음의 중괄호 값을 실행하고 종료하고,
year가 2015보다 크지 않다면 다음 라인인 else if를 평가하는데, year가 2015보다 작다면 다음 중괄호인 "조금 더 올려 보세요."를 출력하고, 만약 year가 2015보다 크지도 작지도 않다면 같은 것뿐이니 마지막 else의 코드 블럭인 "정답입니다!"를 출력하게 된다.

조건부 연산자 (?) (question mark conditional operator, 물음표 연산자) (ternary operator, 삼항 연산자)

if문이 사용되어 복잡한 식을 ? 물음표를 이용하여 간단하게 바꿀 수 있다. ? 물음표를 이용한 연산자를 부르는 이름이 다양한데

• 조건부 연산자 (conditional operator)
• 물음표 연산자 (question mark operator)
• 삼항 연산자 (ternary operator)
  등으로 불린다.

삼항 연산자는 물음표 연산자의 기본형이 세 개의 피연산자를 필요로 하기 때문에 이렇게 부르기도 한다.

조건부 연산자 기본형

let result = conditioin ? value1 : value2;

위 예제는 condition이 참이면 value1을, 거짓이면 value2를 반환하여 result에 할당하는 예제이다.

아래의 식을 줄여보겠다.

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

if (age > 18) {
  accessAllowed = "저보다 많으시네요.";
} else {
  accessAllowed = "저랑 같거나 어리시네요.";
}

alert(accessAllowed);

let accessAllowed = (age > 18) ? "저보다 많으시네요." : "저랑 같거나 어리시네요.";

(age > 18)처럼 괄호를 칠 필요는 없다. ?의 우선순위가 낮아 비교 연산자가 먼저 실행되기 때문에 넣으나 안 넣으나 상관 없지만 코드 가독성을 위해 조건식에는 넣는 것이 권장된다.

삼항의 생략

만약 위처럼 특정한 텍스트나 연산이 필요한 코드 블럭을 실행하는 것이 아니라 단순히 true와 false를 반환하는 것이라면 이를 생략해도 된다.

let accessAllowed = (age > 18) : true : false;
// 이렇게 쓰지 않아도 된다.
let accessAllowed = age > 18;
// true와 false를 생략해도 조건식 자체가 true나 false를 반환하기 때문에 결과는 같다.

복수의 조건부 연산자, 다중 ?

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

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

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

alert( message );

코드 해석

1. prompt를 사용하여 사용자에게 모달창을 띄워 나이를 입력하도록 하였고, 기본값으로 18을 지정해두었다.
2. 사용자가 입력한 값은 age라는 변수에 할당된다.
3. 변수 age의 값이 3보다 작으면 '아기야 안녕?'을 출력한다.
4. 만약 3보다 작지 않다면 그 다음으로 넘어가서 18보다 작은지 평가한다.
5. 변수 age의 값이 18보다 작다면 '안녕!'을 출력한다.
6. 만약 변수 age의 값이 18보다 작지 않다면 다음으로 넘어가서 age가 100보다 작은지 평가한다.
7. 변수 age의 값이 100보다 작다면 "환영합니다!"를 출력한다.
8. 그러나 변수 age의 값이 100보다 작지 않다면 "나이가 아주 많으시거나..."메시지를 출력한다.
9. 그리고 이 메시지를 message라는 변수에 담는다.
10. 마지막으로 반환된 meesage의 값을 alert창으로 띄운다.

위 코드는 꼭 한 번 스스로 타이핑해보는 것이 좋다.
위 코드는 삼항 연산자를 사용하지 않고 풀어서 쓰면 아래와 같은 것이다.

let meassage;

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

조건부 연산자 (?)의 남용 주의

? 물음표 연산자를 사용하면 if...else문이 간결해져 좋은 것 같지만 적당히 짧은 코드에서는 ? 연산자가 좋을지 몰라도 코드가 길어지면 if...else를 직접적으로 쓰는 것보다 가독성이 더 떨어지게 된다.

if...else를 풀어서 쓸 지, 조건부 연산자를 쓸 지 코드 가독성을 고려하면서 적재적소에 사용해야 추후 코드를 수정할 때 애를 먹지 않을 수 있다.

하지만 if...else도 결국 길어지면 가독성을 해치지 때문에 ||(Or), &&(And) 논리 연산자를 통한 단락 회로 평가 방법도 나오게 됐는데, 이는 다음 챕터에서 다루도록 한다.

연습문제

1. if...else와 프롬프트 대화상자를 사용하여 사용자로부터 숫자 하나를 입력받고, 아래 조건에 따라 그 결과를 alert창에 출력하시오.
   • 입력받은 숫자가 0보다 큰 경우 "1"을 출력
   • 입력받은 숫자가 0보다 작은 경우 "-1"을 출력
   • 입력받은 숫자가 0인 경우 "0"을 출력
     (사용자는 무조건 숫자만 입력한다고 가정한다.)

나만의 정답 (원문에서는 다르게 표현함)

let num = prompt('숫자를 입력하세요', "");

if ( num > 0 ) {
    message = "1";
} else if ( num < 0 ) {
    message = "-1";
} else {
    message = "0";
}

alert( message );

2. 조건부 연산자 '?'를 이용하여 if...else문이 사용된 아래 코드를 변형하시오.

let message;

if (login == '직원') {
  message = '안녕하세요.';
} else if (login == '임원') {
  message = '환영합니다.';
} else if (login == '') {
  message = '로그인이 필요합니다.';
} else {
  message = '';
}

정답

let message = (login == '직원') ? '안녕하세요.' :
(login == '임원') ? '환영합니다.' :
(login == '' ) ? '로그인이 필요합니다.' :
'';

이 문제는 쉬우면서 복잡하게 느껴진다. 추가로 학습해야 할 것 같다.

추가문제

let num = 15;
let result;

if (num > 10) {
    result = "크다";
} else if (num < 10) {
    result = "작다";
} else {
    result = "같다";
}

console.log(result);

나만의 정답

let num = 15;
let result = ( num > 10 ) ? '크다' :
( num < 10 ) ? '작다' : '같다';

console.log(result);