본문 바로가기
JavaScript | 자바스크립트

조건문(조건부실행, 흐름제어) - if / else if / else

by Pig_CoLa 2020. 7. 10.
SMALL

조건문에 대하여 알아보기 전에 먼저 비교연산자와 Boolean을 알아봅시다.

비교연산자

  • a < b : a가 b보다 작다
  • a <= b : a가 b보다 작거나 같다
  • a > b : a가 b보다 크다
  • a >= b : a가 b보다 크거나 같다
  • !a : a의 truthy한 값이면 false가 되고 falsy한 값이면 true가 된다

(Boolean값이라면 true는 false가 되고 false는 true가 된다)

  • a == b : a와 b의 값이 같다
  • a === b : a와 b의 타입과 값이 같다.

비교 연산자를 거친 결과는 항상 Boolean값이 된다...!

Boolean...?

true 와 false만이 존재하며 참과 거짓을 나타냅니다. 위 비교연산의 결과가 참이라면 true 거짓이라면 false입니다.

if문

if문은 조건이 참일때만 실행되는 구문을 만들수 있다.

이를 조건부실행(흐름제어)라고도 한다.

if문 사용

if (조건문) {
  실행할 구문
}

if 문의 조건문 값이 true이면 실행할 구문이 실행되고 false라면 실행되지 않는다.

비교연산자를 넣어 직접 조건을 비교하거나, 어떤것에 의하여 반환된 Boolean값을 변수에 넣어 흐름을 제어할수 있다.

let a = false, num1 = 1, num2 = 3; // 변수 선언을 한번에 여러개 할수 있다.

if (a) {
  console.log('안녕하세요') // 실행되지 않음
}

if (num1 + num2 === 4) {
  console.log('안녕하세요') // 안녕하세요
}

if (!a) {
  console.log('안녕하세요') // 안녕하세요
}

else if

여러 조건에 따라 각기 다른 실행문을 만들고 싶다면..? if 밑에 또다른 if를 만들어 주면 된다. 하지만 그럴 경우에는 매번 모든 경우를 다 비교하게 되고 두곳이상 해당하는 경우 둘다 실행된다.

이러한 흐름을 원지 않는다면 첫번째 if문 아래 else if를 만들어주자. (무조건 if 다음에만 쓸 수 있다.) (하나의 if에 else if가 몇개가 올지는 상관이 없다)

이러면 if가 아닐때만 else if 를 비교하게 되고 else if가 참이라면 else if의 body를 실행한다.

let a = 5

if (a > 4) { console.log('a가 4보다 크다'); } // a가 4보다 크다
if (a > 3) { console.log('a가 3보다 크다'); } // a가 3보다 크다
if (a > 2) { console.log('a가 2보다 크다'); } // a가 2보다 크다

if (a > 4) { console.log('a가 4보다 크다'); } // a가 4보다 크다
else if (a > 3) { console.log('a가 3보다 크다'); } // 실행되지 않음
else if (a > 2) { console.log('a가 2보다 크다'); } // 실행되지 않음

// 모든 else if 는 자신보다 위에서 비교하는 조건이 참일경우 조건 비교자체를 하지 않는다

else

if와 else if를 통하여 비교한 결과가 모두 거짓일때만 실행된다. else if와 마찬가지로 if문 뒤에 쓰여지며 if다음에 오던 else if다음에 오던 상관없지만 else가 오는순간 새로운 else if를 쓸수 없다.

또, 조건문이 존재하지 않고 (위에서 모두 거짓이면 실행되는것) if 문에서 단 한번만 사용 가능하다.

let a = 0

if (a > 4) { console.log('a가 4보다 크다'); } // 실행되지 않음
else if (a > 3) { console.log('a가 3보다 크다'); } // 실행되지 않음
else if (a > 2) { console.log('a가 2보다 크다'); } // 실행되지 않음
else if (a > 1) { console.log('a가 1보다 크다'); } // 실행되지 않음
else { console.log('a는 0보다 작거나 같다'); } // a는 0보다 작거나 같다

조건에 따라 흐름을 제어한다

아무리 조건부실행에 대하여 잘 알고있다 하더라도 어떤 조건으로 어떻게 실행하게 할지를 판단하는것은 쉽지않습니다.

동일한 기능을 하는 아주 유사성 짙은 코드라도 조건부실행을 잘 이용한다면 여러 이점을 챙길 수 있겠죠.

LIST

'JavaScript | 자바스크립트' 카테고리의 다른 글

객체 - Object  (0) 2020.07.13
배열 - Array  (0) 2020.07.12
함수의 반환값 - return  (0) 2020.07.10
함수 - function  (0) 2020.07.10
변수  (0) 2020.06.27

댓글