ES6 이전
화살표 함수가 아닌 일반 함수 선언으로 map 메서드를 사용한 예제이다. (1), (2) 두 가지 방식이 있다.
const names = ["Kim", "Lee", "Park"];
(1)
const hearts = names.map(function(item) {
return item + " 💖";
})
console.log(hearts)
// ["Kim 💖", "Lee 💖", "Park 💖"]
(2)
function addHeart(item) {
return item + " 💖";
}
const hearts = names.map(addHeart)
console.log(hearts)
// ["Kim 💖", "Lee 💖", "Park 💖"]화살표 함수의 등장으로 (1)의 형태가 더 단순하게 개선되었다.
화살표 함수의 형태
1. 인자가 한 개인 경우
const hearts = names.map(item => {
return item + " 💖";
})
console.log(hearts)
// ["Kim 💖", "Lee 💖", "Park 💖"]2. 인자가 두 개 이상인 경우
const hearts = names.map((item, index) => {
return index + ": " + item + " 💖";
})
console.log(hearts)
// ["0: Kim 💖", "1: Lee 💖", "2: Park 💖"]map의 두번째 매개변수는 index로 정해져 있음을 참고한다.
3. 암묵적 반환 (implicit return)
콜백 함수의 실행문이 한 줄 일 때, return을 생략할 수 있다. 이를 암묵적 반환(implicit return)이라고 한다.
const hearts = names.map(item => item + " 💖")
console.log(hearts)
// ["Kim 💖", "Lee 💖", "Park 💖"]인자가 2개 이상일 때도 동일하게 적용 가능하다.
4. 객체를 반환하는 경우
const students = ["Kim", "Lee", "Park", "Yang"];
const userInfo = students.map((student, index) => ({
index, // index: index와 같음(es6)
name: student
}));
console.log(userInfo);
// [{…}, {…}, {…}, {…}]
// 0: {index: 0, username: "Kim"}
// 1: {index: 1, username: "Lee"}
// 2: {index: 2, username: "Park"}
// 3: {index: 3, username: "Yang"}콜백 함수의 실행문을 감싸는 중괄호를 소괄호로 한 번 더 감싸면({...}) 객체를 암묵적으로 반환할 수 있다.
this와 화살표 함수
예제 1
index.html
<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<meta charset="UTF-8" />
</head>
<body>
<script src="src/index.js">
</script>
<button>Click me</button> <!--버튼 생성-->>
</body>
</html>index.js
버튼을 클릭하면 함수 선언으로 정의한 익명 함수가 실행된다.
const button = document.querySelector("button");
button.addEventListener("click", function() {
console.log(this);
// <button>Click me</button>
console.log("I have been clicked")
// I have been clicked
});브라우저는 this를 이벤트를 발생시는 요소로 셋팅하므로, 여기에서는 버튼이다. 그러므로 this를 아래처럼 활용할 수 있다.
button.addEventListener("click", function() {
this.style.backgroundColor = "red";
// 버튼을 클릭하면 버튼 배경색이 빨간색으로 변경
})여기에서 addEventListener함수의 두 번째 인자인 콜백 함수를 화살표 함수로 변경하면 어떻게 될까?
button.addEventListener("click", () => {
this.style.backgroundColor = "red";
// TypeError 발생
console.log(this);
// Window
});타입에러가 발생하고 this를 로그해보면 윈도우 객체로 바뀌어 있다.
화살표 함수는 내부적으로 this를 갖지 않는다. 화살표 함수 안에서 this에 접근하고자 하면 스코프체인상 가장 가까운 this를 찾게 되고 여기에서는 Window이다.
콜백 함수를 외부에 정의해도 화살표 함수로 작성했다면 결과는 마찬가지이다.
const handleClick = () => {
console.log(this)
}
button.addEventListener("click", handleClick)
// 클릭하면 Window 출력예제 2
const student = {
name: "Lee",
age: "21",
addYear: () => {
this.age ++;
}
};addYear함수를 실행할 때마다 나이 숫자가 21에서 하나씩 증가하는 코드이다.
student.addYear();
// TypeError: Cannot read property 'age' of undefinedage에 접근할 수 없다. this가 student를 향하고 있지 않음을 알 수 있다(Window를 향함).
일반 함수로 작성하면 this가 student객체를 가리키며 올바르게 작동한다.
const student = {
name: "Lee",
age: "21",
addYear: function () {
this.age ++;
}
};
student.addYear();
student.addYear();
console.log(student);
// Object {name: "Lee", age: 23, addYear: function addYear()}
// name: "Lee"
// age: 23
// addYear: function addYear() {}화살표 함수의 활용
find
테스트 함수 조건을 만족하는 첫번째 엘리먼트 값을 리턴하는 함수
const emails = [
"kim@naver.com",
"lee@gmail.com",
"park@google.com",
"yang@gmail.com"
];
// 일반 함수
const findMail = emails.find(function(email) {
return email.includes("@gmail.com")
});
// 화살표 함수
const findMail = emails.find(email => email.includes("@gmail.com"));
console.log(findMail)
// lee@gmail.com화살표 함수를 사용해 같은 내용을 더 간결하게 나타낼 수 있다.
filter
제공된 함수의 조건을 만족하는 모든 엘리먼트로 새로운 배열을 만드는 함수
const emails = [
"kim@naver.com",
"lee@gmail.com",
"park@google.com",
"yang@gmail.com"
];
const noGmail = emails.filter(email => !email.includes("@gmail.com"));
console.log(noGmail)
// ["kim@naver.com", "park@google.com"]map
배열의 각 요소에 대해 함수를 실행한 결과 값으로 새로운 배열을 만드는 함수
const emails = [
"kim@naver.com",
"lee@gmail.com",
"park@google.com",
"yang@gmail.com"
];
const id = emails.map(email => email.split("@")[0]);
console.log(id)
// ["kim", "lee", "park", "yang"]