[JS] 자바스크립트 배열 메서드

 

 

 

 

 

1. forEach

forEach 메서드를 사용하면 기존에 정의된 배열을 다시 정의할 수 있다.

var arr = [1, 2, 3, 4];

// 함수 인자는 3개이다 (요소, 인덱스, 원본배열)
arr.forEach(function(element, index, array) {
   array[index] = element * 100;
});

console.log(arr); // [100, 200, 300, 400]

 

 

 

 

2. map

map 메서드는 기존 배열은 유지한 채, 기존 배열을 재정의하여 새로운 배열을 만든다.

var arr = [1, 2, 3, 4]

// forEach와 같이 3개의 인자를 받으며 return이 있어야함
var newArr = arr.map(function(element) {
   return element * 100;
}

console.log(arr); // [1, 2, 3, 4]
console.log(newArr); // [100, 200, 300, 400]

 

 

 

 

3. some

some 메서드는 배열 내 원하는 값을 찾을 때 사용한다.

배열에 찾는 값이 있으면 true를 리턴하며 true가 리턴되면 메서드를 중단하고 true를 리턴한다.

var arr = ['A', 'B', 'C', 'D'];     

arr.some(function (element, index, array) {     
   console.log(index + '번째 요소 : ' + element);     
   return !!~element.search('C'); // 2번째 요소 : C
})

//'C'찾으면 그 시점에서 메서드를 종료하고 true를 리턴한다.

 

 

 

 

 

4. every

every 메서드는 순차적으로 인덱스에 찾는 값이 있는지 검사하며 찾는값이 없을때 해당 인덱스에서 리턴한다.

1) 찾는 값이 모든 인덱스에 존재하면 true를 리턴한다.

2) 찾는 값이 어떤 인덱스에 없을때 그 인덱스에서 메서드를 중단하고 false를 리턴한다.

var arr = ['A', 'B', 'C', 'D'];     

arr.every(function (element, index, array) { 
   console.log(index + '번째 요소 : ' + element); 
   return !!~element.search('A'); // 1번째 요소 : B
})

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

 

 

 

 

5. filter

filter 메서드는 배열에서 특정 케이스만 필터링을 해서 새로운 배열을 만들고 싶을 때 사용한다.

var arr = ['AAA', 'BBB', 'CCC', 'DDD']; 

var newArray = arr.filter(function(element, index, array) { 
   return !!~element.search(/[AB]+/); // 요소가 A또는 B인 것을 추출해 새로운 배열만듦 
}) 

console.log(arr); // ['AAA', 'BBB', 'CCC', 'DDD'] 
console.log(newArray); // ['AAA', 'BBB']

 

 

 

 

6. reduce

// 사용방법
원본배열.reduce(function (누적값, 현재값, index, array) {
   return 결과
}, 초기값);


// 초기값을 넣지 않으면 초기값은 0번째 인덱스로 지정됨
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
var result = arr.reduce(function (previousElement, currentElement, index, array) { 
// 반환된 결과는 다음번 콜백의 첫 번째 파라메터로 다시 전달된다. 
   return previousElement + currentElement; 
}); 

console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
console.log(result); // 55



// 초기값을 10으로 넣을경우
function computeProductOfAllElements(arr) {    
var output = arr.reduce(function(pre, current, index, array) { 
return pre * current; 
}, 10); 

console.log(output); console.log(arr); };
computeProductOfAllElements([1, 2, 3, 4, 5]); // 1200 (10 * 1 * 2 * 3 * 4 * 5)