Control Statements

조건문 (if, else, else if)

if, else, else if를 사용하면 조건에 따라 코드의 흐름을 제어할 수 있습니다.

문법

 
if (조건 부분 1) {
  // ...
} else if (조건 부분 2) {
  // ...
} else {
  // ...
}
 

조건은 소괄호 ()로 감싸주고 조건을 만족했을 시 실행할 코드는 중괄호 {}로 감싸줍니다. 필요에 따라 else if, else는 생략할 수 있습니다.

if 예시

 
let temperature = 20;
 
if (temperature >= 100) {
  console.log('물이 끓습니다.');
}
 

if-else 예시

 
let temperature = 20;
 
if (temperature >= 100) {
  console.log('물이 끓습니다.');
} else {
  console.log('물이 끓지 않습니다.');
}
 

물이 끓지 않습니다.

if-else if 예시

 
let temperature = 20;
 
if (temperature >= 100) {
  console.log('물이 끓습니다.');
} else if (temperature <= 0) {
  console.log('물이 업니다.');
}

if-else if-else 예시

 
let temperature = 20;
 
if (temperature >= 100) {
  console.log('물이 끓습니다.');
} else if (temperature <= 0) {
  console.log('물이 업니다.');
} else {
  console.log('물이 얼지도 끓지도 않습니다.');
}
 

물이 얼지도 끓지도 않습니다.

반복문 (for, while)

특정 동작을 여러 번 반복해야 할 경우 반복문을 사용합니다. 반복문은 for, while 두 종류가 있습니다.

for문

문법

 
for (초기화 부분; 조건 부분; 추가 동작 부분) {
  // ...
}
 

예시

 
for (let i = 0; i < 10; i++) {
  console.log('Hello Codeit!');
}
 

Hello Codeit!
Hello Codeit!
Hello Codeit!
Hello Codeit!
Hello Codeit!
Hello Codeit!
Hello Codeit!
Hello Codeit!
Hello Codeit!
Hello Codeit!

• 초기화 부분: for문을 돌 때 처음 한 번 실행되는 코드입니다.
• 조건 부분: 조건 부분이 참이면 for문 안에 있는 코드를 실행합니다. (거짓이 될 때까지 for문을 반복합니다.)
• 추가 동작 부분: for문 안에 있는 코드가 다 실행된 이후 실행됩니다.

while문

문법

 
while (조건 부분) {
  // ...
}
 

예시

 
let i = 10;
while (i >= 1) {
  console.log(i);
  i--;
}
 

10
9
8
7
6
5
4
3
2
1

while문 안에서 조건과 관련된 변수를 업데이트해 주는 것(i-—)을 깜빡하는 경우가 많은데요. 그러면 조건이 계속 참이어서 while문 안에 있는 코드가 무한 반복되고 오류가 나니까 업데이트 문을 작성하는 것도 꼭 기억해 주세요!

for문 vs while문

for문과 while문 둘 다 어떤 코드를 여러 번 반복하는데 쓰이는데요. 언제 for문을 사용하고 언제 while문을 사용하면 될까요?

정해진 숫자만큼 반복을 해야 할 때는 주로 for문을 사용하고요, 몇 번 반복을 해야 되는지는 모르고 특정 조건을 만족할 때까지 반복을 해야할 때는 주로 while문을 사용합니다.

 
for (let i = 0; i < 10; i++) {
  console.log('Hello Codeit!');
}
 

예를 들어 위의 코드는 출력문을 10번 실행하면 되기 때문에 for문이 더 어울리는데요. 또 다른 예시로 어떤 숫자의 가장 작은 약수를 계산한다고 생각해 봅시다. 아래와 같이 코드를 쓸 수 있는데요.

 
let n = 35;
 
let i = 2;
while (n % i !== 0) {
  i++;
}
 
console.log(`${n}의 가장 작은 약수는 ${i}입니다.`);
 

가장 작은 약수를 찾으려면 몇 번 반복을 해야 될지 미리 알 수가 없습니다. 그래서 조건을 ’n이 i로 나눠떨어지지 않는다'로 두고 조건이 거짓이 될 때까지 반복하는 겁니다.

물론 첫 번째 예시를 while문으로 쓸 수도 있고 두 번째 예시를 for문으로 쓸 수도 있기 때문에 특정 상황에서는 꼭 for문 또는 while문을 사용해야 되는 건 아니고요. 주로 어떤 상황에서 많이 사용하는지를 알려드리는 겁니다.

그 외 제어문

자바스크립트에는 if, for, while 말고도 다른 제어문들이 있는데요. 자주 사용하지는 않지만, 이런 코드를 마주칠 수도 있고, 특정 경우에는 유용하게 쓰일 수 있으니까 이번 레슨에서 소개해 드릴게요.

switch문

