[자바스크립트 js] 배열 메소드 / filter / find

  filter 메소드와 find 메소드

• forEach와 map처럼 배열의 요소들을 하나씩 살펴보면서 반복적인 동작을 하는 메소드.
• 조건에 맞는 요소들만 추려내서 새로운 배열을 만들 수 있다.
• map메소드와 모습이 비슷하지만,
  리턴문으로 어떠한 값을 전달하지 않고 true혹은 false로 평가되는 조건식을 리턴한다.
• filter와 find 메소드는 같은 배열에서 메소드를 호출하더라도 반복하는 횟수에 차이가 있다.

 

 

 

  filter 메소드

• 항상 리턴값이 배열이다.
• filter는 LG처럼 하나만 있는 요소를 필터링 해도 배열로 리턴한다.
  => ... 스프레드 구문을 활용해서 배열을 벗겨내야 한다. 

 

 

  find 메소드

• find 메소드는 리턴하는 내용이 '값'이다. => 하나만 있는 요소를 구할 때 filter 대신 사용하자.
• 조건에 맞는 첫번째 값을 찾는 순간 반복이 종료된다.
• 없는 내용을 찾는다거나, 마지막 요소를 찾을 때는 filter와 같이 반복되는 횟수가 동일하다.
• 단, 없는 내용을 찾을 땐 마지막에 undefined도 출력된다.

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const myLaptop = devices.find((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2까지만 출력됨.
  return element.name === 'Gram';
});

console.log(myLaptop); // {name: "Gram", brand: "LG"}

const devices = [
	{name: 'GalaxyNote', brand: 'Samsung'},
    {name: 'MackbookPro', brand: 'Apple'},
    {name: 'iPad', brand: 'Apple'},
    {name: 'GalaxyWatch', brand: 'Samsung'},
    {name: 'iMac', brand: 'Apple'},
    {name: 'GalaxyBuds', brand: 'Samsung'},
    {name: 'Gram', brand: 'LG'},
    {name: 'SurfacePro', brand: 'Microsoft'},
    {name: 'ZenBook', brand: 'Asus'},
    {name: 'MacbookAir', brand: 'Apple'},
];

const apples = devices.filter((el) => el.brand === 'Apple');

console.log(apples);

const laptop = devices.find((el) => el.brand === 'Gram');

console.log(laptop);