TIL - Javascript Scope

haileyself·2019년 8월 25일

JavaScript의 SCOPE

Scope는 변수가 선언되고 사용할 수 있는 공간을 말함
Scope 외부에서는 특정 Scope의 변수에 접근할 수 없음

1. Scope의 종류

1. Local scope

함수 안에서 { } 으로 감싸진 block 안의 범위를 의미
Local scope를 가지는 변수는 local variables이라 함
주로 block 이라함은 함수 내부를 의미함

 Ex. function hi() {
    return ‘i am block’;
}

hi 뒷 부분 { } 이부분이 block이다.
블락 내부에서 변수가 정의되면 변수는 오로지 {} (block) 내부에서만 사용할 수 있음
블락내부에서 선언 된 변수를 {} 블락 밖에서 console.log() 하면, 나오지 않는데, block 이 끝나면 해당변수의 scope도 종료된다.
그래서 for문 여러 개 돌릴 때, let i = 0 이렇게 변수 값을 let i 를 주면 for문이 끝났을 때 해당 변수가 살아있지 않게되기 때문에, let 쓰면 똑같은 변수명으로 for문 여러 개 만들기가 가능함

Global scope

block 내 뿐만 아니라 전체적으로 사용가능한 범위를 의미
global scope를 가진 변수를 global variable라고 함
var 가 대표적인 전역변수
scope 오염의 위험도가 높아 안쓰는 게 좋음 !
Global variables를 쓰면 여기저기서 접근하기 쉬워서 좋다고 생각할 수 도 있지만, 너무 남용하면 프로그램에 문제를 일으킬 수 있음. scope가 프로그램이 종료될 때까지 살아있음

2. Scope오염

전역 변수의 scope가 계속 유효하기 떄문에, 변수로 설정한 값이 다른 값으로 대체되거나 하는 것을 Scope오염이라 한다.

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());
//출력: Night Sky: The Moon, Sirius, THe Milky Way
console.log(stars);
//출력: Sirius;

함수 안에서만 값이 Sirius 로 바뀐 것이 아니라 함수밖에 console을 찍었는데 함수 안에서 선언한 'Sirius'가 적용 되어있음. 만약 callMyNightSky 함수에서 , stars 변수를 해당 함수에서만 쓰고 싶었다면 let stars = 'Sirius' 이렇게 정의해줬어야한다 !