참조하며 메모한 자료 (내돈내산) : 모던 자바스크립트 핵심 가이드 - 알베르토 몬탈레시
2.1 화살표 함수
뚱뚱한 화살표 ( ) => { }
는 ES6에서 처음 도입되었다
// ES5에서 함수 선언하는 방법
const greeting = function(name) {
return "hello" + name;
};// ES6에서 도입된 화살표 함수
var greeting = (name) => {
return `hello ${name}`;
};
매개변수가 하나만 있으면 괄호를 생략할 수 있다
var greeting = name => {
return `hello ${name}`;
};
매개변수가 전혀 없으면 빈 괄호를 써야 한다
var greeting = () => {
return "hello";
};
2.2 암시적 반환
명시적 반환 생략한다, 말 안해도 반환됐다는 뜻
const greeting = name => `hello ${name}`;
ES5의 함수와 비교하면 어떨까
const oldFunction = function(name) {
return "hello" + name;
};
const arrowFundtion = name => `hello ${name}`
// 리터럴 표기법은 ES5에도 쓸 수 있다ES6에 비하면 코드줄이 긴 것을 보아 확실히 최신 것이 더 간결하고 가독성이 좋다
만약 모든 팀원이 ES6 문법 숙지 못했다면 이렇게 작성하는 것이 좋다
const arrowFunction = (name) => {
return `hello ${name}`
};
객체 리터럴 암시적 반환
이 예시에서는 map 함수 사용하여 runners 배열에 대한 반복(순회) (iteration) 구현한다.
첫 번째 인수 runner는 배열의 현재 원소이며, i는 배열의 인덱스이다.
배열의 각 원소에 대해 name, race, place 속성을 포함하는 객체를 results에 추가한다
중괄호 안에 있는 것이 암시적으로 반환하는 객체 리터럴임을 자바스크립트에 알리려면,
전체를 괄호 안에 감싸야 한다
race를 쓰나 race: race를 쓰나 모두 결과 같다
2.3 화살표 함수는 익명 함수
const greeting = name => `hello ${name}`;
greeting("Ben");
2.4 화살표 함수와 this 키워드
화살표 함수 내부에서 this 키워드를 사용할 때 일반 함수와 다르게 동작하므로 주의 필요!
화살표 함수 사용할 때 this 키워드는 상위 스코프에 상속된다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>arrow function this</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box open">
This is a box
</div>
<script src="main.js"></script>
</body>
</html>
CSS
.opening {
background-color: red;
}
JS
// box 클래스를 가진 div를 가져온다
const box = document.querySelector(".box");
// click 이벤트 핸들러를 등록
box.addEventListener("click", function() {
// div에 oppening 클래스를 토글
this.classList.toggle("opening");
setTimeout(function() {
// 클래스를 다시 토글
this.classList.toggle("opening");
}, 500);
});
첫 번째 this가 const box에 할당되었지만 setTimeout 내부의 두 번째 this는 Window 객체로 설정되어
오류가 뜬 것이다
// box 클래스를 가진 div를 가져온다
const box = document.querySelector(".box");
// click 이벤트 핸들러를 등록
box.addEventListener("click", function() {
// div에 opening 클래스를 토글
this.classList.toggle("opening");
setTimeout(() => {
// 클래스를 다시 토글
this.classList.toggle("opening");
}, 500);
});
화살표 함수가 부모 스코프에서 this의 값을 상속한다는 것을 인지하며 쓴다.
여기서 두 번째 this는 부모로부터 상속되며 const box로 설정된다.
2.5 화살표 함수를 피해야 하는 경우
화살표 함수와 일반 함수의 차이점
arguments 객체에 대한 접근 방식에 있다
arguments 객체 - JavaScript | MDN
arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.
developer.mozilla.org
나머지 매개변수 - JavaScript | MDN
나머지 매개변수 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있습니다. JavaScript에서 가변항 함수를 표현할 때 사용합니다.
developer.mozilla.org
arguments 객체는
함수 내부에서 접근할 수 있는 배열 객체이며, 해당 함수에 전달된 인수의 값을 담고 있다.
배열 표기법 arguments[0] 쓰면
첫 번째 인수에 접근할 수 있다.
this 키워드와 비슷하게, 화살표 함수에서 arguments 객체는 부모 스코프의 값을 상속한다.
함수에 전달된 모든 인수에 접근하려면, 기존 함수 표기법이나 스프레드 문법을 사용한다.
[퀴즈]
1) 다음 중 화살표 함수를 문법에 맞게 활용한 예는?
let arr = [1, 2, 3];
//a)
let func = arr.map(n -> n + 1);
//b)
let func = arr.map(n => n + 1);
//c)
let func = arr.map(n ~> n + 1);
2) 다음 코드의 올바른 출력은?
const person = {
age: 10,
grow: () => {
this.age++;
},
};
person.grow();
console.log(person.age);
3) 화살표 함수 문법을 사용해서 리팩터링 하자
function(arg) {
console.log(arg);
}
[정답]
1)
=>
2)
10
화살표 함수 내에서 this 키워드는 상위 스코프(브라우저의 경우 window)에서 상속되므로
age는 10으로 유지 됨
3)
(arg) => {
console.log(arg);
}'자료 따라쓰기 > 모던 자바스크립트 핵심 가이드' 카테고리의 다른 글
| 23 타입스크립트 기초 (0) | 2023.07.13 |
|---|---|
| 01 var, let, const (3) | 2023.03.29 |
| 00 자바스크립트 기초 (3) | 2023.03.21 |
