scope란,
'변수'가 선언되고 사용될 수 있는 범위를 의미한다.
JavaScript 코드를 작성하다보면, *** is not defined
라는 에러 메시지와 만나게 되는 경우가 있다. 즉, 변수가 아직 선언되지 않았다는 뜻이다.
오잉, 나는 분명 let
, const
로 변수를 선언해 주었는데 왜 이런 오류 메시지가 뜨는거지? 라는 생각이 든다면, Scope의 개념을 잘 이해할 필요가 있다.
나는 분명 변수 선언을 해주었지만, 예를 들어 console.log
가 찍인 위치에서 변수가 선언된 영역(block)에 접근할 수가 없어서 위와 같은 오류가 생기는 것이다.
block
이란 중괄호{}(curly brace)로 감싸진 영역을 말한다.
block
내부에 변수가 정의되면 그 변수는 오로지block
내부에서만 사용이 가능하다.
참고로, block
내부에서 정의된 변수는 local variable(지역변수)
라고 한다.
예를들어,
1) function
의 내부는 하나의 block
이다.
function block() {
return 'i am block'; //block 영역
}
2) for
문 의 내부도 하나의 block
이다.
for (let i = 0; i < 10; i++) {
count++; //block 영역
}
3) if
문의 내부도 하나의 block
이다.
if (i === 1) {
let number = 'one'; //block 영역
console.log(number);
}
global scope(전역 스코프)
는block
밖의 영역을 뜻하며,global scope
에서 선언된 변수는 코드 어디서든 접근하여 변수 값을 확인할 수 있다.
참고로,global scope(전역 스코프)
에서 만든 변수를 global variable(전역변수)
라고 한다.
예를들어,
color
라는 변수는 global variable(전역변수)
이기 때문에 returnColor
함수의 block
에서도 접근이 가능해 console.log(color)
가 찍힌 3곳 모두에서 'red'라는 값을 반환하게 된다.
const color = 'red';
console.log(color); //'red' 반환
function returnColor() {
console.log(color); //'red' 반환
return color;
}
console.log(returnColor()); //'red' 반환
global variable(전역변수)
를 선언하면, 해당 프로그램 어디에서나 사용할 수 있는global namespace
를 갖기 때문에,global variable(전역변수)
를 너무 남용하면 프로그램에 문제를 일으킬 수 있다.
참고로, namespace
는 변수명을 사용할 수 있는 영역을 뜻한다.scope
라고도 하지만, 특히 '변수이름'을 얘기할 때는 namespace
라고 한다.
예를들어, callMyNightSky
함수에서 stars
라는 새로운 변수를 선언하고 싶었는데 깜빡하고 let
으로 선언해주지 않아 stars
에 Sirius
라는 값이 재할당이 되었다. 그래서 callMyNightSky
을 호출하면 stars
변수에 재할당 되었던 값인 Sirius
가 반환된다. 이렇게되면, 다른 함수에서 global variable(전역변수)
인 stars('North Star')
을 사용하고 싶었는데 값이 수정된 stars('Sirius')
가 나타나는 문제를 겪게된다.
const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';
const callMyNightSky = () => {
stars = 'Sirius';
return 'Night Sky: ' + satellite + ', ' + galaxy + ', ' + stars;
};
console.log(callMyNightSky());
console.log(stars);
좋은 scoping습관은
global variable(전역변수)
는 최소한으로 하고, 최대한block
내에서let
,const
를 사용하여 변수를 새로 만들어 사용하는 것이다.
좋은 Scoping 습관을 갖게되면,
1) 코드가 block
으로 명확하게 구분되기 때문에 코드 가독성이 높아진다.
2) 코드를 오랜만에 보더라도 유지보수가 쉬워진다.
3) block
이 끝나면 local variable(지역변수)
사용도 끝이나기 때문에 메모리가 절약된다.
결론, 좋은 Scoping 습관을 갖자. 👻