스코프(Scope)란?

오늘! 첫 면접을 보고 왔는데요, 스코프가 무엇인지 설명해달라고 하시는 질문에 그만 횡설수설 해버렸답니다 하하..

사실 너무 기본적인 개념이라... 제가 제대로 알고 있지 못한다는 사실조차 모르고... 따로 대비할 생각을 못했던 것 같습니다... 근데 이게 이렇게 되네요  ^ _ ^ ㅋ

설명을 할라고 하니 어디서부터 어떻게 설명해야 할지...??? 첫 질문이어서 더 긴장해서 그랬던 것 같기도 하고요...

 

아무튼 각설하고! 이번 기회에 자바스크립트에서의 스코프라는 개념에 대해서 확실히 짚고 넘어가보겠습니다!

이 글을 보시는 분들은.. 아무쪼록 추후 면접에서 스코프에 대한 개념 설명을 깔끔하게 잘 하시길 바라며~ ✨ 정리 시작하도록 하겠습니다~

 

스코프(scope)란?

- 스코프는 변수 등의 식별자가 유효한 범위를 의미합니다.

- 스코프는 네임스페이스라고도 할 수 있습니다. 하나의 스코프 내에서 각 식별자는 유일해야 하지만, 다른 스코프에는 같은 이름의 식별자를 사용할 수 있습니다.

 

스코프의 종류

- 전역 스코프(global scope)

  - '전역'이란 코드의 가장 바깥 영역을 의미합니다. 전역에서 변수를 선언할 경우, 그 변수는 전역 스코프를 갖는 전역 변수(global variable)가 됩니다.

  - 이러한 전역 스코프는 어디서든지 참조할 수 있으며, 함수 내부에서도 참조가 가능합니다.

- 지역 스코프(local scope)

  - '지역'이란 함수 몸체 내부를 의미합니다. 지역에서 변수를 선언할 경우, 그 변수는 지역 스코프를 갖는 지역 변수(local variable)가 됩니다.

  - 지역 변수는 자신이 선언된 지역과 하위 지역(중첩 함수)에서만 참조할 수 있습니다. 다시 말해, 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효합니다.

 

스코프 체인

- 함수는 전역에서도 정의할 수도 있고 함수 몸체 내부에서 정의할 수도 있는데요, 함수 몸체 내부에서 함수가 정의되는 것을 함수의 중첩이라고 합니다.

- 스코프는 이러한 함수의 중첩에 의해 계층적 구조를 갖게 되고, 이처럼 스코프가 계층적으로 연결된 것을 스코프 체인이라고 합니다.

- 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 해당 변수를 참조하는 코드의 스코프에서부터 시작해서 상위 스코프 방향으로 이동하며, 선언된 변수를 검색하게 됩니다. 이를 통해 상위 스코프에서 선언한 변수를 하위 스코프에서도 참조할 수 있는 것이죠~

 

var 키워드로 선언한 변수와 let/const 키워드로 선언한 변수의 차이점

- var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용되기 때문에 부작용이 발생할 수 있습니다. 반면 let/const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용되지 않으며, 중복 선언을 하려고 할 경우 SyntaxError가 발생합니다.

- var 키워드로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정하는 함수 레벨 스코프를 따르는 반면, let/const 키워드로 선언한 변수는 모든 코드 블록(함수, <if문>, <for문>, <while문>, <try/catch문> 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따릅니다.

 

 

---

참고문헌

이웅모 (2020). 모던 자바스크립트 Deep Dive. 위키북스