[JavaScript] 스코프(Scope)는 뭘까?

스코프는 우리 말로 번역을 하면 '범위'라는 뜻이다.

자바스크립트에서 스코프는 '접근할 수 있는 범위'라고 생각하면 된다.

 

아래 예제들을 보면서 이해하는게 가장 쉬울 거라 생각한다.

---

const a = "Hello";
function b() {
	console.log(a);
}
b()

위처럼 b함수를 실행하게 되면

b함수에 a라는 변수가 없지만 전역에 있는 a라는 변수를 가져와 "Hello"를 출력 할 수 있게된다.

 

아래 코드는 어떨까?

const a = "Hello";
function b() {
    console.log(a);
    const a = "bye";
}
b()

여기서의 콘솔에는 어떤게 찍힐까?

바로 'undefined'가 출력되게 된다.

위 코드를 이해하지 못했다면 호이스팅 에 대한 포스팅을 읽고오는 걸 추천한다.

 

실행 컨텍스트가 생성이 되면 스코프도 생성이 된다.

const a = "Hello";
function b() {
    console.log(a);
}
b()

위 코드의 실행 순서를 설명하면 이렇다.

1. a 변수를 선언하고, b 함수를 선언한다.

2. a 변수에 "Hello"를 저장한다.

3. b 함수를 실행한다.

4. b 함수 내에 a가 있는지 확인을 했지만 a가 존재하지 않는다.

5. 상위 스코프로 이동해서 a라는 변수를 찾는다.

6. 찾았으니 "Hello"를 출력시킨다.

 

스코프는 실행 컨텍스트를 이해하면 쉽게 이해할 수 있는 개념이다.

일단 자신의 스코프 내에서 존재하는지를 확인 후 없다면 상위 스코프 또 없다면 상위 스코프로 이동해서 찾고,

글로벌 스코프까지 가서 찾아봤는데 없다면 undefined를 출력하게 되며, 중간에 찾게 되면 멈춰서 그걸 출력해준다.

이 개념이 스코프체인이다.

 

몇 가지 예제를 더 보여주고 마치겠다.

const a = "Hello";
function b() {
    const a = "bye";
    console.log(a)
}

console.log(a)
b()

const a = "Hello";
function b() {
    const a = "bye";
    console.log(a)
}

function c() {
    const d = "hyo";
    console.log(a);
}

console.log(a)
b()
c()
console.log(d);

var a = 10;
var b = 20;
var c = 30;

function sum() {
  return a + b + c;
}

function sum1() {
  var a = 20;
  var b = 10;
  
  function sum2() {
    var a = 30;
    console.log(a+b+c)
  }
  sum2()
}
console.log(sum())
sum1()

 

위 예제들을 다 풀수있다면 스코프란 개념에 대해서 이해한거라고 볼 수 있을 것이다.