[TIL] #5. Scope

 

Scope

 

Scope를 모르면 꽤 골치 아플 수 있다. 그러다 보니 관련 글, 영상들도 꽤나 많다.

Scope는 한마디로 말하면 "너의 variable 이 존재하는가 아닌가" 그게 Scope다.

여기에서 variable이 정의가 되었나, 아닌가 예시를 보면 다음과 같다.

 

if(ture){
    const hello ="hi";
}

console.log(hello) // ReferenceError : hello is not defined

여기선 hello는 정의가 되지 않았다. 그게 바로 scope이다. hello는 {} 안에서만 존재하는 것이다.

if(ture){
    const hello ="hi";
    console.log(hello)
}

console.log(hello) 

그래서 안에다가 넣어줘야 하는 것이고 이렇게 되면 hi 그리고 에러가 날것이다. 그게 바로 Scope이며 접근할 수 있나 없나에 대한 것으로 보면 된다.

 

우리가 모두 갖고 있는 첫 번째 Scope는 Global scope이다. Global scope는 그것이 어디에 있던지 무엇이든 접근할 수 있다. 

const h = "hello";

function a(){
    console.log(h)
}

a()

보다시피 함수 a안에는 h가 정의되어있다. 그러나 함수 a안에 뭔가를 정의하고 console.log를 한다면 정상 작동이 안 될 것이다.

이게 scope의 베스트 예시이다.

const h = "hello";

function a(){
    console.log(h)
    const b ="b"
}

a()
console.log(b);

Variable은 큰 곳에서 작은 곳으로 접근이 가능하다.

예를 들면 Global scope는 const h=hello가 있지.

그다음 함수 a가 있어 함수는 버블 같은 것이다. 이 버블은 부모 버블에 접근할 수 있지만 부모 버블은 자식 버블에게 접근할 수없다.

즉 a에서 Global scope로 접근할 수 있지만  Global scope에서 함수 a로는 접근할 수 없다.

이렇게 작동하고 functional scope 나오기 전에 var이 있었는데 예를 들면 다음과 같다.

if(true){
    var hello ="h"
}

console.log(hello) // h

 var를 사용하면 이는 정상 작동할 것이다. 그래서 var를 사용하면 안 되는 이유이다. 이제는 let, const 가 있으니까 이건 둘 다 block scope 이기 때문이다. let, const로 빌드하는 무엇이든 근저의 {} 이렇게 생긴 블록 안에 있을 거라는 것이다.

이걸 이해해두는 것은 매우 중요하다. 너의 variable들이 버블을 갖고 있고, 그 안에서 정의를 하고, 외부에서는 정의가 되지 않는다는 것이다. 안에서 정의가 되는 것이다. 이걸 이해하는 게 중요하다. 결국은 variable 이 존재하는가, 접근할 수 있는가가 핵심이라는 것이다.

function a(){
    const b = "b";
    function c(){
        const d = "d";
        function e(){
            const nn ="nn"
        }
    }
}

함수 e는 d 그리고 b에 접근할 수 있다. 그러나 b는 d 그리고 nn에 접근할 수 없다. d는 b에 접근할 수 있지만, d는 nn에 접근할 수 없는 것처럼 말이다. 버블이 여기저기에 있는 것이다. 개발자로 일을 하다 보면 Scope를 공유해야 할 때가 있다. 혹은 버블 안에 들어갔다가 결과와 함께 나오는 것이다. 결국 핵심만 아는 것 그게 중요하다 

let hello;
if(true){
    hello = "hello";
}
console.log(hello); // hello