Scope

✅ Scope란?

변수에 접근할 수 있는 범위

무슨말인고 하니, 우리가 아는 변수는 어떠한 환경 내에서만 사용가능하다고 한다.

이때, 변수가 어디서부터 어디까지 유효한지를 판단하는 범위를 뜻하는 것이 scope이다. 

 

자바스크립트는 기본적으로, 함수가 선언되는 동시(lexcical)에 자신만의 범위(scope)를 가진다고 한다.

선언이다 선언! 호출이 아니다.

---

전역 범위(Global scope)와 지역 범위(Local scope)

전역 범위
코드 어디에서든지 접근할 수 있다.

지역 범위
함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 접근할 수 있다.

모든 변수는 Scope를 갖는다. 변수의 관점에서 Scope를 구분한다면 다음과 같다.

전역 변수(Global variable)
전역에서 선언된 변수이며 어디에서라도 접근할 수 있다.

지역 변수(Local variable)
함수 내에서 선언된 변수이며 그 지역과 그 지역의 하위 지역에서만 접근할 수 있다.

 

접근한다는 말이 헷갈릴 수 있는데, 가져온다고 생각하자 (진지하니깐 궁서체)

 

let hi = 'Hello';

// 여기부터
function introduce() {
	let myName = 'jewon';
    return hi + ' ' + myName;
}
// 여기까지 지역 범위

introduce();   // 'Hello jewon'  가능~!
myName;        // ReferenceError 불가능~!

// 위 전체가 전역 범위

위 코드에서 지역 범위인 function() {} 은 전역 변수인 hi의 정보를 가져올 수 있었다.

전역 범위에서는 지역 범위인 함수 내로 접근할 수 없기에 myName;을 했을 때, 참조 오류가 떳다.

---

함수 범위(Function scope)와 블록 범위(Block scope)

위에서 Scope를 나눌 때 함수 안인지 그 외 인지에 따라 전역, 지역 범위를 나눴다.

이렇게 함수를 단위로 범위를 나누는 것이 함수 범위(Function Scope)이다! 하지만 let, const keyword를 사용하면 블록 범위(Block scope)를 사용할 수 있다. 블록 범위란 중괄호 { }를 기준으로 범위를 나누는 것을 뜻한다.

함수 범위(Function Scope)
함수 단위
var로 선언 시

for(var i=0; i<5; i++) {
  console.log(i); // 다섯번 iteration
}
console.log('final i:', i); // final i = 5

block 범위를 벗어나도 (같은 function scope 에서는) 사용 가능

 

블록 범위(Block Scope)
중괄호 { } 단위
let, const로 선언 시

for(let i=0; i<5; i++) {
  console.log(i); // 다섯번 iteration
}
console.log('final i:', i); // ReferenceError

즉, block 범위{ }를 벗어나는 즉시 변수를 사용할 수 없다.

---

전역 변수와 window 객체

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

Global Scope에서 선언된 함수, 그리고 var 키워드를 이용해 선언된 변수는 window 객체와 연결

1. var로 선언된 변수 (Global Scope 일때!!)
var myName = "Paul";
console.log(window.myName); // Paul


2. Global Scope에서 선언된 함수 (표현이 아닌 선언!!)
function foo() {
	console.log('bar');
}

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

---

⭐ 선언 키워드 (var, let, const) 없이 변수를 초기화하지 말 것

전역 변수를 활용하면 편할 것 같은데, 나중되면 너무나 헷갈린다고 한다! 일단 자제하자.