자바스크립트 배열 내장 함수(1)

1) forEach

: 배열의 요소를 각각 가져오거나 실행하기 위해 사용하는 함수

구문
arr.forEach(callback(요소[, 인덱스. [, 배열]])[, callback을 실행할 때 this로 사용할 값])

예1)
const array = ['a', 'b', 'c'];

array.forEach(e => console.log(e));

결과 :
"a"
"b"
"c"

예2)
/* for 반복문을 foreach로 변환 */
const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// 이후
items.forEach(function(item){
  copy.push(item);
});

console.log(item);
결과 :
0: "item1"
1: "item2"
2: "item3"

 

2) map

: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

즉, 원시 배열을 가공해서 사용하기 위한 함수 (원시 배열의 값이 바뀌지 않음)

* 반복문을 돌면서 배열 내 요소들을 짝 지어주는 역할을 함

구문
arr.map(callback(요소[, 인덱스[, 배열]])[, callback을 실행할 때 this로 사용되는 값.])

예1)
const array = [1, 4, 9, 16];

const map = array.map(x => x * 2);

console.log(map);

결과 [2, 8, 18, 32]

예2)
var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

결과 : doubles [2, 8, 18], numbers는 그대로 [1, 4, 9]

 

3) filter

: 배열 내의 모든 요소 각각에 대하여 주어진 함수의 테스트 혹은 검색 기준을 통과하는 배열을 모아 새로운 배열로 반환

(map과 동일하게 원시 배열의 값은 바뀌지 않음)

구문

arr.filter(callback(요소[, 인덱스[, 배열]])[, callback을 실행할 때 this로 사용하는 값])

예1) 
10 이상의 숫자만 걸러내기

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
결과 : 12,130,44

예2)
검색 조건에 따른 배열 내용 검색

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); //ap가 포함된 문자열이 있는 배열 가져오기
결과 : ['apple', 'grapes'] 

console.log(filterItems('an')); //an이 포함된 문자열이 있는 배열 가져오기
결과 : ['banana', 'mango', 'orange']