TIL7 | [자바스크립트] Scope

kim seung chan·2021년 8월 4일

Scope는 변수가 어디까지 쓰일 수 있는지의 범위를 의미한다. 어떤 변수는 여기저기서 쓸 수 있는 반면에, 어떤 변수는 특정 함수 내에서만 쓸 수 있다. 같이 알아보자!

Scope Block

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

blcok 종류

function
for
if

local Variable

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

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

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

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

💡Error

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

console.log(result);

getResult 내부의 scope에 접근을 할 수 없다. 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 변수이기 때문에 block에서도 접근이 가능해서 반환를 한 것이다.

Scope의 오염

global 변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만 문제를 일으킬 수 있습다. global 변수는 프로그램이 종료될때까지 계속 살아있습니다. 이 말은 local 변수는block이 끝나면 더 이상 변수가 살아있지 않고 쓸 수 없습니다.

💡오염 코드

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