• 카테고리

    질문 & 답변
  • 세부 분야

    백엔드

  • 해결 여부

    해결됨

자바스크립트 변수 스코프에 대해 질문드립니다.

23.11.16 20:32 작성 23.11.16 20:32 수정 조회수 161

1

강사님 안녕하세요

변수 스코프에 대해 질문드립니다.

자바스크립트는 변수를 참조할 때 현재 블록 부터 시작해 상위 블록으로 올라가며 변수를 찾는다고 이해하고 있습니다.

그래서 아래의

1번째 코드는 이해가 됩니다.

const b=10; 
함수(a=>({ 
a: b //b는 10입니다.
 }));

여기서 2번째 b는 상위 블록으로 올라가며 const b =10 을 찾습니다.

그래서 a: 10이 됩니다.

 

그러나 2번째 코드의 경우 이해가 어려웠습니다.

const b=10; 
함수(b=>({ //b는 undefined 입니다.
a: 11
 }));

이때는 콜백함수의 매개변수 b에 10이 아닌 undefined가 들어갑니다.

여기서 이해가 어려웠습니다.
자바스크립트는 변수를 참조할 때 현재 블록 부터 시작해 상위 블록으로 올라가며 변수를 찾습니다.

 

그렇다면 1번째 코드처럼 2번째 코드에서도 파라미터 b에 10이 들어간다고 생각했는데, 제가 잘못 생각한 부분을 가르쳐주시면 감사하겠습니다.

답변 1

답변을 작성해보세요.

1

아래 함수의 b는 매개변수 b입니다. 바깥에 있는 b와 다른 새로운 변수를 선언한 겁니다.

참고로 매개변수 b는 함수 호출 시에 인수로 그 값이 할당됩니다.

강사님 답변 주셔서 감사합니다
혹시 이렇게 이해해도 되나요?

1.
함수를 호출할 때마다,
호출스택에 해당 함수의 지역변수들이 담기는 지역이 할당됩니다.

2.
2번째 경우는 다른 지역에 위치한 변수이므로, 함수 내의 매개변수 b가 바깥의 변수 b를 참조할 수가 없습니다.

3.
1번째 경우의 함수 안에 있는 b는 새로운 변수를 선언한 것이 아닙니다.
C언어로 비유하면 새로운 지역변수를 선언한 것이 아니라, 포인터의 개념으로 바깥의 b를 참조합니다.

4.
1번째 경우의 함수 안에 있는 b는 바깥의 b를 그대로 따라서 const 입니다.
2번째 경우의 함수 안에 있는 매개변수 b는 let 입니다.

으로 이해했습니다.

1번의 경우는 함수 안에 있는 b는 어딘가에 선언된 b를 가리키는 이름이고, 2번의 경우는 매개변수 b를 스코프 안에 새로 선언한 겁니다

저는 지금까지 var let const this 로만 변수 스코프를 알고 있었는데, 함수 안에 있는 변수가 매개변수인지, 아니면 어떤 위치에 있는지에 따라서도 다른가보네요

아래처럼 이해하면 되는군요

1번째 코드

const b =10;

함수(a=>({c:b}) 
//함수(a=>({c:10})과 같습니다.

 

2번째 코드

const b =10;

함수(b) 
// 함수(10) 과 같습니다. 
// 이때는 b를 매개변수로 선언한 게 아니라 b의 값이 들어간 것이기 때문이죠

3번째 코드

const b =10;

함수(b=>b*2) 
//이때 b는 10 이라는 값이 들어간 게 아니라 
//새로운 매개변수를 선언해준 것이기에 undefined가 들어갑니다.

 

드디어 이해가 된 것 같습니다.

늦은 시간에도 빠르게 확인해주시고 가르쳐주셔서 감사합니다.