[JavaScript] 화살표 함수(Arrow Function) 사용시 주의할 점 (어휘적 범위 - Lexical Scope)

화살표 함수(Arrow Function)는 자바스크립트 ES6에서 나온 간결한 함수 표현 문법으로, 주로 익명 함수나 콜백 함수로 사용됩니다. 코드의 가독성을 높이고 작성할 코드의 양을 줄일 수 있습니다. 하지만 화살표 함수(Arrow Function)를 사용할 때 몇 가지 주의할 점이 있는데요. 이번 포스팅에서 한번 알아보도록 하겠습니다.

 

※ 먼저 화살표 함수의 기본 사용법을 모른다면 아래 글을 읽고 와주시기 바랍니다.

[JavaScript] 화살표 함수(arrow function) 사용법 & 예제 총정리

 

 화살표 함수(Arrow Function) 사용시 주의할 점 

화살표 함수(Arrow Function)의 어휘적 범위(Lexical Scope)

Lexical Scope(어휘적 범위)는 함수가 정의된 시점의 변수 범위를 기준으로 변수를 참조하는 방식입니다. 왜냐하면 자바스크립트는 함수를 어디서 호출했는지가 아니라 어디에 정의했는지에 따라 변수의 범위를 결정하기 때문입니다. 화살표 함수는 Lexical Scope를 따르며, 이는 화살표 함수 내부에서 this 키워드를 사용하거나 Arguments를 사용할 때 문제를 일으킵니다. 아래 예제에서 자세히 보겠습니다.

 

this 바인딩 차이

See the Pen arrow-function this by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

위의 코드를 실행시키면 상식적으로는 getName 메서드로 "홍길동", sayHi 메서드로 "hi"가 출력되어야 할 것 같은데 undefined와 위의 예제인 codePen의 제목이 출력되고 있습니다. 왜 그런걸까요? 화살표 함수(arrow function)은 자신만의 this를 생성하지 않고, 상위 스코프(lexical scope)의 this를 그대로 사용합니다. 일반적으로 window 함수가 될거고, 위의 예제에서는 codepen이 되겠죠. codepen에는 text라는 속성값이 없습니다. 그래서 undefined가 뜨는거고, name은 코드펜에서 제목을 의미합니다. 그래서 제목이 출력되고 있는것입니다.

 

 

See the Pen Untitled by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

그래서 화살표 함수(Arrow Function)에서는 this를 사용하시면 안됩니다. 그냥 위와 같이 객체를 참조하여 출력을 하는 방향으로 진행하시거나 이런경우 처음부터 화살표 함수를 사용하지 않는것이 좋겠죠.

 

---

 

Argument 사용 불가

See the Pen argument 예제 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

일반 함수에서 Argument의 사용법은 위와 같습니다. 해당 함수에 인입되는 모든 인자값을 배열로 받아 사용할 수 있는 기능이죠. 하지만 이게 화살표 함수 Arrow Function에서는 작동하지 않습니다. 화살표 함수는 자신만의 arguments 객체를 가지지 않고, 상위 스코프(lexical scope)를 통해서 인자값을 처리하기 때문입니다.

 

 

See the Pen arrow function argument by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

실제로 화살표 함수(Arrow Function)에서 Arguments를 사용해도 아무런 반응이 없는것을 보실 수 있습니다. 대신 화살표 함수에서는 Rest Parameters라고 ... 키워드를 사용하여 인자를 받으셔야 합니다.

 

 

See the Pen arrow function argument by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

Rest Parameters는 ...을 사용하여 정의하며, 배열 형태로 모든 전달된 인자를 받을 수 있습니다.