Arrow function

 오늘은 화살표 함수(arrow function)에 대해 정리해보겠다.

 화살표 함수란?

-> 화살표 함수는 전통적인 함수표현의 간편한 대안임 but 몇 가지 제한이 있음

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
• new.target키워드가 없습니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(Constructor)로 사용할 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다

 지금은 this랑 super을 못 쓴다는 것 정도만 알면 충분할 듯

 그럼 구체적으로 ㄱㄱ

 

1)   (매개변수) => { 본문 }

 기존의 함수 표현식에서 function 키워드를 삭제하고 괄호()와 코드블록({}) 사이에 화살표(=>)만 넣어주면 화살표함수가 된다.  예를 한 번 들어보장 

const message = function () {
	console.log('유나은');
}

const message = () => console.log('유나은');

이런식으로 사용할 수 있다. 

 

2)   본문이  return [식 or 값] 뿐인 경우  { } 와  return 키워드 생략 가능

만약 함수 내부 내용이 반환값만 있다면 중괄호와 return을 생략할 수 있다.

let day = function() {
	return new Date();
}

let day = () => new Date();

아주 깔끔...! 보다시피 기존의 함수표현식에서 {}와 return을 삭제함으로써 간략하게 코드를 구현시켰다.

 

3)   매개변수가 하나뿐인 경우 괄호 생략 가능

let add = function (a) {
	return a*a;
}

//let add = (a) => {
//	return a+a;
//}

let add = a => a+a;

 위는 모두 a에 자기자신을 한 번 더해주는 함수이다. 모두 같은 기능으로 사용하였고, 매개변수가 한 개여서 ()를 생략하여 쓰기도 했다.

 

4) return 할 값이 객체인 경우 괄호 필수

let object = function() {
	return {
    	x : x
    }
}

let object = x => ({ x });

 함수 내부의 내용이 반환값만 있어도 그 값이 객체 리터럴일 경우 return과 코드블록({})을 생략하면 남은 값을 화살표 함수의 함수 스코프로 인식하여 에러가 난다.

 따라서 객체를 즉시 반환해야 하는 경우 위의 코드와 같이, 객체임을 명시적으로 알려주기 위해 ()로 묶어줘야 한다.

 

-> 매개변수가 없을 경우에도 괄호는 필수!

 

6) 실행 컨텍스트 생성시  this *바인딩을 하지 않음

-> 바인딩 : 프로그램의 기본 단위(예시: 변수)에 해당 기본 단위가 가질 수 있는 속성 중에서 일부 필요한 속성만을 선택하여 연결해 주는 것

const obj = {
    a : function () {
        console.log(this); // (1)obj

        const b = function() {
            console.log( this ); // (2)this 바인딩하는 객체가 window
        };
        b();
    }
};

obj.a();

const obj2 = {
    a : function () {
        console.log(this); // (3)obj

        const b = () => {
            // this 를 바인딩하는 동작 자체를 하지 않음
            console.log( this ); // (4)obj
        };
        b();
    }
};

obj2.a();

https://webclub.tistory.com/649에서 들고온 코드이다.

(1) - 1의 this는 위의 obj를 가리킨다.

(2) - 2의 this는 외부에 있다고 인식되어 window를 가리킨다.

(3) - 1과 마찬가지로 obj

(4) - 그냥 바인딩 x 이므로 obj 출력