초보 개발자의 일기

스코프체인 본문

Frontend practice/java script

스코프체인

판다꼬마 2024. 1. 28. 22:52
728x90

스코프체인

 

함수에서 어떤 값에 접근이 가능한가? 어떤 값에 접근이 불가능한가?라는 것을 의미한다.

{ } 블록이 기준이 된다.

switch (){

}

if (){

}

const a = () =>{

}

 

 


예시

const x = "x";
function c() {
    const y = "y";
    console.log("c");
    function b() {
        const z = "z";
        console.log("b");
        c();
    }
}
function a() {
    const x = "x";
    console.log("a");

    b();
}

a();
c();

 

이것을 실행해 보면

 

이라는 에러가 나온다.

 

anonymous => 파일 전체라고 생각하면 된다.

 

그 이유는 코드를 보면 나온다.

a => anonymous

b => c => anonymous

c => anonymous

 

이를 보면 anonymous안에 c와 a가 있다고 생각하면 된다.

 

코드를 한번 작성해 놓고 실행을 하면 코드는 변하지 않는다 => 이런 관계를 렉시컬 스코프라고 한다.

 

이것을 보기 어려우면 코드를 다 접어서 확인해 보자.

 

 

 

C와 A는 anonymous와 맞닿아 있고 b는 c안에 있다. 


 

문제 1

 

b에서 a에 접근이 가능할까?

정답은 그렇다 이다.

 

b => c => anonymous 이 상태인데

anonymous는 a를 가지고 있기 때문에 접근이 가능하다. => anonymous(a)

 

문제 2

c에서 y에 접근이 가능할까?

정답은 그렇다 이다.

 

c => y, b

b => z

a => x

anonymous => x, c, a 이므로

 

c가 y에 접근이 가능하다.

 

c => y, b

b => z

a => x

anonymous => x,c,a

 

이렇게 표시하는 것을 선언 지도라고 한다.

 

 

문제 3

const x = "x";
function c() {
    const y = "y";
    console.log("c");
    function b() {
        const z = "z";
        console.log("b");
        c();
    }
}
function a() {
    const x = "x2";
    console.log(x);

    // b();
}
console.log(x)
a();
c();

이렇게 실행을 하면?

x
x2
c

이런 결과 값이 나온다.

 

이유??

같은 변수인 x가 있는데 왜 되냐??라고 할 수도 있는데 다른 위치에 있는 변수이기 때문 (선언 지도에 위치가 다르다)

 


출처

https://www.youtube.com/watch?v=0lF2zaQ31Ek&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=5

728x90

'Frontend practice > java script' 카테고리의 다른 글

this  (0) 2024.03.24
호이스팅  (0) 2024.01.28
함수와 함수의 호출, 고차함수  (0) 2024.01.20
React prop  (1) 2022.05.26
React State  (1) 2022.05.24