[TCP School/자바스크립트] 함수 - 함수의 유효 범위

대부분의 프로그래밍 언어에서는 블록 내에서 정의된 변수를 블록 외부에서 접근할 수 없다.

이러한 블록을 기준으로 하는 유효 범위를 블록 단위의 유효 범위라고 한다.

 

하지만 자바스크립트는 다른 언어와 달리 함수를 블록 대신 사용한다.

자바스크립트에서 함수는 자신이 정의된 범위 안에서 정의된 모든 변수 및 함수에 접근할 수 있다.

 

전역 함수는 모든 전역 변수와 전역 함수에 접근할 수 있다.

반면, 다른 함수 내에 정의된 내부 함수는 그 함수의 부모 함수에서 정의된 모든 변수 및 부모 함수가 접근할 수 있는 모든 다른 변수까지도 접근할 수 있다.

var x = 10, y = 20;

// sub()는 전역 함수
function sub() {
     return x - y;  // 전역 변수인 x, y에 접근
}

document.write(sub() + '<br>');  // -10

// parentFunc()는 전역 함수
function parentFunc() {
     var x = 1, y = 2;  // 전역 변수와 같은 이름으로 선언하여 전역 변수의 범위를 제한
     // add()는 내부 함수
     function add() {
          return x + y;  // 전역 변수 x, y가 아닌 지역 변수 x, y에 접근
     }
     return add()
}

document.write(parentFunc());  // 3

---

함수 호이스팅(hoisting)

자바스크립트에서 함수의 유효 범위라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 의미이다.

 

그런데 이 유효 범위의 적용이 변수가 선언되기 전에도 똑같이 적용된다.

이러한 자바스크립트의 특징을 함수 호이스팅이라고 한다.

즉, 자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작한다.

var globalNum = 10;

function printNum() {
     document.write('지역 변수 globalNum 선언 전의 globalNum의 값은 ' + globalNum + '입니다.<br>');  // undefined
     var globalNum = 20;
     document.write('지역 변수 globalNum 선언 후의 globalNum의 값은 '  + globalNum + '입니다.');  // 20
}

printNum()

위의 예제는 아래와 같은 코드로 변경되어 처리된다.

 

var globalNum = 10;

function printNum() {
     var globalNum;
     document.write('지역 변수 globalNum 선언 전의 globalNum의 값은 ' + globalNum + '입니다.<br>');  // undefined
     globalNum = 20;
     document.write('지역 변수 globalNum 선언 후의 globalNum의 값은 '  + globalNum + '입니다.');  // 20
}

printNum()

---

TCP School의 강의 내용을 정리한 포스트입니다.

http://www.tcpschool.com/javascript/intro

코딩교육 티씨피스쿨