[ES6] map과 filter 올바르게 사용하기

Map

map은 해당 Array의 데이터를 변환하는데 사용된다.

/**
단순 배열일때 값변환
*/
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

결과화면

> Array [2, 8, 18, 32]

 

/**
JSON Array 일때 특정 value변환
*/
const array1 = [
  {
    name: 'aaa',
    age: 11
  },
  {
    name: 'bbb',
    age: 22
  },
  {
    name: 'ccc',
    age: 33
  },
  {
    name: 'ddd',
    age: 44
  }
];

// pass a function to map
const map1 = array1.map(x =>{
  return x.name = x.name + '1'  
});

console.log(map1);
// expected output: Array [2, 8, 18, 32]

결과화면

["aaa1", "bbb1", "ccc1", "ddd1"]

 

위와같이 map은 Array의 특정값을 바꿀때 사용이 용이하다.

 

---

Filter

Filter는 해당 Array중 특정 데이터를 추출하는데 사용된다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

결과화면

> Array ["exuberant", "destruction", "present"]

 

const array1 = [
  {
    name: 'aaa',
    age: 11
  },
  {
    name: 'bbb',
    age: 22
  },
  {
    name: 'ccc',
    age: 33
  },
  {
    name: 'ddd',
    age: 44
  }
];

// pass a function to map
const map1 = array1.filter(x =>{
  return x.name == 'bbb'
});

console.log(map1);
// expected output: Array [2, 8, 18, 32]

결과화면

[{
  age: 22,
  name: "bbb"
}]

---

결론

map 은 Array Data의 치환
filter 는 Array Data의 추출