본문 요약💫
자바스크립트에서 함수란 1) 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 2) 이를 하나의 블록으로 묶어 실행 단위로 만들어 놓은 것
함수를 정의하는 4가지 방식
1. 함수 선언문
2. 함수 표현식
3. Function 생성자
4. 화살표 함수
자바스크립트에서 함수는 일급 객체다. 일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 위미한다. 함수는 1)다른 함수의 매개변수가 될 수도 있고, 2)반환값이 될 수도 있으며, 앞에서 본 것처럼 3)할당도 가능하므로 일급 객체가 되기 위한 조건을 모두 갖추고 있다.
함수의 호이스팅은 함수 선언문이 코드 맨 앞단에 작성된 것처럼 작동하는 자바스크립트의 특징을 의미한다. 함수 표현식과의 가장 큰 차이점이다.
함수의 호이스팅은 함수에 대한 선언을 실행 전에 미리 메모리에 등록하는 작업을 의미한다. 이 특징 때문에 어디에서나 정상적으로 함수를 호출할 수 있게 된다.
반면 함수 표현식은 함수를 변수에 할당한다. 변수도 마찬가지로 호이스팅이 발생한다. 그러나 함수의 호이스팅과는 다르게, 호이스팅되는 시점에서 var의 경우 undefined로 초기화한다는 차이가 있다. (그럼 자연스럽게 const, let은..? 이라는 의문이 떠오른다. 이는 아래에 심화에서 풀 예정!)
화살표 함수는 앞서 언급한 함수 생성 방식과 몇 가지 큰 차이점이 있다. 우선 constructor를 사용할 수 없기에 생성자 함수로 사용이 불가능하다. 또한 arguments가 존재하지 않는다.
그리고 화살표 함수와 일반 함수의 가장 큰 차이점은 바로 this 바인딩이다. this는 화살표 함수 이전까지는 함수를 정의할 때 결정되는 것이 아니라, 함수가 어떻게 호출되느냐에 따라 동적으로 결정되었다. 하지만 화살표 함수는 내부에서 this를 참조하면 상위 스코프의 this를 그대로 따르게 된다.
따라서 화살표 함수와 일반 함수를 사용할 때, 특히 this를 사용할 수밖에 없는 클래스 컴포넌트 내부에서 각별한 주의가 필요하다.
함수를 인자로 받거나 결과로 새로운 함수를 반환하는 함수를 고차 함수라고 한다. 이 중 함수를 반환하는 경우엔 클로저를 생성하기도 한다.
순수 함수는 부수 효과가 없고, 언제 어디서나 어떠한 상황에서든 동일한 인수를 받으면 동일한 결과를 반환해야 한다. 그리고 이러한 작동 와중에 외부에 어떠한 영향도 미쳐서는 안 된다.
리액트의 관점에서 본다면 부수 효과를 처리하는 훅인 useEffect의 작동을 최소화하는 것이 함수의 역할을 좁히고, 버그를 줄이며, 컴포넌트의 안정성을 높일 수 있다.
심화해보기✨
키워드 >>
호이스팅, this 바인딩, 클로저, 순수 함수, 함수형 프로그래밍
호이스팅 - https://taenami.tistory.com/87, https://developer.mozilla.org/ko/docs/Glossary/Hoisting
this 바인딩 - https://seungtaek-overflow.tistory.com/21
클로저 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
