js에서의 Scope

 

 

scope

 

 

javascript의  scope는 문법이 아닙니다. '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다.

 

 

 

block

 

block 이란 중괄호{}로 감싸진 것을 말하는데

function, if, for 등을 말합니다.

function 의 내부는 하나의 block입니다.

 

 

예시)

function hi() {
  return 'i am block';
}

 

 

 

 

 

지역변수 (local)

 

{} 내부에서 변수가 정의되면 변수는 오로지 {}(block)에서만 사용할 수 있습니다. 내부에 정의된 변수를 지역 변수라 부릅니다.

 

 

 

 

전역변수 (global)

 

scope은 변수가 선언되고 사용할 수 있는 공간입니다. scope 외부에서는 특정 변수에 접근할 수 없지만 block밖인 global scope에서 만든 변수를 전역변수라고 합니다.

코드 어디서든 접근 가능해서 확인할 수 있습니다.

 

 

 

scope의 오염

 

전역 변수를 남용하면 프로그램에 문제를 일으킬 수 있습니다. global 변수를 선언하면 해당 프로그램 어디에서나 사용할 수 있는 global namespace를 갖습니다. (namespace : 변수 이름을 사용할 수 있는 범위, scope이라고도 하지만 변수 이름을 이야기 할땐 namespace라고도 합니다.) 전역 변수는 프로그램이 종료될 때까지 계속 살아있습니다. (반대로 local 변수는 {}가 끝나면 살아있지 않습니다.) 전역 변수가 살아있어서 변수값이 계속 변한다면 해당 변수를 트래킹 하기 매우 어려워 변수가 어디에서 왜 필요한지 알려면 let, const로 선언을 했는지부터 찾아 나서야 합니다.

 

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star'; // star 변수 선언

const callMyNightSky = () => {
  stars = 'Sirius'; // 실수로 let 키워드 작성 x -> 3열의 let star에 변수 'Sirius' 할당
  
  return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};

console.log(callMyNightSky());
console.log(stars);

 

위 코드가 scope가 오염된 예입니다. 함수가 몇 십 개 있을 지도 모르는 상황에서 저렇게 global 변수를 남용하다는 해당 오류를 찾아 수정하기 매우 어렵습니다.

 

 

 

 

좋은 scope 습관

 

👉 타이트한 scoping은 코드 품질을 올려줍니다. (명확하게 block 으로 나누기 때문에 코드 가독성이 올라감)

👉 수정이 용이해 유지 보수가 쉬워집니다

👉 프로그램이 끝날 때까지 살아 있는 global 변수가 줄어 메모리 절약이 됩니다.