자바스크립트 화살표 함수 간단히 정리, javascript arrow function

회사에서 개발하다가 코드 검사를 받는 경우가 있는데, 매번 쓰는 거만 쓰다버릇 하다보니 검사를 받다가 새로이 알게되는 사실들이 많다. 사실 이런 것들에 대해서 미리 공부하고 적용할 줄 알아야 하는데, 지적을 받고 그때서야 알게된다는 점이 스스로에게 약간 반성이 되긴 하지만, 어떻게 공부를 해야하나 싶기도 하는 생각이 있는데 아무튼 틈새시장을 노려 하나씩 블로그에 정리해야지 싶다.

 

이번에 새롭게 알게 된거는 자바스크립트에 있는 화살표 함수이다. 보통 아래 내용처럼 썼었는데, 화살표 함수는 약간 쓰는 방식이 달라서 알아보겠음.

 

[기존 쓰던 방식]

function aa(x, y) {
	return x + y;
};

 

728x90

자바스크립트 화살표 함수 간단 정리

 

화살표 함수는 arrow function이라고도 하고 기존에 쓰는 함수표현 방식을 개선하기 위한 대안 방법이라고 보면 된다. 위와 같은 기존 방식을 사용하게 되면 function 이라는 단어를 계속 써서 사용해야 하는데, 화살표 함수 같은 경우는 적어도 그런 상황이 없기에 간단한 장점이라고 볼 수 있다.

 

특징을 간단히 정리해보면 아래와 같다(출처:mdn)

 

• this나 super에 대한 바인딩 X
• methods로 사용 X
• new.target 키워드가 없음
• 생성자로 사용 불가능

 

반응형

 

 

화살표 함수에 대해 찾아보게 된거는 this라는 바인딩 내용때문에 찾아보게 된 건데, 일반 function 클릭이벤트 등에서 this를 찾으면 잘 찾아지는데 화살표 함수에서는 undefined가 뜨거나 상위에 있는 window를 찾는 현상이 발생함.

 

그래서 보니까 화살표 함수는 자신의 this가 없다. 아직은 더 알아봐야 할 것 같은데 화살표 함수는 아래와 같이 사용함

 

const aa = (x, y) => x + y;

 

이렇게 간단히 한줄에 끝날 줄이야; 애용해야겠다. 천천히 알게되는 점들에 대해 잘 작성해보겠음