티스토리 뷰

JavaScript

Loop

U_pic 2022. 5. 30. 03:48

반복문은 아주 많이 사용되는 문법이다.

JS에는 많은 반복문이 존재한다.

일부 잘 사용하지 않던 반복문에 대해 잘 기억나지 않아, 이번에 살짝 정리해보려고 한다.

반복문의 종류

  • for 문
  • while문
  • do…while문
  • lable 문
  • for …in 문
  • for …of 문
  • forEach문

 

for 문

for문은 특정 조건이 거짓이 되기 전까지 반복한다.

for(let i = 0; i < 5; i++) {
	console.log(i);
}

이후 나올 while과의 차이점은 정해진 횟수만 반복한다는 점이다.

for 문 내부에는 초기 값선언, 반복 조건 구문, 업데이트 구문 세 가지 구문을 작성해야 한다.

 

while문

특정 조건이 참일 경우 계속 반복한다.

let n = 0;
let x = 0;
while ( n < 5 ) {
	n += 1;
	x += n;
	console.log(x)
}
// 1, 3, 6, 10

조건 부분이 항상 참이 되는 무한 루프는 피해야 한다.

 

do…while문

반복 구문이 최초로 실행된 후, 조건문이 참이면 해당 로직을 반복한다. 조건문이 거짓이 되면 실행을 멈춘다.

let n = 1;
do {
	console.log(n);
	n += 1;
} while (n < 2)

// 1

최소 1회 실행이 된다는 점이 while과 차이가 있다.

 

label 문

label은 프로그램 내에서 다른 위치를 참조할 수 있는 label을 제공한다.

var i, j;

loop1:
for (i = 0; i < 3; i++) {      //첫번째 for문은 "loop1" 레이블을 붙였다.
   loop2:
   for (j = 0; j < 3; j++) {   //두번째 for문은 "loop2" 레이블을 붙였다.
      if (i === 1 && j === 1) {
         continue loop1;
      }
      console.log('i = ' + i + ', j = ' + j);
   }
}

// 출력 결과:
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"
//   "i = 2, j = 0"
//   "i = 2, j = 1"
//   "i = 2, j = 2"
// 다음 두 경우를 어떻게 스킵하는지 주목 : "i = 1, j = 1", "i = 1, j = 2"

MDN에서 제공하는 예제를 보면 i값과 j값이 1이 되었을 때, loop1을 continue 한다.

loop1은 상위 for 반복문을 가리키고 있기 때문에 i = 1, j = 1, i = 1, j = 2는 스킵한다.

 

for …in 문

객체 내 속성을 반복한다.

let ageObj = { kim: 12, park: 14, lee: 20 }
for (person in ageObj) {
	console.log(`${person} is ${ageObj[person]} years old`)
}

// kim is 12 years old
// park is 14 years old
// lee is 20 years old

 

for …of 문

Iterable 한 객체의 속성 값을 반복한다.

Iterable 하다는 것은 반복 가능한 객체를 말한다. ex) String, Array, TypedArray, Map, Set

for (let letter of "Hello") {
	console.log(letter);
}
// 'H','e','l','l','o'

 

forEach문

Array 객체에서만 사용 가능한 메서드이고, Array 내부 요소들에 대해서 반복적으로 로직을 수행할 수 있다.

Array 내부의 처음부터 끝 요소를 반복하여 꺼낸다.

let numberArr = [1, 2, 3, 4, 5]
numberArr.forEach((num) => {
	console.log(num);
})
// 1, 2, 3, 4, 5

 

break / continue

break는 현재 반복하고 있는 반복 구문을 종료한다.

중첩 반복을 사용하고 있을 경우 해당 break를 포함하는 가장 안쪽의 반복문이 종료된다.

for (let i = 1; i < 6; i++) {
	if (i === 3) break;
	console.log(i);
}
****// 1, 2

continue는 현재 반복하고 있는 값에 대한 반복을 Pass 하고 다음 반복 단위로 넘어간다.

for (let i = 1; i < 6; i++) {
	if (i === 3) continue;
	console.log(i);
}
****// 1, 2, 4, 5

 

## Reference

 

Iterable | JavaScript로 만나는 세상

처음 시작하는 사람들을 위한 JavaScript 교재

helloworldjavascript.net

 

 

label - JavaScript | MDN

레이블 구문은 break나 continue 구문과 함께 사용할 수 있다. 원하는 식별자로 구문 앞에 레이블을 추가할 수 있다.

developer.mozilla.org

 

 

루프와 반복 - JavaScript | MDN

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

developer.mozilla.org

 

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함