JS : 스코프(Scope)와 변수 선언

스코프(Scope)

🔗 참고자료
Poiemaweb 스코프
인프런 프로그래밍 시작하기 : 웹 입문 (Infelearn Original)

스코프(Scope, 유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적인 개념이다.

✨즉, 스코프는 변수를 선언할 때 그 변수를 어디서 접근 가능한지를 정의하는 영역의 의미!✨

📌 특징

• 정의 : 식별자 접근 규칙에 따른 유효 범위이다.

• 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다.

• 범위는 중괄호(블록) 또는 함수에 의해 나눠지며, 그 범위를 스코프라고 부른다.

✅ 스코프의 구분

1. 전역 스코프(Global Scope)

   • 블록 바깥에 그냥 선언된 변수
   • 코드 어디에서든지 참조 가능

2. 지역 스코프(Local scope or Function-level Scope)

   • 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에만 참조 가능
   • 블록 스코프 : 일반적인 블록(조건문, 반복문 등)에 선언된 변수
   • 함수 스코프 : 함수 내부에 선언된 변수

✅ 스코프 범위

1. 전역 스코프에 선언된 변수

   • 모든 스코프에서 사용 가능

2. 블록 스코프에 선언된 변수

   • var : 모든 스코프 사용 가능
   • let : 블록 내부 및 중첩된 블록 내부에서만 사용 가능

3. 함수 스코프에 선언된 변수

   • 해당 함수 내부에서만 사용 가능

✅ 변수 스코프의 구분

• 전역 변수(Global variable) : 전역에서 선언된 변수이며 어디에든 참조 가능 → 함수 외부

• 지역 변수(Local variable) : 지역(함수)내에서 선언된 변수이며 그 지역의 하부 지역에서만 참조 가능 → 함수 내부

---

스코프와 변수 선언

🔗 참고자료
Codingapple var, let, const와 선언, 할당, 범위
MDN const
MDN let
MDN var
Evans Library JavaScript의 let과 const, 그리고 TDZ

변수 선언에 따른 스코프 유효 범위와 차이점을 알아보자!

⚙️ const

• 유효 범위 : 블록 스코프 ▶ 함수 안에서만 사용 가능
• 값 재할당 : 불가능
• 재선언 : 불가능
• 변수 생성 과정 : 선언 + 초기화 + 할당
• 호이스팅 : ReferenceError(참조에러) ▶ TDZ(Temporal Dead Zone)

⚙️ let

• 유효 범위 : 블록 스코프 ▶ 함수 안에서만 사용 가능
• 값 재할당 : 가능
• 재선언 : 불가능
• 변수 생성 과정 : 선언 단계 → 초기화 단계 → 할당 단계
• 호이스팅 : ReferenceError(참조에러) ▶ TDZ(Temporal Dead Zone)

⚙️ var

• 유효 범위 : 함수 스코프 ▶ 함수 밖에서도 사용 가능
• 값 재할당 : 가능
• 재선언 : 가능
• 변수 생성 과정 : 선언 및 초기화(undefined를 할당) 단계 → 할당 단계
• 호이스팅 : 에러 X ▶ 가능

---

🗓️ 수정 및 추가

✅ 2022.02.24

• 썸네일 변경

✅ 2022.02.26

• 변수 선언 설명 추가

✅ 2022.04.21

• 스코프 참고자료(링크) 및 설명 추가
• 스코프와 변수 선언 참고자료(링크) 및 설명 추가