자바스크립트 반복문 정리: for in, for of, forEach 등

자바스크립트 반복문를 총 정리해보려고 한다.
코딩테스트 문제를 풀다보면 정말 정말 유용하고 자주 쓰게되는!

• for

for(let i = 0; i < 10; i++) {
	console.log(i); // 1부터 10까지 출력
}
// { 안에 반복 수행 코드를 적으면 된다 }

변수 선언 시 const를 쓰면 값 변경이 불가하니 사용 시 주의

• for in : 객체 프로퍼티 키값 열거

const obj = {
    name: 'jane',
    job: 'engineer'
}

for (const key in obj){
    console.log(`${key} : ${obj[key]}`);
}
// name : jane
// job : engineer
// { 안에 반복 수행 코드를 적으면 된다 }

해당 객체의 모든 프로퍼티 키값을 열거 함

• for of : 이터러블 순회

const arr = [10, 20, 30];
for (const item of arr){
    console.log(item); // 10, 20, 30 출력
}
// { 안에 반복 수행 코드를 적으면 된다 }

이터러블에는 string, array, map, set, DOM 컬렉션(HTMLCollection, NodeList)등이 있음

• forEach() : 배열 순회

[10, 20, 30].forEach((value, index, array)=>{
    console.log(`${index} : ${value}`); // 0 : 10, 1 : 20, 2: 30 출력
})
// { 안에 반복 수행 코드를 적으면 된다 }

콜백함수의 매개변수로 value에 요소값, index 에 인덱스, array에 원본 배열이 들어감

• while

let num = 0;
while(num <3){ 
    console.log(num);  // 0~2 까지 출력
    num++;
}
// while(조건식) { 안에 반복 수행 코드를 적으면 된다 }

• do while

do{
    console.log('일단 한번은 실행된다.'); // 이 코드만 한번 실행되고 반복 종료.
}while(false);
// do{ 안에 반복 수행 코드 } while (조건식)

• Object 객체메서드 : 객체 순회

1. Object.keys(객체)

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

2. Object.values(객체)

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

3. Object.entries(객체)

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

• Array.prototype 메서드 : 배열

1. 배열.forEach( (value, index, array)=>{...반복 수행 코드...} )
   배열 길이만큼 반복해서 콜백함수 호출
   콜백함수의 매개변수로 value에 요소값, index에 인덱스, array에 원본배열이 들어옴

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

2. 배열.map( (value, index, array)=>{...반복 수행 코드...} )
   forEach와 동일
   다른점은 각 콜백함수에서 리턴하는 값으로 새로운 배열을 만들어 반환

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( (value, index, array)=>{...반복 수행 코드...} )
   forEach와 동일
   다른점은 각 콜백함수에서 리턴하는 값이 참일 때만, 그 value값으로 새로운 배열을 만들어 반환

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, currendIndex, array)=>{...반복 수행 코드...}, initialValue )
   두번째 매개변수인 initialValue값을 시작 값으로 함
   각 콜백함수가 리턴하는 값이 다음에 실행되는 콜백함수의 previousValue로 들어 감
   최종적으로 마지막 콜백함수가 리턴하는 값을 반환

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

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

• break문
  반복문과 switch 문에서 사용되며, 코드 블럭에서 탈출시킨다.

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

• continue문
  반복을 중단하고 다음 순서로 넘어간다.

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

결론

일반적인 순회용 반복문은
배열인 경우 : forEach() 사용 추천
객체인 경우 : Object.keys(객체) 사용 추천

Why?
함수용 프로그래밍에 가까움
예상치 못한 버그를 예방하기 위함