[JavaScript]3. 화살표 함수

2. 화살표 함수

이전 장에서 ES6문법을 사용하면서 매개 변수와 함수를 깔끔하게 정리할 수 있는 화살표 함수를 학습하겠습니다.

---

화살표 함수란?

생성자 함수로 사용 할 수 없고 ,  arguments를 지원하지 않아 함수를 좀 더 깔끔하게 만들 수 있습니다.

 

기존의 방식을 사용한 함수 a와 화살표 함수를 사용한 a2는 서로 같은 코드 이지만 화살표 함수를 사용한 쪽이 더 깔끔하게 만들 수 있습니다.

 

  또는 화살표 함수 뒤에 {}를 붙임으로써 함수의 명령어를 처리 할 수도 있습니다.

---

화살표 함수와 매개 변수

프로그래밍 언어에서 매개 변수는 주로 함수명(데이터 타입 - 변수)  의 구조를 띈다면 화살표 함수는 () 안에 매개 변수를 넣는 방식으로 매개 변수 선언이 가능합니다.

 

중요한 점 - 화살표 함수와 함수 호출 패턴

이후에 설명 드릴 setTimeout 같은 비동기적 처리를 하기 위한 함수 등을 실행 할 때 this라는 명령어를 이용하게 되면 여러 에러 사항이 발생할 수 있습니다. 

비동기 입출력이란? 2023.03.13 - [Node.js] - [Node.js] 5. synchronous & asynchronous(동기,비동기)

this 란? - 내용 추가

화살표 함수를 사용한 경우 그 위의 생성자 함수를 가리키지만, 화살표 함수가 아니면 Timeout을 가르키는 것을 볼 수 있습니다.

이는 setTimeout 함수가 window의 함수로써 실행 될 때 브라우저의 백그라운드 공간으로 들어가서 실행되는 것인데

this가 그곳으로 바운딩 되기 때문입니다. 화살표 함수를 사용하게 되면 그러한 문제를 막을 수 있습니다.