✏️ [JavaScript] - 6. 스코프

스코프는 이전 포스트에서 다른 JavaScript 개념에 대해 설명할 때 간간히 등장했는데요, 그만큼 JavaScript 언어에서 중요하고 기본적인 개념 중 하나입니다. 스코프를 충분히 이해하지 않으면 다른 개념을 이해하는 데 어려움을 겪을 수도 있습니다. 스코프에 대해 알아봅시다! 🚀

1. 스코프란?

• 스코프(Scope)는 프로그램에서 변수나 함수의 유효 범위를 나타냅니다.

  • 어떤 부분에서 변수나 함수에 접근할 수 있는지를 규정합니다.
  • 전역 스코프와 지역 스코프가 있습니다.

• 식별자의 유효 범위 결정:

  • 식별자는 선언된 위치에 따라 유효 범위가 결정됩니다.
  • 이를 통해 다른 부분에서 해당 식별자를 참조할 수 있는 규칙이 형성됩니다.

2. 식별자와 스코프

• 식별자(Identifier)는 변수나 함수 등을 구별하기 위한 이름을 말합니다.
• 식별자의 유효 범위는 스코프에 의해 결정되며, 같은 이름의 식별자라도 서로 다른 스코프에 있을 경우 충돌하지 않습니다.

💡 하나의 스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다.
💡 조금 더 쉽게 얘기하자면 스코프를 폴더로, 식별자를 그 안의 파일들로 생각해볼 수 있다.

3. 스코프의 종류: 전역 vs. 지역

• 전역 스코프(Global Scope): 프로그램 전체에서 접근 가능한 스코프로, 전역 변수와 함수가 속합니다.
  💡 전역: 코드의 가장 바깥 영역

• 지역 스코프(Local Scope): 특정 블록이나 함수 내에서만 접근 가능한 스코프로, 지역 변수와 함수가 속합니다.
  💡 자신의 지역 스코프와 하위 지역 스코프에서 유효

4. 스코프 체인: 계층적 구조

• 스코프 체인(Scope Chain)은 중첩된 스코프들 간의 계층적 구조를 나타냅니다.

• 내부(하위) 스코프에서 외부(상위) 스코프의 변수에 접근할 수 있으며, 이는 스코프 체인을 통해 이루어집니다.
  💡 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없습니다.

5. 함수 레벨 스코프

• 함수 레벨 스코프(Function-level Scope)는 함수 내에서 선언된 변수가 함수 내부에서만 유효하게 되는 스코프의 특징을 나타냅니다.
• 함수 외부에서는 해당 변수에 접근할 수 없습니다.
• 주로 var 키워드로 선언된 변수에 한합니다.

6. 렉시컬 스코프 vs. 동적 스코프

• 렉시컬 스코프(Lexical Scope)는 함수가 정의된 위치에 따라 스코프가 결정되는 개념입니다.
• 렉시컬 스코프는 정적인 스코프로, 코드를 작성할 때 스코프가 정해지며, 함수를 어디에서 호출하든 상관없이 렉시컬 스코프는 변하지 않습니다.
• 반면에 동적 스코프(Dynamic Scope)는 함수가 호출되는 시점에 따라 스코프가 결정되는데, 일반적으로 렉시컬 스코프를 사용하는 언어가 많습니다.

<참조>
📍 모던 자바스크립트 Deep Dive