[JS] 자바스크립트 조건문 정리 (if..else, else if, switch문)

자바스크립트 문 및 선언문은 다음과 같다.

a) 제어문(Control Flow)

• 블록문

a-1) 조건문

• if else 문
• switch 문

a-2) 반복문

• for문
• while 문
• do while 문
• break 문
• continue 문

b) 선언문

• var
• let
• const

 

---

 

그 중 제어문(Control flow statement)은 주어진 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.
코드는 일반적으로 위에서 아래로 실행되지만, 제어문을 통해 실행순서를 인위적으로 제어할 수 있다.

 

1. 블럭문

0개 이상의 구문을 묶을 때 사용한다. 문들을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 부르며, 블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수 선언문 등에서 사용한다. 

 

// 블록문
{
  var foo = 10;
  console.log(foo);
}

 

2. 조건문

주어진 조건식(conditional expression)의 평가 결과에 따라 코드 블럭(블록문)의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다. 자바스크립트는 2가지의 조건문 if…else 문과 switch 문을 제공한다.

2.1 if..else문

 "~~하다면 ~~하고, 그렇지 않다면 ~~해라." 를 의미한다.

주어진 조건식(참거짓으로 평가될 수 있는 표현식)의 참, 거짓에 따라 실행할 코드 블록을 결정한다.

조건식의 평가 결과가 참(true)일 경우, if 문 다음의 코드 블록이 실행된다. 거짓(false)일 경우, else 문 다음의 코드 블록이 실행된다.

출처 : https://poiemaweb.com/

 

예시1)

function testNum(a) {
  let result;
  if (a > 0) {
    result = 'positive';
  } else {
    result = 'NOT positive';
  }
  return result;
}

console.log(testNum(-5));
// 결과값: "NOT positive"

 

예시2)

만약에 하기와 같이 조건식이 false인 경우만 존재할 경우 어떻게 될까?

👉  if 조건이 참이면 중괄호 시작~끝부분이 실행되지만 거짓일 경우 중괄호가 실행되지 않기 때문에 alert(4); 구간만 실행된다.

if(false) {
	alert(1);
	alert(2);
	alert(3);
}
alert(4);

//결과값 : 4

 

실행시킬 문(statement)이 동일해 코드의 중복을 줄이기 위해 if 문 내 조건식에 or, && 등 논리연산자를 함께 사용하기도 한다. 

  if (
    (heroLeftWithoutPx - 10 < 0 && e.keyCode === 37) || (heroLeftWithoutPx + 10 > 765 && e.keyCode === 39)
  ) {
    //return 키워드를 만나면 함수를 종료시킨다.
    return;
  }

 

삼항연산자로 표현하기(Ternary Operator)

대부분의 if…else 문은 연산자에서 살펴본 하기와 같이 삼항 조건 연산자로 바꿔쓸 수 있다.

 

형식)

condition ? exprIfTrue : exprIfFalse
condition ? value 1 : value 2;

 

예시)

const name = 'hyesu'
console.log(name === 'hyesu' ? 'yes' : 'no');
// name의 값이 hyesu가 맞다면 yes를 출력, 틀리다면 no를 출력해라.
// 결과값 : yes

 

2.2 if...else if문

if-else if 문은 여러 조건에 따라 다른 작업을 해야 할 때 사용한다.

const a = 10;
if (a === 5) {
  console.log('5입니다!');
} else if (a === 10) {
  console.log('10입니다!');
} else {
  console.log('5도 아니고 10도 아닙니다.');
}

//결과값 : "10입니다!"

 

2.3 switch문

switch/case 문은 특정 값이 무엇이냐에 따라 다른 작업을 하고 싶을 때 사용한다.

• 복수의 if 조건문은 switch문으로 바꿀 수 있다. (if에서 너무 else if 를 반복하게 된다면 switch를 사용하는 것이 좋다.)
• case 문은 상황(case)을 의미하는 표현식을 지정하고 콜론으로 마친다. 그리고 그 뒤에 실행할 문들을 위치시킨다.
• switch 문의 표현식과 일치하는 표현식을 갖는 case 문들이 없다면 실행 순서는 default 문으로 이동한다. 
• 그런데 case문은 break문을 사용해야만 빠져나올 수 있으며 break문을 사용지 않으면 다음 case문까지 모두 실행된다.

 

출처 : https://poiemaweb.com/

예시)

let a = 2 + 2;

switch (a) {
  case 3:
    alert( '비교하려는 값보다 작습니다.' );
    break;
  case 4:
    alert( '비교하려는 값과 일치합니다.' );
    break;
  case 5:
    alert( '비교하려는 값보다 큽니다.' );
    break;
  default:
    alert( "어떤 값인지 파악이 되지 않습니다." );
}

결과화면)

 

만약 break문을 함께 적지 않는다면..?

👉 case 4에 해당하는 '비교하려는 값과 일치합니다' 문부터 deafult 문까지 모두 alert창에 출력된다.

 

 

if else 문과의 차이?

• if else : 실행을 할건지 말건지 판단 / switch : 어떤 코드를 실행할 것인지를 판단
• if…else 문의 조건식은 반드시 불리언 값으로 평가되지만 switch 문의 표현식은 불리언 값보다는 문자열, 숫자 값인 경우가 많다.
• if…else 문은 논리적 참, 거짓으로 실행할 코드 블록을 결정한다. switch 문은 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다.
• if else 문은 원하는 조건이 나올때까지 순차적으로 모든 경우를 비교하지만, switch문의 경우 원하는 곳으로 jump 한다. (다만 실행 속도 차이는 없는 것으로 파악됨)

 

2.4 기타 (Truthy & Falsey)

Truthy(참 같은 값) : 불리언을 기대하는 문맥에서 참으로 평가되는 값 (거짓같은 값으로 정의된 값을 제외한 모든 값)

Falsey(거짓 같은 값) : 불리언 문맥에서 false로 평가되는 값

 

8가지 거짓같은 값은 다음과 같다.

false	키워드 false
0	숫자 zero
-0	음수 zero
0n	불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. 0n은 거짓 같은 값.
""	빈 string
null	아무런 값도 없음
undefined	원시값
NaN	숫자가 아님

 

 

참고사항) Falsy 한 값 앞에 느낌표를 붙여주면 true 로 전환된다.

console.log(!undefined); //true
console.log(!null); //true