JavaScript - Scope

정의: 변수 접근 규칙에 따른 유효 범위

• 변수는 어떠한 환경 내에서만 사용 가능하며, 프로그래밍 언어는 각각의 변수 접근 규칙을 가짐.
• 변수와 그 값이 어디서부터 어디까지 유효한지를 판단하는 범위이다.
• JavaScript는 기본적으로, 함수가 선언되는(lexical) 동시에 자신만의 Scope을 가짐.

---

1. Global Scope vs. Local Scope

let greeting = 'Hello';
function greetingSomeone() {
	let firstName = 'Josh'; 
    return greeting + ' ' + firstName
}

greetSomeone(); // => 'Hello Josh'
firstName; // => Reference Error  ...firstName이 정의되지 않음.

Global Scope (전역 변수)
상단 코드의 전체.

Local Scope (지역 변수)
function greetingSomeone(){}로 한정됨.
안쪽에서 선언된 변수는 밖에서 사용할 수 없음.

Global Scope에서 firstName을 호출하는 것은 불가능.

• Scope는 중첩이 가능함
  ==> 함수 안에 함수를 넣을 수 있음.
• Global Scope는 최상단의 Scope로, 어디서든 접근이 가능함.
• 지역 변수는 함수 내에서 전역 변수보다 더 높은 순위를 가짐.

**Local Scope에서 let 키워드가 있는 경우 case**

let name = "lana";

function showName() {
  let name = "lucy"; // 지역 변수
  // showName 함수 안에서만 접근 가능
  console.log(name); // lucy
}

console.log(name); // lana
showName(); // lucy
console.log(name); // lana

**Local Scope에서 let 키워드가 없는 경우 case****

let name = "lana";

function showName() {
  name = "lucy"; // 전역 변수
  // 선언(let)이 없기 때문에, 바깥 scope에 있는 name이라는 변수를 가져옴.
  console.log(name); // lucy
}

console.log(name); // lana
showName(); // lucy
console.log(name); 
// lucy <== 내가 새롭게 할당한 변수는 바깥쪽의 name과도 같기 때문. 

---

2. Function Scope vs. Block Scope

Block
Curly Bracket{} 으로 시작하고 끝나는 단위.

for(let i=0; i<5; i++) { //let 주목(
  console.log(i); // 다섯번 iteration
}
console.log('final i:', i); // Reference Error
// {}(Block) 의 범위를 벗어나는 즉시 변수를 사용할 수 없음.

* var 키워드 vs. let 키워드

var 키워드
JavaScript는 기본적으로, 함수 단위 로 자신만의 코드를 가짐.

• (var: old way)
• var를 사용한 재선언시, 아무런 에러도 내지 않음.
• 실제 코딩할 때에는 재선언을 해야할 필요X.
  (이러한 이유로 let/const사용이 권장됨)

let 키워드
Block 단위로 자신만의 코드를 가짐.

• Block 단위로 Scope를 구분했을 때에 예측하기 쉬운 코드를 작성할 수 있다(let)

for(var i=0; i<5; i++) { //var 주목
  console.log(i); // 다섯번 iteration
}
console.log('final i:', i); // i=5.
// block 범위를 벗어나도 (같은 function scope 에서는) 사용 가능.

const 키워드
constant 즉, 값이 변하지 않는 변수. 상수를 정의할 때 사용.

• let 키워드와 동일하게 Block Scope을 따름.
• 값을 재정의하려고 하면 TypeError를 냄.

	let	const	var
유효범위	Block Scope	Block Scope	Function Scope
값재정의	가능	불가능	가능
불가능	불가능	불가능	가능

---

3. 전역 변수와 window 객체

window
전역 범위를 대표하는 객체

• Global Scope에서 선언된 함수.
• var 키워드를 이용해 선언된 변수는 window 객체와 연결.
• 전역 범위에 너무 많은 변수를 선언하지 않도록 주의要
  - 전역은 최상위 scope라서, 어떤 프로그램(라이브러리)이 어떤 변수를 사용할지 모르기 때문.

var myName = 'Paul';
console.log(window.myName); // Paul

let yourName = 'Tim'

function foo() {
  console.log('bar')};

console.log(foo === window.foo); // true
console.log(myName === window.myName); // true

console.log(window.yourName); // undefined

---

4. 선언 없이 초기화된 전역 변수

절대로, 선언키워드(val, let, const)없이 변수를 초기화하면 안됨!

function showAge() {
  //age는 전역 변수로 취급됨.
  age = 90; // age === window.age와 같은 의미가 되어버림.
  console.log(age)
}
showAge(); // 90
console.log(age); // 90 
// Block{} of showAge (scope)바깥에서도 age 사용 가능. 절대 사용X 

Strict Mode
이러한 실수를 방지하고 싶을 경우 사용

'use strict'; // 이렇게 적기만 하면 됨.

function showAge() {
  age = 90 //<=== 이 부분에서 X가 뜸
  console.log(age); // X가 뜬 걸 보고 고치면 됨
}