📃 진짜 많이 언급되는 것 같습니다. Hoisting은 자바스크립트에서 변수 선언과 함수 선언이 해당 코드 최상단으로 끌어올려지는 현상을 의미합니다
💻CODE
console.log(add(2, 4)); // 6
function add(a, b) {
return a + b;
}
⬆️ 뭔가 이상한 점이 보이시나요? add(2, 4)를 함수가 선언되기 이전에 사용을 했는데, 콘솔값이 출력이 됩니다. 이러한 현상을 "호이스팅"이라고 합니다.
💻CODE
console.log(func());
let func = function hello() {
console.log("hello")
}
⬆️ 이러한 경우는 실행이 될까요?
⬆️ 정답은 No 입니다. 왜 그럴까요? 호이스팅되어서 가장 상단으로 올라가야하는게 아닌가 생각할 수 있습니다. 다음과 같은 코드는 아래와 같이 진행됩니다
💻CODE
// 호이스팅된 코드 구조
let func; // 변수 선언은 호이스팅됨
console.log(typeof func); // undefined (함수의 값은 할당되기 전이므로 undefined)
func = function hello() { // 함수 표현식이 변수에 할당됨
console.log("hello");
}
console.log(func()); // "hello" 출력
⬆️ let func이라는 변수 선언은 값이 할당되지 않고, 호이스팅 되어서 상단으로 올라갑니다. 그래서 선언되지 않은 어떤 값을 함수로 호출할 수 없기때문에 에러가 발생하고, 그 이후에 할당이 되게됩니다.
💡 다양한 함수 선언 방법 및 종류
1️⃣ 콜백 함수(Callback Function) React에서 진짜진짜 많이 언급되는 함수로, 개발자가 코드를 통해서 명시적으로 선언하는 것이 아닌, 잠깐‼️여기서 명시적으로 선언한다는 의미는 함수의 동작,타입,결과가 명확하게 드러나는 것을 의미합니다
💻CODE
function add(a,b) {
return a + b
}
⬆️ 이 함수는 명시적으로 선언되었나요?
아니죠 우리는 타입,결과를 알 수 없습니다. add()함수는 숫자가 입력될수도 문자열이 입력될 수도 있습니다. 그럼 반환값도 당연히 예측할 수 없겠죠. 이러한 함수는 "암시적으로 선언"되었다고 합니다
💻CODE
function add(a:number,b:number) {
return a + b
}
⬆️ 위에 타입스크립트를 통해 타입을 명시해주어야 명시적 함수라고 할 수 있습니다.
📃 그럼 다시 콜백함수로 돌아와서, 콜백함수는 "함수로 전달되는 함수"입니다.
💻CODE
function calc(callback, a, b) {
console.log(callback(a, b))
}
const add = function (a, b) {
return a + b;
}
const sub = function (a, b) {
return a - b;
}
calc(sub, 2, 4)
⬆️ 위에 코드를 보면 왜 콜백함수가 필요한지 이해가 가시나요? callback 함수는 어떤 함수에 인수로서 전달되어 필요한 시점에 호출됩니다. 계산기라는 calc()가 있다고 할때, 우리는 따로 구현해놓은 add, sub를 전달해줌으로서 유연하게 a,b값을 처리할 수 있습니다. 그럼 위에 코드에서는 뭐가 콜백함수죠? add, sub를 Callback 함수라고 합니다!
2️⃣ 이벤트 함수(Event Function) 역시 정말 많이 사용되는 함수로서 특정 이벤트에 호출되는 함수를 의미합니다. 여기서 언급하는 특정 이벤트란 사용자의 Click이 있을 수 있겠죠.
💻CODE
<button id="myButton">Click Me</button>
<script>
// 이벤트 함수 정의
function handleClick() {
alert("Button clicked!");
}
// 버튼 요소에 이벤트 핸들러 등록
const button = document.getElementById("myButton");
button.addEventListener("click", handleClick);
</script>
3️⃣즉시 실행 함수(Immediate Invoked Function) 이 함수는 정의함과 동시에 실행되는 함수로서 아래의 코드와 같습니다. 저는 프로젝트를 진행하면서 사용해보지는 못한 것 같네요
4️⃣ 화살표 함수(Arrow Function) 진짜 별표 10만개죠. 진짜 많이 사용되는 함수로서 그만큼 코드를 혁신적으로 단축시켜줍니다.
💻CODE
// 1단계: 기명 함수 표현식 (Named Function Expression)
const add = function func(a, b) {
return a + b;
};
// 2단계: 익명 함수 표현식 (Anonymous Function Expression)
const add = function(a, b) {
return a + b;
};
// 3단계: 화살표 함수 (Arrow Function - 기본 형태)
const add = (a, b) => {
return a + b;
};
// 4단계: 화살표 함수 (Arrow Function - 간결한 형태)
const add = (a, b) => a + b;
⬆️자바를 사용하던 저는 이 문법이 정말 혁신적이라고 생각했습니다. 물론 자바에도 화살표 함수가 존재하지만, 자바는 정적 언어이고 자바스크립트는 동적 언어이기 때문에 자바스크립트에서 화살표 함수가 제공하는 유연함이 더 돋보이는 것 같습니다.
📝 SUMMARY
📌 자, 여기서 가장 중요한 점은 화살표 함수는 호이스팅이 적용되지 않는다는 점입니다. 호이스팅에 대해 살펴보았듯이, 선언된 변수는 끌어올려지고 그 후에 함수 표현식이 할당되기 때문에, 이 점을 고려하여 프로젝트에서 적절한 시점에 사용해야 할 것 같습니다
