[JavaScript] for ... in / for ... of / forEach

0후·2022년 2월 28일
0

프론트엔드

목록 보기
22/41

forEach

Array의 prototype을 상속받은 객체가 사용할 수 있는 함수이다. 인자로 함수를 받아 각 배열의 요소에 해당 함수를 적용한다. 엄밀히 따지자면 반복문은 아니고, 함수이다.

var arr = [1,2,3,4,5];

arr.forEach(function(item, index, array){
	console.log(item, '/', index, '/', array);
});

// 결과 
// 1 '/' 0 '/' (5) [1, 2, 3, 4, 5]
// 2 '/' 1 '/' (5) [1, 2, 3, 4, 5]
// 3 '/' 2 '/' (5) [1, 2, 3, 4, 5]
// 4 '/' 3 '/' (5) [1, 2, 3, 4, 5]
// 5 '/' 4 '/' (5) [1, 2, 3, 4, 5]

for ... in (객체 탐색)

Object에 있는 key에 차례로 접근하는 데 사용되는 반복문이다.

var obj = {
	id : '1',
    name : '샐러리',
    age : '18'
}

for (var item in obj) {
  console.log(item) 
}

Object.prototype.foo = function() { 
  return 0;
};

// 결과
// id
// name
// age
// ƒ () { 
//  return 0;
// }

Object의 요소뿐 아니라 Object의 프로토타입으로 만들어 둔 foo 함수까지 함께 순회하는 모습을 볼 수 있다. 이러한 이유 때문에 for in은 Object의 key를 순회하기 위해 불가피하게 사용하는 것이 아니라면 사용하지 않는 것이 좋다. Object를 for in이 아닌 다른 방법으로 순회하고 싶다면, Object의 내장 메소드인 keys()를 사용하면 된다.

for ... of (배열 탐색)

순회 가능한 자료구조(Array, String, Map, Set, DOM data structures)는 모두 순회 가능하다. Array만 반복할 수 있는 forEach와 다르게, 내부에 [Symbol.iterator]를 가진 객체라면 어떤 객체든 순회할 수 있다. 하지만 이터러블하지 않은 일반 Object에는 사용할 수 없다.

var arr = [1, 2, 3];

for (var item of arr) {
  console.log(item); 
}

// 결과
// 1, 2, 3
profile
휘발방지

0개의 댓글