함수 선언문과 함수 표현식
↳ 함수를 새롭게 정의할 때 쓰여지는 방식
함수 선언문
↳ function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미
함수 표현식
↳ 정의한 function을 별도의 변수에 할당하는 것을 의미
↳ 기명 함수 표현식 : 함수명을 정의한 함수 표현식
↳ 익명 함수 표현식 : 함수명을 정의하지않은 함수 표현식
ㅤㅤㅤ↳ 익명 함수 표현식은 외부에서는 함수명으로 함수를 호출할 수 없다.
일반적으로 함수 표현식은 익명 함수 표현식을 말한다.
함수 선언문과 함수 표현식의 실질적인 차이
원본 코드ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ호이스팅을 마친 상태
console.log(sum(1,2)); | var sum = function sum (a, b) {
consolt.log(multply(3,4)); | return a + b;
| };
|
function sum (a,b) { | var multiply;
return a + b; |
}; |
| console.log(sum(1,2));
var multiply = function (a,b) { | console.log(multiply(3,4));
return a * b; |
}; | multiplay = function (a,b) {
| return a * b;
| };↳ 함수 선언문은 전체를 호이스팅한 반면 함수 표현식은 변수 선언부만 호이스팅을 한다.
ㅤ 그렇기에 함수도 하나의 값으로 취급할 수 있다 말한다.
↳ 함수를 다른 변수에 값으로써 할당한 것이 곧 함수 표현식이다.
우리는 글을 위에서 아래로, 죄에서 우로 읽는 문화환경에서 살아왔기에 아래에서 선언한 것이 위에서 문제 없이 실행되는 것을 받아들이기 어려울 수 있다.
함수 선언문에서의 극단적인 예시
A 개발자가 전역 공간에 sum이라는 함수를 정의했다고 가정 해보자
이 함수는 단순히 두 숫자의 합을 반환하는 역할을 하며, 여러 곳에서 잘 쓰이고 있었다.
그런데 이후 B 개발자가 같은 이름의 sum 함수를 다시 정의했고,
이번에는 숫자를 더한 결과를 문자열 형태로 반환하는 함수다.
자바스크립트에서 함수 선언문은 모두 위로 끌어올려지는(호이스팅) 특징이 있기 때문에,
동일한 이름의 함수가 있으면 나중에 선언된 함수가 기존 함수를 덮어씌우게 된다.
그 결과, 원래는 숫자를 반환해야 하는 함수가 의도치 않게 문자열을 반환하게 되고, 프로젝트 전반에 알 수 없는 버그가 퍼지게 된다.
더 큰 문제는, 잘못된 값이더라도 자바스크립트의 암묵적 형변환 덕분에 오류가 발생하지 않는 경우가 많다는 점이다.
즉, 문제는 터지지만 원인을 찾기 어렵고, 디버깅은 엉뚱한 곳에서 시작될 수 있다.
↓
만약 함수 표현식이었다면?
함수 표현식은 선언된 이후부터만 효력이 생기기 때문에,
이전 코드에서 함수를 호출하면 즉시 에러가 발생한다 → 빠른 원인 파악 가능
중복 정의가 발생해도 어디서 덮어씌워졌는지 명확하게 드러난다.
즉, 함수 표현식은 같은 이름의 함수가 여러 번 선언되더라도 문제의 원인을 훨씬 쉽게 찾을 수 있도록 돕는다.
↓
이를 통한 협업에서의 교훈
전역 공간에 함수를 선언하는 습관은 위험하다.
동일한 이름의 함수를 중복 선언하지 않도록 관리해야 한다.
협업 환경에서는 함수 표현식을 활용하는 것이 훨씬 안전하다.
📚 참고자료
