티스토리 뷰
반복문은 아주 많이 사용되는 문법이다.
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
'JavaScript' 카테고리의 다른 글
Intersection Observer를 통한 무한 스크롤 구현 (0) | 2022.03.10 |
---|---|
[JavaScript] 디바운싱과 쓰로틀링 (0) | 2022.01.25 |
[JS] querySelector 와 getElementBy~ (0) | 2021.12.22 |
- Total
- Today
- Yesterday
- webpack
- SOAP API
- Vue.js
- SPA
- Vue
- reactrouter
- js
- Transpiler
- redux-thunk
- programmers
- redux
- AxiosInterceptor
- Vuex
- python
- React.memo
- React
- bundler
- 파이썬
- TypeScript
- 알고리즘
- GraphQL
- 백준
- 문제풀이
- Repository Pattern
- 프로그래머스
- Preloading
- clean code
- v-for
- 상호평가
- error
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |