자바스크립트 학습 25일차

# 자바스크립트 학습

# 콜백 함수를 가진 Array 메소드

## forEach()

구분	데이터(값)
data	반복 대상
파라미터	콜백함수
	this로 참조할 오브젝트opt
반환	undefined

• 배열의 엘리먼트를 하나식 읽어 가면서 콜백 함수를 호출한다.
• 호출 할때 마다 콜백함수의 파라미터로 엘리먼트 값, 인덱스, 배열 전체 값을 넘겨준다.

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

=>
A:0:A, B, C
B:1:A, B, C
C:2:A, B, C

엘리먼트 수 만큼 콜백 함수 호출,
호출 할때 마다 엘리먼트 값, 인덱스, 배열 전체 값을 콜백 함수의 파라미터로 넘겨준다.

• break, continue 사용 불가능 / throw는 사용 가능
• 콜백 함수 분리(독립성)

var list = ["A", "B", "C"];
var fn = function (el, index, all) {
	log(el + ":" + index + ":" + all);
};

list.forEach(fn);

=>
A:0:A, B, C
B:1:A, B, C
C:2:A, B, C

콜백 함수가 독립적으로 움직임
중복 최소화

• this로 오브젝트 참조

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

list.forEach(fn, {ten: 10});

=>
11
12

this로 오브젝트 참조
this.ten의 값은 10
함수 안에서 값(데이터)를 사용하는 방법
	- 파라미터, 변수, this로 참조, 함수 호출(반환값)
콜백 함수의 완전한 독립성을 보장!!

 

# for()와 forEach()의 차이

## 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

배열을 처음 읽었을 때 즉, index가 0 일때 배열 끝에 "AB"를 첨부
이렇게 반복하는 도중 배열에 엘리먼트를 추가하면 처리하지 않는다.

• 현재 인덱스보다 큰 인덱스의 값을 변경하면 변경된 값을 사용한다. (현재 인덱스보다 작은 인덱스의 값을 변경하면 처리하지 않는다.)

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

index가 0 일때 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() 와 forEach()의 차이

• forEach()는 시맨틱 접근으로 처음부터 끝까지 반복한다는 시맨틱, 반복 중간에 끝나지 않는다는 시맨틱. 시맨틱을 갖고 있으므로 소스 코드의 가독성이 향상된다.
• for()는 함수 코드를 읽어야 알 수 있다. (break, continue로 다른 처리 할 수 있으므로)
• forEach()는 반복만 하며 콜백 함수에서 기능처리, 콜백 함수에서 this 사용이 가능하다.
• forEach()는 인덱스가 0부터 시작한다. for()와 같이 인덱스 증가 값을 조정할 수 없다. 뒤에서 앞으로 읽을 수도 없음, 이것도 시맨틱 접근