[JavaScript] 함수 선언문과 함수 표현식, 화살표 함수 그리고 호이스팅

🐣 함수선언, 함수표현식, 화살표함수!

---

최근 알고리즘에 대해서만 정리를 했었는데, 주제의 다양성을 위해 다시 JavaScript 개념을 정리하여 다뤄볼까한다. 오늘의 주제는 함수선언문, 함수표현식 그리고 화살표함수이다!_! 그리고 호이스팅과 TDZ 까지 살펴볼건데, 쉽게 쉽게 정리를 할테니~ 오늘도 스따뜨!!

 

둘리 호이 짤

 

 

🐣 함수 선언형

---

1. 개념 및 특징 

함수 선언문은 함수 이름과 함께 "function" 키워드를 사용하여 함수를 정의하는 방식. 함수가 호이스팅되기 때문에 함수 정의 이전에 호출해도 동작

 

• 함수 선언형은 function 키워드를 사용하여 함수를 선언
• 스크립트나 함수 내에서 어디서든 호출할 수 있음
• 함수 선언형은 호이스팅으로 인해 선언부가 코드 상단으로 끌어올려짐

 

2. 코드로 살펴보기

function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // Output: 5

function add(a, b) {
  return a + b;
}

console.log(add(5, 7)); // Output: 12

 

• 이 예에서는 'add' 함수가 함수 선언을 사용하여 선언
• 함수 선언은 완전히 호이스팅
• 즉, 함수 이름과 함수 본문이 모두 해당 범위의 맨 위로 호이스팅
• 결과적으로 코드에서 선언하기 전에 add 함수를 호출 가능

함수 선언: 전체 함수(이름과 본문 모두)가 호이스팅. 함수를 선언하기 전에 호출 가능

 

🐣 함수 표현식

---

1. 개념 및 특징 

함수 표현식은 함수를 변수에 할당하여 정의하는 방식으로, 함수가 변수에 저장되어야 호출 가능. 함수 표현식은 변수에 할당된 이후에만 사용

 

• 함수 표현식은 변수에 함수를 할당하여 선언하며
• 선언 이전에 호출하면 에러가 발생
• 함수 표현식은 변수의 스코프에 따라 동작
• 사실 함수 표현식도 호이스팅이 되기는 하지만 변수가 호이스팅 되는 것

함수표현식도 변수 자체가 호이스팅되지만 함수에 대한 할당은 런타임에 발생함

 

• 함수 표현식에서는 함수 정의가 아닌 변수 선언만 끌어올려짐
• 변수는 해당 범위의 맨 위로 끌어올려지고 '정의되지 않음 undefined'으로 초기화
• 실제 함수 할당은 할당 문이 실행되는 지점인 런타임에 발생

 

2. 코드로 살펴보기

const add = function(a, b) {
  return a + b;
};

console.log(add); // Output: ReferenceError: Cannot access 'add' before initialization

const add = function(a, b) {
  return a + b;
};

console.log(add(5, 3)); // Output: 8

 

• 이 예에서는 add 변수가 const를 사용하여 선언되고 함수 표현식이 할당
• var와 달리 const(및 let)로 선언된 변수는 undefine으로 초기화되지 않으며
• 블록 시작부터 선언이 나타날 때까지 "일시적 데드존"
• 이는 선언 전에 add에 액세스하려고 하면 ReferenceError가 발생한다는 것을 의미

변수 선언(const 사용): 선언은 해당 범위의 맨 위로 끌어올려지지만 초기화되지는 않음. 변수는 할당이 발생할 때까지 "일시적 데드존"에 있음.
기능 할당: 할당은 런타임에 발생. 할당 전에 변수에 액세스하려고 하면 ReferenceError가 발생

 

🐣 화살표 함수

---

1. 개념 및 특징 

• 화살표 함수는 자체 this, arguments, super 또는 new.target을 바인딩하지 않는 함수 표현식을 작성하기 위한 간결한 구문
• 화살표 함수 표현식(화살표 함수 expression)은 함수 표현식에 대한 간결한 대안으로, 약간의 의미적 차이와 의도적인 사용상의 제한을 가지고 있음

 

2. 코드로 살펴보기

const add = (a, b) => a + b;

 

console.log(myArrowFunction); // Output: undefined

var myArrowFunction = () => {
  console.log("Hello, world!");
};

myArrowFunction(); // Output: Hello, world!

 

• 이 예에서는 myArrowFunction 변수가 호이스팅되고 undefine으로 초기화
• 화살표 함수 자체는 호이스팅되지 않으며 할당은 런타임에 발생
• 따라서 할당 전에 'myArrowFunction'을 호출하면 오류가 발생하지만 할당 전에 변수를 기록하면 '정의되지 않음'이 표시

