1. 전역변수와 지역변수, 그리고 함수의 범위(scope)
전역변수란 window 객체에 만든 변수로 함수 바깥에 만들어진다.
반대로 지역변수는 함수 안에 있는 변수를 일컫는다.
1
2
3
4
5
6
7
let x = 'outside'; //전역변수
function inside() {
let x = 'inside'; //지역변수
x = 'scope';
}
inside();
alert(x); // 'outside'
함수 안에서 선언된 변수는 해당 함수 안에서만 사용할 수 있다. 따라서 inside함수에서 지역변수 x의 값을 바꿔도 전역변수 x의 값은 변하지 않고 ‘outside’이다.
1
2
3
4
5
6
let x = 'outside'; //전역변수
function inside() {
x = 'scope';
}
inside();
alert(x); // 'scope'
1
2
inside함수에 지역변수를 선언하지 않으면 실행 컨텍스트에 따라 x값을 바꿀 수 있다. 이는 js가 호출한 inside함수의 지역 스코프에서 x변수를 찾지 못하면 전역 변수들이 있는 전역 스코프까지 점차 넓혀가며 찾아내기때문이다.
이렇게 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 스코프 체인이라 한다.
2. lexical scope
스코프(static scope)는 함수를 호출할 때가 아니라 ‘선언’할 때 생긴다. lexical scope는 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다.
1
2
3
4
5
6
7
8
9
10
11
let food = 'donut';
function hungry() {
//선언된 곳
console.hungry(food); //donut
}
function eat() {
let food = 'coconut';
hungry(); //호출된 곳
}
eat();
hungry 함수를 호출하면 hungry는 자신이 선언된 곳에서 가장 가까운 food를 찾기때문에 console에 donut이 찍힌다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function makeCounter() {
let count = 0;
return function () {
return count++;
};
}
let counter = makeCounter();
let counter2 = makeCounter();
alert(counter()); // 0
alert(counter()); // 1
alert(counter2()); // 0
alert(counter2()); // 1
함수 counter와 counter2는 따로 호출했기 때문에 독립적인 렉시컬 환경을 갖게 되므로 각 함수는 자신만의 count를 갖게 된다.
3. 네임스페이스와 IIFE(즉시 호출 함수 표현식)
변수가 섞일 수 있는 문제때문에 되도록 선언되는 전역변수를 줄이기 위해 네임스페이스를 만드는 방법이 있다.
1
2
3
4
5
6
const namespace = {
x: 'hide',
y: function () {
alert(this.x);
},
};
위와 같이 만들면 x와 y는 namespace라는 전역변수의 범위에서만 유효하게 된다. 다른 이가 x 또는 y값을 변경하지 못하도록 변수 y만 return할 수 있다.
1
2
3
4
5
6
7
8
const namespace = function () {
let x = 'hide';
function y() {
alert(x);
}
return { y: y };
};
const readOnly = namespace(); //const readOnly = { y: function y() { alert(x) }}
이를 간단하게 표현하면 함수를 선언하자마자 실행하는 IIFE구문을 사용할 수 있다. 아래의 함수 표현식은 변수 readOnly에 괄호로 감싸인 함수는 대입하자마자 실행된다.
1
2
3
4
5
6
7
8
const readOnly = (function () {
let x = 'hide';
return {
y: function () {
alert(x);
},
};
})();
4. 클로저(closure)
비공개 변수를 가질 수 있는 환경에 있는 함수를 말한다. 위의 예시에서 비공개 변수 x에 접근할 수 있는 변수 y가 클로저이다. 또는 변수 x 또는 변수 x가 있는 스코프 readOnly에 대해 함수 function() { alert(x) }를 클로저라고 할 수 있다.
출처: