[JavaScript] 배열 - .find() .filter() .forEach() .map() 개념 정리

Array.find()

 

제공된 테스트 함수를 충족하는 배열의 첫 번째 원소를 반환한다. 충족하는 원소가 없으면 undefined를 반환한다.

 

예시)

const emails = ["kariu@naver.com", "ray@gmail.com", "kk@gmail.com", "greentea@hanmail.net"];

const foundMail = emails.find(item => item.includes("@gmail.com"));

console.log(foundMail);

결과)

ray@gmail.com

 

emails 배열에는 여러 이메일 주소들이 저장되어 있다. 이중에서 gmail인 이메일을 찾고 싶어서 .find()를 사용하였다. 하지만 emails 배열 안에는 "ray@gmail.com", "kk@gmail.com" 총 두 가지가 있지만 결과 값은 앞에 있던 "ray@gmail.com"만 가져오는 것을 확인할 수 있다.

 

Array.find()는 조건을 충족하는 배열의 첫 번째 원소만 반환하기 때문이다.

 

 

Array.filter()

 

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

 

예시)

const emails = ["kariu@naver.com", "ray@gmail.com", "kk@gmail.com", "greentea@hanmail.net"];

const foundGmail = emails.filter(item => item.includes("@gmail.com"));

console.log(foundGmail);

 

결과)

['ray@gmail.com', 'kk@gmail.com' ]

 

Array.filter()는 조건을 만족하는 모든 원소들을 배열로 변환한다.  Array.find()를 사용했을 땐 조건을 만족했던 가장 첫 번째 원소만 반환이 되었지만 Array.filter()를 사용했을 땐 조건을 만족하는 모든 원소들이 배열로 반환되었다.

 

 

Array.forEach()

 

주어진 함수를 배열 요소 각각에 대해 실행한다.

 

예시)

const emails = ["kariu@naver.com", "ray@gmail.com", "kk@gmail.com", "greentea@hanmail.net"];

emails.forEach(current => {
  console.log(current.split("@")[0]);
});

 

결과)

kariu
ray
kk
greantea

 

emails 배열에서 이메일 주소 앞에 있는 사용자 이름을 가져오고 싶어서 Array.forEach()와 split()을 사용하였다.

Array.forEach()는 주어진 배열의 요소를 차례대로 가져와 실행시켜준다.

단, Array.map()과 다른 점은 결과 값을 배열 형식으로 반환시켜주지 않는다는 것이다.

 

 

 

Array.map()

 

특정 배열 내 모든 요소에 대해 각각 함수를 적용하고, 이 결과를 모아 새로운 배열로 반환한다.

 

예시)

const emails = ["kariu@naver.com", "ray@gmail.com", "kk@gmail.com", "greentea@hanmail.net"];

const nickname = emails.map(email => email.split("@")[0])

console.log(nickname)

 

결과)

[ "kariu", "ray", "kk", "greentea" ]

 

emails 배열 안에 있는 모든 이메일들의 사용자 이름을 가져와서 새로운 배열에 저장시키고 싶을 땐 위와 같이 Array.map()을 이용하면 된다.