Array 객체 매소드 정리 (ES5)

ES5 버전부터는 아래의 매소드들이 추가로 제공된다.

 

Array 객체 prototype 정리 

 

indexOf()	지정한 값에 일치하는 요소의 인덱스 반환
lastindexOf()	지정한 값에 일치하는 요소의 마지막 인덱스 반환
forEach()	배열의 요소를 콜백함수의 파라미터로 넘기며 배열 순회 continue, break 와 같이 배열을 순회 중에 멈출 수 없다
every()	반환 값이 false일 때 까지 콜백함수 실행
some()	반환 값이 true일 때 까지 콜백함수 실행
filter()	콜백 함수에서 true를 반환한 요소를 반환 한다.
map()	콜백 함수에서 true를 반환한 값을 새로운 배열 형태로 반환 한다.
reduce()	콜백 함수의 반환 값을 파라미터 값으로 사용한다.
reduceRight()	콜백 함수의 반환 값을 파라미터 값으로 사용한다. (끝에서 앞으로 진행)

 

1. forEach()

해당 매소드는 콜백 함수를 파라미터로 받으며, 받은 파라미터 (콜백 함수)의 파라미터 값 (콜백 함수의 파라미터)으로 매소드를 Call 한 Array의 요소, 요소 인덱스, 해당 배열과 같은 3가지 값을 넘겨주게 된다. 

• el : 요소 (10,20,30,40) 순회
• indext : 요소의 인덱스 번호 (0,1,2,3) 순회
• list : forEach 매소드의 Caller (nList) 배열 

+ 추가로 forEach 매소드는 콜백 함수 말고 객체를 파라미터로 넘겨줄 수 있으며, 이는 보통 콜백 함수에서 데이터를 처리할 때 콜백 함수가 참조해야 할 값이 있을 때 사용하게 된다.

즉 forEach 매소드의 파라미터로 넘겨주는 객체는 첫 번째 파라미터로 넘겨준 콜백 함수에서 this 키워드를 사용하여 참조할 수 있다. 

 

2. some(), every()

해당 매소드는 형태와 파라미터 모두 forEach 매소드와 같으며 다른 점은 콜백 함수가 반환하는 값이 true or false 일 때 해당 매소드를 중단한다는 것이다. 즉 매소드가 호출되면 무조건 배열의 끝까지 순회하는 forEach 매소드와는 달리 특정 조건일 경우 바로 순회를 중단한 다는 것이다.

위의 자료는 some 매소드의 파라미터로 넘겨 준 콜백 함수의 반환 값이 참이 될 때 some 매소드가 순회를 멈추는 것을 보여준다. 조건식에 따라 현재 순회하는 요소의 값이 20보다 크면 참을 반환 하여 반복을 멈추는 동작이 수행된다.

위와 동일하게 every 매소드 역시 콜백 함수의 반환 값이 거짓일 때 every 매소드가 중지된다.

 

3. filter(), map()

filter()

해당 매소드는 forEach와 형태, 파라미터가 같다. forEach()는 반환 값이 없지만 해당 매소드는 배열을 반환하며, 반환된 배열의 값은 CallBack 함수에서 받은 파라미터 (요소, 인덱스, 배열)를 특정 조건, 특정 처리를 수행한 값이 된다.

fliter 매소드는 이름에서 알 수 있듯 특정 조건에 부합하는 요소를 찾아서 배열로 반환해주는 매소드이다. 따라서 콜백 함수에서 참을 반환시 현재 반복 중인 요소를 반환하여 배열에 추가한다. 이와 같은 동작을 반복하여 filter 매소드의 Caller에 해당하는 배열에서 원하는 값이 있는 배열을 반환한다.

위의 자료는 현재 반복하는 요소의 값이 20보다 클 경우 참을 반환하는 콜백함수를 파라미터로 넘겨주었을 경우이다. 결과로 nList의 요소중 20보다 큰 값인 30, 40 이 filter 매소드의 반환 값으로 반환되는 것을 볼 수 있다.  

 

map()

해당 매소드는 filter() 매소드와 동일하게 배열을 반환한다. but 배열에 반환 되는 요소의 값은 Callback 함수가 반환 하는 값들이 요소로 들어가게 된다는 차이점이 있다.

위의 자료는 map 매소드의 콜백 함수가 (현재 반복하는 요소 + 객체 매개변수의 참조 값) 을 반환 하여 반환 된 값이 최종적으로 map 매소드의 반환값으로 반환된 모습을 나타낸다.

dic 객체의 nData 프로퍼티를 참조하여 100이라는 값에 nList의 각 요소 (10,20,30,40)를 더하여 반환한 값 (110,120,130,140) 이 map 매소드의 반환값으로 반환되는 것을 볼 수 있다.