초보 개발자의 일기
스코프체인 본문
스코프체인
함수에서 어떤 값에 접근이 가능한가? 어떤 값에 접근이 불가능한가?라는 것을 의미한다.
{ } 블록이 기준이 된다.
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
'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 |