Arrow function

새로운 함수 표현 방식입니다.

 

[1] 표현 방식의 차이

// before
function before() {
	return 'test'
}

// after
const before = () => 'test';

파라미터가 한개면 ()를 생략할 수 있고, 함수 스코프 안에 return값만 있다면 {}와 return을 생략할 수 있습니다.

그런데 객체의 경우는, 함수 스코프와 객체를 표현하는 {}가 똑같이 생겨서 혼란이 오므로,

예외적으로 객체만 리턴하는경우는 ()로 {}를 대체합니다.

//before
function e(x) {
	return {x:x}
}

// after
const e = x => ({x})

함수를 리턴하는 경우 생김새도 특이해서 남겨둠.

// before
var f = function(a) {
	return function(b) {
    	return a+b;
    }
}

// after
const f = a => b => a+b;

[2] 가벼워진 함수

(1)기존 함수는 생성자 함수와 그냥 함수의 기능을 다 가지고 있어서 무거웠습니다. 그럼에도 불구하고 사용이 가능했던 것은 컴퓨터의 성능이 좋아서였지만, 앞으로 더 많이 사용될 자바스크립트를 위해서 함수가 가벼워졌습니다.

화살표 함수를 console.dir(functionname)으로 보면 prototype이 없습니다.

 

(2)기존 함수는 실행 컨텍스트 생성 시 this바인딩의 정보도 가지고 있었지만 화살표 함수는 this정보가 없기 때문에 scope를 타고 this를 찾게됩니다. 애초에 this를 안갖고 있기 때문에 call, apply함수에서 this바인딩 명령만 먹히지 않습니다.

따라서 객체의 메소드는 this바인딩 문제로 화살표함수가 아닌 메소드 함수를 쓰는 게 좋습니다.

메소드 함수 

const obj = {

    getName() {

        ...code

    }

}

(3) 기타 super, arguments, new.target을 바인딩하지 않는다.

 

[3] 함수의 기타 내용들..

(1) 함수의 name property는 디버깅 용도로 사용되는데,

변수에 익명함수를 할당하거나 함수 표현식, 기명함수 사용 등 전부 함수.name하면 함수의 이름이 나온다.

그런데 기존 생성자 함수로 쓰는 경우에는 명시적으로 name이 정해져있지 않아서 name값이 나오지 않는다.

이제는 class문법이 있으니 class로 명확하게 사용하길 바랍니다.

 

또, new Function으로 만든 함수의 name은 다른 익명함수와는 다르게 name명이 anonymous입니다.

bind로 묶인 경우 어디에 묶였는지가 name명에 들어갑니다.

getter setter도 이름 나옴

 

(2) new.target

생성자 함수로 호출했는지 일반 함수로 호출했는지 알 수 있음.

자바스크립트에 없는 추상클래스 구현에 도움이 됨.

(3) 함수 선언문과 스코프

strict mode가 아닐 때(sloppy mode)에는 브라우저마다 다르게 동작함.

strict mode일 때는 함수선언문도 블락스코프에 갇힌다. 그러나 tdz는 없다.

 

그러나 브라우저마다 다르게 동작하는 위험한 상황을 굳이 연출시킬 필요가 없다.

함수는 arrow function으로,

메소드는 getName() {} 이런 식으로,

생성자 함수는 class로

바꿔 사용하여 function이라는 키워드를 안쓰도록 하자.