본문 바로가기
Front-End/javascript

[Javascript 기초] 반복문 (for 문/while 문)

by 김기. 2023. 4. 15.

반복문이란 특정 구문을 반복해서 처리하는 방법으로 다양한 종류가 있습니다.

그중 for, for in, for of, while, do...while에 대해서 다루겠습니다.

 

더욱 자세한 내용들은 MDN 웹 문서에서 확인하실 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration

 

루프와 반복 - JavaScript | MDN

루프는 어떤 것을 반복적으로 시행할때 빠르고 간편한 방법을 제공합니다. JavaScript Guide의 이 항목은 JavaScript 에서 사용이 가능한 서로 다른 여러가지 반복문을 소개합니다.

developer.mozilla.org


1. 반복문의 종류

1. for 문

2. for in 문

3. for of 문

4. while 문

5. do while 문

6. 레이블 문

7. break 문

8. continue 문

 

2. for 문

for 문은 특정 조건이 true라면 반복, false로 판별되면 종료됩니다.

for 문은 초기문은 자체적으로 초기문, 조건문, 증감문을 포함하고 있으며 문법과 실행 과정은 다음과 같습니다.

 

for (초기문; 조건문; 증감문) {반복 수행할 실행문;}

1. 초기문을 실행 (보통 1이나 반복문 카운터로 초기 설정)
2. 조건문으로 조건 검사 (만약 조건문이 생략된다면 참으로 추정)
3. 문장 실행 (많은 문장을 실행 시, { }로 묶어줌)
4. 증감문으로 카운터를 증감시키고 조건 검사

const colors = ["black", "blue", "red", "green", "pink"];

for(let i=0; i<colors.length; i++){
  console.log(colors[i]); // black, blue, red, green, pink
}

 

3. for in 문

for in 문은 객체의 열거 속성을 통해 지정된 변수를 반복합니다. (객체의 프로퍼티 키 열거)
문법은 다음과 같습니다.

 

for (변수 in 객체) {반복 수행할 실행문;}

const friend = {
  name: "daexxxx",
  age: 27,
  job: "engineer",
}

for(let key in friend){
  console.log(friend[key]); // daewxxn, 27, engineer
}

 

4. for of 문

for of 문은 이터러블을 순회하는 반복문입니다.

*이터러블은 반복 가능한 객체를 말합니다. (String, Array, Map, Set, HTMLCollection, NodeList 등)

문법은 다음과 같습니다.

 

for (변수 of 객체) {반복 수행할 실행문;}

const  colors = ["black", "blue", "red"];

for(let color of colors){
  console.log(color); // black, blue, red
}

 

5. while 문

while문은 조건이 true라면 실행문을 반복합니다.

문법은 다음과 같습니다.

 

while (조건문) {반복 수행할 실행문;}

for문과 while문 비교

const fruits = ["strawberry", "apple", "grape"];

// forfor(let i=0; i<fruits.length; i++){
  console.log(fruits[i]); // strawberry, apple, grape
}

// whilelet i = 0;
while(fruits[i]){
  console.log(fruits[i]); // strawberry, apple, grape
  i++;
}

 

6. do...while 문

do...while 문은 무조건 한번 실행을 하고 조건을 검사하여 true라면 구문을 반복합니다.

문법은 다음과 같습니다.

 

do {실행문} while (조건문);

let i = 1;
do {
  const num = i + "<br>";
  document.write(num);
  i++;
}
while(i <= 10); // 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

 

7. for 문 vs while 문

그렇다면 for 문과 while 문 둘 다 반복문인데 무엇을 사용해야 할까요?

 

for 문 : 명확한 조건 또는 횟수가 있는 경우

while 문 : 조건 또는 횟수가 명확하지 않을 경우

 

또한, for 문의 경우 while 문 보다 가독성이 좋기 때문에 for문을 더욱 찾을 것 같습니다.

 

댓글