[JavaScript #13] Basic of JavaScript - Scope

Scope

• 변수가 선언되고 사용할 수 있는 공간

Block

• block이란 중괄호({} , curly brace)로 감싸진 범위로 function, for 문, if 문의 {}도 하나의 block이다.
• {} (block)내부에서 변수가 정의되면 변수는 오로지 {} (block)내부에서만 사용할 수 있다.
• {} (block)내부에서 정의된 변수를 local(지역) 변수라고 부른다.

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

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

Scope의 오염

• global 변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만, 남용하면 프로그램에 문제를 일으킬 수 있다!
• global 변수를 선언하면 해당 프로그램의 어디에서나 사용할 수 있는 global namespace(변수 이름 사용 범위)를 갖는다.
• global 변수는 프로그램이 종료 될 때까지 계속 살아있고, local 변수는 {}(block)이 끝나면 쓸 수 없다.
• global 변수가 살아있어 변수값이 계속 변하면 해당 변수를 트래킹하기 어렵다.

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

const callMyNightSky = () => {
  stars = 'Sirius'; //let 키워드를 작성하지 않고 새로운 변수 선언
  
  return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};

console.log(callMyNightSky()); //"Sirius"
console.log(stars); //"Sirius" => 다른 함수에서 global 변수(North Star) 사용 불가능

좋은 Scoping 습관

global 변수의 남용을 막기 위해 변수들은 block scope으로 나누고, block 변수는 항상 다른 이름으로 선언한다.

• 타이트한 scope(tightly scoping)의 변수는 코드 품질을 올려준다.
• 코드가 block 으로 명확하게 구분되기 때문에 코드 가독성이 올라간다.
• 코드가 한줄 한줄 쭉 나열된 것이 아니라 각각의 기능별로 block을 나누면 코드를 이해하기 쉽다.
• 나중에 코드를 수정할 일이 있을 때, 유지보수가 쉬워진다.
• 프로그램이 끝날때까지 변수가 살아있는 것이 아니라서(block이 끝나면 local 변수의 삶이 끝나서) 메모리가 절약된다.
  => 즉, global 변수는 쓰지 않도록 하고, 최대한 {} 내에서 let, const 을 사용하여 변수를 새로 만들어서 쓰는 것이 좋다.

정리

function whatIs(type) {
  let description;
  
  switch (type) {
    case 'scope':
      description = '변수를 사용할 수 있는 범위';
      break;
    case 'block':
      description = '중괄호({})로 감싸 해당 구역에서만 사용되는 로컬 변수를 만듦';
      break;
    case 'global scope':
      description = '코드 어디에서나 변수에 대한 접근 및 사용이 가능한 공간 ';
       break;
    case 'global variable':
      description = 'block밖인 global scope에서 만든 변수';
       break;
    case 'block scope':
      description = '변수에 대한 사용 및 접근이 해당 blcok 내로 제한된 범위';
       break;
    case 'local variable':
      description = 'block안에 선언된 변수로 해당 block 안에서만 사용 가능';
      break;
    case 'global namespace':
      description = 'global 변수 선언시 어디에서나 사용할 수 있는 변수범위(이름)';
      break;
    case 'scope pollution':
      description = 'global 변수의 남용시 발생할 수 있는 문제';
      break;
    default :
      description = ''
      break;
  }
  
  return description;
}