📚JavaScript - 변수 스코프
- scope
- block
- global scope
- global variable
- block scope
- local variable
- global namespace
- scope pollution
💡Scope
block scope VS global scope
- 우선 block은 코드에서
{ }로 묶인 부분을 블록이라고 한다.- scope는 어떠한 영역 또는 범위라는 사전적 의미를 갖고있다. 프로그래밍 관점에서는 어떠한 유효 범위를 의미한다.
- 그렇다면 block scope는 어느정도 유추할 수 있을 것 같다.
- 유추할 수 있듯이
{ }로 묶인 부분의 범위를 block scope라고 한다.- 그렇다면 global scope는 무엇을 의미할까?
- 전체 영역이라고 유추할 수 있다.(여기서 전체란 코드의 전체를 얘기한다.)
정리하면 block scope는 {}영역, global scope는 전체 영역
(let / const) & (var)의 차이 : https://velog.io/@lshyun955/01.JavaScript-sykh8f6w
global variable VS local variable
- global은 위에 있듯이 여기서는 코드 전체를 의미한다. 그렇다면
global variable은 코드 전체 변수(?)라고 일단 생각해보자.- global variable은 global scope라는 속성을 갖고있다.
- 그렇다면 global variable은 코드 전체 영역이 유효범위인 변수라는 것을 알 수 있다.
- 그렇다면 local은 global과는 다르게 특정 영역이라는 의미를 갖고있다. 그럼
local variable을 특정 영역 변수(?)라고 생각해보자.- local variable은 block scope 속성을 갖고 있다.
- 그렇다면 local variable은
{ }영역만 유효 범위인 변수라는 것을 알 수 있다.
global namespace & scope pollution
- global namespace가 뭔지 위의 개념들을 이용해서 유추해보자.
- global(코드 전체 영역) / namespace(이름이 존재하는 공간.컴퓨팅에서 namespace는 다양한 종류의 개체를 식별하고 참조하는 데 사용되는 집합을 의미한다.)
-> 두가지 의미를 종합해서 유추해보면 코드 전체 영역에서 다양한 종류의 개체를 식별하고 참조하는데 사용되는 이름들의 집합이라고 유추할 수 있다. -> 결국은 global namespace에는 코드 전체 영역의 변수들과 함수들의 이름이 저장되는 공간이다.
- global namespace를 왜 알고 있어야 하는지 scope pollution을 보면서 살펴보자.
- scope pollution -> 직역하면
유효 범위 오염이다.- 결국 유효 범위란 위에서 볼 수 있듯이 변수들의 유효 범위라는 것을 알 수 있다.
- scope pollution이 무엇을 의미하는지 global namespace와 연관지어 생각해보자.
- global namespace에는 코드 전체 영역의 함수와 변수의 이름이 저장되는데, 이 경우 global scope에 저장된 변수의 이름과 block scope에 저장된 변수의 이름이 같아서 충돌될 경우에 scope pollution이 발생한다.
let sp = "sp"; // global namespace에 sp라는 global scope 변수 이름 저장. function test() { sp = "sp1"; // block scope의 변수 이름이 이미 global space에 존재하여 접근 가능. log("block", sp); // 예상: sp1 실제: sp1 } test(); // 호출 log("global", sp); // 예상: sp 실제: sp1 /* *이런 문제를 해결하기 위해서는 block scope를 이용해서 최대한 변수 선언을 타이트하게 해 *줘야함 **/ let sp = "sp"; // global namespace에 sp라는 global scope 변수 이름 저장. function test() { let sp = "sp1"; // block scope에 새로운 변수를 선언하여 블록 내에서만 유효하게 설정. log("block", sp); // 예상: sp1 실제: sp1 } test(); // 호출 log("global", sp); // 예상: sp 실제: sp
❗️결론
전역 유효 범위에 많은 변수, 함수, 객체 등으로 어지럽히지 않도록 하기 위해 블록 스코프를 잘 사용해서 변수의 사용 범위를 엄격하게 제한하자.
그리고 Namespace Pattern에 대해 알아보자.(추후 따로 게시글 작성예정)
