스코프(Scope)란?
Scope를 한국어로 번역하면 '범위'라는 뜻을 가진 단어입니다. 자바스크립트와 다른 프로그래밍 언어에서는 '변수가 접근 가능한 유효한 범위'를 말합니다.
예시 코드를 보면 같은 이름의 변수가 있습니다. 이런 상황에서 JavaScript는 변수를 어떻게 식별할까요? Scope는 이를 도와주는 규칙이라고 할 수 있습니다.
스코프 종류
전역 스코프 (Global scope)
코드의 모든 영역에서 접근 가능한 변수를 가리킵니다. 전역 스코프에서 선언된 변수는 전역 변수(Global Variable)라고 부릅니다.
지역 스코프(Local scope)
특정 부분에서만 접근 가능한 변수를 의미합니다. 함수 내부에서 선언된 변수는 그 함수 내부에서만 접근 가능합니다. 이를 함수 스코프(Function Scope)라고도 합니다.
JavaScript Scope의 특징
함수 레벨 스코프(Function-level scope)
변수가 자신이 선언된 함수 내에서만 접근 가능하다는 것을 의미합니다. 다른 프로그래밍 언어와는 다르게 JavaScript에서는 기본적으로 지원합니다.
블록 레벨 스코프(block-level scope)
{}로 둘러싸인 코드 블록 내에서 선언된 변수가 해당 블록 내에서만 접근 가능하다는 것을 의미합니다. 다른 프로그래밍 언어에서는 블록 레벨 스코프를 주로 지원합니다.
JavaScript에서는 지원을 하고 있지 않다가 ES6 이후 let과 const 키워드를 도입하여 블록 레벨 스코프를 지원하기 시작했습니다.
ES6(ES2015)에서 도입된 화살표 함수(Arrow Function)는 블록 스코프를 따릅니다.
렉시컬 스코프(Lexical scope)
정적 스코프(Static scope)라고도 불리는 렉시컬 스코프는 변수가 코드에서 선언된 위치에 따라 결정됩니다.
예시 코드를 확인하면 inner 함수는 자신이 선언된 outer 함수의 스코프에 있는 변수 LexicalTest에 접근합니다. 이는 inner 함수가 선언된 위치, 즉 outer 함수 내부의 스코프를 참조하기 때문입니다.
JavaScript에서 함수 내에 선언된 내부 함수(또는 중첩 함수)는 자신이 포함된 외부 함수의 변수에 접근할 수 있습니다.
중첩 스코프(Nested Scope)
함수나 블록 안에 또 다른 함수나 블록이 있고, 그 안에 선언된 변수나 함수가 자신이 속한 스코프 뿐 아니라 그 바깥의 스코프에도 접근할 수 있는 상황을 가리킵니다. JavaScript는 렉시컬 스코프을 기반으로 하는 언어이므로, 중첩 스코프는 자신이 선언된 위치에 따라 스코프가 결정됩니다.
즉, 가장 인접한 지역을 우선하여 식별한다.
마무리
어렴풋이 알고 있는 스코프에 대해 더 자세히 알고자 공부하며 작성했습니다. 스코프를 제대로 이해하고 있다면, 변수의 생명주기와 가시성을 관리하고, 변수 이름 충돌을 방지하는 데 큰 도움을 주며, 코드의 가독성을 높이는 데에 도움을 준다니 반복하여 익혀야 할 거 같습니다.
글을 작성하는데 도움받은 글 목록
아래의 글들은 스코프에 대해 제 글보다 더 자세히 설명하고 있습니다. 정보가 더 필요하신 분들은 한 번 방문하시면 많은 도움을 받을 수 있을거라 생각합니다.
