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

📌 참고 사이트

if와 '?'를 사용한 조건 처리 (javascript.info)

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

 

 

 

📋 if 문

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

 

// if문 작성해보기
let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');
if (year == 2015) alert('정답입니다!');     
// 입력된 year가 2015일 경우 '정답입니다!' 라는 내용의 알림창이 띄워진다.

 

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

(실행 구문이 1줄이라도 가독성을 위해 중괄호로 코드 블록을 감싸는 것이 권장된다.)

 

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

 

 

 

📋 불린형으로의 변환

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

→ false가 되는 경우 : 숫자 0, 빈 문자열 "", null, undefined, NaN

→ true가 되는 경우 : false가 되는 값 이외의 값들

 

// 절대 실행되지 않는 코드 블록
if (0) {     // 0은 falsy이다.
	.....
}

// 항상 실행되는 코드 블록
if (1) {     // 1은 truthy이다.
	.....
}

// 변수에 담긴 불린값도 활용 가능
let cond = (year == 2015)     // 동등 비교를 통해 true와 false 여부를 결정
if(cond) {
	.....
}

 

 

 

📋 조건 여러 개 처리하기

📍 else 절

➡️ if문 다음으로 else절을 붙일 수 있다.

➡️ else 뒤에 이어지는 코드 블록은 if문의 조건이 거짓일 때 실행된다.

 

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

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

 

 

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

➡️ 유사하지만 약간씩 차이가 있는 조건 여러 개를 명시하고 처리해야 할 경우 if 문 다음에 else if를 필요한 만큼 붙여 사용한다.

➡️ 마지막에 붙는 else는 선택 사항이다. 필요하면 쓰고, 필요 없으면 쓰지 않아도 된다.

 

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

if (year < 2015) {     // 2015보다 더 작은 숫자를 입력한 경우
	alert('숫자를 좀 더 올려보세요.');
} else if (year > 2015) {     // 2015보다 더 큰 숫자를 입력한 경우
	alert('숫자를 좀 더 내려보세요.');
} else {     // 위 두 경우 이외의 경우 (여러 경우가 있지만 2015일 경우라고 하자.)
	alert('정답입니다!');
}

 

 

 

📋 조건부 연산자 '?'

➡️ 조건에 따라 다른 값을 변수에 할당해주거나 반환해야 하는 경우 조건부 연산자(물음표 연산자)를 사용하면 if와 else를 사용하지 않고도 더 간결하게 코드 작성이 가능하다.

➡️ 조건부 연산자는 물음표(?)로 표시하고, 피연산자가 세 개 (평가 대상, true일 때 반환값, false일 때 반환값)이기 때문에 조건부 연산자를 삼항 연산자 부르는 사람도 있다.

(자바스크립트에서 피연산자를 3개 받는 연산자는 조건부 연산자가 유일하다.)

 

 

📍 조건부 연산자 문법

 

let result = condition ? value1 : value2;

 

→ condition : 평가 대상 (참인지 거짓인지 판단할 대상)

→ value1 : 평가 대상이 참이면 반환되는 값

→ value2 : 평가 대상이 거짓이면 반환되는 값

 

 

📍 조건부 연산자를 사용한 코드로 변환하기

💻 조건부 연산자를 사용하지 않은 코드 (if와 else를 사용하여 작성)

 

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

if (age > 18) {     // 입력된 나이가 19세 이상이면
	accessAllowed = true;     // accessAllowed 변수에 true 할당
} else {     // 위 조건에 벗어나는 입력값이면
	accessAllowed = false;     // accessAllowd 변수에 false 할당
}

alert(accessAllowed);     // accessAllowed 여부(true / false)를 알림창에 띄움.

 

💻 조건부 연산자를 사용하여 위 코드 수정해보기

 

let accessAllowed = age > 18 ? true : false;

 

1️⃣ 우선순위 규칙에 따라 age > 18이 먼저 실행됨. (조건문을 굳이 괄호로 감쌀 필요는 없지만 괄호로 감싸면 가독성이 향상됨.)

2️⃣ age > 18 조건이 참이면 true(왼쪽 값) 반환, 거짓이면 false(오른쪽 값) 반환

3️⃣ 반환된 값이 accessAllowd 변수에 할당됨. 

 

* 위와 같은 경우 비교 연산자 자체가 true나 false를 반환하므로 굳이 조건부 연산자를 사용하지 않고 그냥 let accessAllowed = age > 18; 이렇게만 적어도 된다.

 

 

 

