자바스크립트의 변수, 함수에는 스코프가 존재한다.
스코프는 자바스크립트에서 어떤 변수들에 접근할 수 있는지를 나타낸다.
ES5 까지는 함수 레벨의 스코프(function scope)만 사용 가능했으나,
ES6 부터는 let과 const로 블록 레벨의 스코프(block scope)를 사용할 수 있다.
이 스코프에 대해서 알아보자
https://www.edwith.org/boostcourse-web/lecture/16693/
스코프와 레벨
스코프는 다음과 같이 구성된다
- 전역 스코프
- 지역 스코프
- 함수 레벨 스코프
- 블록 레벨 스코프
앞서 블록 레벨 스코프, 함수 레벨 스코프를 설명했는데 전역 스코프와 지역 스코프는 무엇인가?
아래 내용을 보며 살펴보도록 하자
전역 스코프
변수가 함수 바깥이나 {} 바깥 에서 선언되었다면, 전역 스코프에 정의된다.
let a = 'aa'
위의 a는 어디에서나 접근 가능하다.
변수를 글로벌 변수로 선언했을 경우, 이는 전역 스코프에 정의된다고 알 수 있다.
let a = 'first'
let a = 'second' // 이미 선언되어있음
전역 스코프에서 중복 재할당의 문제가 발생할 수 있으므로 주의해야 한다.
지역 스코프
지역 스코프는 특정 영역에서만 사용할 수 있는 변수이다.
지역 스코프는 다음과 같이 2가지로 이루어진다
- 함수 레벨
- 블록 레벨
함수 레벨 스코프
function a(){
var b = 2;
}
위와 같이 선언했을 때, b는 함수 a에서만 사용할 수 있다.
함수 레벨 스코프는, 함수 내에서만 사용 가능한 변수를 의미한다.
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.
즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
블록 레벨 스코프
블록 내부에서 const, let으로 변수를 선언한다면, 이 변수들은 블록 내부에서만 사용이 가능하다.
{
const a = 'hello world'
console.log(a) // 'hello world'
}
console.log(a) // Error, a is not defined
모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하다.
따라서 코드 블록 외부에서는 참조할 수 없다.
즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.
정리하자면 javascript는 ES5까지는 함수 레벨 스코프만 제공했으나,
ES6부터는 let, const를 이용해 블록 레벨 스코프 선언이 가능하다.
const를 먼저 사용하자. 재할당해야 하는 경우가 생기면 let을 사용한다.
var는 block scope를 지원하지 않기 때문에 되도록 사용하지 말자
'front-end > 부스트코스 web' 카테고리의 다른 글
[부스트코스] Ajax 와 비동기 (0) | 2020.03.16 |
---|---|
[부스트코스] 브라우저 Event (0) | 2020.03.09 |
[부스트 코스] JavaScript 타입 (0) | 2020.02.24 |
[부스트 코스] JavaScript 첫 걸음 (0) | 2020.02.17 |
[부스트 코스] Request, Response 객체 (0) | 2020.02.10 |