[JavaScript] 배열에서 특정 단어가 들어간 배열만 출력하기(feat. filter && includes)

문제

fruits 라는 배열이 있습니다.

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

'ap'가 들어간 과일들로 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요.

결과는 아래와 같아야 합니다.

[ 'apple', 'grapes' ]

힌트: includes()를 사용해보세요

접근 방식

1. includes()를 활용해, 특정 조건(단어 'ap')을 만족하는 것만 true로 반환한다.
2. filter()를 이용해, 위의 true를 만족하는 요소로만 구성된 새 배열(apLetter)을 생성한다.
3. 해당 배열을 반환한다.

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

function filtered () {
  const apLetter = fruits.filter(? => ?!?.includes('ap'));
  // apLetter에 할당,  filter에 만족하는 것, 'ap'를 갖는 단어만 true로 반환
  return apLetter;
  // apLetter 반환
}

console.log(filtered(fruits)); // 해당 배열을 반환

개념 includes와 filter

includes()

1. 주어진 배열 안에 특정 요소값(element)이 포함되어 있는지 검사하여 true or false를 반환한다.
2. 요소 뒤에 인덱스를 두어 해당 인덱스 이후부터 검사할 수 있다.

// 기본형
arr.includes(element); // 요소값(element)이 있는지 처음부터 끝까지 검사
arr.includes(element, i); // 요소값이 있는지 인덱스 i부터 끝까지 검사

// 반환값
true
false

// 예시
const arr = [1, 3, 5];
arr.includes(3); // true
arr.includes(3, 1); // true
arr.includes(3, 2); // false
arr.includes(2); // false

filter()

1. 호출한 배열의 모든 요소를 순회한다.
2. 인수로 전달 받은 콜백 함수를 반복 호출한다.
3. 콜백 함수의 반환값이 true인 요소만 찾는다.
4. 해당 요소로 구성된 새로운 배열을 반환한다.
   ** 단, 원본인 배열은 변경되지 않는다.

// 기본형
const new_arr = arr.filter((element) => conditional);
// 요소값 중 조건문(conditional)이 true인 경우만 new_arr에 반환


// 반환값
conditional을 만족한 새로운 배열

// 예시
const arr = [1, 2, 3, 4, 5];
const evens = arr.filter(element => element % 2 === 0);
console.log(evens); // [2, 4]

정답

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

function filtered () {
  const apLetter = fruits.filter((value)=> value.includes('ap'));
  return apLetter;
}

console.log(filtered(fruits)); // ['apple', 'grapes']

보완점

1. filter()를 찾아보니 개념이 생각보다 많아 복습 및 추가 공부가 필요하다.
   element 말고도 index, array가 언제 쓰이는지 좀 더 공부해야 할 듯.

const new_arr = arr.filter(element, index, array) => conditional)
// ????

2. 콜백함수에 대한 추가적인 공부가 필요하다.

참고자료

(이응모, 위키북스) 《모던 자바스크립트 Deep Dive》

(MDN) Array.prototype.filter()

(MDN) Array.prototype.includes()