반복문은 특정 상황이 될 때까지 어떤 동작을 반복한다. 반복문을 사용하면 같은 코드를 반복해서 쓸 필요 없이 묶어서 처리할 수 있다. 이처럼 반복문은 코드를 간결하게 함으로서 컴퓨터의 실행 속도를 빠르게 하므로, 반복문을 잘 사용하면 프로그래밍을 효율적으로 할 수 있다. 따라서 반복문의 종류와 사용법을 알고 있는 것이 중요하다.

✍️ 반복문의 종류

자바스크립트에서 반복문은 아래와 같은 것들이 있다.

• for - loops through a block of code a number of times
  코드를 여러번 반복한다.
• for/in - loops through the properties of an object
  객체의 속성을 반복한다.
• for/of - loops through the values of an iterable object
  배열 요소를 반복한다.
• while - loops through a block of code while a specified condition is true
  주어진 조건이 참인 동안 코드를 반복한다.
• do/while - also loops through a block of code while a specified condition is true
  주어진 조건이 참인 동안 코드를 반복한다.

원래 자바스크립트에 반복문은 for, while, do...while 세 가지가 있었다.
그러다 ES6가 되면서 객체를 순환하는 구문인 for/in, 배열을 순환하는 구문인 for/of 이 추가되었다.

그럼 각각의 구문이 어떻게 사용되는지 알아보자.

코드 반복

조건에 따라 코드를 반복하는 for문, while 문, do...while문에 대해 알아보자.

📌 for

for문은 가장 많이 사용되는 반복문으로, 변수를 기준으로 코드를 반복하기 때문에 횟수가 정해져 있는 반복문을 작성할 때 사용한다.

우선 for문의 구조를 보자.

for ( 초기문 ; 조건문 ; 증감문) {
  // 반복할 코드 입력
}

초기문에는 초기값이 될 변수를 선언한다.
조건문에는 반복 조건을 적는다. 조건문이 true면 {코드}가 실행된다.
증감문에는 코드 블럭 실행 후에 초기문을 증가시킬지, 감소시킬지 정해준다.


아래는 간단한 예시이다.

for (let i = 0; i < 5; i++) {
  console.log(i+1+'회 실행되었습니다.');
}

우선 초기문에 반복문의 초기값이 i = 0 으로 설정 되었다. 그리고 조건문은 i < 5로 설정 되었다. 증감문은 i++로, {코드} 실행 후에 i에 1이 더해질 것이다. 그렇다면 이 코드는 i값이 4가 될 때까지 실행될 것이고 총 5회 실행된다. (i=0, i=1, i=2, i=3, i=4)
{코드}에 따라 콘솔에는 다음과 같은 결과가 나온다.

1회 실행되었습니다.
2회 실행되었습니다.
3회 실행되었습니다.
4회 실행되었습니다.
5회 실행되었습니다.

---

📌 while

while문 은 주어진 조건을 만족하는 동안에만 코드를 반복한다.
while문의 구조는 아래와 같다.

초기문
while (조건문)  { 
코드;
증감문;
}

초기문에서는 카운터 변수 i를 선언하고 초기화한다.
조건문에서는 조건식을 검사한다. 조건문이 true이면 중괄호 {} 안의 코드가 실행된다.
증감문에서는 반복횟수를 제어한다.


예시를 통해 알아보자.

let i = 0
while (i < 4)  { 
console.log(i+1+'번째 실행');
i++;
}

우선 반복 횟수를 제어할 카운터 변수 i를 선언한다. let i = 0
그리고 (조건문)에 반복 조건을 설정한다. while (i < 4)
그 후 중괄호{} 안에 반복될 코드를 적는다. console.log(i+1+'번째 실행');
이어서 카운터 변수를 제어할 식도 써 준다. i++

결과는 아래처럼 나온다.

1번째 실행
2번째 실행
3번째 실행
4번째 실행

---

📌 do...while

do...while문 은 while문과 마찬가지로 주어진 조건을 만족하는 동안에만 코드를 반복한다.
do...while문의 구조는 아래와 같다.

초기문
do {
  코드;
  증감문;
}
while (조건);

while문과 다르게 do...while문은 실행될 코드가 앞에, 조건이 뒤에 있다. 따라서 조건문을 검사하기 전에 일단 코드가 한 번 실행된다. 즉, 조건이 false일 때도 주어진 코드가 최소 한 번 실행된다.


예시를 한번 보자.

var i = 0
do {
	console.log(i+1+'회 실행됨');
    i++ 
} while (i < 2);

위 코드는 우선 console.log가 1회 실행된다. 그리고 while 조건이 true인 동안 코드가 반복된다. 따라서 실행 결과 콘솔창에 아래와 같이 기록된다.

1회 실행됨
2회 실행됨
3회 실행됨

만약 조건문을 while(false) 로 바꾸면 결과가 어떻게 나올까? do...while문은 do 코드가 while 조건식 앞에 오므로 false일 때도 일단 1회 실행된다. 따라서 아래같은 결과가 나온다.

1회 실행됨

---

객체 순환

📌 for...in

for...in 은 객체를 순환하는 반복문에 사용한다. 어떤 객체가 있을 때, for...in 반복문을 통해 그 객체의 속성 🔐 (key 또는 value값) 하나 하나에 접근하면서 반복할 수 있다.
구조는 아래와 같다.

 for(배열을 반환받을 변수 선언 in 객체) {
 	코드 
   }

for...in 반복문으로 🔑 key값에 접근하기

let object = {
  a: 1,
  b: 2,
  c: 3
}; 

for (let propertyKey in object) {
  console.log(propertyKey + '출력')
}

세 개의 속성 a:1, b:2, c:3 을 갖고 있는 object라는 이름의 객체가 있다. 이 속성의 key값 a, b, c에 접근하려고 한다.
for문 괄호 안에 결과를 저장할 변수를 선언하고,
👉 let item
어떤 배열의 key값을 가져올 지 지정해 주었다.
👉 in object

이렇게 하면 객체의 각 key값이 코드에 적용된다. 결과는 아래와 같다.

a출력
b출력
c출력

for...in 반복문으로 🔓value값에 접근하기

key값이 아닌 value값에 접근하려면 객체명에 [변수명]를 붙여주면 된다.

let object = {
  a: 1,
  b: 2,
  c: 3
}; 

for (let property in object) {
  console.log('key는 ' + property + '이고, value는 ' +  object[property] + '입니다.');
}

위 코드를 실행하면 아래와 같은 결과가 나온다.

key는 a이고, value는 1입니다.
key는 b이고, value는 2입니다.
key는 c이고, value는 3입니다.

---

배열 순환

📌 for...of

for...of는 배열을 순환하는 반복문에 사용한다. 사용법은 for...in 과 비슷하다.
예시를 보자.

let array = [1, 2, 3];

for (let result of array) {
  console.log(result); 
}

결과는 아래와 같다.

1
2
3

---

어떤 반복문을 사용해야 할까?

그렇다면 for, do...while, while 중 어떤 반복문을 사용해야 할까?
for문은 초기값이 있으면서 일정한 간격으로 반복할 때 사용한다.
while문은 조건에 맞지 않을 때 코드를 아예 실행하지 않을 경우 사용한다.
do...while문은 조건에 상관 없이 일단 코드를 한번 실행할 때 사용한다.