자바스크립트 스코프

유인동님의 함수형 자바스크립트 프로그래밍을 시작하며

자바스크립트의 함수와 관련된 몇 가지 기능들에 대해 알아보고자 합니다.

 

스코프

클로져에 대해 이해하기 위해서는 스코프의 개념을 필요로합니다.

자바스크립트의 스코프는 변수들(variables)의 접근성을 정의한 것입니다. 좀 더 풀어말하자면 변수를 어디에서 어떻게 찾을지 정한 규칙입니다.

스코프의 두 가지 종류에는 Global Scope(전역 스코프)와 Local Scope(지역 스코프)가 있습니다.

Global scope

모든 함수들 혹은 중괄호({})밖에 정의된 변수들을 Global Scope에 있다고 정의합니다.

Global Variable(전역 변수)를 선언하였다면, 그 변수는 당신의 코드 어디서나 사용할 수 있습니다. 심지어 함수에서도 말이죠.

Global Scope에 대한 이야기는 Web Browser상에서 작동하는 자바스크립트에 한정된 이야기입니다. Node.js상에서 작동하는 자바스크립트의 Global variables는 다릅니다. 하지만 Node.js에 대해서는 고려하지 않도록 하겠습니다.

 

예시

​x
const hello = 'Hello, Global Scope';
​
function sayHello() {
    console.log(hello);
}
​
console.log(hello);
sayHello();

 

const나 let을 사용하여 변수를 Global Scope내에 선언하는 것은 추천하지 않습니다.

naming collision(변수명 중복)이 발생할 수 있기 때문입니다. const나 let을 사용하여 변수를 선언했다면, 같은 변수명을 사용했을 경우, 에러가 발생합니다.

var을 사용하는 경우에는 같은 변수명을 사용했을 경우, 변수명에 값이 덮여쓰여집니다. 하지만 이또한 추천하지 않습니다. 이러한 코드는 Debug를 어렵게하기 때문입니다.

 

예시

xxxxxxxxxx
let mValue = `first`;
let mValue = `Second`; // Error, mValue has already been declared
​
var mVar = `first`;
var mVar = `Second`;
console.log(mVar); // 'Second'

 

Local Scope

특정한 구역에서만 사용 가능한 변수는 Local Scope안에 있다고 할 수 있습니다.

그리고 이 변수를 Local Variables라고 부릅니다. 자바스크립트의 Local Scope는 Function Scope와 Block Scope 두 가지가 있습니다.

 

Function Scope

변수를 함수안에서 선언하였을 경우, 그 변수는 오직 함수내에서만 사용가능합니다. 함수 밖에서는 이 변수를 다시 사용할 수 없습니다.

 

예시

xxxxxxxxxx
function fnScope() {
    const mVar = 'Hello, Samba!';
    console.log(mVar);
}
​
fnScope(); // Hello, Samba!
console.log(mVar); // Error, mVar is not defined

 

Block Scope

중괄호({})안에 const 혹은 let으로 선언된 변수는 중괄호안에서만 접근이 가능합니다.

 

예시

xxxxxxxxxx
{
    const mVar = 'Hello, Samba!';
    console.log(mVar); // Hello, Samba!
}
​
console.log(mVar); // Error, mVar is not defined

 

Function Hoisting and Scopes

함수가 Function declaration 방식으로 선언되었을 경우, 함수는 선언된 범위의 최상단으로 Hoisting(호이스팅) 됩니다.

Function declaration방식은 아래의 예시중 전자에 해당합니다.

 

예시

xxxxxxxxxx
// This is the same as the one below
callSamba();
​
function callSamba () {
    console.log('Hello, Samba!');
}
​
// This is the same as the code above
function callSamba () {
    console.log('Hello, Samba!');
}
​
callSamba();

 

예시

xxxxxxxxxx
callSamba(); // Error callSamba is not defined
​
const callSamba = function () {
    console.log('Hello, Samba!');
}

이 예시는 Function declaration 방식이 아니기 때문에 에러를 토해냅니다.

함수 호이스팅은 Function declaration방식 외에 다양한 방식으로 자바스크립트의 함수를 사용하는 경우, 혼란을 가져올 수 있습니다. 따라서 함수는 호출하기전에 선언해야합니다.

 

Function do not have access to each other's scopes

제목만 보고는 혼란을 야기할 수 있는 내용이라 예시를 보고 이야기하도록 하겠습니다.

 

예시

xxxxxxxxxx
function first() {
    const firstVar = `I'm first!`;
}
​
function second() {
    first();
    console.log(firstVar); // Error, firstVar is not defined
}

함수는 서로의 Scope에 접근할 수 없습니다. second함수에서는 first함수에서 선언된 변수 firstVar에 접근할 수 없습니다.

 

Nested Scopes

함수가 서로의 Scope에 접근할 수 없다고 이야기했지만, 한 함수가 다른 함수에 포함된 경우는 또 다른 결과를 야기합니다.

한 함수가 다른 함수에 포함된 경우 포함당한 함수는 바깥함수에 변수를 호출할 수 있습니다. 이러한 행위를 Lexical Scoping이라고 합니다.

주의해야할 점은 바깥함수에서는 포함당한 함수의 변수를 사용할 수 없다는 것입니다.

 

예시

function outerFunc() {
    const outerVar = `I'm outer variable!`;
    
    function innerFunc() {
        const innerVar = `I'm inner variable`;
        console.log(outerVar); // I'm outer variable!
    }
    
    console.log(innerVar); // Error innerVar is not defined
}