js 개발자라는 사람이 스코프가 뭔지 몰라?

 

스코프는 직역하면 "범위" 라는 뜻으로 js 안에서 변수가 접근할수 있는 범위를 말한다!

 

스코프에는 두 종류가 있는데 global(전역) scope와 local(지역) scope가 있다

 

global scope는 전역 범위를 뜻하고 어디서든지 변수가 접근할수 있다

 

const global = "hello global";

console.log(global);

function log() {
	console.log(global);
}

log();

 

위의 코드를 보면 global은 전역 스코프 변수이다 그래서 전역 코드에서도 사용가능 하고 함수 안에서 또는 if, while, for문 안에서도 사용 가능하다

 

local scope는 특정 지역(if문, 함수, while문 등등)에서만 변수가 접근할수 있다

 

if (true) {
  const local = "hello local";
  console.log(local);
}

function log() {
  const storage = "storage";
}

console.log(local);
console.log(storage);

 

위의 코드를 보면 전역코드에서 console.log를 한것들은 작동이 되지 않는다 왜냐하면 log를 찍을 변수들이 특정 지역에서만 접근 가능하기 때문이다

 

scope chain

scope chain은 코드 안에서 변수를 사용하려는데 같은 스코프 레벨에 변수가 존재하지 않을때 한단계식 스코프 레벨을 올라가 변수를 찾는 방식이다

const a = 3;

function first() {
  const b = 5;
  
  fuction second() {
    console.log(a);  // 같은 scope level에 a가 없으므로 한단계 밖의 스코프 레벨로 이동 -> 없음 한단계 밖의 스코프로 이동 -> a 찾음
    console.log(b);  // 같은 scope level에 b가 없으므로 한단계 밖의 스코프 레벨로 이동 -> b 찾음
  }

  second();
}

first();

 

lexical scope

js의 스코프는 lexical scope이다

뭔소리냐면 함수를 선언하고 사용을할때 외부 변수를 사용할때 함수가 선언된곳을 기준으로 스코프를 잡는다

const a = 3;

function first() {
  const a = false;
  
  fuction second() {
    console.log(a); // false
  }

  second();
}

first();

const a = 3;

fuction second() {
    console.log(a); // 3
  }

function first() {
  const a = false;

  second();
}

first();

 

이렇게 선언된 위치를 기준으로 스코프를 정하기 때문에 출력하는 값이 달라진다

 

 

마무리

사실 나는 스코프에 대해 그냥 이런 거구나 정도만 알고 있었는데 책을 읽을때 잘모르겠어서 정리를 해보았다

나름 잘 이해한거 같아 만족한다