[JavaScript] The Modern JavaScript Tutorial - (2-10) Conditional branching: if, '?'

'if'문

if(...)문은 괄호 안에 들어가는 조건을 평가하고, 그 결과가 true이면 코드 블록이 실행된다. 멀티라인은 중괄호 {}로 감싼다.

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

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

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

 

불린형으로의 변환

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

• 숫자 0, 빈 문자열 "", null, undefined, NaN은 불린형으로 변환 시 모두 false가 된다. ⇒ 'falsy'
• 이 외의 값은 true가 된다. ⇒ 'truthy'

if (0) {    // 0 => falsy
    // ...
}

if (1) {    // 1 => truthy
    // ...
}

let cond = (year == 2015);  // true or false
if (cond) {
    // ...
}

 

'else'절

if문의 조건이 거짓일 떄 실행되는 else문을 작성할 수 있다.

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

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

 

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

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

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

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

위 예시에서 조건 year < 2015를 먼저 확인하고, 이 조건이 거짓이면 year > 2015를 확인한다. 이 조건 또한 거짓이라면 else절 내에 있는 alert을 실행하게 될 것이다.

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

 

조건부 연산자 '?'

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

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

조건부(conditional) 연산자를 사용하면 위 예시를 더 짧고 간결하게 변형할 수 있다. 조건부 연산자는 ?로 표시하며, 피연산자가 세 개이기 때문에 삼항(ternary) 연산자라고도 부른다.

let result = condition ? value1 : value2;
let accessAllowed = (age > 18) ? true : false;
let accessAllowed = age > 18 ? true : false;    // OK

age > 18 주위의 괄호는 생략 가능하다. 물음표 연산자는 우선순위가 낮아, 비교 연산자 >가 실행되고 나서 실행된다.

 

다중 '?'

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

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

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

alert(messgae);

 

부적절한 '?'

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

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

이러한 방식으로 물음표 연산자를 사용하는 것은 좋지 않다.

물음표 연산자 ?는 조건에 따라 반환 값을 달리 하려는 목적으로 만들어졌다. 분기를 만들어 처리할 때는 if를 사용하도록 하자.

 

과제

if와 문자열 0

아래 코드에서 alert은 실행될까?

if ("0") {  // 실행됨, "0"은 비어 있지 않은 문자열임 => true
    alert('Hello');
}

자바스크립트의 공식 이름

if..else 구조를 이용해 질문 & 답변 처리.

let answer = prompt("What's the \"official\" name of JavaScript?", '');

if (answer == "ECMAScript") {
    alert("Right!");
} else {
    alert("You don't know? \"ECMAScript\"!");
}

입력받은 숫자의 부호 표시하기

숫자를 입력받고, 조건에 따라 결과를 alert 처리.

if (answer > 0) {
    alert("1");
} else if (answer < 0) {
    alert("-1");
} else if (answer == 0)  {
    alert("0");
}

'if'를 '?'로 교체하기

let result;

if (a + b < 4) {
    result = '미만';
} else {
    result = '이상';
}

let result = (a + b < 4) ? '미만' : '이상';

'if..else'를 '?'로 교체하기

let message;

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

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

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial