1. Scope(스코프)의 의미

scope란,
'변수'가 선언되고 사용될 수 있는 범위를 의미한다.

JavaScript 코드를 작성하다보면, *** is not defined라는 에러 메시지와 만나게 되는 경우가 있다. 즉, 변수가 아직 선언되지 않았다는 뜻이다.
오잉, 나는 분명 let, const로 변수를 선언해 주었는데 왜 이런 오류 메시지가 뜨는거지? 라는 생각이 든다면, Scope의 개념을 잘 이해할 필요가 있다.

나는 분명 변수 선언을 해주었지만, 예를 들어 console.log가 찍인 위치에서 변수가 선언된 영역(block)에 접근할 수가 없어서 위와 같은 오류가 생기는 것이다.

1-1) 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);
}

1-2) Global Scope (전역 스코프)

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' 반환

2. Scope의 오염

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);

3. 좋은 Scoping 습관

좋은 scoping습관은 global variable(전역변수)는 최소한으로 하고, 최대한 block내에서 let, const를 사용하여 변수를 새로 만들어 사용하는 것이다.

좋은 Scoping 습관을 갖게되면,
1) 코드가 block으로 명확하게 구분되기 때문에 코드 가독성이 높아진다.
2) 코드를 오랜만에 보더라도 유지보수가 쉬워진다.
3) block이 끝나면 local variable(지역변수) 사용도 끝이나기 때문에 메모리가 절약된다.

결론, 좋은 Scoping 습관을 갖자. 👻