배열 요소 반복

---

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

 

var arr1 = ['apple', 'banana', 'cherry'];

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

 

 

---

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

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

배열이름.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() 함수 안에서 사용하는 콜백함수는 위와 같이 사용할 수 있지만, 간단한 작업일 경우 화살표 함수를 사용하여 표현할 수도 있습니다.

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

() => ()

 

var arr1 = ['apple', 'banana', 'cherry'];

arr1.forEach((fruit) => (document.write(fruit + "<br>")));