HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🏠
자바스크립트 개념서 기초부터 핵심까지/
5. 제어문

5. 제어문

5-1. 조건문5-1-1. if, if else 문 5-1-2. switch 문5-1-3. 삼항 연산자5-2. 반복문5-2-1. for 문5-2-2. while 문5-2-3. break 문과 continue 문

5-1. 조건문

조건문은 주어진 특정 조건이 충족되는 때에 따라 코드의 실행을 결정한다. 결괏값으로 true와 false 값으로 출력될 수 있는 식이다.

5-1-1. if, if else 문

if 문과 if else 문은 코드 블록( { } 괄호로 묶은 영역 ) 안의 조건을 확인하여, Truthy 값이면 if 명령문 다음에 오는 실행 명령을 처리하고, Falsy 값이면 else 문 다음에 오는 실행 명령을 처리한다.
📌
else if와 else는 옵션 사항으로 조건의 필요에 따라 사용하거나, 사용하지 않아도 된다. if와 else는 한 번만 사용해야 하며, else if는 중복으로 다양하게 사용이 가능하다.
 
if else 문에 예시를 적용하여 살펴보기.
 
if else 문과 else if 문 모두를 적용하여 살펴보기.
 
if else 문만 적용하여 살펴보기.
 
위에 조건과 같은 값을 삼항 조건 연산자를 사용하여 살펴보기.
📌
단순하게 값을 변수에 할당할 경우 삼항 조건 연산자가 사용에 용이하다. 다만 조건에 따라 실행해야 는 여러 문이 필요할 때는 if else 문의 가독성이 더 좋기 때문에 필요에 따라 사용하는 것이 좋다. 삼항 연산자에 대한 자세한 내용은 아래에서 다시 한번 다루도록 한다.
 

5-1-2. switch 문

처리해야 되는 명령이 많다면 if else 문을 다수 사용하는 것보다 switch 문으로 한 번에 표현하는 것이 가독성과 사용에 편리하여 유용하게 사용될 수 있다.
 
간단한 예시에 적용하여 살펴보기.
 

5-1-3. 삼항 연산자

삼항 연산자는 조건 연산자라고도 하며 단항 연산자와 다르게 세 개의 피연산자를 받는 연산자이다.
📌
조건문 ? 조건문이 참일 때 실행할 표현식 : 조건문이 거짓일 때 실행할 표현식
 

5-2. 반복문

반복문은 어떤 동작을 여러 번 실행해야 할 경우, 불필요한 명령어의 중복을 피하고 비교적 간단한 식을 통해 식을 만들 때 사용할 수 있다.

5-2-1. for 문

for 반복문은 반복문 중에서 가장 많이 쓰이는 것으로 조건식을 만족할 때까지 for 문은 계속 반복된다.
 
for 문의 장점을 한눈에 이해해 볼 수 있는 예제 살펴보기.
 
위에 식을 통해 for 문으로 중복되는 여러 개의 식을 한 줄로 표현할 수 있게 되는 것을 알 수 있다.
간단한 다른 예제를 살펴보기.
 
for 문을 이용한 구구단 만드는 방법 살펴보기.
 
1부터 100까지의 수에서 3의 배수 합을 구하는 방법 살펴보기.
 
for 문을 이용한 예제를 살펴보기.
 

5-2-2. while 문

while 문의 조건식을 이용하여 결괏값이 true인 동안 명령을 계속하여 반복 실행한다.
 
while 문에 예시를 적용하여 살펴보기.
 
do while 문 예시를 적용하여 살펴보기.
 

5-2-3. break 문과 continue 문

반복되는 명령어의 중복을 방지하고자 사용되는 것이 반복문이다. 주어진 조건에서 반복문은 반복을 멈추거나(break), 앞으로 되돌아가야 할 경우(continue)가 발생한다. break은 단독으로도 사용할 수 있으며, 반복문을 끝내는 조건과 함께 사용된다.
 
2~9단 식을 2~3단으로 변형하여 살펴보기.
 
break 문의 예시를 적용해 살펴보기.
 
continue 문은 조건식에 만족하는 해당 값에서 반복문을 중단한다. 반복문의 처음으로 다시 돌아가 다음 과정을 실행한다. break처럼 반복문을 끝내는 것이 아니라, 한 구간만 건너뛰는 것으로 생각하면 된다. 아래와 같이 간단한 예시에 적용하여 살펴보기.
 
