[js] for(in, of), foreach, map 비교

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다!

 

js에는 다양한 배열 순환 방법이 존재합니다. 

for(in, of), foreach, map 비교를 통해 올바른 사용법을 알아보겠습니다.

 

1. for(in, of)

기본적인 반복문의 구조는 아래와 같은 구조로, 배열 순환 시 break; 적용 가능합니다.

 

for ([initialization]; [condition]; [final-expression]) {
	// iterating section
}

 

1) for(var a in b)

객체에서 사용 가능한 문법입니다.

 

var obj = { a: '가', b: '나', c: '다' }; 

for (var key in obj) { 
	console.log(key, obj[key]); // a 가, b 나, c 다 
}

 

2) for(var a of b)

Collection(Array, List ... etc) 전용 반복 구문으로 

컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야 사용 가능합니다.

 

var iterable = [10, 20, 30]; 

for (var value of iterable) { 
	console.log(value); // 10, 20, 30 
}

 

2. foreach

배열의 각 요소에 대해 callback을 실행합니다.

따라서 break 사용이 불가능합니다.

(그렇다면 return 사용하면 멈출 수 있긴 하겠다.

하지만 forEach에서 callback()을 customizing 하여 사용하지 않는다면, 불가능..(?))

 

array.forEach(callback(currentvalue[, index[, array]])[, thisArg]))

 

callback() 함수의 인자는

Parameter	Desc
currentValue	array[index]
index	array의 index
array[]	순회할 array
thisArg(Optional)	callback 함수의 this 에 해당하는 값

 

그렇다면, thisArg란 어떤 값일까?

단순히 글 만으로는 이해가 되지 않아 코드로 그 의미를 파악해보겠습니다.

(어디에 사용해야 잘 썼다고 소문이 날까나...)

 

const arr = [0,1,2,3,4,5,6,7,8,9,10];
const obj1 = {name: "kim"};
const obj2 = {name: "park"};

arr.forEach(function(element){
    console.log(`${this.name} - ${element}`);
}, obj1);
/*
kim - 0
kim - 1
kim - 2
kim - 3
kim - 4
kim - 5
kim - 6
kim - 7
kim - 8
kim - 9
kim - 10
*/
arr.forEach(function(element){
    console.log(`${this.name} - ${element}`);
}, obj2);
/*
park - 0
park - 1
park - 2
park - 3
park - 4
park - 5
park - 6
park - 7
park - 8
park - 9
park - 10
*/

 

 

3. map

 

array.map(callback(currentValue[, index[, array]])[, thisArg])

 

 

[References]

javascript - foreach 문 , for in 문 , for of문

[JavaScript] for vs. forEach vs. map

자바스크립트 Array forEach