JavaScript Array forEach문

배열에서 forEach 메소드를 알아보겠습니다.

array.forEach(콜백함수); 의 형식으로 실행됩니다.

좀 더 자세히 보자면, array.forEach(function(value, index, arr){ });입니다.

여기서 콜백함수란, 함수 안에서 특정 시점에 호출되는 함수를 뜻합니다.

보통 콜백함수는 함수의 매개변수의 역할을 합니다.

 

1. 배열값을 사용하여 forEach문에 대해 알아보겠습니다.

var arr = ["김밥", "떡볶이", "순대", "튀김"];
arr.forEach(function(value){
	document.write(value, "<br>");
});

출력결과입니다.↓

김밥
떡볶이
순대
튀김

끝에 break문이 있어 각 인덱스마다 줄넘김이 된 모습을 확인할 수 있습니다.

 

2. 이번에는 배열데이터에서 인덱스를 활용해보겠습니다.

arr.forEach(function(value, idx) {
	arr[idx] = value + " 냠냠쩝쩝";
});
document.write(">> arr : " + arr, "<br>");

출력결과입니다.↓

>> arr : 김밥 냠냠쩝쩝,떡볶이 냠냠쩝쩝,순대 냠냠쩝쩝,튀김 냠냠쩝쩝

각 배열의 데이터마다 문자열이 들어간것을 확인할 수 있습니다.

 

3. 이번에는 배열데이터, 인덱스, 객체를 전달받아 사용해보겠습니다.

arr.forEach(function(value, idx, arrObj) {
	arrObj[idx] = value + idx;
});
document.write(">> arr : " + arr, "<br>");

출력결과입니다.↓

>> arr : 김밥 냠냠쩝쩝0,떡볶이 냠냠쩝쩝1,순대 냠냠쩝쩝2,튀김 냠냠쩝쩝3

arrObj라는 객체를 사용해서 arr배열에 데이터를 삽입하고있습니다.

아까 덧붙였던 문자열에 idx라는 인덱스(변수)를 더한 결과입니다.