[JavaScript] forEach, for in, for of

forEach(콜백함수, 배열) 💫

 

forEach문은 오직 배열 객체에서만 사용할 수 있는 메서드입니다. 배열의 모든 요소를 반복하며 콜백함수를 실행합니다. 

for문과 마찬가지로 반복적인 기능을 수행할 때 사용됩니다.

하지만 for문처럼 index와 조건식, 증감식을 정의하지 않아도 콜백함수를 통해 기능을 수행합니다.

 

for문에서는 continue나 break로 반복을 제어할 수 있지만

forEach는 throw(예외)를 발생시키지 않으면 중간에 반복을 종료할 수 없습니다.

 

만약 조건을 만족할 때 까지만 반복시키고싶다면 기존 for문이나 every같은 함수를 사용해야 합니다.

 

const arr = [a, b, c, d, e, f, g, h, i, j];

arr.forEach(function(element){
	console.log(element);  // a b c d e f g h i j
});

arr.forEach(element => console.log(element));  // arrow 함수도 가능

 

forEach에는 return이 없습니다.

즉, 콜백함수에 의해서 어떠한 결과를 내놓고 싶다면 함수 밖 변수를 사용해야 합니다.

하지만 함수 밖 영역의 참조는 예상치못한 예외상황을 발생시킬 수 있으므로 scope 관리를 잘 해줘야 합니다.

 

또한 return값이 없기 때문에 forEach메서드는 변수에 할당하기 보다는 반복문이나 조건문과 같이 바로 호출됩니다.

 

아래 예시는 기존 배열에서 홀수 배열을 만드는 예시입니다.

 

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const oddArr = [];

arr.forEach(function(element){
	if(element%2 == 1){
    	oddArr.push(element);
    }
});

console.log(oddArr);  // 1, 3, 5, 7

 

 

forEach의 콜백함수에는 배열의 요소뿐 아니라 index, 전체 배열을 인자로 사용할 수 있습니다.

 

const arr = [a, b, c, d, e];

arr.forEach(function(element, index, array){
	console.log(`${array}의 ${index}번째 요소 : ${element}`);
});

// a, b, c, d, e의 0번째 요소 : a
// a, b, c, d, e의 1번째 요소 : b
// a, b, c, d, e의 2번째 요소 : c
// a, b, c, d, e의 3번째 요소 : d
// a, b, c, d, e의 4번째 요소 : e

 

dom객체에 onclick을 지정할 때 index를 사용하여 arr값을 참조하는 방식으로도 사용됩니다.

 

순수 HTML에서는 dom객체를 불러오고, onclick을 작성하고, 다시 삽입하는 등의 과정이 복잡하기 때문에

위 방식이 크게 와닿지는 않지만, 

리액트에서는 map함수와 index를 사용하여 컴포넌트에 이벤트를 넣는 패턴이 꽤 많습니다.

 

 

 

for in 💫

 

다음으로는 for in 입니다.

 

for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다. ( 모든 객체에서 사용 가능 )

for in 구문은 객체의 key값에 접근할 수 있지만, value값에 접근하는 방법은 제공하지 않습니다.

 

열거할 수 있는 속성란, 내부적으로 enumerable 플래그가 true로 설정된 속성을 의미합니다. 

 

var obj = {
	name : '녜힝',
    age : 20
};

for (var prop in obj) {
	console.log(prop, obj[prop]);  // name 녜힝, age 20
}

 

 

 

for of 💫

 

for of 반복문은 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해줍니다.

자바스크립트에서 반복할 수 있는 객체에는 array, map, set, arguments 등이 있습니다. 

이 반복문은 루프마다 객체의 열거할 수 있는 속성의 값을 지정된 변수에 대입합니다.

(for of 문은 익스플로러에서 지원하지 않습니다.)

 

for of 반복문은 말그대로 for 반복문의 변형입니다. 때문에 도중에 break 혹은 continue문을 사용할 수 있습니다.

그래서 만일 반복 도중에 반복을 제어해야할 경우에는 for of문을 사용하는 것이 좋습니다. 

 

 

Iterable? Iterator?

Iteration이란 사전적 의미로 "되풀이"를 의미하며,  while문, for문과 같은 문법을 Iteration이라 합니다.

Iteration에는 Iterable과 Iterator가 존재하며, 이 두 프로토콜이 모두 존재해야 Iteration을 수행할 수 있습니다.

 

• Iterable
  • Iterable은 객체가 반복될 수 있는지, 즉 반복될 수 있는 조건을 의미합니다.
• Iterator
  • 반복 대상이 되는 객체의 원소가 순서대로 불려진다는 약속을 의미합니다.
  • 즉, Iterable한 객체가 순서대로 열거될 수 있는지를 의미합니다. 

 

const arr = [a, b, c];

for(const item of arr){
	console.log(item);  // a, b, c
}

 

Iterable에는 String, Array, Map, Set, DOM컬렉션(HTML Collection, Nodelist) 등이 있습니다. 

 

+  map이나 forEach처럼 index를 가져오지는 못합니다.

+ for of 문에서는 매 반복 때마다 배열의 상태가 업데이트됩니다. 그렇기 때문에 도중에 배열 요소의 갯수가 늘어나는 경우, 반복 횟수도 함께 늘어납니다.

(만일 반복이 진행되는 요소보다 앞쪽으로 요소가 추가될 경우에는 무한루프에 빠질 수 있으니 주의!!)