자바스크립트 Array 객체 메서드

Array.forEach

배열 전체를 돌며 해당 배열의 요소에 직접 어떤 작업을 수행하고 싶을 때 적합

배열 전체를 돌때 요소마다 콜백 함수를 실행하며 

이 콜백함수의 인자는 다른 모든 메서드와 동일한 순서의 인자를 갖는다.

첫번째 인자는 현재 배열 요소의 값이고,

두번째 인자는 현재 배열 요소의 위치 (index),

세번째 인자는 현재 돌고 있는 배열 자체를 가리킨다.

메서드 수행 후 undefined를 리턴한다.

// 원본 배열

var testArray = ["a", "b", "c", "d"];

// 배열의 모든 요소에 "메롱"이라는 문자열 더하기 

testArray.forEach(function(item,index,array){

array[index] = item + "메롱";

});

// 메서드 수행 후 원본 배열 (메서드 수행 후 리턴값은 undefined)

console.log(testArray);

["a메롱", "b메롱", "c메롱", "d메롱"]

Array.map

배열 전체를 돌며 배열값을 사용해서 또 다른 배열을 만들고 싶을 때 적합.

원본 배열은 건들지 않고 그 값들만을 사용해서 (혹은 약간 변형해서) 

새로운 배열을 만들어야할 필요가 있을 때 유용.

배열 전체를 돌때 요소마다 콜백 함수를 실행하며 

이 콜백함수의 인자는 다른 모든 메서드와 동일한 순서의 인자를 갖는다.

첫번째 인자는 현재 배열 요소의 값,

두번째 인자는 현재 배열의 위치 (index),

세번째 인자는 배열 자체

메서드 수행 후 새로운 배열을 리턴한다.

// 원본 배열

var testArray = ["a", "b", "c", "d"];

// 배열의 모든 요소에 "바보"라는 문자열 더하기

var newArray = testArray.map(function(item,index,array){

// 메서드 수행 후 리턴값은 새로운 배열

return item + "바보";

});

// 메서드 수행 후 원본 배열

console.log(testArray);

["a", "b", "c", "d"]

// 메서드 수행 후 생성된 배열

console.log(newArray);

["a바보", "b바보", "c바보", "d바보"]

Array.some

배열 요소 중에서 하나라도 특정 조건을 만족하는지 알고 싶을 때 적합.

배열 전체를 돌때 요소마다 콜백 함수를 실행하며

이 콜백함수의 인자는 다른 모든 메서드와 동일한 순서의 인자를 갖는다.

첫번째 인자는 현재 배열 요소의 값,

두번째 인자는 현재 배열 요소의 위치(index),

세번째 인자는 현재 돌고 있는 배열 자체.

메서드 수행 중 콜백에서 한번이라도 true값을 리턴하면 바로 메서드 수행을 중단하고 true를 리턴

전체 요소를 다 돌 때까지 콜백에서 true를 리턴하지 않으면 false를 리턴한다.

// 원본 배열

var testArray = ["a", "b", "c", "d"];

// 배열 중에서 "b"가 있으면 true를 리턴

testArray.some(function(item,index,array){

conlose.log(index + "번째 요소 : " + item);

return item.search("b");

});

// 로그에 찍히는 내용. 

0번째 요소 : a

1번째 요소 : b

// true를 리턴하는 콜백이 있었으므로 리턴값은 true

Array.every

배열 요소가 특정 조건을 만족하는지 알고 싶을 때 적합.

배열 전체를 돌때 요소마다 콜백 함수를 실행하며

이 콜백함수의 인자는 다른 모든 메서드와 동일한 순서의 인자를 갖는다.

첫번째 인자는 현재 배열 요소의 값,

두번째 인자는 현재 배열 요소의 위치(index),

세번째 인자는 현재 돌고 있는 배열 자체.

메서드 수행 중 콜백에서 한번이라도 false 값을 리턴하면 바로 메서드 수행을 중단하고 false를 리턴

전체 요소를 다 돌 때까지 콜백에서 false를 리턴하지 않으면 true를 리턴한다.

some메서드와 유사하지만 반대의 기능을 한다.

// 원본 배열

var testArray = ["a", "b", "c", "d"];

// 배열 중에서 "a"가 포함되어 있는지를 체크. 두번째 요소가 b이므로 그 시점에서 false를 리턴

testArray.every(function(item,index,array){

conlose.log(index + "번째 요소 : " + item);

return item.search("a");

});

// 로그에 찍히는 내용. 

0번째 요소 : a

1번째 요소 : b

// false를 리턴하는 콜백이 있었으므로 리턴값은 false

Array.filter

배열 요소가 특정 조건을 만족하는지 알고 싶을 때 적합.

배열 전체를 돌때 요소마다 콜백 함수를 실행하며

이 콜백함수의 인자는 다른 모든 메서드와 동일한 순서의 인자를 갖는다.

첫번째 인자는 현재 배열 요소의 값,

두번째 인자는 현재 배열 요소의 위치(index),

세번째 인자는 현재 돌고 있는 배열 자체.

메서드 수행 중 콜백에서 true 값을 리턴하는 경우 해당 배열 요소를 추출해서

새로운 배열에 추가하고, 메서드가 종료될 때 이렇게 추출된 배열 요소만으로 이루어진 새로운 배열을 리턴한다.

// 원본 배열

var testArray = ["a", "b", "c", "d"];

// 배열의 요소가 a 또는 b로 이루어져 있으면 추출

// 메서드가 종료되면 추출된 요소로만 이루어진 새로운 배열을 리턴

var newArray = testArray.filter(function(item,index,array){

return item.search(/[ab]+/);

});

// 메서드 수행 후 원본 배열

console.log(textArray);

["a", "b", "c", "d"]

// 메서드 수행 후 생성된 배열

console.log(newArray);

["a", "b"]

Array.reduce

배열 요소들을 하나씩 돌며,

이전 콜백의 리턴값을 previous item으로 넘겨받아

어떤 작업을 수행하고 싶을 때 적합.

다른 메서드와 약간 다른 형태를 띄고 있지만 

promise를 활용한 비동기 작업의 순차적 실행 등에 이용할 수 있는 등 유용하다.

배열 전체를 돌때 요소마다 콜백 함수를 실행하며 다른 메서드와 조금 다른 인자를 갖는다.

첫번째 인자는 이전 콜백 함수에서 리턴한 값,

두번째 인자는 현재 배열 요소의 값,

세번째 인자는 현재 배열 요소의 위치 (index),

네번째 인자는 현재 돌고 있는 배열 자체.

콜백 함수 뒤에 인자를 하나 더 줄 수 있는데, 이 인자는 첫 콜백함수에 previous item으로 주입 될 값이다.

// 원본 배열

var testArray = ["a", "b", "c", "d"];

//각 콜백마다의 리턴값을 previousItem으로 넘겨받아 어떤 작업을 수행

var result = testArray.reduce(function(previousItem, currentItem, index, array){

// 반환된 결과는 다음번 콜백의 첫번째 파라메터로 다시 전달된다.

return previousItem + currentItem;

}, 0);

// 메서드 수행 후 원본 배열

console.log(textArray);

["a", "b", "c", "d"]

// 메서드가 종료되면 마지막 콜백의 리턴값을 리턴 (리턴값은 0부터 10까지의 합)

console.log(result);

55