자바스크립트 기초 - 스코프

목표 : 자바스크립트 스코프 개념을 정확하게 이해하자

자바스크립트에 익숙하지 않거나, 초심자의 경우 스코프는 정말 헷갈리기 쉽다고 생각한다. 때문에 스코프에 대한 포스트를 작성하며 다시 한번 공부하는 시간을 가져보았다.

스코프란?

자바스크립트에서 스코프는 어떤 변수에 접근할 수 있는지를 정의하는 것이다. 스코프는 전역스코프와 지역스코프로 나뉘고, 또 지역스코프는 함수스코프와 블록스코프로 나뉜다. 벌써 복잡할 것같은 느낌이 드는데 예제를 보자. 들어가기에 앞서 브라우저 환경과 NODEJS환경에서 결과가 서로 다르게 나올 수 있다. 이 글에서는 브라우저를 기준으로 작성한다.

전역스코프

const global = 0; //전역스코프
function inner(){
  console.log(global);
  const local = 0;
}
inner();
console.log(global);

이렇게 함수나 { }블록 밖에서 선언되었다면 전역스코프라고 한다.
전역스코프에 할당 된 변수는 지역스코프내에서도 접근이 가능하다.

지역스코프

//1번
{
  let local = 10
  {
    let local = 20
    console.log(local) // 20
  }
  console.log(local) // 10
}
console.log(local) // 레퍼런스 에러

//2번
function test(number) {
  console.log(value); // 레퍼런스 에러
  if (number) {
    let value = "apple";
    console.log(value); // apple
  } else {
    let value = "banana";
    console.log(value);
  }
  console.log(value); // 레퍼런스 에러
}
test(10);

지역스코프에 선언된 변수는 함수나 { }내부에서 접근이 가능하다.
1번예제를 보면 블록범위를 벗어났을경우 선언된 변수가 없기 때문에 레퍼런스 에러가 발생하게되고, 2번예제도 마찬가지다.