자바스크립트 공부 - 스코프(Scope)

프로그래밍에서 스코프(Scope)를 이해하는 건 매우 중요하다. 스코프, 즉 “유효범위”는 변수에 접근하거나 참조할 수 있는 위치를 의미한다. 예를 들어 어떤 변수는 어디서나 액세스 할 수 있지만, 어떤 변수는 특정 맥락 안에서만 사용할 수 있는 등의 제약이 생긴다.

자바스크립트에서 Scope를 이해해보자.

블록(Block)의 개념

스코프(Scope)에 대해 이야기하기 전에 먼저 블록(Block)의 개념을 알고 가야 한다. 이게 뭐 새로운 건 아니고, 이를 테면 함수나 if 문에서도 블록을 본 적이 있을 거다.

블록은 중괄호 {} 세트 안에 있는 코드를 말한다. 블록은 하나 이상의 구문을 그룹화하는 데 도움이 되며, 코드의 구조적인 마커 역할을 한다고 보면 된다.

전역 스코프 (Global Scope)

스코프는 변수가 선언되는 컨텍스트(context)를 의미한다. 예를 들면 변수가 선언될 때만 하더라도 블록의 외부에서 선언될 수도 있지만 특정 블록 안에서 선언될 수 있기 때문에 이 변수의 스코프를 이해하는 게 필요하다.

만약 변수가 블록 외부에서 선언되면 전역 스코프를 따른다. (이러한 변수를 전역 변수라 한다.) 전역 변수는 블록 안으로 범위가 제한되는 게 아니기 때문에 프로그램의 모든 코드에서 액세스 할 수 있다. 간단한 예시를 보자면…

const color = 'red';
 
const returnColor = () => {
  return color; // red
};
 
console.log(returnColor()); // red

변수가 블록 외부에서 정의 되었지만 이 변수를 특정 함수의 블록에서 액세스 할 수 있다.

블록 스코프 (Block Scope)

만약 변수가 블록 안에서 정의되면 중괄호 {} 내의 코드에서만 액세스 할 수 있는데, 이를 블록 스코프에 있다고 말한다.

블록 범위에서 선언된 변수는 동일한 블록 내에서만 사용할 수 있기 때문에 전역 변수가 아니라 로컬 변수라고 부른다.

예시를 보자.

const logColor = () => {
  let color = 'red'; 
  console.log(color);
};
 
logColor(); // red
console.log(color); // ReferenceError

color 라는 변수를 함수 안에서 정의했기 때문에 함수 자체를 실행할 때는 문제 없이 접근이 되지만, 만약 함수 밖에서 그 로컬 변수에 접근하려고 하면 에러가 발생하는 걸 알 수 있다.

스코프 오염 (Scope Pollution)

항상 변수에 액세스 할 수 있도록 전역으로 선언하면 속 편하다고 생각할 수 있지만, 너무 많은 전역 변수가 있으면 오히려 나중에 문제가 발생할 수 있으니 주의해야 한다.

일단 전역 변수를 자꾸만 선언하게 되면 이 변수들이 프로그램이 끝날 때까지 남아 있게 되므로, 네임스페이스(Namespace)가 정말 빨리 차버리게 된다. 이런 식으로 작업하다가 전역 네임 스페이스에 너무 많은 전역 변수가 존재하거나, 다른 범위에서 변수를 재사용하는 상황이 오는데 이를 스코프 오염(Scope Pollution)이라고 부른다. 상황이 복잡해졌다는 뜻이다.

선언된 변수가 너무 다양해서 그것들을 기억하거나 추적하기 어렵게 만들어 나중에 문제 생기기 딱 좋다. 전역 변수가 다른 로컬 변수와 충돌하여 예상치 못한 동작을 하게 된다거나 하는 등…

망한 예시를 보자.

let color = 'red';
 
const logColor = () => {
  color = 'blue'; // let 키워드 빼먹음
  console.log(color);
};
 
logColor(); // blue
console.log(color); // (red가 아닌) blue 

만약 함수 내에서 로컬 변수를 선언할 때 let 키워드를 까먹었다 치자. 함수 logColor()를 호출하는 순간 color가 ‘blue’로 할당되어버리기 때문에 원래 의도했던 전역 변수 color ‘red’에 영향을 주게 된다.

스코프 오염을 막는 방법

블록 스코프를 잘 사용해서 변수의 사용 범위를 엄격하게 제한하는 것 말고는 딱히 방법이 없다.

그리고 이렇게 블록 스코프를 엄격히 구분하면 여러 장점들이 생긴다.

• 블록이 코드를 개별 섹션으로 구분해주기 때문에 가독성이 높아진다.
• 해당 변수가 다른 부분과 어떻게 연관되어 있는지 추적할 필요가 없기 때문에 코드를 이해하기 쉬워진다.
• 코드가 모듈식으로 구성되는 것이라 유지 관리가 더 쉬워진다.
• 로컬 변수들은 블록 실행이 완료된 후 사라지기 때문에 메모리가 절약된다.

블록 스코프를 잘 사용하면 전역 네임스페이스를 오염시키지 않고 여러 변수들을 정의할 수 있기 때문에 굳이 변수가 블록 외부에 존재할 필요가 없는 경우에는 전역 변수를 지정하지 않아야 한다는 결론.