[리액트 기초 스터디] JavaScript 함수와 호이스팅

목차 (OPEN)

• 📑 JavaScript 함수와 호이스팅 (Hoisting)
• 🟪 함수 선언과 호출
• 🟨 중첩 함수 (Nested Function)
• 🟥 호이스팅(Hoisting)이란
• 📚 결론

 

 

 

 

 

 

📑 JavaScript 함수와 호이스팅 (Hoisting)

자바스크립트에서 함수를 선언하고 사용하는 방식은 다른 언어와 비교했을 때 조금 특이하다.

특히 호이스팅(Hoisting)이라는 기능 덕분에, 함수 선언이 코드 실행 시점보다 뒤에 있어도 정상적으로 호출이 가능하다.

 

따라서 이번 포스팅에서는 예제 코드를 통해 함수 호출, 중첩 함수, 그리고 호이스팅에 대해 정리해보고자 한다.

 

 

---

🟪 함수 선언과 호출

가장 기본적인 함수는 다음과 같이 선언하고 호출할 수 있다.

function getArea(width, height) {
  let area = width * height;
  return area;
}

let area1 = getArea(10, 20);
console.log(area1); // 200

let area2 = getArea(30, 20);
console.log(area2); // 600

 

getArea라는 함수는 width와 height를 받아서 넓이를 계산한 뒤 반환해준다.

함수 호출은 함수명(인자) 형태로 실행하며, 반환된 값은 변수에 저장할 수 있다.

 

 

 📌 참고

자바스크립트에서는 함수도 일급 객체(First-class Citizen)이기 때문에

값처럼 변수에 할당하거나 다른 함수의 인자로 전달할 수 있다.

// 함수 자체를 변수에 할당
let greet = function() {
  console.log("안녕하세요!");
};

greet(); // "안녕하세요!"

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

let double = multiplier(2);
console.log(double(5)); // 10

let triple = multiplier(3);
console.log(triple(5)); // 15

 

 

---

🟨 중첩 함수 (Nested Function)

자바스크립트에서는 함수 안에 또 다른 함수를 선언할 수 있는데, 이를 중첩 함수라고 한다.

function outer() {
  console.log("outer function");
  function inner() {
    console.log("inner function");
  }
  inner();
}
outer();

// 출력 결과
// "outer function"
// "inner function"

 

이렇게 선언된 inner 함수는 오직 outer 함수 안에서만 접근이 가능하다.

이를 활용하면 외부에서 직접 호출할 수 없으므로 캡슐화(encapsulation)효과를 낼 수 있고,

외부에서 불필요하게 접근하지 못하도록 막을 수도 있다.

 

 

---

🟥 호이스팅(Hoisting)이란

호이스팅은 자바스크립트 엔진이 코드를 실행하기 전에

변수와 함수 선언을 메모리의 최상단으로 끌어올리는 동작을 말한다.

 

sayHello(); // "Hello!"

function sayHello() {
  console.log("Hello!");
}

 

이처럼 sayHello 함수가 선언되기 전에 호출해도 정상적으로 잘 실행된다.

 

 

📌 참고

그러나 모든 함수가 똑같이 호이스팅 되는 것은 아니다.

greet(); // "Hi"

function greet() {
  console.log("Hi");
}

greet(); // ❌ TypeError: greet is not a function

let greet = function() {
  console.log("Hi");
};

 

두 예제 코드의 차이가 뭘까?

 

바로 첫 번째 예시 코드는 함수 선언문이어서 호이스팅이 되지만,

두 번째 예시 코드는 함수 표현식이라는 점이다.

 

그래서 두 번째 예시 코드에서는 함수 표현식이 변수로 취급때기 때문에

호이스팅 시점에 undefined로 초기화되어 에러가 발생하게 된다.

(화살표 함수 또한 함수 표현식이기 때문에 동일한 규칙이 적용된다.)

 

 

📌 참고

또한, 자바스크립트 엔진은 코드를 실행하기 전에 var도 호이스팅 한다고 한다.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

 

내부적으로는 아래와 같은 순서로 동작한다고 보면 된다.

var a;          // 선언만 위로 끌어올려짐 (undefined로 초기화)
console.log(a); // undefined
a = 10;
console.log(a); // 10

 

이처럼 var는 호이스팅 시 자동으로 undefined로 초기화되기 때문에

선언 전에 접근해도 에러가 나는게 아니라 undefined가 나온다.

문제는, 이렇게 되면 실수로 선언 전에 접근했을 때 버그를 발견하기 어렵다는 점이다.

 

 

그래서 보통은 let과 const를 사용하는 것이 좋다고 한다.

물론, let과 const도 사실 선언 자체는 호이스팅 되기는 하지만,

호이스팅된 시점부터 실제 선언문이 실행도기 전까지 일시적 사각지대(TDZ)에 머물기 때문에 무조건 에러를 던져준다고 한다.

console.log(b); // ❌ ReferenceError: Cannot access 'b' before initialization
let b = 10;
console.log(b); // 10

 

내부적으로는 아래와 같은 순서로 동작한다고 보면 된다.

// b는 호이스팅되었지만, TDZ에 있기 때문에 선언문을 만나기 전까지 접근 불가
console.log(b); // ReferenceError
let b = 10;     // 여기서 비로소 초기화됨
console.log(b); // 10

 

즉, let과 const는 선언만 위로 끌어올려지고 초기화는 실제 코드 위치에서 된다는 규칙 때문에

선언문 이전에 접근하면 무조건 에러를 던지는 것이고, 이를 TDZ라고 부르는 것이다.

 

 

---

📚 결론

다른 언어에서는 보기 힘들었던 호이스팅 특성을 정리하기는 했지만,

그래도 일관성 있게 함수를 정의하는 게 더 좋다고 생각해서

앞으로도 파일 상단이나 모듈에 함수 선언을 모아두는 방식을 쓸 것 같기는 하다.

 

특히 함수 선언문에는 호이스팅이 적용되지만, 함수 표현식에는 호이스팅이 적용되지 않는다는 점 때문에

호이스팅 덕분에 잘 돌아간다에 의존하기 보다는, 함수를 먼저 선언하고 호출하는 게 좋을 것 같다.