[JavaScript] for, forEach, map, for..of, for...in 비교 및 차이

1. for 문

특징

• 배열을 반복문으로 순회해 값과 인덱스에 접근해야 하는 경우 for 또는 forEach문 사용
• arrayList, array는 for문을 사용하면 성능면에서 빠르다.

단점

• for문의 로직이 간단하지 않을 경우 코드 분석이 어려울 수 있다.

For-each문은 For문 보다 얼마나 빠를까?

---

2. forEach문

문법

array.forEach( function( currentElement, index, array ){
 
});

currentElement : 처리할 현재 요소

index: 처리할 현재 배열 요소의 인덱스

array: forEach()를 호출한 배열

반환값: undefined

특징

• 자신의 내부에서 반복문 실행
• 배열의 경우 forEach문 사용
• 인덱스에 접근할 수 있다.
• 배열을 반복문으로 순회해 값과 인덱스에 접근해야 하는 경우 for 또는 forEach문 사용

단점

• 배열을 역순으로 탐색하기 어렵다.
• 반복문 내 배열이나 리스트 값을 변경 및 추가가 어렵다. (수정의 어려움)

---

3. map함수

array.map(( currentVal, index, array )=>{ 

});

map은 3개의 매개변수(파라미터=인자)를 가진다.

currentVal : 현재 처리하고 있는 원본배열의 데이터

index : 현재 처리중인 인덱스

array : 현재 map()메서드를 실행하고 있는 원본 배열

const testArray = [1,2,3,4];

const ResultMap = testArray.map((i,x,z)=> {
console.log("현재 처리중인 원본데이터: " + i);
console.log("현재 처리중인 인덱스: " + x);
console.log("map 메서드를 이용중인 원본 배열: ");
console.log(z)
});

//출처: https://ordinary-code.tistory.com/8 [김평범's OrdinaryCode:티스토리]

특징

• map 종료 후에는 새로운 배열을 반환한다.

 

	forEach()	map()
함수 정의	단순 반복문을 대체하기 위한 함수	요소값을 다른 값으로 mapping한 새로운 배열을 생성하기 위한 고차함수
반환값	undefined	return 값이 없을 경우 배열에는 undefined가 들어간 배열이 생성되므로 반드시 return을 설정한다.(새로운 배열을 반환)
공통점	원본 배열 변경하지 않음

 

---

4. for...of (ES6도입)

for (variable of object) {

}

특징

• 반복 가능한 객체만 사용할 수 있다.

반복 가능한 객체 목록

배열

문자열

Set 객체와 Map 객체

NodeList

• for..of문은 continue, break, yield와 같은 제어 흐름을 사용할 수 있다.
• forEach보다 빠르다.

단점

• 반복적이지 않은 요소가 for..of문을 사용할 경우 typeError가 발생한다

반복가능한 객체 목록이 아닌 경우 error

---

5. for...in (ES6도입)

for (variable in object) {

}

특징

• 객체의 경우 사용
• 속성의 이름을 통해 반복한다. (하단 이미지 참조)

단점

• 배열의 반복문 사용시 for..in문을 사용할 경우 for..of문보다 처리 속도가 훨씬 느리다.
• 배열 요소에 일관성 없는 데이터가 존재할 경우 문제 되는 코드를 찾기가 어렵다.

 

---

 

for...in문은 속성 이름을 통해 반복한다.

for...of문은 속성의 값을 통해 반복한다.

 

---

[참고자료]

평범한 직장인의 공부 정리