javascript array 주요 메서드 정리 (ES5 주의)

아래의 Array 메서드들이 ES6에서부터 사용가능한 메서드들인 줄 알았으나, 아니다. 모두 ES5에서 사용 가능한 메서드이다. 하나씩 예제코드와 함께 정리해보겠다.

 

목차

1. forEach

2. mp

3. some

4. every

5. filter

6. reduce

7. find

 

내용

 

다음 배열을 공통적으로 사용한다는 전제하에 예제 코드를 설명하겠다.

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

 

1. Array.forEach

- 배열 전체를 돌며 해당 배열의 요소에 직접 어떤 작업 수행하고 싶을 때 "배열자체를 변경"

- callback parameter :  item, index, array

testArray.forEach( function (item, index, array){
	
	array[index] = item+"_test";
});

//testArray 출력시 : ["a_test", "b_test", "c_test", "d_test"]

 

2. Array.map

- 배열 전체를 돌며 해당 배열 요소를 사용하여 "다른 새로운 배열"을 만들고 싶을 때

- callback parameter :  item, index, array

//배열의 모든 요소에 "_new"를 덧붙인 새로운 배열 생성
var newArray = testArray.map(function (item, index, array) {

	return item + "_new";
});

//newArray 출력시 : ["a_new", "b_new", "c_new", "d_new"]
//testArray는 변하지 않는다.

 

3. Array.some

- 배열 요소 중 하나라도 특정 조건을 만족하는지 알고 싶을 때

- 콜백 수행 중 true값을 return하면 바로 중단되며 true를 return한다.

- true가 한번도 return 되지 않은채 끝나면 최종적으로 false를 return 한다.

- callback parameter :  item, index, array

var isTrue = testArray.some(function (item, index, array) {

	console.log(index + "번째 요소 : " + item);
	return item.search("b")>-1;
});

//출력
//0번째 요소 a
//1번째 요소 b

//isTrue = true

 

4. Array.every (some과 반대)

- 배열의 모든 요소가 특정 조건을 만족하는지 알고 싶을 때

- 콜백 수행 중 한번이라도 false 값을 return 하면 중단되고 최종적으로 false를 return 한다.

- false를 한번도 return하지 않으면 최종적으로 true를 return 한다.

- callback parameter :  item, index, array

let isTrue = testArray.every(function (item, index, array) {

	console.log(index + "번째 요소 : " + item);
	return item.search("a")>-1;
});

//출력
//0번째 요소 : a
//1번째 요소 : b

//isTrue = false

 

5. Array.filter

- 배열에서 특정 케이스만 필터링해서 새로운 배열을 만들고 싶을 때

- 콜백에서 return 된 요소로 새로운 배열을 return 한다.

- callback parameter : item, index, array

//배열의 요소가 "a" 또는 "b"로 이루어져 있으면 추출
var newArray = testArray.filter(function (item, index, array) {

	return item.search(/[ab]+/)>-1;
});

//newArray 출력 : ["a", "b"]
//testArray는 변하지 않음

 

6. Array.find

- filter와 비슷하지만 단 하나의 요소만 리턴

- 콜백의 return이 true인 요소 찾을 때까지 순회

- true가 return되면 종료, 모두 false인 경우 최종적으로 undefined를 return

// 정수 배열에서 5의 배수인 정수만 모으기
var arr = [4, 15, 377, 395, 400, 1024, 3000];
var count = 0;

var found = arr.find(function (n) {
    count++;
    return n % 5 == 0;
});

console.log(count);	//출력 2
console.log(found);	//출력 15

 

7. Array.reduce(callback [, initialValue]) *좀 어려운데 중요함 주의*

- 배열의 요소들을 하나씩 돌며, 이전 콜백의 return 값(previousValue)을 넘겨받아 작업을 수행하고 싶을 때

- Promise를 이용해 비동기 작업 순차 실행에 유용

- callback parameter : previousValue, currentItem, index, array

//1.베이직 예제 - initialValue 생략한 경우

var arr = [9, 2, 8, 5, 7];
var count = 0;

var sum = arr.reduce(function (pre, value) {
    
    count++;
    return pre + value;
});

console.log(sum);	//출력 결과 : 31
console.log(count);	//출력 결과 : 4

총 4번 실행 (9+2), (11+8), (19+5), (24+7)
initialValue를 생략한 경우 첫번째 콜백에서 pre는 첫번째요소인 9가 전달됨

//2. 베이직 예제 - initialValue있는 경우

var count = 0;
var sum = arr.reduce(function (pre, value) {

    count++;
    return pre + value;
}, 0);

console.log(sum); 	// 출력 : 31
console.log(count);	// 출력 : 5

위와 같은 결과지만, 콜백 함수의 호출 회수는 5회

 

 

 

참고 : https://programmingsummaries.tistory.com/357

참고 : https://bblog.tistory.com/300