📋 다중 '?'

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

➡️ 이는 if (...) else if (...) ... else 문을 물음표 연산자를 통해 표현한 것으로 볼 수 있다.

 

💻 조건부 연산자를 사용하지 않은 코드 (if, else if, else 사용)

 

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

if (age < 3) {     // 2세 이하일 경우
	message = '아기야 안녕?';
} else if (age < 18) {     // 17세 이하일 경우
	message = '안녕!';
} else if (age < 100) {     // 99세 이하일 경우
	message = '환영합니다!';
} else {     // 위에 작성한 조건 이외의 값을 입력하는 경우
	message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}
    
alert(message);

 

💻 다중 조건부 연산자를 사용한 코드 

 

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

 

1️⃣ age < 3 조건 검사하여 true이면 '아기야 안녕?' 반환 후 message에 할당하고 종료, false이면 age < 18을 검사

2️⃣ age < 18 조건 검사하여 true이면 '안녕?' 반환 후 message에 할당하고 종료, false이면 age < 100을 검사

3️⃣ age < 100 조건 검사하여 true이면 '환영합니다!' 반환 후 message에 할당하고 종료, false이면 '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!' 반환 후 message에 할당하고 종료

 

 

 

📋 부적절한 '?'

개발자 입장에서는 if문을 사용할 때보다 코드 길이가 짧아진다는 점 때문에 물음표(?)를 if 대용으로 사용하는 것이 매력적일 수 있다. 

but 그렇게 코드를 작성하면 가독성이 떨어지게 된다.

물음표 연산자 ?는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다. 이런 목적에 부합하는 곳에 물음표를 사용하고, 여러 분기를 만들어 처리할 때에는 if를 사용하는 것이 좋다.

 

 

 

✏️ 과제

📍 if와 문자열 0

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

 

if ("0") {
	alert('Hello');
}

 

🅰️

실행된다.

if문의 조건 부분에 문자 "0"이 적혀 있는데, 비어 있지 않은 문자열은 true이므로 그 아래의 실행문이 실행되게 된다.

 

 

📍 자바스크립트의 공식 이름

if ... else 구조를 이용해 "자바스크립트의 '공식' 이름은 무엇일까요?" 라는 질문을 하는 코드를 작성해 보자.

사용자가 'ECMAScript'를 입력했다면 '정답입니다!', 아니라면 '모르셨나요? 정답은 ECMAScript 입니다!' 라는 메시지를 보여주어야 한다.

 

💻 HTML로 작성하기

 

<!DOCTYPE html>
<html>
<body>
    <script>
    	'use scrict';
        
        let answer = prompt("자바스크립트의 '공식' 이름은 무엇일까요?");

        if (answer === "ECMAScript") {
            alert("정답입니다!");
        } else {
            alert("모르셨나요? 정답은 ECMAScript 입니다!");
        }
    </script>
</body>
</html>

 

 

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

if ... else와 프롬프트 대화상자를 사용해 사용자로부터 숫자 하나를 입력받고, 아래 조건에 따라 그 결과를 alert 창에 출력해 보자. (사용자는 항상 숫자만 입력한다고 가정하자.)

 

➡️ 입력받은 숫자가 0보다 큰 경우 1을 출력

➡️ 입력받은 숫자가 0보다 작은 경우 -1을 출력

➡️ 입력받은 숫자가 0인 경우 0을 출력

 

💻 JS로 작성하기

 

let num = prompt("숫자 하나를 입력해 주세요.", 0);

if (num > 0) {
    alert(1);
} else if (num < 0) {
    alert(-1);
} else {
    alert(0);
}

 

* num에는 string 형의 숫자가 저장되지만 비교하는 다른 피연산자(숫자형)와 형이 다르기 때문에 num을 굳이 숫자형으로 변환해 주지 않아도 자동으로 숫자형으로 변환되어 비교된다.

 

 

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

조건부 연산자 '?'를 이용해 if문이 사용된 아래 코드를 변형해 보자.

 

let result;

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

 

🅰️

 

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

 

 

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

조건부 연산자 '?'를 사용해 if ... else 문이 사용된 아래 코드를 변형해보세요.

(가독성을 위해 표현식을 여러 줄로 분할해 작성해 보자.)

 

let message;

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

 

🅰️

 

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