[Javascript] 반복문 - for, for each, for in, for of

반복문

Javascript에서 코드를 특정한 횟수를 반복하거나 리스트 형태의 데이터를 순회하고 싶을 때 반복문을 사용 합니다.

주로 많이 사용하는 반복문은 for을 이용한 횟수를 중요시하는 반복문들이 있습니다.

• for
• for each
• for in
• for of

 

반복문 for

반복문 for은 코드를 특정한 횟수를 반복할 때 사용합니다.

for (let i = 0; i < 5; i++) {
  console.log(i)
}
// 0, 1, 2, 3, 4

// 초기식
let i = 0;

// 조건식 
i < 5;

// 후위식
i++

for 문은 초기식, 조건식, 후위식, 반복 코드으로 구분이 되어 초기식 -> 조건식 -> 반복 코드 -> 후위식의 순서대로 진행 되며, 반복하다가 조건식이 false일 때 반복을 멈춥니다.

http://www.tcpschool.com/c/c_control_loop

 

반복문 for each

for Each는 array, map, set 의 데이터에서만 사용이 가능하다.

const arr = [1, 2, 3, 4, 5]
arr.forEach((item) => log(item))

//1, 2, 3, 4, 5

 

forEach는 함수를 인자로 받으며, 함수의 매개 변수에는 각각 value, index, arr가 들어가게 된다.

• value -> 배열의 인덱스의 값
• index -> 배열의 인덱스(key), 순서
• arr -> forEach를 돌린 배열

const arr = [1, 2, 3, 4, 5]
arr.forEach((item, index, arr) => {
  log(arr, index, item)
})

// [ 1, 2, 3, 4, 5 ] 0 1
// [ 1, 2, 3, 4, 5 ] 1 2
// [ 1, 2, 3, 4, 5 ] 2 3
// [ 1, 2, 3, 4, 5 ] 3 4
// [ 1, 2, 3, 4, 5 ] 4 5

 

 

반복문 for in

for in문은 키와 value로 구성이 된 객체에서 사용이 가능한 반복문으로, 객체를 key를 기준으로 순회한다.

아래의 예시를 보면 student라는 객체를 순회하는 데, key에는 객체의 key들이 인자로 들어가기에 그것을 이용하여 value를 log로 찍는 것을 알 수 있다.

const student = {
  name: '김인후',
  age: 22,
  school: 'DMU',
}

for (const key in student) {
  log(key, student[key])
}

// name 김인후
// age 22
// school DMU

 

반복문 for of

반복문 for of는 이터러블과 이터레이터를 기반으로 리스트를 순회한다. 이터러블과 이터레이터는 아래의 자료를 참고하고, 쉽게 생각하면 array, map, set과 같은 리스트를 순회한다고 생각하면 된다.

 

[참고 자료]

[JavaScript] 이터러블(interable), 이터레이터(iterator), 제네레이터(Generator)

 

for of문은 매개 변수 item에 각 리스트의 배열이 들어가게 되기에 그를 이용하여 log로 value를 출력하는 것을 알 수 있다. 다만 이 원리가 for문과 같이 i 값을 증가시키는 원리와 다르다는 것만 알아두자.

const arr = [1, 2, 3, 4, 5]

for (const item of arr) {
  log(item)
}

// 1, 2, 3, 4, 5