[모던 자바스크립트 딥다이브]_스코프 어디까지 보고 오셨어요?

스코프란?

스코프는 사전적인 의미로 범위를 말합니다.

어떤 변수 혹은 값이 제 역할을 할 수 있는 범위를 말하는 것입니다.

우리가 코드를 작성할 때 들여쓰기로 각 영역을 보기 좋게 구분하는 것도 일종의 범위를 보기 위함인데요.

const foo = 123
const bar = 'go!'
function start(x, y) {
	return x+y;
}

이제 조금 더 자세히 알아보겠습니다.

 

스코프의 종류

전역스코프와 지역스코프 두가지가 존재합니다.

전역스코프는 코드 전체에서 참조할 수 있는 범위(변수)를 말합니다.

지역스코프는 마치 상자 속 세상처럼 밖에서는 참조할 수 없고 그 안에서만 참조할 수 있는 범위(변수)를 말합니다.

그래서 우리는 전역변수를 함수 속에서도 참조할 수 있으며,

조건문밖에서도 참조할 수 있게 되는 것이죠.

하지만 반대로 조거문 안에 선언된 변수는 조건문 밖에서는 참조할 수 없는 원리가 바로 스코프 때문입니다.

const foo = 'out'

for (let i=0; i<2, i++) {
    const bar = 'in'; 
    cosole.log(foo); // out
}

console.log(bar); // bar is not defined!

이렇게 참조할 수 있는 방향이 단방향입니다.

안에서는 foo를 참조할 수 있으나,

밖에서는 bar를 참조할 수 없습니다.

 

스코프 체인

스코프 체인은 이전에 배웠던 개념에서 조금 더 연장하겠습니다.

전역 변수, 그 안에 지역변수, 또 그 안에 지역변수가 있다고 한다면

마치 상자속 상자의 세상이 있는 것이죠.

이럴때 스코프가 계층적으로 연결되어 있는 것을 스코프체인이라고 합니다.

//전역스코프 영역	
    함수1{
    //지역스코프 1
    	함수2{
        //지역스코프 2          
        }
    }

 

함수 레벨 스코프

다만 const와 let과 같은 예약어와는 다르게 var 키워드는 코드 블럭

그러니까 중괄호를 사용하는 코드 범위에서의 변수 선언이 조금 다르게 작동합니다.

if, for 등 다른 코드블럭에서 사용하면 지역스코프가 생성되는 것과 다르게 전역변수로서 기능하게 됩니다.

다만 함수 코드블럭 내에서는 지역변수로서 기능을 가지게 됩니다.

표로 정리해보겠습니다.

	var	const, let
일반 코드블록	전역스코프	지역스코프
함수 코드블록	지역스코프	지역스코프

 

렉시컬 스코프

var x = 1;

function foo() {
    var x =10;
    bar();
}

fucntion bar() {
    console.log(x);
}

foo(); // ----??값1
bar(); // ----??값2

위의 코드는 렉시컬 스코프의 개념을 이해하는데 도움을 줍니다.

기본적으로 자바스크립트는 렉시컬 스코프를 따르므로 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정합니다.

함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않습니다.

즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프입니다.

쉽게 말하자면 bar 함수가 이미 정의된 위치에서 x의 값은 전역변수의 x라는 말입니다.

그래서 foo함수속에서 다시 정의된 x 값이 bar함수에서는 소용이 없는 것이죠.

값1, 값2 모두 전역변수 x의 값인 1이 출력됩니다.

(만약 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정하게 된다면 그것은 동적 스코프라고 합니다.)