[JavaScript] 스코프

스코프

: 변수가 스크립트 안의 어떤 곳에서 참조할 수 있는가를 결정하는 개념

🔸 글로벌 스코프 : 스크립트 전체에서 참조할 수 있다
🔸 글로벌 변수 : 글로벌 스코프를 갖는 변수, 함수의 바깥에서 선언한 변수

🔸 로컬 스코프 : 정의된 함수 안에서만 참조할 수 있다
🔸 로컬 변수 : 로컬 스코프를 갖는 변수, 함수 안에서 선언한 변수

var scope = 'Global Variable';

function getValue() {
	var scope = 'Local Variable';
    return scope;
}

console.log(getValue()); // 결과 : Local Variable ⓐ
console.log(scope); // 결과 : Global Variable ⓑ

ⓐ getValue 함수를 통해 변수 scope를 참조했을 경우에는 로컬 변수 scope의 값이 반환된다.
ⓑ 변수 scope를 직접 참조했을 경우에는 글로벌 변수 scope의 값이 반환된다.

🔸 var 명령을 꼭 써야하는 이유

scope = 'Global Variable';

function getValue() {
	scope = 'Local Variable';
    return scope;
}

console.log(getValue()); // 결과 : Local Variable ⓐ
console.log(scope); // 결과 : Local Variable ⓑ

ⓑ ⓐ에서 정의된 글로벌 변수 scope가 getValue 함수가 실행되는 단계에서 덮어 쓰이게 된 경우

➡ var 명령을 사용하지 않고 선언된 변수는 모두 글로벌 변수로 간주한다. 그러므로 글로벌 변수이든 로컬 변수이든 원칙상 변수 선언에는 var 명령을 써주면 버그가 발생하는 것을 방지 할 수 있음.

➡ 즉, 스코프는 var 명령으로 정의된 변수가 정의한 장소에 따라 변수의 스코프가 정해진다. 그래서 로컬변수를 정의하려면 반드시 var 명령을 사용해야 한다.

🔸 로컬 변수의 유호범위

var scope = 'Global Variable';

function getValue() {
	console.log(scope); // 결과 : ???? = undefined ⓐ
	var scope = 'Local Variable';
    return scope;
}

console.log(getValue()); // 결과 : Local Variable 
console.log(scope); // 결과 : Local Variable 

ⓐ : JavaScript에서 로컬변수는 함수 전체에서 유효하므로 이미 로컬 변수 scope가 유효하다 하지만 로컬 변수만 확보되기만 할 뿐 var 명령은 실행되지 않았기에 scope의 내용은 undefined = 변수의 호이스팅 (hoisting)
➡ 로컬 변수는 함수의 선두에 선언한다

🔸 가인수의 스코프 - (기본형, 참조형)
가인수 : 호출원으로부터 함수로 건네진 값을 받는 변수

** 기본형 **
var value = 10; ⓐ

function decrementValue(value) { 
	value--;
    return value;
}

console.log(decrementValue(100)); // 결과 : 99 ⓑ
console.log(value); // 결과 : 10 ⓒ

ⓐ 글로벌 변수 value = 10
ⓑ decrementValue함수 호출하면 내부에 있는 가인수 value는 로컬 변수로 인식
ⓒ 글로벌 변수 value에 덮어쓸 일 없어 원래의 값 10

** 참조형 **
var value = [1, 2, 4, 8, 16]; ⓐ

function decrementValue(value) {  ⓑ
	value.pop(); // 배열 끝 마지막 요소를 삭제
    return value;
}

console.log(decrementValue(value)); // 결과 :[1, 2, 4, 8] ⓒ 
console.log(value); // 결과 : [1, 2, 4, 8] ⓓ

ⓐ 글로벌 변수 value
ⓑ 로컬 변수 value
ⓒ 글로벌 변수 value의 값이 가인수 value에 전달되었을 시점에는 실제 참고하고 있는 메모리상의 주소를 건네주게 되어 결과적으로는 동일한 장소(주소)를 참조
ⓓ 그 결과는 글로벌 변수 value에도 반영

🔸 블록 레벨의 스코프는 존재하지 않는다

if (true) {
	var i = 5;
}
console.log(i); // 결과 : 5

➡ Java에선 에러가 나지만 JavaScript에선 블랙 레벨의 스코프가 존재하지 않아 블록을 빠져 나온 후에도 변수가 유효해 계속 사용할수 있어 올바르게 동작한다.

🔸 함수 리터럴/Function 생성자에서 스코프의 차이

var scope = 'Global Variable';

function checkScope() {
	var scope = 'Local Variable';
    
    var f_lit = function() { return scope; }; ⓐ
    console.log(f_lit());            // 결과 : Local Variable 
    
    var f_con = new Function('return scope;'); ⓑ
    console.log(f_con());           // 결과 : Global Variable
}
checkScope();

ⓐ 함수 리터럴 f_lit : 로컬 변수 참조
ⓑ Function 생성자 f_con : 글로벌 변수 참조 즉, Function 생성자 안의 변수는 선언 장소에 상관없이 항상 글로벌 스코프로 간주한다.