자바스크립트 개발자가 알아야할 33가지 개념[#06. 함수 범위(Function Scope), 블럭 범위(Block Scope), 렉시컬(lexical) 범위]

스코프 (Scope)

자바스크립트에서 스코프는 어떤 변수에 접근할 수 있는지를 정의한다. 일반적으로 2가지의 스코프가 존재한다. 전역 스코프와 지역 스코프이다.

 

전역 스코프(Global Scope)

만일 변수가 모든 함수에 속하지 않고 {}괄호안에 들어있지도 않다면 우리는 그 변수를 전역 변수라고 한다.

전역 변수를 선언하면, 자바스크립트 코드 어디에서든 불러 올 수 있다. 심지어 함수 내부에서 도 사용 가능하다.

 

전역변수의 사용은 조심할 필요가 있다. 왜냐하면 두개 혹은 그 이상의 변수들이 같은 이름을 가지게 되어 네이밍 충돌(naming cillision)이 발생할 확률이 있기 때문이다.

 

 

만일 우리가 const 또는 let 키워드로 같은 이름의 변수를 선언하게 된다면 우리는 에러를 보게 된다.

 

 

만일 우리가 var 키워드로 변수 선언을 한다면, 두 번째 변수가 첫 번째 변수를 덮어쓴다. 이러한 코드로 작업을 하게 되면 디버그 하기가 매우 복잡하고 어려워 진다.

전역 변수사용을 지양하고,

지역 변수 사용을 지향해야 한다.

 

지역 스코프 (Local Scope)

코드 내 특정 구역에서만 사용할 수 있는 변수를 지역변수라고 한다.

자바스크립트에서는 두 가지 종류의 지역 변수가 존재한다.

1. 함수 스코프 지역 변수

2. 블록 스코프 지역 변수

 

함수 스코프 (Function Scope)

함수 내에서 변수를 선언했을 때, 함수 안에서만 이 변수에 접근할 수 있다. 함수 밖으로 나오게 된 이후에는 함수 내부에 변수에 접근할 수 없다.

 

 

블록 스코프 (Block Scope)

우리가 변수를 {} 괄호 안에 const 나 let 키워드로 선언했을때, 우리는 {} 괄호 안에서만 이 변수에 접근할 수 있다.

 

변수 var, let,  const의 스코프

var는 함수 스코프이고,

const, let 은 블록 스코프이다.

 

 

렉시컬 스코프 (Lexical Scope)

위 코드는 힘수 b의 상위 스코프가 무엇인지에 따라 결정된다. 두가지 패턴을 예측 할 수 있는데 ,

첫 번째는 함수를 어디서 호출하였는지에 따라 상위 스코프를 결정하는 것이고,

두 번째는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다. 

 

첫 번째 방식으로 함수의 상위 스코프를 결정한다면 함수 b의 상위 스코프는 함수 a와 전역일 것이고, 

두 번째 방식으로 함수의 스코프를 결정한다면 함수 b의 스코프는 전역일 것이다.

 

프로그래밍 언어는 이 두 가지 방식 중 하나의 방식으로 함수의 상위 스코프를 결정한다. 첫 번째 방식을 동적 스코프(Dynamic Scope)라 하고, 두 번째 방식을 렉시컬 스코프(Lexical Scope) 또는 정적 스코프(Static Scope)라고 한다. 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.

 

렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디서 선언하였는지에 따라 결정 된다. 

자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다. 함수를 어디서 호출하였는지 스코프 굘정에 아무런 의미를 주지 않는다. 

따라서 위 코드에서 b는 전역에 선언되었다. 그러므로 b의 상위 스코프는 전역 스코프이고 결과값으로 전역 변수 x의 값 1을 두번 출력한다.

 

 

 

 

---

참고 및 출처

 

• https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-6-%ED%95%A8%EC%88%98%EC%99%80-%EB%B8%94%EB%A1%9D-%EC%8A%A4%EC%BD%94%ED%94%84-%EB%B2%88%EC%97%AD-dijuhrub1x

• https://poiemaweb.com/js-scope