TodoMVC 의 IIFE 즉시실행함수를 공부하며 궁금했던 Scope 개념을 정리해보았당 해당 내용은 JavsScript Scope ,Local vs Global 내용을 정리하였습니다. Mosh 만세 ! 🙌🏻

JavaScript Scope (Local vs Global)

프로그램에서 변수는 어디에 저장되어있을까 ? 프로그램은 해당 변수가 필요할 때 어디를 찾아봐야할까 ? 프로그램에서 변수를 찾기 편하게 하기 위해서 Scope라는 개념이 정의되었다.

1)

const name = "Alan";
console.log(name);
// result : "Alan"

2) { } 로 const 감싼 경우

{
    const name = "Alan"
}
console.log(name);
// Uncaught ReferenceError: name is not defined 

1)의 경우 에러 없이 Alan이라는 결과를 반환하지만, 2)는 name이 정의되지 않았다는 오류가 발생한다.

변수나 constant의 범위(Scope)가 뜻하는 바는 해당 변수가 어느 범위까지 접근이 가능한지 나타낸다.

🔒 let, const 와 { }

let이나 const 로 선언한 변수는 변수가 정의 되어 있는 블록 , { } 안에서만 접근이 가능하다. 따라서 2) 에서의 console.log가 실행되는 전역 스코프에서는 name 변수를 찾을 수 없는 것이다.

function start(){
const message = "hi";
  if(true){
    const another = 'bye';
}
console.log(another)
}

함수, if, for 문 모두 { }으로 구성 되어 있다. 위 코드의 if 문 내에서 정의된 another 변수도 if 밖을 벗어나지 못하기 때문에 아래 console.log(another) 은 ReferenceEffor에러를 낸다.

const color = 'red';
function start(){
    const color = 'blue';
    const message = "hi";
}
function stop(){
    const message = "hi";
}

start();
  • start와 stop은 각각의 { } 블럭으로 message 변수를 감싸고 있다. 따라서 이름이 중복되더라도 start message는 start 함수 안에서, stop message는 stop 함수 안에서만 접근하기 때문에 문제 없이 동작한다.

  • 제일 위에 정의된 color 변수는 글로벌 스코프에 정의되었다. 따라서 프로그램 어느 내부에서 든지 접근이 가능하다.

  • 전역 스코프에서 정의된 변수 color와 같은 이름으로 function 안에서 사용되면 어떤 일이 일어날까 ?

    • color는 blue로 변경됨
    • function 안에 정의된 지역 변수는 전역 변수보다 우위를 선점한다.

    ✔️ 전역변수는 프로그램 내 어디에서든지 접근이 가능하고 수정할 수 있기 때문에 각종 버그나 문제를 일으킬 수 있다. 따라서 전역 변수는 최대한 만들지 말아야한다.