함수의 선언식 vs 표현식

솜주먹·2022년 7월 21일

JavaScript

📢안내

개발자를 꿈꾸는 뉴비입니다.
틀린 부분이 있으면 지적 부탁드립니다.

📌 선언식 vs 표현식

📖 함수 선언식(function declaration)

변수 선언을 var,let,const로 시작하는 것처럼 function으로 선언
선언된 함수는 차후 사용을 위해 저장되며 호출(Call)될 때 실행

📖 함수 표현식(function expression)

변수에 함수를 할당
값으로서의 함수로 사용 시

📖 선언식과 표현식 차이점

방식	로드 방식	호이스팅	장점	단점
선언식	코드가 실행되기 전 로드	O	코드상 상위에 호출 가능
표현식	인터프리터[1]가 해당 함수의 코드 줄에 도달 할때만 로드	X	1. 가독성로 사용⬆ 2. 클로저(Closure)[2]로 사용 3. 인자로 사용	코드상 상위에 호출 불가

✍ 예시

로드 방식

fd()
fe()					// ReferenceError
function fd() {
  console.log('선언식 입니다.')
}
let fe = () => {
  console.log('표현식 입니다.')
}
fd()
fe()

클로저로 사용

function tabsHandler(index) {
    return function tabClickEvent(event) {
        // 바깥 함수인 tabsHandler 의 index 인자를 여기서 접근할 수 있다.
        console.log(index); // 탭을 클릭할 때 마다 해당 탭의 index 값을 표시
    };
}

var tabs = document.querySelectorAll('.tab');
var i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = tabsHandler(i);
}

// 클로저 미사용시
// for (i = 0; i < tabs.length; i += 1) {
//     tabs[i].onclick = function (event) {
//       console.log(i); // 어느 탭을 클릭해도 항상 tabs.length (i 의 최종 값) 이 출력
//     };
// }

// 클로저 미사용을 좀더 풀어서 쓰면
// var logIndex = function (event) {
//   console.log(i); // 3
// };

// for (i = 0; i < tabs.length; i += 1) {
//     tabs[i].onclick = logIndex;
// }

인자로 사용(콜백)

function test(callback) {
    callback();
}
function cbFunction1 {
	console.log('콜백 함수1')
}
const cbFunction2 = () => {
  console.log('콜백 함수2')
}
test(cbFunction1)
test(cbFunction2)

// 중간 변수 저장없이 사용
test(() => {			// 인자로 사용
  console.log('콜백 함수3')
})
// filter((e) => e > 0) 이것도한 인자로 사용과 동일