ES6(ECMAS6) 문법 - 화살표 함수

화살표 함수

- 함수 표현식을 작성하기 위한 짧은 구문을 허용

- function 키워드, return 키워드 및 중괄호 불필요

이전	ES6
hello = fuctnion() {     return "Hello World!"; }	hello = () => {     return "Hello World!"; }

 

- 매개변수가 없는 경우

hello = () => {     return "Hello World!" };

- '{} 안에 한줄'일때 ,다음과 같이 중괄호와 return 을 생략가능

hello = () => "Hello World!";

 

- 매개변수가 있는 경우

hello = (val) => "Hello" + val ;

- 매개변수가 '하나만' 있는경우, 다음과같이 () 생략 가능

hello = val => "Hello" + val ;

 

---

this

- 화살표 함수 this 가능에는 바인딩 기능이 없음

- 일반 함수에서 this 키워드는 함수를 호출한 개체를 나타내지만 화살표 함수에서 this는 항상 화살표 함수를 정의한 객체를 나타낸다.

- 화살표 함수로 메소드를 정의하는 것은 피해야 한다. 메소드로 정의한 화살표 함수 내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체 window를 가리킨다.

일반함수	화살표 함수
hello = function() {     document.getElementById("demo").innerHTML += this; } window.addEventListener("load", hello); document.getElementById("btn").addEventListener("click",hello);	hello =() => {     document.getElementById("demo").innerHTML += this; } window.addEventListener("load", hello); document.getElementById("btn").addEventListener("click",hello);
[object Window][object HTMLButtonElement][object HTMLButtonElement][object HTMLButtonElement]	[object Window][object Window][object Window][object Window][object Window][object Window]

일반함수	화살표 함수
const person = {    name : 'ucong',    sayHi() { // === sayHi : functoin() {       console.log('Hi ${this.name}');    } };	const person = {    name : 'ucong',    sayHi : () => console.log('Hi ${this.name}'); };
pserson.sayHi(); // Hi ucong	pserson.sayHi(); // Hi undefined

 

[참고]

- https://velog.io/@yhe228/%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%97%90%EC%84%9C-this

- https://www.w3schools.com/js/js_arrow_function.asp