[ES6+] find(),filter(),forEach(),map() (Arrow Function(화살표 함수)를 사용한 다양한 경우)

08 Jan 2021 in JavaScript

find()

find 메소드 : 제공되는 테스트 조건을 만족하는 첫번째 엘리먼트 값을 리턴하는 함수

const emails = [
	"aaa@aa.com",
	"bbb@google.com",
	"ccc@gmail.com",
	"ddd@yahoo.com"
]

const foundMail = emails.find(item => true);
console.log(foundMail);
//aaa@aa.com

const includeMail = emails.find(item => item.includes("@gmail.com"));
console.log(includeMail);
//bbb@google.com

filter

filter 메소드 : 제공된 함수의 조건을 만족한 모든 엘리먼트로 새로운 배열을 만드는 함수

const emails = [
	"aaa@aa.com",
	"bbb@google.com",
	"ccc@gmail.com",
	"ddd@yahoo.com"
]

const noGmail = emails.filter(item => !item.include("@gmail"));
console.log(noGmail);
//["aaa@aa.com","bbb@google.com","ddd@yahoo.com"]

forEach() / map()

forEach메소드 : 엘리먼트마다 제공된 함수 실행하는 함수

map메소드 : forEach지만 반환된 엘리먼트들로 새로운 배열로 만들어주는 함수

const emails = [
	"aaa@aa.com",
	"bbb@google.com",
	"ccc@gmail.com",
	"ddd@yahoo.com"
]

emails.forEach(email => {
	console.log(email.split("@")[0])
})
//aaa

const cleaned = emails.map(eamil => email.split("@")[0]);
console.log(cleaned);
//["aaa","bbb","ccc","ddd"]



//object를 리턴하는 경우(ex.순서까지 정해주고 싶은경우)
//{}괄호를 쓰기때문에 implicit return이 적용되지 않으므로 리턴을 써주어야하지만 
//{}앞에 ()를 적어주면 객체를 반환할거라고 암묵적으로 리턴된다

const cleaned = emails.map((eamil,index) => ({
	username:email.split("@")[0],
	index
}));
console.log(cleaned);
//[{index:0,username:"aaa"},{...},{...},{...}]

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)