arrow function

arrow function

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다.

 

//1-1
function add() {
  return 2 + 4;
} 

//1-2
let add = () => 2 + 4;

//2-1
function add(a){
  return a + 4;
}

//2-2
let add = a => a + 4;

//2-3
let add = a => {return a + 4};

//3-1
() => { return { a: 1 }; }

//3-2
() => ({ a: 1 })

화살표 함수 참고

• 매개변수가 1개일 경우 소괄호 생략이 가능하다(매개변수가 없거나 2개 이상일 경우는 소괄호 생략 불가능)

• 함수의 본문(화살표 이후)이 한 줄 일 경우 중괄호와 return문 생략이 가능하다. (객체 반환 시 소괄호를 사용하여 반환한다. /예제 3-2)

---

화살표 함수의 this

function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.

2021/01/29 - [개발/Javascript] - this

this

 

자바스크립트는 함수 호출 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다.

 

화살표 함수의 경우 함수 선언 시 this에 바인딩할 객체가 정적으로 결정된다. => Lexical this

 

이러한 이유 때문에 몇 가지 경우에서는 화살표 함수 사용을 지양하고 있다.

 

1. 객체 내의 메서드 정의 시
2. Prototype을 사용해 메서드 정의 시
3. 생성자 함수 정의 시
4. addEventListener함수의 콜백 함수 정의 시

 

메서드 정의 시 (1, 2)

//객체 내 정의 시
const human = {
  name : "Lee",
  introduce : () => {
   if (this === global) {
     return "global"
   }
   else{
     return `My name is ${this.name}`
   }
 }
}

human.introduce()
//global

const human = {
  name : "Lee",
  introduce : function(){
   if (this === global) {
     return "global"
   }
   else{
     return `My name is ${this.name}`
   }
 }
}

human.introduce()
//My name is Lee



//prototype 메서드 정의 시
const human = {
  name : "Lee"
}
Object.prototype.introduce = () => {
   if (this === global) {
     return "global"
   }
   else{
     return `My name is ${this.name}`
   }
 }
human.introduce()
//global


const human = {
  name : "Lee"
}
Object.prototype.introduce = function() {
   if (this === global) {
     return "global"
   }
   else{
     return `My name is ${this.name}`
   }
 }
human.introduce()
//My name is Lee

 

생성자 함수 정의 시

화살표 함수는 prototype 속성을 가지고 있지 않기 때문에 prototype 속성이 가리키는 prototype 객체의 constructor 속성을

사용할 수 없다.

let Human = (name) => this.name = name;

console.log(Human.prototype)
console.log(Human.__proto__)
let JJJ = new Human("JJJ");
//undefined
//[Function]
//TypeError: Human is not a constructor


function Human(name) {
  this.name = name;
}

console.log(Human.prototype)
console.log(Human.__proto__)
let JJJ = new Human("JJJ");
console.log(JJJ.name)
console.log(JJJ.__proto__)
//Human {}
//[Function]
//JJJ
//Human {}

 

addEventListener 콜백 함수 정의 시

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window(node.js 환경일 경우 global)를 가리킨다.

let button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});


let button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

일반 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다.

---

참고

poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb