[JavaScript] 함수의 호이스팅, 스코프, 전역함수, 지역함수

함수의 호이스팅

일반 함수 정의문(=이름이 있는 함수)의 경우 호이스팅 기능을 지원한다.
함수의 호이스팅은 함수 정의문보다 함수 호출문이 등장하더라도 해당 함수를 정상적으로 실행하는 것을 말한다.
일반 함수가 정의되면 자바스크립트 엔진 메모리 공간 안에 함수의 이름을 이용하여 미리 저장해둔다.
저장된 일반 함수는 해당 함수보다 호출문이 먼저 등장하더라도 정상적으로 호이스팅에 의해 실행된다.

하지만 익명함수(=이름이 없는 함수)의 경우 호이스팅 기능이 적용되지 않는다.
그렇기 때문에 함수 정의가 먼저 이루어진 다음 그 후에 함수 호출문이 등장해야 함수가 실행된다.

// 1. 일반 함수 정의문
// 함수호출문이 먼저 등장해도 호이스팅에 의해 정상 실행된다.
	함수명();                   
	function 함수명(){ 자바스크립트 코드; }

// 2. 익명 함수 정의문
// 호이스팅 기능이 없기때문에 함수정의문보다 먼저 등장했을 때 오류가 발생한다.
	변수명(); 
	let 변수명 = function(){ 자바스크립트 코드; }       
    
// 함수 이후에 호출하여야한다.
	변수명();

---

 함수 스코프

함수 스코프란 함수의 유효 범위를 뜻한다.
함수도 변수처럼 전역함수(global function)와 지역함수(local function)로 나눠진다.
전역 함수는 자바스크립트 어디서든 사용할 수 있는 함수를 말하며, 지역 함수는 함수 스코프 안에서만 사용할 수 있는 함수를 말한다.
함수 안에 함수로 들어갔을 경우를 중첩함수( Nested function ) 라고 말하며 중첩함수는 지역함수로 정의된다.

<script>
   // 전역 함수. 스크립트 내부 전역에서 사용할 수 있다.
     function 함수명(){            
     	// 지역함수. 함수 안에 들어있는 함수로, 지역 스코프를 가진다.
       function 함수명2(){        
         자바스크립트코드;
       }
     }
</script>

---

중첩 함수

함수 안에 함수를 넣는 것을 중첩함수(Nested function)이라고 한다.
중첩함수를 사용하는 이유는 여러가지가 있는데, 몇가지만 설명해 보겠다.

---

1. 함수명이 겹치는 오류 최소화

먼저, 중첩함수를 사용할 경우 변수명과 함수명이 겹치는 오류를 최소화 할 수 있다.
자바스크립트에서는 함수를 변수와 같이 값(Value)로 다룬다.
같은 함수명으로 선언하였을 경우 앞선 함수의 값이 사라지는 현상이 생기며 오류가 발생하는 것이다.
하지만 중첩변수를 사용했을 경우 그 범위가 지역변수로 제한되며 이러한 현상을 방지할 수 있다.

// 전역함수 outerFnc와 지역함수 innerFnc
      function outerFnc() {
        function innerFnc() {
          alert("지역함수");
        }
      }

// 전역함수 innerFnc
      function innerFnc() {
        alert("전역함수");
      }
      
// 전역함수 innerFnc 만 호출된다. 지역함수 innerFnc는 outerFnc함수 안에서 호출 할 수 있다.
      innerFnc(); 
      
// 호출 안됨. 지역함수 innerFnc를 먼저 호출하여야한다.
      outerFnc();

---

2. 함수의 사용의도를 빠르게 파악

중첩함수에서 내부에 작성된 함수는 외부에 작성된 함수 내에서만 사용될 것임을 명시적으로 나타낸다.

이런 경우 우리는 함수가 작성된 의도를 직렬로 작성된 코드보다 빠르게 파악할 수 있다.

// 전역함수 outerFnc내부에서만 사용될 지역함수 innerFnc
      function outerFnc() {
        function innerFnc() {
          alert("지역함수");
        }
      }

중첩함수에 대한 다른 의견

https://siyoon210.tistory.com/162

자바스크립트의 중첩 함수(Nested functions)는 언제 사용해야 할까?

 

---

지역함수 호출 - 클로저(closure)

전역함수는 값이 전역에 남기 때문에 언제는 함수명으로 호출했을 경우 그 값이 반환된다.
하지만 중첩함수의 경우 범위가 지역으로 한정되어 지역 내에서 함수를 실행시키지 않으면 값이 사라진다.
보통 return문으로 함수의 값을 반환하여 외부 스코프와 함수 내부를 이어주는데 이러한 기법을 '클로저'라고 한다.

 

예를들어, 전역함수 myFnc는 단독함수로 함수명으로 호출했을경우 오류 없이 실행된다.
하지만 중첩함수인 outerFnc는 호출하는데 여러 과정이 필요하다.

outerFnc는 전역함수이지만 내부 함수의 값이 실행되지 않았기 때문에 값이 존재하지 않는 것과 같다.

그렇기 때문에 innerFcn를 먼저 실행해야하는데, innerFnc는 지역함수 이기때문에 전역에서 실행하려고 할 경우 존재하지 않는 값으로 반환된다. 이 값을 반환하고 싶다면 outerFnc함수 내부에서 실행해야 한다.

 

// 전역함수 myFnc
      function myFnc() {
        alert("전역함수");
      }

// 전역함수 outerFnc와 지역함수 innerFnc
      function outerFnc() {
        function innerFnc() {
          alert("지역함수");
        }
      }
      
// 함수 호출
      myFnc();
      innerFnc(); // 실행안됨. outerFnc가 먼저 호출되어야하고 지역 스코프를 가지고 있다.
      outerFnc(); // 실행안됨. innerFnc가 호출되지 않았다.
      innerFnc(); // 실행안됨. 지역 스코프이기 때문에 이곳에서는 호출되지 않는다.

 

outerFnc 함수 내에서 return innerFnc 혹은 innerFcn()와 같이 함수를 호출했다면 이제 전역구간에서 outerFnc 함수를 호출 했을 때 값을 반환받을 수 있다.

      function outerFnc() {
        function innerFnc() {
          alert("지역함수");
        }
        innerFnc()	//outerFnc 안에 innerFnc의 호출문을 넣어야한다.
      }

      outerFnc();	// 그 이후 outerFnc를 호출하면 호출된다.

 

+) 함수의 값을 반환하는 return 문 알아보기

 

+) 자바스크립트 클로저란?