[JavaScript] scope

🎫 scope

변수에 접근할 수 있는 범위로 변수에 접근하거나 변수를 참고할 위치를 정의한다. 어떤 변수는 코드의 모든 접근을 허락하기도 하지만 그렇지 않은 경우도 있다.

.block: block은 {} 안에서 확인할 수 있는 코드를 의미한다. block은 한개 이상의 구문들을 묶어 코드안에서 구조적인 maker 역할을 한다. 만약 함수안에 함수가 있는 형태의 코드라면 자식 요소는 부모의 변수에 접근할 수 있지만 부모는 자식의 변수에 접근할 수 없다.

.지역(local) 변수: block 안에서 선언된 변수를 의미한다. 이 변수는 오직 {} 안에 정의된 code만 사용할 수 있다. block 바깥에서 해당 변수를 사용하려고하면 ReferenceError가 발생한다.

const logSkyColor = () => {
  let color = 'blue';  → local variable
  console.log(color);  → blue 
};

logSkyColor();
console.log(color);

›blue
›ReferenceError

.전역(global) 변수: block 바깥에 선언된 변수를 의미한다. 프로그램 안의 어떤 코드들도 이 변수를 사용할 수 있다. 변수가 선언되면 global namespace(변수 이름을 사용할 수 있는 범위)를 갖는다.

const color = 'blue'; → global variable

const returnSkyColor = () => {
  return color;
};

console.log(returnSkyColor());

›blue

.scope의 오염: global 변수를 사용하면 여기 저기서 접근하기 쉬워 좋다고 생각할 수 있지만 다른 변수의 추적을 어렵게 만들고 잠재적인 사고의 가능성을 지니고 있기 때문에 남용하지 않는 것이 좋다.

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';

const callMyNightSky = () => {
  stars = 'Sirius';
  
  return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};

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

›Night Sky: The Moon, Sirius, The Milky Way
›Sirius  ← stars라는 전역 변수가 오염되어 'North Star'를 사용할 수 없다.

.좋은 scoping 습관: tight한 scope의 변수를 사용하여 코드의 품질을 높여주는 것이 좋다.

① 코드가 block으로 구분되어 코드 가독성이 좋다.
② 가독성이 좋기 때문에 유지보수가 쉬워진다.
③ 프로그램이 끝날때까지 변수가 살아있는 것이 아니라 local 메모리가 절약된다.