배열 요소 반복

배열 요소 반복

배열은 인덱스가 0부터 순차적으로 증가하면서 값을 저장하는 자료구조이기 때문에 반복문을 자주 활용하게 됩니다.
기본적으로 다음과 같이 반복문을 사용합니다.

var arr1 = ['apple', 'banana', 'cherry'];
 
for (var i = 0; i < arr1.length; i++) {
    document.write(arr1[i] + "<br>");
}

forEach()

forEach() 함수를 사용하여 배열 요소를 반복할 수도 있습니다.

이 함수를 사용하면 배열의 요소를 차례대로 접근합니다.
접근하려는 요소가 삭제되었거나 초기화되지 않은 요소는 실행하지 않습니다.
forEach() 함수는 다음과 같이 사용합니다.

1	`배열이름.forEach(콜백함수[, thisArg]);`

콜백함수는 세가지 인자를 받을 수 있습니다.
- 반복하면서 처리할 현재 요소
- 처리할 현재 요소의 인덱스(선택사항)
- forEach()를 호출한 배열(선택사항)
thisArg는 콜백함수를 실행할 때 this로 사용할 매개변수입니다.(선택사항)

var arr1 = ['apple', 'banana', 'cherry'];
 
arr1.forEach(function(fruit) {
    document.write(fruit + "<br>");
});

var arr1 = ['apple', 'banana', 'cherry'];
 
function func1(element, index, array) {
    document.write('배열 arr1 = ' + array + "<br>");
    document.write('arr1[' + index + '] = ' + element + "<br><br><hr>");
}
 
arr1.forEach(func1);

forEach() 함수를 사용할 때, thisArg 매개변수로 this를 사용하는 예제입니다.
thisArg 매개변수를 콜백함수로 넘기면 콜백함수는 this의 값을 사용할 수 있습니다.

var obj1 = new Object();
obj1.sum = 0;
 
Object.prototype.func1 = function (array) {
    array.forEach(function (element) {
        this.sum += element;
    }, this);
}
 
var arr1 = [102, 189, 8];
obj1.func1(arr1);
 
document.write(obj1.sum);

화살표 함수

forEach() 함수 안에서 사용하는 콜백함수는 위와 같이 사용할 수 있지만, 간단한 작업일 경우 화살표 함수를 사용하여 표현할 수도 있습니다.

화살표 함수는 다양한 사용법이 있지만, 기본 사용법은 다음과 같습니다.
왼쪽 괄호에 사용할 매개변수를, 오른쪽 괄호에는 실행 문장을 넣습니다.

1	`() => ()`

var arr1 = ['apple', 'banana', 'cherry'];
 
arr1.forEach((fruit) => (document.write(fruit + "<br>")));

현재 버전	2019-08-01 09:14:54
선택 버전

배열 요소 반복

댓글