[JS🐣] 스코프(Scope)

스코프란 무엇일까?

• 직역하면 영역, 범위라는 뜻
• 프로그램 언어에서 스코프는 '유효 범위'를 의미한다.
• 즉, 모든 식별자(변수 이름, 함수 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다.

이때, 이 식별자가 유효한 범위가 바로 스코프(Scope)이다.

스코프의 종류를 알아보자!

스코프는 전역 스코프와 지역 스코프로 구분할 수 있다.

전역 스코프란?

• 코드의 가장 바깥 영역을 의미한다
• 전역 변수를 선언한다면, 이 변수는 전역 스코프를 갖게 되기 때문에, 코드 모든 곳에서 해당 변수를 사용할 수 있다

지역 스코프란?

• 함수 몸체 내부를 의미한다
• 함수 내부에 지역 변수를 선언한다면, 이 변수는 지역 스코프를 갖게 되기 때문에, 함수 외부인 전역 스코프에서는 참조가 불가능하다(= 사용할 수 없다)

코드를 통해 익혀보자!

// 전역, 지역 스코프 예제

var x = "나는 전역!";

function localS(){
    var y = "나는 지역!";
    console.log(y); // 나는 지역!
    // x는 전역 스코프를 가지기 때문에 접근 가능
    console.log(x); // 나는 전역! 
}

localS(); 
// y는 지역 스코프를 가지기 때문에 함수 외부에서는 접근 불가능 
console.log(y); // 오류 발생

그렇다면 여기서 드는 궁금증?!

과연, 함수가 아닌 if문, for문 등의 코드 블럭에서도 y는 지역 스코프를 가질까?

아래의 코드가 어떻게 동작할 지 5초동안 생각해보기!!!

코드 1

// 전역 변수
var a = 1, b = 1;

if(true){
	// 지역 변수? 전역 변수?
    var a = 10;
 }
 
 function changeB(){
 	// 지역 변수
    var b = 10;
}

console.log(a);
changeB();
console.log(b);

코드 2

// 전역 변수
let a = 1, b = 1;

if(true){
	// 지역 변수? 전역 변수?
    let a = 10;
 }
 
 function changeB(){
 	// 지역 변수
    let b = 10;
}

console.log(a);
changeB();
console.log(b);

정답은?

• 코드 1의 경우 10과 1을 출력
• 코드 2의 경우 1과 1을 출력

이러한 현상이 일어나는 이유는 무엇일까?

바로 var과 let, const의 차이 때문이다

• var는 함수 레벨 스코프(function level scope)
• let, const는 블록 레벨 스코프(block level scope)

함수 레벨 스코프와 블록 레벨 스코프

함수 레벨 스코프란?

• 함수의 정의에 의해서만 지역 스코프가 생성되는 특성
• 즉, if, for, while, try/catch 등의 코드 블록에서는 전역 스코프가 생성됨!

블록 레벨 스코프란?

• 함수 뿐만 아니라, 코드 블록 내에서도 지역 스코프가 생성되는 특성

자바스크립트는 원래 함수 레벨 스코프를 따르지만,
ES6에 추가된 let, const 덕분에 블록 레벨 스코프를 사용할 수 있게 되었다.

그렇다면, 우리는 var을 써야할까? let, const를 써야할까?

결론적으로, var의 사용을 지양하는 것 좋다

• 중복 선언 가능
• 호이스팅 문제
• 참고 사이트
  var을 사용하면 안되는 이유
  var을 권장하지 않는 이유

렉시컬 스코프

• 함수를 어디에 선언하였는지에 따라 상위 스코프를 결정한다
• 함수를 어디서 호출하는지는 중요치않고, 함수를 어디에 선언했는지가 중요하다

렉시컬 스코프에 대한 자세한 내용은 렉시컬 스코프

스코프 체인

자바 스크립트가 변수 값을 얻으려고 할 때, 스코프 체인에서 변수를 찾게 된다.

스코프 체인이란?

• 해당 코드의 스코프 안에 있는 변수를 정의하는 객체의 리스트
• 즉, 스코프가 계층적으로 연결되는 것이라고 볼 수 있다
• 첫번째 객체에서 변수를 찾고, 없다면 그 다음 객체에서 해당 변수를 찾는 식으로 진행

코드와 그림으로 이해해보자!

// 스코프 체인

let x = "global x";
let y = "global y";

function outer(){
    let z = "outer's local z";

    console.log(x); // global x
    console.log(y); // global y
    console.log(z); // outer's local z

    function inner(){
        let x = "inner's local x";

        console.log(x); // inner's local x
        console.log(y); // global y
        console.log(z); // outer's local z
    }
    inner();
}

outer();

console.log(x); // global x

스코프 체인은 물리적인 실체로 존재한다

• JS 엔진은 코드를 실행하기 앞서, 위 그림과 같은 랙시컬 환경을 실제로 생성
• 변수가 선언되면 식별자가 렉시컬 환경에 key로 등록되고, 변수 할당이 일어나면 식별자에 해당하는 값을 변경한다

참고 사이트

스코프
렉시컬 스코프
스코프 체인
스코프 체인, 스코프