비실이의 개발 성장기

javascript Arrow function 본문

프론트엔드/javascript

javascript Arrow function

DubbingLee 2020. 6. 12. 23:52

# Arrow function 이란?

  • Arrow function 은 일반 function 구문보다 짧게 사용할 수 있도록 추가 된 문법입니다.

  • Arrow function 은 ES6 에 추가 된 문법이며, ES6 미지원 브라우저에서 사용하려면 js transpiler 를 통해 변환 해야합니다.

 

 

# Arrow function 특징

  • Arrow function 구문에는 함수 이름을 작성하지 않습니다. 즉, 무조건 익명함수가 됩니다.

  • Arrow function 은 일반 function 과 다르게 this 를 정의하지 않습니다.

    • Arrow function 내부에서 this 를 사용하는 경우, 상위 스코프의 this 객체가 사용됩니다. (일반변수를 스코프 객체에서 찾는 방식과 동일)

    • Arrow function 이 전역 컨텍스트에서 실행 될 때, Arrow function 내부 this 는 스코프 객체에서 this 를 찾는 방식으로 동작하므로 최상위 객체인 window 가 됩니다.

setInterval 의 콜백함수 내부 this 가 Timer 인스턴스를 참조하지 않는 상황

 

setInterval 의 콜백함수 내부 this 가 Timer 인스턴스를 참조하도록 arrow function 으로 변경

 

  • Arrow function 은 prototype 속성을 가지지 않습니다.

  • Arrow function 은 constructor 메소드를 가지지 않으므로 생성자 함수로 써 사용될 수 없습니다.

arrow function 은 constructor 메소드가 존재하지 않으므로 생성자 함수로 사용될 수 없음 

 

  • Arrow function 은 유사배열 객체인 arguments 를 정의하지 않습니다.

    • Arrow function 에서 arguments 를 사용하는 경우, 스코프 객체에서 arguments 변수를 찾는 방식으로 동작합니다.

arrow function 내부 arguments[2] 는 상위 스코프에 있는 arguments 배열 객체를 참조하여 3이 출력

 

 

 

# 참고문서

 

화살표 함수

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고  자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이  함수 표현은 메��

developer.mozilla.org

 

화살표 함수 다시 살펴보기

 

ko.javascript.info

 

 

 

# 잘못된 내용은 댓글 남겨주세요.

0 Comments
댓글쓰기 폼