Java Script (JS) 화살표 함수

화살표 함수 (Arrow Function)

ES6에서 도입된 새로운 함수 정의 방식이며 기존 함수의 정의 방식에 비해서
간결하고 명확한 특징을 가지고 있다. 함수 표현식을 더 짧고 간결하게 작성할 수 있다.

화살표 함수는 아래에 첨부한 사진과 같이 작성한다.

화살표 함수의 특징

일반 함수에서는 사용 가능한 this를 사용하지 않는다.

1. func1 : 일반 함수이므로 this에 메소드를 소유한 obj 객체를 할당한다.


2. func2 : func2 내부에 화살표 함수로 선언된 getName의 상위 스코프는
   func2()이고 func2()는 func1()과 같은 obj 객체를 참조한다.
   따라서 getName의 this에는 obj 객체가 할당된다.

3. 아래의 사진과 같이 동일한 실행결과가 나온 것을 확인할 수 있다.

JS 함수의 arguments는 함수가 호출될 때 전달된 인수들을 담고 있는 유사 배열 객체이다.
(화살표 함수를 사용시 arguments 사용이 불가능 하다.)

1. 아래의 코드에서는 화살표 함수에 arguments 객체를 사용한 예시이다.

2. 코드만 봤을 때에는 문제가 없어 보이지만 다음과 같은 오류가 나오는 것을 확인할 수 있다.

3. 해결 방법 : arguments 객체를 사용해야 할 경우엔 일반 함수를 사용한다.

4. 다음과 같이 정상적인 결과 값이 출력되는 것을 확인할 수 있다.

간략한 정의

1. 일반 함수는 객체를 생성하는 생성자 함수로 사용될 수 있지만
   화살표 함수는 생성자 함수로 사용이 불가능하다. 그 이유는 화살표 함수는
   자기 자신을 가리키는 this를 생성하지 않기 때문이다.


2. 따라서 화살표 함수는 통상적으로 콜백 함수와 익명 함수에서 자주 사용된다.

자료 참고 주소