Scope (스코프)

1. 간단히 말해서 유효범위이다.
2. 참조하려는 대상을 식별하고 찾기 위한 규칙이다.

JavaScript Scope의 특징

1. 자바스크립트는 기본적으로 함수레벨 스코프의 룰을 따른다.

var a = 1;

{
	var a = 2;
    console.log(a); // 2
}

console.log(a); // 2
// 함수가 아닌 블록 내에서 a가 재정의가 된다.

var b = 3;

function c() {
	var b = 4;
    console.log(b);
};


c(); // 4
console.log(b); // 3
// 함수내에서만 유효하기 때문에 전역에서 b가 재정의가 되지 않고 3의 값을 가지고 있는다.

2. ES6에서 도입된 let, const는 변수를 블록레벨 스코프로 사용할 수 있다.(var는 함수레벨 스코프)

 const a = 1;
 
 {
 	const c = 2;
    console.log(a); // 1
 };
 
 console.log(c); // c is not defined
 // 블록내에서 정의된 c는 블록내에서만 유효하여 전역에서는 c를 참조하지 못한다.

Scope의 종류

Global Scope(전역 스코프) & Global Variable(전역 변수)

전역에 정의된 변수. 어디에서든지 참조 할 수 있다.

const a = 'Global'; // 전역 변수

cost b = () => {
	console.log(a);
};

b(); // 'Global';

Local Scope(지역 스코프) & Local variable(지역 변수)

함수 코드 블록내에서 정의된 변수. 함수와 그 함수의 하위 지역에서만 참조 할 수 있다.

const a = 'Global'; // 전역 변수

const b = () => {
	const c = 'Local'; // 지역 변수
    console.log(a);
};

b(); // 'Global';
console.log(c); // c is not defined 

// (지역변수인 c는 b라는 함수 내에서 정의가 되어있기 때문에 전역에서는 c를 식별하지 못한다.)

Function-level-scope(함수레벨 스코프)

함수 내에서만 유효하고 함수 외부에서는 유효하지 않는다.

var a = 1;

function b() {
	var a = 2;
    console.log(a);
};

b(); // 2
console.log(a); // 1

Lexical Scope(렉시컬 스코프)

중첩함수, 즉 함수내에 호출된 다른 함수가 선언된 지역에서의 상위지역의 변수를 참조할 수 있는 유효범위를 가지고 있다.

var a = 'Global';

function b() {
	var a = 'Local';
    console.log(a);
    c();
};

function c() {
	console.log(a);
};

b(); // 'Local'
	 // 'Global'

c(); // 'Global'

// 호출된 지역의 기준이 아닌 함수가 선언된 지역을 기준으로 상위 지역의 변수를 참조할 수 있다.

Scope가 필요한 이유?

코드가 길어질 경우, 이미 사용하고 있는 변수를 실수로 같은 이름으로 재정의해 사용해서 프로그램 충돌이 나타날수도 있고, 아니면 자기도 모르게 재정의가 되어 엉뚱한 값이 출력되는 걸 볼 수 있을것이다.

이 때, Scope의 규칙을 토대로 함수레벨과 블록을 잘 이해해서 사용하면 충돌을 방지하고, 같은 이름의 변수를 사용할 수 있게되며 자기도 모르게 변수가 재정의가 되는 일을 방지 할 수 있기 때문에 Scope와 같은 규칙이 필요하다.