07 자바스크립트 루프의 종류

이 게시물에서는 물론 예제를 통해 JavaScript에서 루핑하는 다양한 방법을 살펴보겠습니다. 따라서 기본적으로 JavaScript에는 다음과 같은 주요 유형의 루프가 있습니다.

대

동안

두면서

forEach()

지도()

for-of

for-in

1. JavaScript for 루프

JavaScript의 for 루프는 코드 블록을 여러 번 반복합니다.

통사론

for (initialCondition; condition; updateExpression) {
     // code block
}

initialCondition은 코드 블록이 실행되기 전에 1번 실행되고, condition은 코드 블록을 실행하기 위한 조건을 정의하며, updateExpression은 코드 블록이 실행된 후 매번 실행됩니다.

예시

자동차 배열을 반복해 보겠습니다.

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

for (let car = 0; car < cars.length; car++) {
     console.log(cars[car])
}

2. JavaScript while 루프

JavaScript의 while 루프는 지정된 조건이 참인 동안 코드 블록을 반복합니다.

통사론

while (condition) {
     // code block
}

아래에 언급된 이 예제에서 루프의 코드는 cars 배열의 길이가 소진되지 않는 한 반복해서 실행됩니다.

예시

자동차 배열을 반복해 보겠습니다.

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

let car = 0;

while (car < cars.length) {
     console.log(cars[car])
     car++
}

3. JavaScript do-while 루프

JavaScript의 do-while 루프는 지정된 조건이 참인 동안 코드 블록을 반복합니다. do-while 루프는 while 루프와 매우 유사합니다. 그러나 유일한 차이점은 이 루프는 명령문을 확인한 후 사용 가능한 조건을 확인한다는 것입니다. 따라서 출구 제어 루프 유형의 예입니다.

통사론

do {
     // code block
} while (condition)

예시

자동차 배열을 반복해 보겠습니다.

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

let car = 0;

do {
     console.log(cars[car])
     car++
} while (car < cars.length)

4. JavaScript forEach 루프

forEach 메소드는 배열의 각 요소에 대해 함수를 호출하고 빈 요소에 대해서는 메소드를 실행하지 않습니다.

통사론

array.forEach(function(currentValue, index, arr))

예시

자동차 배열을 반복해 보겠습니다.

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

cars.forEach((car) => {
     console.log(ele)
})

5. JavaScript 맵 루프

JavaScript의 맵 루프는 모든 배열 요소에 대한 함수를 호출하여 새 배열을 만듭니다. 배열의 각 요소에 대해 한 번 함수를 호출하고 빈 요소에 대해 함수를 실행하지 않으며 원래 배열도 변경하지 않습니다.

통사론

array.map(function(currentValue, index, arr), thisValue)

예시

자동차 배열을 반복해 보겠습니다.

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

const newCars = cars.map((car) => {
     return car.toUpperCase()
})

6. 자바스크립트 for-of 루프

JavaScript의 for-of 루프는 배열 값을 반복합니다.

통사론

for (element of iterable) {
     // code block
}

여기서 element는 반복 가능한 객체(배열, 집합, 문자열 등)를 나타냅니다. iterable은 iterable 객체의 항목을 나타냅니다.

예시

자동차 배열을 반복해 보겠습니다.

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

for (car of cars) {
     console.log(car)
}

7. JavaScript for-in 루프

JavaScript의 for-in 루프는 객체의 속성을 반복합니다.

통사론

for (key in object) {
     // code block
}

예시

자동차 배열을 반복해 보겠습니다.

const cars = {1:"Mehran", 2:"GLi", 3:"Yaris", 4:"Civic", 5:"City"}

for (let carKey in cars) {
     console.log(cars[carKey])
}

for-in 루프는 cars 객체를 반복합니다. 각 반복은 키 carKey를 반환합니다. 키는 키 값에 액세스하는 데 사용되며 키 값, 즉 cars[carKey]가 반환됩니다.

나는 이것이 꽤 길다는 것을 알고 있지만, 당신이 이것을 흥미롭고 도움이 된다고 생각한다면 그것을 공유하고 그것을 💖.