// if 문
if (조건식) {
		// 조건식이 참(truthy)일 때 실행할 코드
}
// (false일 때는 아무것도 실행하지 않는다)

// if else 문
if (조건식) {
		// 조건식이 참(truthy)일 때 실행할 코드
} else {
		// 조건식이 거짓(falsy)일 때 실행할 코드
}

// if else 중복 사용문
if (조건식 1) {
		// 조건식 1이 참(truthy)일 때 실행할 코드
} else if (조건식 2) {
		// 조건식 2가 참(truthy)일 때 실행할 코드
} else {
		// 조건식 1, 2가 모두 거짓(falsy)일 때 실행할 코드
}
let num = 5;
if (num < 10) {
		console.log('num은 10보다 작은 수입니다');
} else {
    console.log('num은 10보다 큰 수입니다.');
}

// 조건식 num < 10이 참이기 때문에, 콘솔 창에 'num은 10보다 작은 수입니다'가 출력된다.
let x = 10;
let y = 20;
let z = 30;

if ( x > z ) {
		console.log('x는 셋 중 가장 큰 수이다.');
} else if ( y > z ) {
		console.log('y는 셋 중 두 번째로 큰 수이다.');
} else {
		console.log('z는 셋 중 가장 큰 수이다.');
}
		
// z는 셋 중 가장 큰 수이다.
let x = 2;

if(x % 2) {
		console.log('x는 홀수이다.');
} else {
		console.log('x는 짝수이다.');
}

// x는 짝수이다.
// 예제1
let x = 2;
let result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수

// 예제2
let x = 2;
let pos = x ? ( x > 0 ? '양수' : '음수') : '0';
console.log(pos); // 양수
switch (조건식){
		  case 조건식 1 :
			  	// 조건식 1과 일치할 때 실행될 명령문;
				  break;
			case 조건식 2 :
					// 조건식 2과 일치할 때 실행될 명령문;
					break;
			case 조건식 3 :
					// 조건식 3과 일치할 때 실행될 명령문;
					break;
			default :
					// 일치하는 조건식이 없을 때 실행될 명령문;
					break;
	};
let destination = 'ENGLAND';
let airport;

switch (destination) {
			case 'NEWYORK' :
					airport = 'JFK';
					break;
			
			case 'ENGLAND' :
					airport = 'HTR';
					break;
			
			case 'FRANCE' : 
					airport = 'CDG';
					break;
			
			case 'CZECH' :
					airport = 'PRG';
					break;
			
			case 'HUNGARY' : 
					airport = 'BUD';
					break;
			
			default : 
					airport = 'UNKNOWN';
			}
			console.log(airport); // HTR
// 예제1
let age = 19;
let drivable = (age < 18) ? 'too young':'old enough';
console.log(drivable); // old enough

// 예제2
let score = 69;
let result = (score >= 70) ? 'pass' : 'fail';
console.log(result); // fail

// 예제3
let num = 10;
let result = num % 2 ? '홀수' : '짝수';
console.log(result); // 짝수
for (초기화; 조건식; 증감식) {
		// 조건식을 만족할 때까지 실행될 문;
}
// for 문을 사용하지 않았을 때
text += numbers[0] + '<br>';
text += numbers[1] + '<br>';
text += numbers[2] + '<br>';
text += numbers[3] + '<br>';
text += numbers[4] + '<br>';
text += numbers[5] + '<br>';

// for 문을 사용하였을 때
for (let i = 0; i < numbers.length; i++) {
		text += numbers[i] + '<br>';
}
for (let i = 0; i < 10; i++) {
		console.log(i);
}
// 0 1 2 3 4 5 6 7 8 9
for (var i = 2; i < 10; i++) {
		for (var j = 1; j < 10; j++) {
		console.log (`${i} X ${j} = ${i*j}`);
	  }
}
// 콘솔 값 
// 2 X 1 = 2
// 2 X 2 = 4
// 2 X 3 = 6
// 2 X 4 = 8
// 2 X 5 = 10
// 2 X 6 = 12
// 2 X 7 = 14
// 2 X 8 = 16
// 2 X 9 = 18
// ...
// 9 X 1 = 9
// 9 X 2 = 18
// 9 X 3 = 27
// 9 X 4 = 36
// 9 X 5 = 45
// 9 X 6 = 54
// 9 X 7 = 63
// 9 X 8 = 72
// 9 X 9 = 81
let s = 0;
for(let i = 0; i < 101; i+=3){
    // console.log(i)
		s += i;
}
console.log(s); // 1683
const animals= ['lion', 'tiger', 'monkey', 'rabbit', 'camel', 'giraffe'];
let text = '';
for (let i = 0; i < animals.length; i++) {
		text += animals[i] + '<br>';  
}
document.write(text);
// lion
// tiger
// monkey
// rabbit
// camel
// giraffe
// while 문
while (조건식) {
		// true 일 동안 반복 실행될 명령
}

// do while 문
do {
		// 일단 한번 실행될 명령, 실행 후 while 문에서 조건을 확인하여 반복 여부를 결정한다.
} while (조건식)
// 예제1
let num = 0;
while (num < 5){
		console.log(num); 
		num++;
}  
// 0 1 2 3 4

// 예제2
const colors = ['RED', 'BLUE', 'BLACK', 'PINK'];
let i = 0;
let text = '';
while (colors[i]) {
		text += colors[i] + '<br>';
	  i++;
} 
document.write(text);
// RED
// BLUE
// BLACK
// PINK
// 예제1
let num = 0;
do {
		console.log(num); 
		num++;
} while (num < 5);
// 0 1 2 3 4

// 예제2
let text = '';
let i = 1;
do {
		text += '<br>' + i + '월입니다.';
	  i++;
} while (i < 13);
document.write(text);
// 1월입니다.
// 2월입니다.
// 3월입니다.
// 4월입니다.
// 5월입니다.
// 6월입니다.
// 7월입니다.
// 8월입니다.
// 9월입니다.
// 10월입니다.
// 11월입니다.
// 12월입니다.

// 예제3
let result = '';
let i = 0;
do {
		i += 1;
		result += i + ' ';
} while (i > 0 && i < 8);
console.log(result); // 1 2 3 4 5 6 7 8
// 기존 2~9단의 구구단 구하는 식
for (var i = 2; i < 10; i++) {
		for (var j = 1; j < 10; j++) {
		console.log (`${i} X ${j} = ${i*j}`);
  }
}

// 2~3단 구하는 식으로 변형하기
for (var i = 2; i < 10; i++) {
	  for (var j = 1; j < 10; j++) {
		console.log (`${i} X ${j} = ${i*j}`);
  } if ( i === 3) 
		break;
}
// 예제1
let text = '';
for (let i = 0; i < 5; i++) {
		if (i === 4) { break; }
				text += 'This is number ' + i + '<br>';
}
document.write(text);
// This is number 0
// This is number 1
// This is number 2
// This is number 3

// 예제2
const fruits = ['apple', 'banana', 'melon', 'orange'];
let text = '';
list: {
		text += fruits[0] + '<br>'; 
	  text += fruits[1] + '<br>'; 
			  break list;
				text += fruits[2] + '<br>'; 
				text += fruits[3] + '<br>'; 
}
document.write(text);
// apple
// banana
// 예제1
let letter = 'good morning everyone';
let find = 'e';
let count = 0;
for (let i = 0; i < letter.length; i++){
		if (letter[i] !== find) continue;
				count++;
}
console.log(count); // 3

// 예제2
for (i = 0; i < 10; i++) {
		if (i == 5) {
		    continue;
		} console.log(i);
}
// 0
// 1
// 2
// 3
// 4
// 6
// 7
// 8
// 9

// 예제3
let text = '';
for (let i = 0; i < 10; i++) {
		if (i === 3) { continue; }
		text += '고객님은 ' + i + '번째 손님입니다.<br>';
} 
document.write(text);
// 고객님은 0번째 손님입니다.
// 고객님은 1번째 손님입니다.
// 고객님은 2번째 손님입니다.
// 고객님은 4번째 손님입니다.
// 고객님은 5번째 손님입니다.
// 고객님은 6번째 손님입니다.
// 고객님은 7번째 손님입니다.
// 고객님은 8번째 손님입니다.
// 고객님은 9번째 손님입니다. (3번째 손님을 제외하고 0~9번째 손님이 나열된다.)