Scope
- Scope: 범수 접근 규칙에 따른 유효 범위
프로그래밍을 할 때, 변수가 유효한 범위가 어디까지인지 알 수 있어야 한 줄의 코드가 작동하는 데에 있어서 작동 범위를 파악할 수 있다.
변수가 접근할 수 있는 범위가 존재한다.
자바스크립트는 기본적으로 함수가 선언되는 동시에 자신만의 스코프를 가진다.
- local scope (함수)
- global scope (전역)
- block scope (블록)
로 나눌 수 있다. 로컬에서 선언된 변수는 전역에서 참조할 수 없지만, 전역에서 선언된 함수는 로컬에서 참조할 수 있다.
블록 스코프는 let에서만 사용이 가능하다. 이유는 뒤에.......
스코프 규칙
- 스코프는 중첩이 가능하다. (함수 안에 함수를 넣을 수 있다.)
- 글로벌 스코프는 최상단의 스코프이기 때문에 전역 변수 어디서든 접근 가능.
- 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가진다.
- 전역 변수를 참조한 지역 변수를 재가공한 후, 다시 글로벌 스코프에서 그 전역 변수를 사용하게 되면 전역 변수는 참조한 지역 변수의 값을 가지게 된다.
// let을 밖으로 빼낼 경우
for(let i=0; i<5; i++) {
console.log(i);
}
console.log('final i:' , i); //error
for(var i=0; i<5; i++) {
console.log(i);
}
console.log('final i:' , i);
//5- Block scope: 중괄호로 시작하고, 끝나는 단위
스코프를 구분하는 단위로 가장 많이 사용한다.
block 범위를 벗어나는 즉시 변수를 사용할 수 없다. (e.g. for 구문의 i)
function greeting(firstName) {
var time = 'night';
if(time === 'night') {
var greeting = 'good night';
}
return greeting + ' ' + firstName;
}
greeting('rara') //good night rara
//var는 function 안에서 돌기 때문에 function 안에서는 자유롭게 가능하다
function greeting(firstName) {
let time = 'night';
if(time === 'night') {
let greeting = 'good night';
}
return greeting + ' ' + firstName;
}
greeting('rara')
//error
//let는 block로 돌기 때문에 if문에 있는 greeting은 if block에서 끝난다var 키워드 Vs. let 키워드
var 형식은 기본적으로 함수 단위로 자신만의 스코프를 가지게 된다. var는 블록형이 아닌 함수형이므로, 블록 범위를 벗어나도 (같은 function scope에서는) 사용이 가능하기 때문에 혼동하기 쉽다.
let 키워드는 block 단위로 scope를 구분하기 때문에 예측하기 쉬운 코드를 작성할 수 있다. let은 블록형으로 스코프를 가지기 때문에, 함수 안의 for문이나 if문에서 정의를 했을 때, 그것을 밖으로 꺼내어 사용할 수가 없다.
const 키워드
값이 변하지 않는 변수, 즉, 상수를 정의할 때 사용한다.
let 키워드와 동일하게 Block Scope를 따르지만 "값이 변하지 않는 변수"라서 값을 재정의하려고 하면 타입 에러를 낸다.
ex) const pi = 3.14
값이 더러워지지 않기를 원한다면 const를 쓰는 게 좋다.
| let | const | var | |
|---|---|---|---|
| 유효 범위 | block | block | function |
| 값 재정의 | 가능 | 불가능 | 가능 |
| 재선언 | 불가능 | 불가능 | 가능 |
var은 old way, 기본 값이었다. 그런데 사람들이 block 안에 변수 선언을 하게 되면 block 안에 갇힐 거라고 생각을 하기 때문에 function scope를 많이 헷갈려 했기에 let과 const가 생겨났다.
전역 변수와 window 객체
var로 선언된 변수와 전역 변수는 window 객체와 연결된다.
//전역에 선언한 함수
function foo() {
console.log('bar');
}
window; //search foo => findvar myName = 'paul';
window; //search myName => findlet은 window 객체에 담기지 않는다.
전역 범위(global scope)에 너무 많은 변수를 선언하지 않도록 주의해야 한다.
전역 범위는 최상위 스코프이기 때문에, 어떠한 라이브러리가 어떠한 변수를 사용할지 모른다. 그래서 겹칠 수가 있으니까 브라켓 안쪽에서 사용하는 게 좋다.
선언 없이 초기화된 전역 변수의 위험성
절대로 선언 키워드 없이 변수를 초기화하지 않는다.
실수를 방지하고 싶으면?
- strict Mode를 사용하자.
'use strict';를 자바스크립트 상단에 넣게 되면 문법적으로 실수할 수 있는 부분들을 에러로 판단한다. (file을 저장한 상태에서만 가능하다)
정리
- global scope vs local scope
local scope in global scope. and their round is different.
If Use global scope parameter in local scope, just do it. but you can't Use the local scope parameter in global scope. (standard let) 안쪽에서 바깥 변수/함수를 접근하는 것은 가능하나 바깥쪽에서 안쪽 함수/변수를 접근할 수는 없다. - function scope vs bracket scope
keywords의 차이점.
function scope는 scope ground가 function 단위로 된 것이고, bracket scope는 scope ground가 block로 된 것이다. - global scope 전역 변수와 var로 선언된 것은 window 객체랑 연결된다.
- 전역 변수를 선언 없이 초기화하지 말라.
