모던 JavaScript 튜토리얼 - if와 '?'를 사용한 조건 처리

crewd·2021년 1월 7일
0
post-thumbnail

모던 자바스크립트 튜토리얼

ko.javascript.info

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

조건에 따라 다른 행동을 취해야할 때 if문과 '물음표' 연산자라고도 불리는 조건부 연산자 ?를 사용하면 된다.

'if'문

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

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

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

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

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

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

불린형으로의 변환

if(...) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환한다.
형변환 챕터에서 배운 형 변환 규칙을 다시 살펴보자

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

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

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

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

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

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

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

if (cond) {
  ...
}

'else'절

if문엔 else 절을 붙일 수 있다. 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는 필수가 아닌 선택 사항이다.

조건부 연산자 '?'

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

조건부 연산자는 물음표?로 표시한다. 피연산자가 세 대이기 때문에 조건부 연산자를 '삼항(ternary) 연산자'라고도 부른다. 자바스크립트에서 피연산자를 3개나 받는 연산자는 조건부 연산자가 유일하다.

let result = condition ? value1 : value2

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

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

age > 18 주위의 괄호는 생략 가능하다. 물음표 연산자는 우선순위가 낮으므로 비교 연산자 >가 실행되고 난 뒤에 실행된다.

괄호가 있으나 없으니 차이는 없지만, 코드 가독성 향상을 위해 괄호를 사용할 것을 권유한다.

✔ 주의

비교 연산자 자체가 truefalse를 반환하기 때문에 위 예시에서 물음표연산자를 사용하지 않아도 된다.

// 동일하게 동작함
let accessAllowed = age > 18;

다중 '?'

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

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

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

alert( message );

물음표 연산자를 이런 방식으로 쓰는 걸 처음 봤다면 이 코드가 어떻게 동작하는지 파악하기 힘들 수 있다. 그러나 주의를 집중하고 보면, 단순히 여러 조건을 나열한 코드임에 불과하다는 것을 알 수 있다.

  1. 첫 번째 물음표에선 조건문 age < 3을 검사한다.
  2. 그 결과가 참이면 '아기야 안녕?'을 반환한다. 그렇지 않다면 첫 번째 콜론 ":"에 이어지는 조건문 age < 18을 검사한다.
  3. 그 결과가 참이면 '안녕!'을 반환합니다. 그렇지 않다면 다음 콜론 ":"에 이어지는 조건문 ge < 100을 검사한다.
  4. 그 결과가 참이면 '환영합니다!'를 반환한다. 그렇지 않다면 마지막 콜론 ":" 이후의 표현식인 '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'를 반환한다.

부적절한 '?'

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

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

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

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

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

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

개발자 입장에서는 if문을 사용할 때 보다 코드 길이가 짧아진다는 점 때문에 물음표 ?if대용으로 쓰는 게 매력적일 순 있다. 하지만 이렇게 코드를 작성하게 되면 가독성이 떨어진다.

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

✔ 과제


if와 문자열 0

중요도: 5

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

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

해답

문자열은 비어있는 문자열을 제외한 모든 문자열은 논리 평가 시 true로 반환된다.
문자열 "0"은 비어있지 않은 문자열이기 때문에 실행된다


자바스크립트의 공식 이름

중요도: 2

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

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

해답

<!DOCTYPE html>
<html>
<body>
  <script>
    'use strict';

    let value = prompt('자바스크립트의 "공식" 이름은 무엇일까요?', '');

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

</html>

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

중요도: 2

if..else와 프롬프트 대화상자를 사용해 사용자로부터 숫자 하나를 입력받고, 아래 조건에 따라 그 결과를 alert 창에 출력해 보세요.

  • 입력받은 숫자가 0보다 큰 경우 1을 출력
  • 입력받은 숫자가 0보다 작은 경우 -1을 출력
  • 입력받은 숫자가 0인 경우 0을 출력

(사용자는 항상 숫자를 입력한다고 가정)

해답

let value = prompt('숫자를 입력하세요.', 0);

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

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

중요도: 5

조건부 연산자 '?'를 이용해 if문이 사용된 아래 코드를 변형해보세요. 동작 결과는 동일해야 합니다.

let result;

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

해답

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

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

중요도: 5

조건부 연산자 '?'를 사용해 if..else문이 사용된 아래 코드를 변형해보세요. 동작 결과는 동일해야 합니다.

가독성을 위해 표현식을 여러 줄로 분할해 작성해 보시길 바랍니다.

let message;

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

해답

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

0개의 댓글