728x90
자바스크립트 반복문 4가지에 대한 정리
for : 고전적인 for문
for in : 객체의 프로퍼티 키 열거 전용
for of : 이터러블 순회 전용
forEach(): 배열 순회 전용 메서드
이외에도 ... 이런 종류가 있습니다 :
while : 고전적인 while문
do while : 고전적인 do...while문
Object 객체 메서드: 객체 순회 전용
Array.prototye 메서드 : 배열 전용
for
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
/*
아래와 동일
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
*/for (expression 1; expression 2; expression 3) {
// code block to be executed
}Expression 1 은 코드 블록 실행 전에 실행됩니다(한 번).
Expression 2 은 코드 블록을 실행하기 위한 조건을 정의합니다.
Expression 3 은 코드 블록이 실행된 후 (매번) 실행됩니다.
for- in
const person = {fname:"John", lname:"Doe", age:25};
let text = "";
for (let x in person) {
text += person[x];
}
//John Doe 25상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다.
인덱스 순서 가 중요한 경우 배열 에 for in 을 사용하지 마십시오 .순서가 중요한 경우 for 루프, for of 루프 또는 Array.forEach() 를 사용하는 것이 좋습니다.
for- of
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x;
}
//BMW Volvo Minifor of문은 반복 가능한 객체의 값을 반복합니다.
Arrays, Strings, Maps, NodeLists 등과 같은 반복 가능한 데이터 구조를 반복할 수 있습니다.
forEach
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let text = "";
const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);
document.getElementById("demo").innerHTML = text;
function myFunction(item, index) {
text += index + ": " + item + "<br>";
}
/* 출력결과 :
0: apple
1: orange
2: cherry
*/
</script>
</body>
</html>아래 코드는 forEach로 배열을 순회하면서 모든 요소를 출력하는 예제입니다.
arr.forEach()의 인자로 함수를 전달하면 배열의 모든 요소를 순회할 때, 함수의 인자로 요소를 전달합니다.
정리 참고 출처 : https://www.w3schools.com/js/js_loop_for.asp
728x90
'STUDY > JavaScript' 카테고리의 다른 글
| [JS] arguments 객체 (0) | 2023.01.05 |
|---|---|
| [JS] spread operator - 배열의 복사 (0) | 2023.01.05 |
| [JS] 스코프(var, let, const) · String 메서드 (0) | 2023.01.02 |
| [JS] 함수 표현식과 함수 선언식의 차이 - 호이스팅 (0) | 2022.12.28 |
| [JS] options = options || {}; / 연산자 우선순위 · 삼항 연산자 (0) | 2022.12.28 |