JavaScript, Array.prototype.forEach()

JavaScript, Array.prototype.forEach()
자바스크립트, forEach 메소드

 

-----
설명 Description

forEach() 메서드는 콜백 함수를 배열 요소 각각에 대해 한번씩 오름차순으로 실행한다. 사실 이 것만 기억하면 사용하는데 문제는 없는 것 같다: 배열 요소, 한번씩, 오름차순, 콜백함수

forEach()로 처리할 배열 요소의 범위는 최초 콜백 함수(callback) 호출 전에 설정된다. 콜백함수 호출 이후 삭제되거나 추가된 요소에 대해서는 반영되지 않는다. 그러므로, 콜백 함수 실행 중에 배열 요소에 변동이 있는 로직에서는 사용이 적합하지 않은 것 같다.

초기화되지 않은 배열 요소에는 실행되지 않는다. 배열 요소가 정의되어 있지 않을 경우, 오류가 나진 않지만 무시된다.

forEach() 메소드의 콜백함수(callback)는 다음 세 인수와 함께 호출됩니다.

• 요소 값
• 요소 인덱스
• 순회 중인 배열

옵션으로 this 값을 매개변수로 콜백함수에 전달할 수 있다. 콜백함수는 전달 받은 this값을 인수로 사용한다. 전달하지 않으면 undefined를 사용하고, 일반적인 규칙의 this값을 사용 한다.

forEach() 메소드는 기존 배열을 변경 시키지 않는다. (콜백함수로는 가능함)

콜백함수 실행 중에 멈춰야 하는 로직이라면, 굳이 forEach()메소드를 쓸 필요는 없는 것 같다.

유사배열에 forEach()메소들를 사용할 경우 call, aplly를 빌려 쓰면된다.

노드의 경우 노드리스트의 프로토타입에 메소드가 있어, 유사 배열의 경우라도 사용 가능하다: NodeList.prototype.forEach()

-----
구문 Syntax

array.forEach(callback(currentvalue [, index [, array]])  [, thisArg])
배열.forEach(콜백함수(배열요소, 배열 인덱스, 배열){} ,this인자)

매개변수 Parameters

콜백함수 callback : 각 배열 요소에 실행시킬 함수로 다음 3가지 인수를 갖는다.

• currentValue :처리할 현재 요소
• index (옵션) : 처리할 현재 요소의 인덱스
• array (옵션) : forEach()를 호출한 배열

thisArg (옵션) : callback을 실행할 때 this로 사용할 값.

반환 값 Return value
undefined

 

-----
폴리필 Polyfill

MDN 사이트에서 폴리필 을 제공하지만 IE9 부터 사용 할 수 있으므로 필요가 없을 듯 하다.

폴리필 경로:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#polyfill

 

-----
example code 예제

• 기본 예제

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element)); // 화살표 함수

a // 콘솔 결과
b // 콘솔 결과
c // 콘솔 결과

콜백함수로 화살표 함수를 사용하였다. currentValue로 element라는 단어를 사용 했지만 어떤 단어든 상관 없다.

 

• for 반복문을  forEach()로 바꾸기 
  

변경전 : for 반복문 

const uiAccordionTitle = document.querySelectorAll('.accordion .title');

for(let i = 0; i < uiAccordionTitle.length; i++ ){ // for문
	uiAccordionTitle[i].addEventListener('click', function(){
		this.classList.toggle('active');
		const uiAccordionContent = this.nextElementSibling;

		if(uiAccordionContent.style.display === 'block'){
			uiAccordionContent.style.display = 'none';
		}else{
			uiAccordionContent.style.display = 'block';
		}
	});
}	

변경후 : forEach() 사용 

See the Pen accordion_default_foreach by how2frontend (@how2frontend) on CodePen.

 

 

uiAccordiontitle 은 유사 배열이지만 노드이므로, NodeList 프로토타입의 forEach() 메소드를 사용 한다 : NodeList.prototype.forEach()

소스 보기 : codepen.io/how2frontend/pen/OJbBMoj

accordion_default_foreach

 

• thisArg 사용

function Counter() {
  this.sum = 0
  this.count = 0
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) { 
    this.sum += entry
    ++this.count
  }, this) // obj 전달
}

const obj = new Counter()
obj.add([2, 5, 9])
obj.count

결정적일 때 유용하게 잘 쓰이는 것 같다.

 

-----
브라우저 호환성 Cross Browsing

IE9 이상

 

-----
명세

https://tc39.es/ecma262/#sec-array.prototype.foreach

ECMAScript® 2021 Language Specification

-----
참고 사이트 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN