[Javascript] 조건문 if ... else 사용 방법

 

앞선 포스팅에서는 Javascript를 사용하기 위해서 변수와 상수를 선언하는 방법, 연산자를 이용해서 계산하는 방법들을 알아보았습니다.

 

 

이번 포스팅에서는 조건문을 사용하는 방법을 알아보도록 하겠습니다.

---

조건문이란?

프로그래밍을 하다 보면 A인지 B인지 혹은 다른 경우인지를 판단해야 하는 경우가 발생합니다. 어떠한 상황이 주어졌을 때, 그 상황에서 사용자 혹은 프로그래머의 선택으로 인해 결과가 달라지기 때문입니다. 이럴 때 사용하는 것이 바로 조건문입니다.

 

조건문이란 이름 그대로 판단을 하기 위해 사용한 문법을 말합니다. 오늘 알아볼 조건문은 if 조건문입니다. if 조건문에는 다시 세 가지 사용 방법이 있습니다.

• if 조건문
• if ... else 조건문
• if ... else if ... else 조건문

그럼 각각의 조건문을 어떻게 사용할 수 있는지 알아볼게요.

---

조건문 if 사용 방법

if 조건문의 형태는 아래와 같습니다.

if (condition) {
  ...
}

사용하고자 하는 조건을 괄호 내부에 넣어주시면 됩니다. 단 조건은 true 혹은 false로 나오는 값을 사용해야 합니다. 만약 조건이 true라면 if문 내부 블록을 실행하게 됩니다. 반대로 false라면 if문 내부 블록은 실행하지 않고 건너뛰게 됩니다.

---

조건문 if 사용 예제 1

const num = 10;

if(num % 2 == 0) {
	console.log('짝수');
}
console.log('조건문 완료');

num에 따라서 결과가 달라집니다. 위 예제 처럼 num값이 10이면 2로 나눈 나머지가 0이기 if문 내부 블록을 실행해서 콘솔에 '짝수'라는 글자를 출력하게 됩니다. 그리고 마지막 '조건문 완료'까지 출력하게 됩니다.

 

조건문 if 결과 1

짝수
조건문 완료

 

나머지 연산(%)과 대입 연산(==)과 같은 연산자 사용은 아래 포스팅에 정리해 놓았습니다.

2021.04.12 - [쿤즈 Dev/HTML & CSS & Javascript] - [Javascript] 연산자(Operators) 종류와 사용법 알아보기

[Javascript] 연산자(Operators) 종류와 사용법 알아보기

---

조건문 if 사용 예제 2

const num = 9;

if(num % 2 == 0) {
	console.log('짝수');
}
console.log('조건문 완료');

num값이 9라면 num % 2의 결과는 1이기 때문에 조건문 if를 실행하지 않고 넘어갑니다.

 

조건문 if 결과 1

조건문 완료

 

그렇다면 이 프로그래밍에서 홀수를 출력하려면 어떻게 해야 할까요? 마지막 하단에 console.log()에 홀수를 출력한다 가정하면 짝수인 경우에도 홀수라는 글자가 출력될 것입니다. 그래서 필요한 두 번째 조건문 사용입니다.

---

조건문 if ... else 사용 방법

조건문 if ... else 사용 방법은 아래와 같습니다.

if (condition) {
  // true
} else {
  // false
}

조건문 if 블록과 else 블록이 별도로 존재합니다. 이 경우에는 조건에 맞으면 if 내부를, 맞지 않으면 else 내부를 실행하게 됩니다.

---

조건문 if ... else 사용 예제

const num = 10;

if ( num % 2 == 0 ) {
	console.log('짝수');
} else {
	console.log('홀수');
}

console.log('조건문 완료');

이제는 정확하게 필요한 값만 선택해서 출력할 수 있습니다. num의 값이 10이고 num % 2의 결과가 0이므로 조건문 if만 실행하고 else는 실행하지 않습니다.

 

조건문 if ... else 결과

짝수
조건문 완료

판단해야 하는 조건이 두 가지인 경우에 사용할 수 있는 조건문 문법입니다.

만약 그 이상의 조건을 판단해야 한다면 어떻게 해야 할까요? 그래서 세 번째 사용 방법이 필요합니다.

---

조건문 if ... else if ... else 사용 방법

조건문 if ... else if ... else 사용 방법은 아래와 같습니다.

if ( condition1 ) {
  // condition1
} else if ( condition2 ) {
  // condition2
} else if ( condition3 ) {
  // condition3
} else {
  // else
}

이번에 사용하는 방법은 else if를 이용해서 필요한 조건을 늘려 나가는 것입니다. 어떤 경우가 있을까요? 예제를 통해서 알아보겠습니다.

---

조건문 if ... else if ... else 사용 예제

const num = 78;

if (num >= 90) {
	console.log('A');
} else if (num >= 80) {
	console.log('B');
} else if (num >= 70) {
	console.log('C');
} else if( num >= 60) {
	console.log('D');
} else {
	console.log('F');
}

점수를 확인하고 성적을 처리할 때 이와같이 사용할 수 있습니다. 점수가 78점일 경우 첫 번째 조건은 90 이상이기 때문에 실행하지 않고 다음 블록으로 넘어갑니다. 두 번째 조건은 80 이상이기 때문에 역시 실행하지 않고 다음으로 넘어갑니다. 이렇게 넘어가다가 조건에 맞는 세 번째 70 이상인 경우는 조건에 맞기 때문에 내부를 실행하고 조건문을 빠져나옵니다.

---

이번 포스팅에서는 Javascript에서 사용할 수 있는 조건문에 대해서 알아보았습니다. 조건문은 어느 쪽으로 갈지 길을 묻는 것과 같습니다. 그에 따라서 전혀 다른 실행 결과를 낼 수 있기 때문이죠. 도움이 되셨으면 합니다. 이상입니다.