[ES6+]화살표 함수(=>) 특징 3줄 요약 + 설명

화살표함수는 코드 형태는 (param)=> { 함수코드 } 와 같지만, 다음과 같이 작성할 수도 있다.

 함수 블록{ } 과 return 작성을 생략해도 된다. 

const test = (num1, num2) => num1 + num2;
console.log(test(10,20)); //30

 

하지만 내부에 아무 코드 없이 함수 블록 { } 만 작성하면 undefined 를 반환하게 된다. 

const test = (num1) => {};
console.log(test(1)); // undefined

 

또한 함수 블록 { }을 소괄호()로 감싸게 되면 { key : value } 값으로 반환하게 된다. 

const test = (param) => ({myName : param});
const result = test("yoy");
for (let key in result){
	console.log( key , result[key] ); // myName yoy
}

 

일반함수와 비교되는 화살표 함수 특징 3줄 요약

1. prototype 이 없어서 일반함수보다 가볍게 사용할 수 있다. 

2. arguments 사용이 불가능하다 

2. 작성된 위치에 따라 this가 정적으로 바인딩 된다. 

---

[1번 부가설명] prototype이 없어서 일반함수보다 가볍게 사용할 수 있다. 

일반적으로  function(){ } 형태의 함수를 사용하면 그 안에 prototype ( consturctor, __proto__ ) 이 같이 만들어진다. 

특히 __proto__ 안에는 이런 애들이 같이 만들어져 더 무겁게 만든다. 

하지만 화살표함수에는 prototype이 없어서 오직 함수의 기능만 가지고 가볍게 쓸 수 있다. (물론 constructor가 없어서 new 연산자로 인스턴스 생성도 불가능하다)

일반함수

화살표 함수

[2번 부가설명] arguments 사용이 불가능하다. 

const point = () => {
	try{
    	const args = arguments;
    }catch(err){
    	console.log("arguments 사용 불가");
    }
}
point(100, 200); // arguments 사용 불가

함수를 찍어보면 arguments가 있긴 하지만 일반함수와 구조(4개의 프로퍼티)를 맞추기 위한 것(추정)일 뿐 사용할 수는 없다. 

물론 arguments를 사용할 수는 없지만 대신에 rest 파라미터를 사용할 수 있다.

 

[3번 부가설명] 작성된 위치에 따라서 this가 정적으로 바인딩 된다. 

다른말로 하면 this가 정적스코프를 참조한다. 

var myName = "yoy"
const book = {
	show : ()=> console.log(this.myName);
};
book.show(); // "yoy"

한번 바인딩된 this는 정적으로 바인딩됐기 때문에 this참조를 call(), apply() 메소드 등으로 바꿀수 없다.