Scope

Scope란 범위라는 뜻.

전역 변수와 지역 변수

전역 변수를 만드는 일은 최대한 지양해야함.
전역 변수란 자바스크립트에서 제일 바깥범위에 변수를 만드는 것.
window 객체에 변수를 만드는 것.

var x = 'global';
function ex() {
	var x = 'local';
    x = 'change';
    console.log(x)
}
ex(); // 'change'
console.log(x) // 'global'

같은 x여도 ex함수 바깥의 x는 전역변수, ex함수 안의 x는 지역변수이다.
지역 변수는 함수 안에 들어있는 변수를 의미.

Scope

지역변수는 아무리 해도 전역변수에 영향을 끼칠 수 없음.
함수 스코프 때문

var x = 'global';
function ex() {
  x = 'change';
  console.log(x)
}
ex(); // 'change'
console.log(x); // 'change'

아까와는 달리 ex 함수 안에서 var를 선언하지 않음. x = 'change'를 했을 때 전역변수가 바뀜.
자바스크립트는 변수의 범위를 호출한 함수의 지역 스코프부터 전역 변수들이 있는 전역 스코프까지 점차 넓혀가며 찾기 때문이다.

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 변수를 찾기 위해 자기 자신의 스코프에서 찾고 없으면 outer 스코프, 없으면 다시 올라가 전역 스코프에서 찾습니다.
만약 전역 스코프에도 없다면 변수를 찾지 못했다는 에러 발생.
이렇게 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 스코프 체인이라고 부른다.

Lexical Scoping

스코프는 함수를 호출할 때가 아니라 선언할 때 생깁니다.
정적 스코프라고도 불립니다.

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

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

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

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

var 하나만 더 추가했을 뿐인데 값이 바뀌었다. 이유는 스코프는 함수를 선언할 때 생기기 때문이다.
log안의 name은 wrapper 안의 지역변수 name이 아니라, 전역변수 name을 가리키고 있다.
이것을 lexical scoping이라고 한다.

이런 이유로 전역 변수를 만드는 일은 지양해야 한다. 다른 사람과 협업을 할 때 전역변수를 사용하다보면 여러 가지 불상사가 발생할 수 있기 때문이다.

간단한 해결 방법은 전역 변수 대신 함수 안에 넣어 지역변수로 만드는 것이다.

이 글의 출처
https://www.zerocho.com/category/JavaScript/post/5740531574288ebc5f2ba97e