[JavaScript]다양한 반복문(for, forEach, for of, for in)

JavaScript의 4가지 for 반복문(for, forEach, for...of, for...in)의 차이점을 소개합니다.

 

목차

1. for...in문
2. for...of문
3. forEach문
4. for문
5. 요약

---

for...in문

for...in문은 객체의 속성을 반복하기 위해서 열거형과 함께 사용되며, EcmaScript6에 도입되었습니다.

let userInfo = {
  name: 'Kang JaeSeong',
  age: 30,
  address: 'Busan'
};

for (let key in userInfo) {
  console.log(`${key}: ${userInfo[key]}`);
}

실행 결과

 

배열도 JavaScript에서는 객체이므로 for...in문을 사용할 수 있습니다.

let arrNum = [1, 2, 3];

for (let value in arrNum) {
  console.log(`value: ${value}`);
}

실행 결과

정상적으로 실행되지만, 배열을 for...in문에 사용할 경우 두 가지 주의사항이 있습니다.

1. 배열에 반복문을 사용하는 경우 for...in문은 for...of문보다 처리 속도가 훨씬 느립니다.
2. 배열의 요소에 일관성 없는 데이터가 존재하는 경우

첫 번째 주의사항은 대부분 알고 있는 사실이며, 두 번째 주의사항인 일관성 없는 데이터는 다음과 같습니다.

let arrJobs = ['Hunter', 'Knight'];
arrJobs.job = 'Wizard';

for (let element in arrJobs) {
  console.log(`${element} is ${arrJobs[element]}`);
}

실행 결과

문자열 배열 arrJobs에는 일관성 없는 데이터가 추가되었으며, for...in문은 속성을 반복하므로 정상적으로 동작합니다. 이렇게 일관성 없는 데이터가 존재하는 경우 애플리케이션을 배포하기 전에 문제가 되는 코드를 찾기가 어려우며, 애플리케이션을 배포 후 문제가 발생할 가능성이 존재합니다.

---

for...of문

for...of문 또한 EcmaScript6에 도입되었으며 반복 가능한(iterables) 객체만 사용할 수 있습니다.

 

반복 가능한(iterables) 객체 목록

• 배열
• 문자열
• Set 객체와 Map 객체
• NodeList

반복적이지 않은 요소가 for...of문을 사용하는 경우 TypeError가 발생합니다.

 

다음은 Number 타입인 변수가 for...of문을 사용하는 예제입니다.

let num = 5;

for (let item of num) {
  console.log('loop');
}

실행 결과

for...of문은 본문에서 continue, break, yield와 같은 제어 흐름을 사용할 수 있으며, forEach보다 빠르다는 장점이 있습니다.

---

foreEach문

forEach문은 최대 3개의 인수를 가지는 콜백 함수가 존재합니다.

array.forEach(callback(currentElement, index, array) {
//...로직 작성
});

매개변수

• currentElement: 현재 배열의 요소
• index: 현재 배열 요소의 인덱스
• array: 반복되는 배열(forEach문을 호출한 배열)

forEach문은 for...of문과 달리 인덱스를 접근할 수 있는 방법이 존재합니다.

 

또 다른 차이점은 forEach문 첫 번째 인수인 현재 배열의 요소는 로컬 범위(Local Scope)이지만, for...of문은 그렇지 않습니다.

 

forEach문

let num = 10;
let arrNum = [1, 2, 3];

arrNum.forEach(num => {
  console.log(`num: ${num}`);
});

console.log(`num: ${num}`);

실행 결과

forEach문 외부에 선언된 변수 num의 값은 변경되지 않습니다.

 

for...of문

let num = 10;
let arrNum = [1, 2, 3];

for(num of arrNum) {
  console.log(`num: ${num}`);
}

console.log(`num: ${num}`);

실행 결과

하지만, for...of문을 사용한 경우 본문 외부에 선언된 num 변수의 값을 덮어씁니다.

 

본문 외부에 선언된 변수의 값이 덮어 쓰이는 것을 원하지 않는 경우 for...of문 내부에 사용되는 변수를 let 키워드로 선언합니다.

let num = 10;
let arrNum = [1, 2, 3];

for(let num of arrNum) {
  console.log(`num: ${num}`);
}

console.log(`num: ${num}`);

실행 결과

---

for 문

for문은 JavaScript에서 가장 오래되고 전통적인 반복문입니다. 누구나 쉽게 접근할 수 있지만, for문에서 작성된 로직이 간단하지 않은 경우 추후 코드 분석이 어려울 수 있습니다.

---

요약

• 배열의 경우 for...of문 또는 forEach문을 사용합니다.
• 객체의 경우 for...in문을 사용합니다.
• 배열을 반복문으로 순회하여 값과 인덱스에 접근해야 하는 경우 for 또는 forEach문을 사용합니다.