Arrow Function (화살표 함수)란

puka·2022년 9월 13일

이 포스팅은 2019년 11월에 작성된 글입니다.

일반 함수 VS 화살표 함수

화살표 함수를 쓰게 되면 확실히 코드가 짧아지는 것을 알 수 있다.

//ES5

var sum = function(x){ return x+x};
console.log(sum(5)); //10

//ES6

const sum = x => x + x;
console.log(sum(5)); //10

화살표 함수의 경우는 몇가지 특징을 가지고 있다.

화살표 함수는 익명 함수로만 사용할 수 있다.
this가 바인딩 되지 않는다.
new 연산자를 사용할 수 없다.
화살표 함수는 prototype을 가지지 않는다.

화살표함수의 호출

그럼 첫번째로 화살표 함수는 익명으로 사용되기 때문에 콜백함수로도 사용할 수 있다는 것이다.

const arr = [1,2,3,4];
var even = arr.filter( x => x % 2 === 0 );

//[2,4]

this

//ES5

function Person(){
	this.age = 0;   // this는 Person을 참조한다.

	setInterval(function up(){
		this.age++;  //여기서 this는 fn안에 fn에 있으므로 Person이 아닌 Window를 가르킨다.
	}, 1000);
}

var p1 = new Person();

//age에 변화가 없다.

//ES6

function Person(){
	this.age = 0;  // tihs는 Person을 참조한다
	
	setInterval(() => {
		this.age++;  //이때 this는 Person을 참조한다.
	}, 2000);
}

var p1 = new Person();

//p1의 결과 값은 계속 2초마다 age가 증가한다.