[JavaScript] 화살표 함수(Arrow Function)

[JavaScript] 화살표 함수(Arrow Function)공부방2023. 1. 17. 23:39@mag1c

Table of Contents

728x90

화살표 함수 사용하기

화살표 함수표현은 함수를 보다 간략하게 표현하기 위한 표현 방식이다.

let sum = (a, b) => a + b;
alert( sum(1, 2) ); // 3

//위의 화살표 함수와 동일한 표현이다.
let sum = function(a, b) {
  return a + b;
};

(a,b) => a+b는 실행되는 순간 a+b를 평가하고 그 결과를 반환한다.

인수가 한 개만 존재한다면 괄호를 생략할 수 있다.

let mul = a => a * 2;

인수가 존재하지 않을 때는 괄호가 있어야하며, 괄호를 비워놓으면 된다.

let void = () => console.log("텅텅 빔");

화살표 함수를 사용하면 아래와 같이 동적인 함수 생성이 가능하다.

let age = prompt("19세 미만 출입금지.", 18);

let welcome = (age > 19) ?
() => alert('출입') :
() => alert("불가");

화살표 함수의 제한점

1. this나 super에 대한 바인딩이 없다.

//화살표 함수의 this는 상위의 this를 그대로 가져온다.
 
let board = {
  title: "1",
  content: ["a", "b", "c"],
 
  showList() {
    this.content.forEach(                           // this === board
      content => alert(this.title + ': ' + content) // this === board
    );
  }
};
 
board.showList();
 
// 1 : a
// 1 : b
// 1 : c

2. 메서드나 생성자로 사용할 수 없다.

//메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인
//전역 객체 Window를 가리키게 된다. -> undefined

const dog = {
  name: 'guzzi',
  howl: () => console.log(`mung ${this.name}`)
};
dog.howl(); // mung undefined

//프로토타입 메서드 역시 마찬가지다.

const dog = {
  name: 'guzzi',
};
 
Object.prototype.howl = () => console.log(`mung ${this.name}`);
 
dog.howl(); // mung undefined

//생성자 함수는 프로토타입 프로퍼티를 가지며
//프로토타입 프로퍼티가 가리키는 프로토타입 객체의 생성자를 사용한다.
//화살표함수는 프로토타입 프로퍼티를 가지고 있지 않다.

const dog = (name) => {
	this.name = name
};
 
// 화살표 함수는 프로토타입 프로퍼티가 없다
console.log(dog.hasOwnProperty('prototype')); // false 
const cat = new dog("guzzi"); // TypeError: dog is not a constructor

3. 일반적으로 범위를 지정할 때 사용하는 call, apply, bind메서드를 사용할 수 없다.

this를 변경할 수 없다

window.x = 1;
const normal = function () { return this.x; };
const arrow = () => this.x;
 
console.log(normal.call({ x: 10 })); // 10
console.log(arrow.call({ x: 10 }));  // 1

4. addEventListener의 콜백함수로 사용해서는 안된다.

addEventListener의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다.

따라서 addEventListener의 콜백 함수 내에서 this를 사용하는 경우, function 키워드로 정의한 일반 함수를 사용해야한다.

//addEventListener의 콜백함수로 사용해서는 안된다.
var button = document.getElementById('myButton');
 
button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://ko.javascript.info/arrow-functions-basics

728x90