for()과 forEach()

MDN_Array.prototype.forEach() >

 

forEach()

• 배열에 있는 각 요소에 대해 하나씩 읽어 가면서 콜백 함수를 호출한다.
• 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다.
• 콜백 함수 파라미터 : 엘리먼트 값, 인덱스, 배열 전체

let list = ["A", "B", "C"];
list.forEach(function(el, index, all){
    log(el + ":" + index + ":" + all);
});
//A:0:A,B,C
//B:0:A,B,C
//C:0:A,B,C

• 콜백 함수를 분리할 수 있어 독립성이 좋아진다.

var list = ["A", "B", "C"];
var list2 = ["D", "F", "G"];

var fn = function(el, index, all){
    log(el + ":" + index + ":" + all);
};

list.forEach(fn)
//A:0:A,B,C
//B:0:A,B,C
//C:0:A,B,C

list2.forEach(fn)
//D:0:D,F,G
//F:0:D,F,G
//G:0:D,F,G

• this로 오브젝트를 참조할 수 있다.

var list = ["1", "2"];
var fn = function(el, index, all){
    log(el + this.ten);
};
list.forEach(fn, {tne : 10});

 

forEach()의 반복 범위

• forEach()를 시작할 때 반복 범위가 결정되어, 나중에 엘리먼트를 추가하더라도 처리하지 않는다.

var list = [1, 2, 3];
var fn = function(el, index, all){
    if(index === 0){
        list.push("AB");
    };
    log(el)
};
list.forEach(fn);
//1
//2
//3

• 현재 인덱스보다 큰 인덱스의 값을 변경하면 변경된 값을 사용한다.

var list = [1, 2, 3];
var fn = function(el, index, all){
    if(index === 0){
        list[2] = 345;
    };
    log(el)
};
list.forEach(fn);
//1
//2
//345

• 현재 인덱스보다 큰 인덱스의 엘리먼트를 삭제하면 배열에서 삭제되므로 반복에서 제외된다.

var list = [1, 2, 3];
var fn = function(el, index, all){
    if(index === 0){
        delete list[2];
    };
    log(el)
};
list.forEach(fn);
//1
//2

 

for() vs forEach()

for()	forEach()
함수 코드를 읽어야 알 어떤 반복을 할 지 알 수 있다. 인덱스 증가 값을 조정할 수 있다. break, continue가 가능하다.	처음부터 끝까지 반복한다는 시맨틱, 반복 중간에 끝나지 않는다는 시맨틱 시맨틱으로 소스 코드의 가독성 향상 인덱스 증가 값을 조정할 수 없다. break, continue의 사용이 불가하지만, throw는 사용 가능하다.