TIL 27 | Javascript - Scope

Scope

JavaScript에서 scope이란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미한다.
어떤 변수는 여기저기서 쓸 수 있는 반면에, 어떤 변수는 특정 함수 내에서만 쓸 수 있다. 이런 개념이 바로 scope이다.

Block

block이란 중괄호({}, curly brace)로 감싸진 것이다.

function의 내부는 하나의 block이다.

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

for문도 하나의 block이다.

for (let i = 0; i < 10; i++) {
  count++;
}

if문의 {}도 하나의 block이다.

if (i === 1) {
  let j = 'one';
  console.log(j);
}

{}(block)내부에서 변수가 정의되면 변수는 오로지 {}(block)내부에서만 사용할 수 있다. {}(block)내부에서 정의된 변수는 local Variable(지역 변수) 라고 부른다.

function getResult() {
  let result = 10;
  
  return result;
}

// 자바스크립트 에러! 
// getResult 내부의 scope에 접근할 수 없다
console.log(result);

console.log(result)에서 getResult 내부에 접근이 불가능하기 때문에 result라는 변수가 존재하는지 알지 못한다. result라는 변수는 getResult 함수의 {}(block)에서만 사용할 수 있다.

Global(전역) Scope

scope 외부(block밖)에서는 특정 scope의 변수에 접근할 수가 없다. block밖인 global scope에서 만든 변수가 global variable(전역변수) 이다. 코드 어디서든 접근 가능해서 변수값을 확인할 수 있다.

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

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

console.log(returnColor());

returnColor 함수 내에서, returnColor 함수 밖에 있는 color라는 변수를 return해주었다. color라는 변수는 global 변수이기 때문에 returnColor함수의 block에서도 접근이 가능해서 'red'를 반환한 것이다.

Scope의 오염

global 변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만, 너무 남용하면 프로그램에 문제를 일으킬 수 있다. global 변수를 선언하면, 해당프로그램의 어디에서나 사용할 수 있는 global namespace를 갖는다. namespace라는 것은 변수 이름을 사용할 수 있는 범위라는 뜻이다. scope이라고도 하고 특히 변수이름을 얘기할 때는 namespace라고도 한다.

global 변수는 프로그램이 종료될때까지 계속 살아있다. global 변수가 계속 살아있어서 변수값이 계속 변한다면 해당 변수를 트래킹하기도 어렵고 이 변수는 어디에서 왜 필요한지 알려면 도대체 어디에서 let, const로 선언을 했는지 찾아 나서야 한다.

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

좋은 Scoping 습관

1. global 변수는 쓰지 않도록 노력해야 한다.
2. 최대한 {}내에서 let, const을 사용하여 변수를 새로 만들어서 쓰자.
3. 새로운 block에서 변수를 쓸 때는 항상 다른 이름으로 변수를 선언하자.

switch();

switch statement : https://www.w3schools.com/js/js_switch.asp

// Assignment
function whatIs(type) {
  let description;
  
  switch (type) {
    case 'scope':
      description = '변수가 어디까지 쓰일 수 있는지의 범위';
      break;
    case 'block':
      description = '중괄호({}, curly brace)로 감싸진 것';
      break;
    case 'global scope':
      description = 'scope 외부. 즉 block 밖';
       break;
    case 'global variable':
      description = 'global scope에서 만든 변수 (전역변수)';
       break;
    case 'block scope':
      description = 'block의 내부';
       break;
    case 'local variable':
      description = 'block 내부에서 정의된 변수 (지역변수)';
      break;
    case 'global namespace':
      description = '변수 이름을 사용할 수 있는 범위';
      break;
    case 'scope pollution':
      description = 'global 변수를 남용할 경우 생길 수 있는 문제';
      break;
    default :
      description = ''
      break;
  }
  
  return description;
}

whatIs('scope');