한국의 정규 과정을 거쳐온 사람이라면 한 번쯤은 들어봤던 if문.
영어 시간에만 보던 if문을 웹개발에서 다시 마주했다.
그런데 영어 문법 시간에 배운 if, 웹개발에서의 if는 비슷했다.

• 영어 문법에서의 가정법 if
  내가 -라면 -할 텐데...

• 웹개발에서의 if
  내가(if)가 -라면(true / false)라면 -할 텐데(return)

억지스럽지만 뭔가 비슷한 느낌이다. 그렇다고 하자.

조건문(if) 이란

주어진 조건식의 결과에 따라 블록문의 실행을 결정하는 걸 조건문이라 한다.
자바스크립트에서는 조건문을 2가지로 분류하는데
if…else 문과 switch 문을 제공한다.

1. if...else문

if…else 문은 주어진 조건식(불리언 값으로 평가될 수 있는 표현식)의 평가 결과, 즉 논리적 참, 거짓에 따라 실행할 코드 블록을 결정한다. 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환되어 논리적 참, 거짓을 구별한다.

if else의 기본 구조

if (조건식) {
  // 조건이 참이다. 그러면 if의 코드 블록이 실행
} else {
  // 조건식이 거짓이다. else의 코드 블록이 실행된다.
}

만약 다양한 조건을 추가해 value를 더 얻고 싶다면
기존의 if...else 구문에 else if를 추가해주면 된다.

🧨if문에서 주의할 점

else if 문과 else 문은 옵션으로 사용할 수도 있고 사용하지 않을 수도 있다.
if 문과 else 문은 2번 이상 사용할 수 없지만 else if 문은
여러 번 사용할 수도 있다.

= else if만 여러 번 사용 가능하다

(더 이상 나이로 상처받지 않는다. 그저 수긍할 뿐)

본론으로 다시 와서

2. switch 문

switch문은 switch 문의 표현식을 평가하여
그 값과 일치하는 표현식을 갖는 case 문으로 실행 순서를 이동시킨다.

case 문은 상황을 의미하는 표현식을 지정하고 콜론으로 마친다. 그리고 그 뒤에 실행할 문들을 위치시킨다.

switch 문의 표현식과 일치하는 표현식을 갖는 case 문이 없다면 실행 순서는 default 문으로 이동한다. default 옵션으로 사용할 수도 있고 사용하지 않을 수도 있다.

간단하게 예제로 하나 알아보자.

🧨잘못된 switch문

결과가 invalid number라고 뜬다.
분명히 조건과 case를 작성했는데 왜 오류가 발생할까?

switch 문을 탈출하지 않고 switch 문이 끝날 때까지
모든 case 문과 default 문을 실행했기 때문이다.
이걸 폴스루(fall through)라 한다.

위의 예시에서는 변수 countNumber에 ‘Lucky Seven’이 할당된 후
switch 문을 탈출하지 않고 default의 ‘Boom number’가 재할당되었다.

그렇다면 해결 방법은?

case 문에 해당하는 문의 마지막에 break 문을 빼먹은 것이 오류의 원인이었다. break 키워드로 구성된 break 문은 코드 블록에서 탈출하는 역할을 수행한다. break 문이 없다면 case 문의 표현식과 일치하지 않더라도 실행 순서는 다음 case 문으로 연이어 이동한다.

break를 적용한 올바른 switch문

3. 조건문, 알겠는데 어떻게 활용할 것인가.

조건문을 공부하며 바로 떠오른 아이디어가 있었다.
전원을 on / off라는 코드를 짠다거나, 또는 단계를 적용한 힘의 출력이라던가, 시험의 합 / 불합의 결과 등 생활의 여러 면에 관련된 코드를 짤 수 있겠다는 생각이 들었다.

지금 공부 중인 웹이라는 분야에서는 자바스크립트의 클릭 기능과 if문을 통해 배경 변경이나 페이지 변경 등의 효과를 줄 수 있기도 하겠다.
(아직은 구현 못하지만 빠른 시일 내에 구현해 볼 예정이다)

끝!

Reference
MDN
PoiemaWeb