JavaScript - Scope

Scope

변수가 어디까지 쓰일 수 있는지 의 범위를 의미합니다.

 

scope를 알기전에 block이란 중괄호 {} 로 감싸진 것을 block 이라고 합니다.

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

 

Block

이제 block 의 예제를 보실까요.

 

function getResult() {
  let result = 10;
  console.log(result);
}

console.log(result);

 

이렇게 진행을 했을 때, 아마 is not defined 가 나타날 것입니다. block 외에서 함수가 선언이 되지 않으면 result의 값은 외부로 노출이 되지 않기 때문에 getResult()를 선언해야만 비로소 result를 알게됩니다.

따라서 getResult()를 한번 선언하고 콘솔을 확인하게 되면 그제서야 result의 값을 인지합니다.

 

Global(전역) Scope

전역 스코프는 자바스크립트 문서 전체에 적용이 되는 global 한 scope 입니다. 코드 어디서든 접근 가능해서 변수값을 확인할 수 있습니다.

 

const color = 'red';
console.log(color);

function returnColor() {
  console.log(color);
  return color;
}

console.log(returnColor());

 

예제를 보시면, returnColor() 함수를 선언하지 않아도 color 값이 전역 값이기 때문에 콘솔창에 값이 바로 나오게 됩니다.

 

전역 Scope 오염

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); // 'sirius'

이 예제를 보시면 전역 스코프도 block 함수에 의해서 변형이 될 수 있다는 것을 확인할 수 있습니다.

실행해보면, stars의 값이 변화하는 것을 확인해 볼 수 있습니다. (전 당연히... North Star 가 나올 줄 알았습니다.)

변경이 되지 않으려면 const 를 이용해서 변수 선언을 하면 좋을 것 같습니다. 그냥 다른 변수 쓰죠 ㅋㅋ

 

★★

새로운 block에서 변수를 쓸 때는 항상 다른 이름으로 변수를 선언해야합니다.(변수 선언 은근히 까다로운 것 같네요ㅠ)