[자바스크립트]함수 이야기 4탄 - 함수 범위 스코프(scope) 이해하기.

범위, 스코프(Scope)란?

범위 == 스코프이며 스코프라는 용어로 통일하겠습니다.

자바스크립트에서 스코프는 변수와 함수에서 중요한 역할을 담당합니다.

간단하게 의미를 살펴볼게요.

스코프 즉, 범위는 사용될 수 있는 위치를 말합니다.

 

함수를 만들 때 함수 내부에 변수 또는 함수를 선언하는 경우가 있습니다.

변수 또는 함수가 함수 내부에서 선언되었다는 의미는

함수의 범위 내에서만 접근이 가능하다는 의미입니다.

함수 밖에서는 함수 내부의 변수 또는 함수에 접근이 안된다는 의미로

오류가 발생합니다.

 

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

함수 내부에 선언된 내부 함수는 그 부모 함수의 변수와

그 부모 함수가 접근할 수 있는 다른 변수에 접근이 가능하답니다.

 

다음 예를 보면서 다시 설명해볼게요.

var n1 = 10, n2 = 20;
 
function mult() {
  return n1 * n2;
}
 
console.log(mult());

위 소스를 분석해보면 다음과 같습니다.

전역 변수 n1, n2를 선언했습니다. 

그리고 전역 함수 mult를 만들고

return 값으로 전역 변수 n1과 n2를 사용했습니다.

n1, n2는 함수 내부에 선언된 변수가 아니지만

전역 함수는 전역 변수에 접근이 가능하다는 것을

확인할 수 있습니다.

 

다음 예를 보겠습니다.

var n1 = 10, n2 = 20, nm = "Mark";
 
function getData(){
    var n1 = 5, n2 = 3;
    
    function add(){
        return nm + " number is " + (n1 + n2);
    }
    
    return add();
}
 
console.log(getData());
 

전역 변수 n1, n2 그리고 nm을 선언했습니다.

전역 함수 getData()를 선언하고 내부 변수 n1, n2를 

전역 변수와 같은 이름으로 선언했습니다.

궁금하네요.???

그리고 내부 함수 add()를 선언하고 내부 함수에서

n1, n2 그리고 nm을 참조해서 return 하고 있습니다.

add() 함수는 getData() 함수의 내부 함수인데

전역 변수와 함수 내 지역 변수 이름이 같은데

어떤 변수를 참조하고 있을지 궁금하네요.

또한 nm은 전역 변수인데

내부 함수에서 오류가 발생하지 않고 참조가 가능한지도

궁금합니다.

getData() 함수는 내부 함수 add()를 return 합니다.

그리고 console.log(getData()); 로 전역 함수를 실행하면

add() 함수가 리턴되면서 add() 함수를 실행합니다.

n1 + n2의 결과는 전역 변수의 합인 30일까요? 

아니면 내부 함수의 합인 8일까요?

 

내부 함수는 우선 이름이 같다면 가장 가까이 있는

변수를 참조하게 됩니다.

그래서 결과는 8이 나오게 됩니다.

 

지금까지 함수의 범위에 대해 간단히 살펴봤습니다.