TIL _Scope

Local Scope vs Global Scope

Rule 1) 안쪽 Scope에서는 바깥 Scope의 변수/함수에 접근할 수 있지만, 안쪽 Scope의 변수/함수가 바깥쪽 Scope에서는 접근이 안 됨.

Global Scope > Local Scope > Block Scope로 이어짐

Global Scope에서 선언된 변수 'greeting'의 값 'Hello'는 Local Scope 안에서도 유효하지만,

Local Scope 안에 있던 변수 'firstName'은 Global Scope에서는 값이 존재하지 않음(Reference Error 발생)

Rule 2) Scope는 중첩이 가능하며(함수 안에 함수), 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가짐.

let name = 'Richard';

function showName() {
  let name = "Jack"; // 지역 변수(let 키워드가 있음)
  console.log(name); // showName 함수에서만 접근 가능 
}

console.log(name); // 'Richard'가 출력됨 
showName(); // showName()이 실행되서 지역 변수 값 'Jack'이 출력됨
console.log(name) // 'Richard'가 출력됨 

이처럼 Function showName() 안에서는 name이 지역 변수의 값으로 출력이 되지만, 다시 Global Scope로 돌아오면 전역 변수가 출력되게 됩니다.

하지만... 만약에 함수 내에서 let이나 const 등으로 변수를 선언하지 않고, 전역 변수와 동일한 변수에 값을 할당할 경우 새로운 값이 전역 변수에 할당되게 됨

let name = 'Richard';

function showName() {
  name = "Jack"; // 전역 변수(let 키워드가 없음)
  console.log(name); 
}

console.log(name); // 'Richard'가 출력됨 
showName(); // showName()이 실행되서 지역 변수 값 'Jack'이 출력됨
console.log(name) // 'Jack'이 출력됨 

** 이처럼 let, const 선언을 하지 않으면, 전역 변수가 초기화 될 수 있기 때문에 항상 let, const 선언을 할 것

Block Scope vs Function Scope

Rule 3) Block Scope는 중괄호({})로 시작하고 중괄호로 끝나는 단위이며, Function Scope와는 다른 개념임.

if (true) {	
  console.log('i am in the block') // Block Scope
}

for (let i = 0; i < 10; i++) {
  console.log(i); // Block Scope
}

{
  console.log('it works'); // Block Scope
}

** Block Scope 안에서 선언된 변수는 Block Scope 밖으로는 값을 가져올 수 없음(단 var로 선언한 경우에는 가능)

var 와 let 키워드의 차이

• Var 키워드는 함수 단위로 자신만의 Scope를 가짐
• Var는 Let과는 달리 재선언이 가능함
• Let 키워드는 Block 단위로도 Scope를 지정할 수 있음
  ** var 키워드의 사용은 권장되지 않음

const와 let 키워드의 차이

• const와 let 키워드는 동일하게 Block Scope를 따름
• const와 let 키워드는 값을 재선언할 수 없음
• const는 값이 변하지 않는 변수(상수)를 정의할 때 사용하며 값을 재정의하려고 하면 TypeError가 발생함
• let은 const와는 달리 값의 재정의가 가능함

전역 변수와 Window 객체

• Window는 전역 범위를 대표하는 객체임
• Global Scope에서 선언된 함수와 var 키워드를 가지고 선언된 변수는 window 객체와 연결 됨
• 전역 범위에 너무 많은 변수를 선언하지 않도록 주의할 것(var 키워드는 지향할 것)