오늘은 자바스크립트의 핵심개념에 전역, 지역변수 와 스코프의 개념에 대해 깊게 알아보자~!~!🥁🥁👍

이 글은 zerocho의 강의 및 블로깅 개념을 혼자 소화할 목적으로 쓴 글으로 공부를 목적으로 본다면 위 사이트에서 공부하기를 추천드립니다:)

---

전역변수, 지역변수

var x = 'global';
function ex() {
  var x = 'local';
  x = 'change';
}
ex(); // x를 바꿔본다.
alert(x); // 여전히 'global'

• 전역변수란 제일 바깥 범위인 최상단 범위에 만든 변수를 뜻한다 여기서는 x가 전역변수이다. 지역변수란 함수 안에 들어있는 변수를 뜻한다. 여기서 ex함수 내의 x변수에 해당한다.

위의 상황에서 지역변수는 아무리 해도 전역 변수에 영향을 끼칠 수 없는데 바로 함수 스코프 때문이다

스코프(scope)

var x = 'global';
function ex() {
  x = 'change';
}
ex();
alert(x); // 'change'

• 스코프는 범위란 뜻으로 함수 안에서 선언된 변수는 함수 안에서만 쓸 수 있다
  그렇기에 위의 예에서 var x= 'local'은 함수 내에서만 쓸 수 있으며 밑은 x='change'또한 함수 안의 지역변수 x를 바꾸는 것이다.

• 하지만 밑의 예는 위와 달리 함수 안에서 변수를 선언하지 않았기 때문에 이제 x='change'로 전역변수가 바뀌게 된다.

  그 이유는 자바스크립트는 변수의 범위를 호출한 함수의 지역 스코프부터 전역 스코프까지 점차 넓혀가며 해당 변수를 찾기 때문이다. 바로 이 개념이 스코프 체인(scope chain)이다.

스코프 체인(scope chain)

내부 함수에서는 외부 함수의 변수에 접근 가능하지만 외부 함수에서는 내부 함수의 변수에 접근할 수 없다

var name = 'zero';
function outer() {
  console.log('외부', name);
  function inner() {
    var enemy = 'nero';
    console.log('내부', name);
  }
  inner();
}
outer();
console.log(enemy); // undefined

• 위의 예에서 inner함수는 name 변수를 찾기 위해 자기 자신의 스코프에서 찾고 없으면 바로 위 스코프에서 찾고 없으면 전역 스코프까지 위 과정을 반복한다. 결국 전역스코프에서 name 변수를 찾아 'zero'값을 얻게된다.

이처럼 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 스코프 체인(scope chain)이라고 한다.

렉시컬 스코핑(lexical scoping)

✅ 여기서 주의 스코프는 함수가 호출 될 때가 아닌 선언됐을 때 형성된다. 그래서 정적스코프라고 불린다.

var name = 'zero';
function log() {
  console.log(name);
}

function wrapper() {
  name = 'nero';
  log();
}
wrapper();

• 상단의 스코프 개념에서 배웠듯 답을 쉽게 알 수있다. log함수가 호출되기 전 전역변수 name에 재할당이 되었다.

---

var name = 'zero';
function log() {
  console.log(name);
}

function wrapper() {
  var name = 'nero';
  log();
}
wrapper();

• 하지만 위의 경우는 다르다. log함수는 호출될 때가 아닌 선언될 때 이미 스코프가 형성이 되었고 해당 스코프에서 스코프체인을 통해 전역변수 name을 찾아 반환한다. 결국 wrapper 함수 안에서 log를 호출해도 var name = 'nero'를 참조하는 것이 아닌 그대로 전역변수 name의 값 zero가 된다.

자바스크립트 언어는 동적언어지만, 유효범위는 코드가 작성되는 순간 정해지는 정적인 특성을 가진다. 다시한번 정리하면, 함수안에서 정의된 변수는 함수 밖으로 빠져나갈 수 없다는 것이 핵심이다.