자바스크립트 반복문 총 정리

1. for

기본적인 반복문.

for (let i = 0; i < 10; i++){
    console.log(i); // 0~9까지 출력
}

// for 문에서 break 사용하기
for (let i = 0; i < 10; i++){
    if(i == 5){break;} // i값이 5가 되는 순간 for문 종료 => 0~4 까지만 출력
    console.log(i);
}

// for 문에서 continue 사용하기
for (let i = 0; i < 10; i++){
    if(i%2 === 0){continue;} // i가 짝수라면, 다음 반복으로 넘어감 => 홀수만 출력됨
    console.log(i);
}

 

 

2. for in

배열 뿐만이 아니라 object에서도 사용할 수 있다. Object 내 키 값을 가져오기 위해 사용되기도 한다.

const obj = {
    name: 'young',
    job: 'front'
}

for (const key in obj){
    console.log(`${key} : ${obj[key]}`);
}
// name : young
// job : front

 

3. for of

string, array, map, set, DOM 컬렉션 등 iterable 객체에서 사용 가능.

const arr = [1, 2, 3];
for (const item of arr){
    console.log(item); // 1, 2, 3
}

 

4. forEach()

배열에서 유용하다.

['a', 'b', 'c'].forEach((value, index, array)=>{
    console.log(`${index}: ${value}`); 
})
// 0: 'a', 1: 'b', 2: 'c' 출력

 

5. while

let i=1;
while (i<=10) {
  console.log("Number: " + i);
  i++;
}

 

6. do while

do{
    console.log('여기가 최소 한 번은 실행됨'); // 이 코드만 한 번 실행되고 반복 종료!
} while(false);

 

7. Object 객체 메서드

1) Object.keys({...})

Object.keys({name:'young', job:'front'}); 
// [ 'name', 'job' ]

2) Object.values({...})

Object.values({name:'young', job:'front'}); 
// [ 'young', 'front' ]

3) Object.entries({...})

Object.entries({name:'young', job:'front'}); 
// [ [ 'name', 'young' ], [ 'job', 'front' ] ]

 

8. Array.prototype (배열 전용)

1) 배열.forEach((v, i, a) => {...반복 코드...})

[1, 2, 3, 4].forEach((value, index, array)=>{
    console.log(value);  // 1, 2, 3, 4 출력
})

2) 배열.map((v, i, a) => {...반복 코드...})

const map_reuslt = [1, 2, 3, 4].map((value, index, array)=>{
    console.log(value); // 1, 2, 3, 4 출력
    return value*10; // 각 요소에 10을 곱한 값을 배열로 반환
})

console.log(map_reuslt);  
// [ 10, 20, 30, 40 ]

3) 배열.filter((v, i, a) => {...반복 코드...})

const filter_result = [1, 2, 3, 4].filter((value, index, array)=>{
    console.log(value); // 1, 2, 3, 4 출력
    return value%2 == 0; // value가 짝수인 값들을 배열로 반환
})

console.log(filter_result); 
// [ 2, 4 ]

4) 배열.reduce((previousValue, currentValue, currentIndex, array) => {...반복 코드...}, initailValue)

const reduce_result = [1, 2, 3, 4].reduce((pv, cv, idx, arr)=>{
    return pv + cv; // 이전 콜백함수가 리턴한 값에 현재의 요소 값을 더함(누적 개념)
}, 100); // 100을 초기값으로 줌

console.log(reduce_result); 
// 110 (100 + 1 + 2 + 3 + 4 결과)