Javascript Scope (스코프) 기초

Javascript를 공부할 때 흔히들 헷갈린다고 하는 것이 있는데 그것이 바로 오늘의 주제이다.

오늘은 스코프(Scope)에 대해서 정리를 해보려고 한다.

 

우선 Scope에 대한 정의는 강의를 하는 사람, 혹은 책 마다 조금씩 다르다.

몇 가지를 살펴보자면 아래와 같다.

1. 참조 할 수 있는 유효범위에  있으면 접근 가능한 것
2. 변수에 접근 할 수 있는 범위
3. 값이나 표현식이 보이거나 참조 할 수 있는 현재 범위

 

그런데, 이들을 살펴보면 공통적인 것이 있다.

바로 범위, 접근과 같은 단어들이다.

총싸움 게임을 하거나, 총 관련 혹은 군대 관련 한 것을 좋아하는 분들은 scope 라고 하면 느낌이 올것이다.

바로 저격총 위에 꽂는 망원경을 스코프라고 말한다.

스코프는 이와 비슷하다고 할 수 있다.

 

스코프 내에 보이는 적에게 사격이 가능한 것처럼, 스크프 안에 위치한 범위 즉, 유효범위에서 있으면 접근이 가능한 것을 말한다.

 

여전히 이렇게 글로만 보면 헷갈리게 느껴진다.

조금 더 살펴보자!

 

Scope에는 크게 함수 스코프(Functional Scope), 블럭 스코프(Block Scope)라는 것이 있다.

함수 스코프(Functional Scope)는 주로 var를 얘기한다.

 

여전히 var 라고 표현 되어 있는 것을 많이 볼 수 있지만 많은 경우 var보다는 let, const 등을 이용하라고 하고 있다.

그 이유는 바로 hoisting과 scope 문제  때문이다.

우선 hoisting은 변수나 함수를 어디에 선언 했는지 상관 없이 제일 위로 올려버리는 것이다.

hoisting 자체가 나쁘다기 보다는 일반적으로 코드의 가독성과 유지보수에 있어서 좋지 못하기 때문이다.

한 예를 보자면 아래와 같다

console.log(x) // undefined
var x = 1

===

var x
console.log(x) // undefined
x = 1

-----------------------------------------------

console.log(x) // reference error
x = 1

위의 두 가지는 같은 것이다.

Hoisting이라는 것은 " 변수 선언부분만 " 해당 scope 맨 위로 올리는 것을 말한다.

그렇다면 아래의 reference error는 왜 발생하는 것일까?

보다시피 선언을 하지 않았기 때문이다.

 

scope문제에 대해서는 차차 알아보겠다.

 

FUNCTIONON LEVEL SCOPE

var var1 = 1;

{
  var var2 = 2;
}

function foo() {
  var var3 = 3;
  function newFoo() {
    var var4 = 4;
  }
}

console.log(var1) // 1
console.log(var2) // 2
console.log(var3) // ReferenceError: var3 is not defiend.
console.log(var4) // ReferenceError: var4 is not defiend.

 

위의 상황을 보자

var1, var2는 잘 나왔지만 3, 4는 참조에러(ReferenceError)로 나오고 있다.

var의 경우 함수 내부에 있으면 console로 찾을 수 없다.

그리고 함수 외부에서 내부의 변수로 접근이 불가능 하다.

또한 function 안에 들어있는 것 외에는 다 전역 스코프(Global scope)로 말하며, function 안에 있는 것을 지역 스코프(Local Scope)라고 보고 있다.

렉시컬 스코프 혹은 정적 스코프 라고 불리는 것이 있다.

대다수의 프로그래밍 언어는 정적 스코프를 따르게 되는데 함수 스코프에서는 이를 따르지 않는다.

 

BLOCK LEVEL SCOPE

let let1 = 1;

{
  let let2 = 2;
}

function foo() {
  let let3 = 3;
  function newFoo() {
    let let4 = 4;
  }
}

console.log(let1) // 1
console.log(let2) // ReferenceError: let3 is not defiend.
console.log(let3) // ReferenceError: let3 is not defiend.
console.log(let4) // ReferenceError: let4 is not defiend.

블록 스코프는 주로 let, const를 말한다.

이 또한 블럭 외부에서 내부로의 변수에는 접근이 불가하다.

전역스코프는 블록 외에 있는 것들을 말하며, 블록 안에 있는 것들을 지역 스코프라고 말한다.