스코프란?

• 스코프란 식별자(변수)가 유효한 범위를 말합니다.
• JS엔진이 식별자를 검색할 때 사용하는 규칙입니다.
• JS엔진은 스코프를 통해 어떤 변수를 참조할 것인 지 정합니다.
• 지역 스코프와 전역 스코프가 있습니다.

전역 스코프

코드의 가장 바깥쪽 영역을 말합니다. 전역 스코프 내에 변수를 선언하면 전역 변수라고 합니다.
전역 변수는 어느 위치에서든 참조할 수 있습니다.

지역 스코프

• '지역'이란 함수 몸체 내부를 말합니다.
• 지역 스코프는 함수의 범위를 결정합니다.
• 지역 스코프 내에서, 즉 함수 내부에서 변수를 선언하면 지역 변수입니다.
• 지역 변수는 자신이 속한 스코프와 그 하위(내부) 스코프에서만 참조가 가능합니다.

렉시컬 스코프란?

함수를 호출한 위치가 아니라 함수를 정의한 위치에 따라 그 함수의 상위 스코프를 결정하는 정적인 스코프입니다.

let x = 1; 		// 전역변수 x

function foo() {
  let x = 10; 	// 지역변수 x
  bar(); 		// bar함수 호출
}

function bar() {
  console.log(x); // 변수x 콘솔출력
}


foo();
bar();

• 변수 x와 함수 bar, foo 는 모두 전역 스코프에서 정의돼있습니다. 즉 모두 전역에서 참조할 수 있습니다.
• 함수 foo 내부의 변수 x는 지역 스코프에서 정의된 지역 변수입니다. x는 함수 foo 내부에서만 사용 가능하고 외부에서는 참조할 수 없습니다.
• 함수 bar 에서 console.log(x);의 x는 전역 변수 x를 참조합니다.
• 함수 bar 에서 함수 foo 내부의 지역변수 x는 참조할 수 없습니다.
• 따라서 함수 foo는 함수 bar을 호출하고 함수 bar는 전역 변수 x를 참조하므로 foo(); 와 bar(); 의 결과는 모두 1 입니다.

전역 변수로 변수를 선언하는 것의 문제점⚠️

1. 암묵적 결합

• 전역 변수의 사용 목적은 위치에서든 참조, 할당이 가능한 변수를 사용한 변수를 사용한다는 것입니다.
• 모든 코드가 전역 변수를 참조하고 변경할 수 있다는 것을 의미합니다.
• 즉 암묵적 결합을 허용하는 것입니다.
• 변수의 유효 범위, 즉 변수의 스코프가 넓을 수록 의도치 않게 상태가 변경될 가능성이 높아지며 코드의 가독성도 나빠집니다.

2. 변수의 긴 생애주기

• 전역 변수는 생의 주기가 깁니다. 생애 주기가 길다는 것은 비교적 오랜 기간동안 메모리 리소스를 소비한다는 것입니다.
• 또한 생애 주기가 길면 전역 변수의 상태를 변경할 수 있는 기간이 길어집니다. 때문에 의도치 않은 재할당이 발생할 수 있습니다.

3. 스코프 체인상의 종점에 존재

• 전역 변수가 스코프 체인 상 종점에 존재한다는 것은 변수를 검색할 때 전역 변수가 가장 마지막으로 검색된다는 것입니다.
• 즉 지역 변수의 검색 순위가 더 높으며, 전역 변수의 검색 속도가 가장 느립니다.

4. 네임스페이스 오염

• JavaScript의 가장 큰 문제점 중 하나는 파일이 분리되있더라도 하나의 전역 스코프를 공유한다는 것입니다.
• 다른 파일에서 동일한 이름을 가진 전역 변수, 전역 함수가 있을 경우 예상치 못한 결과를 가져올 수 있습니다.

전역변수 문제점 정리

전역 변수로 변수를 선언하게 되면 ...

• 전역 변수는 모든 코드에서 참조 or 변경 가능하다.
• 생애주기가 길다. = 상태 변경할 수 있는 기간이 길다.
• 전역 변수의 검색 순위가 가장 낮다.
• JS는 하나의 전역 스코프를 공유한다.

• 의도치 않게 상태가 변경될 수 있다.
• 코드 가독성이 나빠진다.
• 오랜 기간 메모리 리소스를 소비한다.
• 전역 변수의 상태를 변경할 수 있는 기간도 길어짐으로 의도치 않은 재할당이 발생할 위험
• 전역 변수의 검색 속도가 가장 느립니다.