화살표 함수에 대한 변수 선언이 호이스팅,
화살표 기능 할당은 호이스팅 단계가 아닌 런타임에 발생

 

🐣 함수 선언형 vs 함수 표현식

---

1. 호이스팅

• 함수 선언문은 호이스팅에 의해 코드의 상단으로 끌어올려지므로 정의 이전에도 호출 가능
• 반면, 함수 표현식은 변수 할당이 이루어진 이후부터 호출

 

2. 익명 함수

• 함수 선언문은 함수 이름이 필수적이지만, 함수 표현식은 익명 함수로 정의할 수 있음

 

3. 표현식으로 활용

• 함수 표현식은 변수에 할당되므로, 다른 함수의 인자로 전달하거나 반환 값으로 사용하는 등 다양한 상황에서 활용 가능

 

 

🐣 호이스팅

---

1. 개념 및 특징 

호이스팅은 컴파일 단계 중에 변수 및 함수 선언이 포함 범위의 맨 위로 이동되는 동작

 

• JavaScript에서 호이스팅은 컴파일 단계 중에 변수 및 함수 선언이 포함 범위의 맨 위로 이동되는 동작
• 즉, var로 선언된 변수는 정의되지 않음으로 초기화되는 반면, 함수 선언은 코드에 정의되기 전에 호출 가능
• 그러나 'let' 및 'const' 선언은 같은 방식으로 끌어올려지지 않으며 해당 정의를 만날 때까지 시간적 데드존에 남음.

 

2. 주의할 점?

호이스팅은 코드의 가독성과 예측 가능성을 낮출 수 있으므로, 변수 및 함수를 가능한한 선언한 위치에 가까이 하고, 미리 초기화하여 사용하는 것이 권장

 

3. 장단점?

장점

• 유연성: 함수와 변수를 선언하기 전에 사용할 수 있으므로 때로는 더 깔끔하고 읽기 쉬운 코드가 생성될 수 있음.
• 함수 범위 명확성: 함수 선언의 경우 함수 범위가 블록 범위가 아닌 포함 함수로 지정된다는 점을 명확히 하는데, JavaScript의 함수 범위 규칙에 따름

 

단점

• 잠재적인 버그: var로 선언된 변수는 undefined으로 끌어올려지고 초기화. 이는 값이 할당되기 전에 액세스하면 버그가 발생할 수 있음.
• 가독성 문제: 호이스팅은 코드의 실제 실행 순서를 모호하게 만들어 호이스팅 규칙에 익숙하지 않은 개발자가 이해하기 어렵게 만들 수 있음.
• 엄격 모드 차이점: 엄격 모드(``use strict';`)에서는 'var'을 사용하여 우발적인 전역 변수가 생성되지 않음. 이는 호이스팅 동작을 변경하고 코드가 제대로 구조화되지 않은 경우 예상치 못한 결과를 초래할 수 있음.

 

요약하면 호이스팅은 유연성을 제공하고 JavaScript의 범위 지정 규칙에 부합할 수 있지만 변수 초기화 및 코드 명확성과 관련된 잠재적인 함정도 발생. 변수 선언에 'let' 및 'const'를 사용하고 명확한 코드 구성을 보장하는 등의 최신 JavaScript 방식을 사용하면 이러한 문제 중 일부를 완화 가능.

 

 

🐣 TDZ (Temporal Dead Zone)

---

1. 개념

• TDZ(Temporal Dead Zone)는 변수가 선언된 위치부터 초기화될 때까지의 영역
• let과 const 변수는 선언되었지만 아직 초기화되지 않은 상태에서 접근하려고 하면 TDZ에 해당하며 에러가 발생
• 이후 변수가 초기화되면 TDZ를 벗어나 정상적으로 사용 가능.

쉽게 말하면, 변수가 생성(=변수선언)되고 메모리에 처음 값이 저장(=초기화) 될 때까지의 영역으로
메모리에 초기 값이 없는 상태에서 접근하려고 하면 에러가 발생한다는 것!

 

• *ES6의 let과 const는 변수를 블록의 상단으로 호이스팅 하지만 초기화하지는 않음! 변수가 선언되기 전에 블록 안에서 사용할 수 없는데, 이 위치를 시간상 사각지대(Temporal Dead Zone, TDZ)라고 표현. (ReferenceError 발생)
• 참고로 var 선언의 경우 undefined로 초기화 되기 때문에 TDZ가 없음!_!

 

TDZ에 대해서 조금 더 자세히 알고싶다면 이전 정리글 참고!

[JavaScript] TDZ(Temporal Dead Zone) : 변수의 시간 여행~

 

---

이제 호이스팅과 TDZ까지 쉽게 설명 가능!