본문 바로가기

programming/javascript

[JS] forEach, map, filter

forEach

const arr = [1,2,3,4];
    
const newArr = arr.forEach((e)=>{
  return e;
});
    
console.log(newArr); // undefined

 

forEach 를 출력해보면 undefined 가 나온다. return 값이 별도로 존재하지 않는다.

 

 

map

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

const newArr = arr.map((e)=>{
  return e * 2;
});

console.log(newArr); // [ 2, 4, 6, 8 ] 
const emails = [
  'sherlock@gmail.com',
  'mina@namver.com',
  'lily@daum.net',
  'ivy@nate.com',
  'jay@gmail.com'
];

const idArr = emails.map((mail, idx) => ({
  num: idx+1,
  name: mail.split('@')[0]
}));

console.log(idArr);

/*output
[ { num: 1, name: 'sherlock' },
  { num: 2, name: 'mina' },
  { num: 3, name: 'lily' },
  { num: 4, name: 'ivy' },
  { num: 5, name: 'jay' } ]
*/

 

 

filter

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

const newArr = arr.filter((e)=>{
  return e > 2;
});

console.log(newArr); // [ 3, 4 ]

 

filter, map 응용

const students = [
  {
    name: 'lily',
    score: 80,
  },
  {
    name: 'mina',
    score: 90
  },
  {
    name: 'sherlock',
    score: 60
  }
];

const pass = students.filter((e)=>{
  return e.score >= 70;
}).map((e)=>{
  return e.name;
});

console.log(pass); // [ 'lily', 'mina' ]

 

좀 더 편하게 함수로 선언 후 사용할 수 있다

const students = [
  {
    name: 'lily',
    score: 80,
  },
  {
    name: 'mina',
    score: 90
  },
  {
    name: 'sherlock',
    score: 60
  }
];


function checkScore(obj) {
  return obj.score >= 70;
}

function checkName(obj) {
  return obj.name;
}

const pass = students.filter(checkScore).map(checkName);
console.log(pass); // [ 'lily', 'mina' ]