함수 선언문과 함수 표현식(Function Declaration vs Function Expression)

이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 수강하면서 정리한 내용입니다.

 

오늘 함수 선언문과 함수 표현식에 대해서 알아보자!

💪😎💪😎💪😎💪😎💪😎💪😎💪😎

 

출처: pixabay.com/images/id -60527/

---

 

 

함수 선언문과 함수 표현식의 대해 살펴보겠다. 

이전의 브라우저에서는 디버깅을 할 때, 기명 함수 표현식은 해당 변수명에 값을 할당하여 보여주어서 익명 함수 표현식 보다 분명한 이점이 존재하였다고 한다. 하지만, 최근에 이르러 브라우저에서, (익명 함수 표현식도) 변수명이 비어 있을 경우, 자동으로 변수명을 할당하기 때문에 이제 기명 함수 표현식을 잘 쓰지 않는다고 한다.

 

 

 

 

선언한 함수를 변수에 할당한다. 이것이 함수 표현식의 개념이다.

할당 여부에 따라, 함수 선언문과 함수 표현식의 차이가 생긴다.

 

할당을 하지 않으면, 전체가 호이스팅 대상이 되고,

할당을 하게 되면, 함수는 그자리에 남아있고 변수만 호이스팅이 된다.

 

 

호이스팅을 언급하는 이유는,

호이스팅이 되는지에 따라 실무에서 엄청난 차이가 나기 때문에 호이스팅을 언급하는 것이다.

 

만약, 소스코드가 엄청 길다고 가정해보자! (5만줄!)

아래 코드와 같이 sum 함수가 두 개가 존재하고 함수 내용이 다를 경우의 코드를 실행하는 경우,

호이스팅에 의해서 두 함수 모두 끌어올려지게 될 것이고 케스케이딩 원칙에 의해서 나중에 호이스팅된 함수가 먼저 있던 함수를 덮어 씌우게 될 것이다. 그 결과, 원하는 결과가 나오지 않게 된다. 

 

 

 

 

위와 같은 경우가 아니더라도,

함수 선언문은 위에서 아래로 읽어 내려가면서 실행한다는 지극히 인간적인 상식에서 벗어나 있어서, 가독성 측면에서 떨어져 좋지 않게 된다.  

 

위에서 아래로 코드를 읽어 가다가 갑자기 생뚱맞은 함수가 등장해, 도대체 어디에서 쓰이는지 혹은 어디에 있는지 한참을 찾아보다가 5000번째 줄에 있는 걸 발견한다면, 어떨지 상상이 되겠죠?

 

더글라스 크락포드 아저씨는 함수 선언식 대신에 함수 표현식을 쓰도록 권하고 있다.

안전하고 예측 가능한 소스가 되기 때문이다.

 

 

함수선언문 방식이 꼭 필요한 경우는 즉시 실행 함수나 대입하는 익명 함수 선언뿐입니다.

엄밀히 말하면 위 두 경우 모두 선언 시 변수에 할당하는 과정이 없으므로 '호이스팅 등으로 인해 종종 문제를 일으키는' 함수 선언문의 범주에는 속하지 않는다고 할 것입니다. 

그밖에는 모든 함수를 함수 표현식만으로 구성해도 됩니다.