[JS-ES6] Function[1] - Array.prototype

어메이징이보비·2022년 10월 24일

ES6 JavaScript

ECMAScript6

목록 보기

5/6

📌 Array.prototype.find()

Array.prototype.find 는 제공되는 테스트 조건을 만족하는
첫번째 엘리먼트 값을 리턴하는 함수이다.

find() 는 3개의 element가 있는데

item - 현재 처리하고 있는 item을 나타냄
index - 현재 item의 index를 나타냄
array - array.find함수가 호출한 array를 나타냄

하단예제에서 gmail.com인 주소를 찾는다고 가정해보겠다
string인 item에 includes(안에 들어있는 string을 찾음)를 사용해서 true, false를 return받을것인데 [1] 아이템에서 true가 return되어 출력값은 barnes@gmail.com이 된다.

const emails = [
    "bibi@no.com",
    "barnes@gmail.com",
    "chrome@gmail.com",
    "heartz@naver.com"
];

const foundMail = emails.find(item => item.includes("@gmail.com"))
// true이기 때문에 찾은 첫번째 아이템이 바로 리턴
console.log(foundMail) // => "barnes@gmail.com",

📌 Array.prototype.filter()

Array.prototype.filter 메소드는 제공된 함수의 조건을 만족한 모든 엘리먼트로 새로운 array를 만든다. 첫번째 엘리먼트만이 아닌 모든 엘리먼트들을 반환한다.

** element가 true를 반환하는 것들만 array에 push, false를 반환하는 element들은 탈락

const emails = [
    "bibi@no.com",
    "barnes@gmail.com",
    "chrome@gmail.com",
    "heartz@naver.com"
];

const noGmail = emails.filter(potato => !potato.includes("@gmail.com")) 
console.log(noGmail) // => ['bibi@no.com', 'heartz@naver.com']

📌 Array.prototype.forEach()

Array.prototype.forEach 메소드는 각 array의 element마다 제공된 함수를 실행한다. (map과 비슷하다)

하단 예제에서는 spli()을 사용해서 어떠한 조건으로 string을 나눠서 배열에 2개의 element로 나눌것이다

const emails = [
    "bibi@no.com",
    "barnes@gmail.com",
    "chrome@bonmi.com",
    "heartz@naver.com"
];

const cleaned = [];
emails.forEach(email => {
  console.log(email.split("@")[0]) // element에서 @를 기준으로 앞쪽(첫번째것)들만 가지고옴
  cleaned.push(email.split("@")[0]);
});
console.log(cleaned); // => ['bibi', 'barnes', 'chrome', 'heartz']

📌 Array.prototype.map()

Array.prototype.map 메소드는 forEach 지만 반환된 element들로 새로운 array를 만들어준다.

⭐️ arrow function

코드를 보기 좋게 만들고 callback 함수 를 사용하는 기능들을 구현할 때 한줄로 되어있으면 훨씬 읽기 쉬울것이다
function을 만들어 (), {}를 추가하는 것보다 implicit return으로 구현이 편해진 장점도 있다

const emails = [
    "bibi@no.com",
    "barnes@gmail.com",
    "chrome@bonmi.com",
    "heartz@naver.com"
];

/*
    map
    map은 array를 반환할것이니까 저장할 곳을 만듬.
*/
const clean = emails.map(email => email.split("@")[0]);
console.log(clean, "this is map");

/*
    map에서 object로 return 받고싶은 경우
*/
const cleanObject = emails.map((email,index) => ({
    username : email.split("@")[0],
    // index : index 이것은 es6문법으로 하면 로도 가능.
    index
}));
console.log(cleanObject); // [{…}, {…}, {…}, {…}]
console.table(cleanObject); // console에서 table형식으로 볼 수있게해줌