switch문은 if문과 비슷한데, 간단한 케이스가 여러 개일 때 주로 사용합니다.

 
let fruit = '포도';
 
/* 과일 fruit에 따라 메시지를 출력해 줍니다. */
switch (fruit) {
  case '사과':
    console.log('사과는 1kg에 12,000원입니다.');
    break;
  case '바나나':
    console.log('바나나는 1kg에 6,000원입니다.');
    break;
  case '오렌지':
    console.log('오렌지는 1kg에 10,000원입니다.');
    break;
  case '포도':
    console.log('포도는 1kg에 20,000원입니다.');
    break;
  default:
    console.log('과일을 찾지 못했습니다');
}
 

포도는 1kg에 20,000원입니다.

과일 종류에 따라 메시지를 출력해 주는 코드인데요.

• fruit의 값으로 switch(스위치)를 만들고
• fruit의 값이 case에 있는 값과 일치하면 그 case문이 실행됩니다. case문이 종료되면 이어서 그다음 case에 일치하는지 확인하는데요. case문이 종료되면 바로 switch문을 나가도록 break라는 것을 사용해 줬습니다. (break문에 대한 내용은 다음 섹션을 참고해 주세요.)
• 만약 아무 case문도 실행이 안 됐다면 default문이 실행되는데요. else문과 비슷하게 나머지 케이스를 처리한다고 생각하시면 됩니다.

switch는 항상 값이 일치(===) 하는지를 비교하기 때문에 복잡한 연산은 사용할 수 없지만 많은 케이스를 효율적으로 처리할 수 있습니다.

switch문에 대해 더 알고 싶으시다면 아래 레슨을 참고해 보세요!

• https://www.codeit.kr/topics/core-concept-of-javascript-programming/lessons/3419
• https://www.codeit.kr/topics/core-concept-of-javascript-programming/lessons/3420

break문

break문은 for, while, switch문을 미리 종료하고 싶을 때 사용합니다. break문을 만나면, 그 순간 for, while 또는 switch문이 종료됩니다.

 
let fruit = '포도';
 
/* 과일 fruit에 따라 메시지를 출력해 줍니다. */
switch (fruit) {
  case '사과':
    console.log('사과는 1kg에 12,000원입니다.');
    break;
  case '바나나':
    console.log('바나나는 1kg에 6,000원입니다.');
    break;
  case '오렌지':
    console.log('오렌지는 1kg에 10,000원입니다.');
    break;
  case '포도':
    console.log('포도는 1kg에 20,000원입니다.');
    break;
  default:
    console.log('과일을 찾지 못했습니다');
}
 

포도는 1kg에 20,000원입니다.

이전 예시에서는 일치하는 case를 찾으면 바로 switch문을 빠져나오도록 break문을 사용했었습니다.

for나 while문에도 동일하게 사용할 수 있는데요.

 
for (let i = 1; i <= 10; i++) {
  console.log(i);
  if (i === 7) {
    break;
  }
}
 

1
2
3
4
5
6
7

 
let i = 1;
 
while (i <= 10) {
  console.log(i);
  if (i === 7) {
    break;
  }
  i++;
}
 

1
2
3
4
5
6
7

원래는 1부터 10까지 반복돼야 하는데, 중간에 break를 마주치기 때문에 숫자가 7까지만 출력되고 반복문이 종료됩니다.

프로그래밍을 하다 보면 특정 조건을 만족하면 바로 반복문에서 나오고 싶을 때가 있을 텐데, 그럴 때 break문을 사용하시면 됩니다.

continue문

continue문은 반복문(for, while)에 사용하는 것인데요. break와 비슷한 면이 있습니다. break는 반복문 전체를 종료했다면, continue는 현재 반복문을 한 번 건너뛰는 겁니다. 이게 무슨 뜻인지 설명해 드릴게요.

 
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}
 

1
3
5
7
9

만약 i를 2로 나눈 나머지가 0이면, 즉 i가 짝수이면 continue문을 실행하는데요. 그러면 현재 i에 해당하는 반복문은 바로 종료되고 다음 반복문으로 넘어가기 때문에 console.log(i)가 실행되지 않습니다. i가 짝수이면 console.log(i)가 실행되지 않기 때문에 홀수만 출력되는 거죠.

for문을 while문으로 바꾸면 이렇게 쓸 수 있습니다.

 
let i = 1;
 
while(i <= 10) {
  if (i % 2 === 0) {
    i++;
    continue;
  }
  console.log(i);
  i++;
}
 

1
3
5
7
9

continue를 마주치면 마지막 줄의 i++를 건너뛰게 되기 때문에 if문 안에도 i++가 필요한 겁니다.

continue는 특정 조건을 만족할 경우, 현재 반복문을 한 번 건너뛰고 싶을 때 사용하시면 됩니다.