scope 이해하기

csongin·2022년 9월 24일

JavaScript WeCode scope

developer

목록 보기

5/15

Scope

Scope란?

scope은 JavaScript의 문법이 아니다.

JavaScript에서 scope란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다.

is not defined

변수가 아직 선언되지 않았다는 뜻입니다.

변수는 let, const, var 등으로 선언할 수 있으며, JavaScript가 변수를 선언한 영역(block)에 접근할 수가 없다면 is not defined와 같은 에러 메시지를 나타내게 됩니다.

변수가 선언된 위치에 따라 어디서든 활용 될수도, 특정한 영역 내에서만 사용될 수도 있습니다.

이러한 개념이 바로 scope입니다.

Block

scope을 더 파헤치기 전에 먼저 알아야할 개념은 block입니다.

우리는 function 과 if 문, for 문 등에서 이미 block을 많이 사용하고 있습니다.

block이란 중괄호({} , curly brace)로 감싸진 영역을 block이라고 합니다.

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(지역) 변수라고 부릅니다.

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

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

console.log(result) 에서 getResult 내부에 접근이 불가능하기 때문에 result 라는 변수의 존재를 알지 못합니다.

result 라는 변수는 getResult 함수의 {} (block)에서만 사용할 수 있습니다.

Global(전역) Scope

scope는 변수가 선언되고 사용할 수 있는 공간입니다.

scope 외부(block밖)에서는 특정 scope의 변수에 접근할 수가 없습니다.

block밖인 global scope에서 만든 변수를 global variable(전역변수)이라고 합니다.

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

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

function returnColor() {
  return color;
}

console.log(returnColor());

returnColor 함수 내에서, returnColor 함수 밖에 있는 color 라는 변수를 return 해주었습니다.

color 라는 변수는 global 변수이기 때문에 returnColor 함수의 block에서도 접근이 가능해서 'red' 를 반환한것입니다.

Scope의 오염

global 변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만, 너무 남용하면 프로그램에 문제를 일으킬 수 있습니다.

global 변수를 선언하면, 해당프로그램의 어디에서나 사용할 수 있는 global namespace를 갖습니다.

namespace라는 것은 변수 이름을 사용할 수 있는 범위라는 뜻입니다. scope 라고도 하고 특히 변수이름을 얘기할 때는 namespace라고도 합니다.

global 변수는 프로그램이 종료될때까지 계속 살아있습니다. 이 말은 local 변수는 {} - block이 끝나면 더 이상 변수가 살아있지 않고 쓸 수 없다는 말입니다.

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