스코프
식별자(변수)의 유효범위
자바스크립트 변수에 접근 권한 정의하는 것
스코프의 유효범위
- 블록 {} 또는 함수에 의해 나눠지고, 변수가 접근할 수 있는 범위를 스코프
- 바깥 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능하지만, 반대는 불가능!
- 스코프는 중첩이 가능
- 가장 바깥의 스코프를
전역 스코프(grobal scope), 전역 스코프에서 선언한 변수는전역 번수 - 그 외의 스코프는 모두
지역 스코프(local scope), 지역 스코프에서 선언한 변수는지역 변수이고 전역 변수보다 더 높은 우선순위 를 가짐.
let name = 'kim'; // 전역 변수
function showName() {
let name = 'park'; // 지역 변수
}블록 레벨 스코프 (block scope)
- 중괄호를 기준으로 범위가 구분
- 코드 블록 내에서 선언한 변수는
지역 변수 - 블록 스코프 안에서 정의된 변수는 블록 범위를 벗어나면 접근할 수 없다.
⇒let,const키워드로 선언된 변수는 모든 코드 블록(함수,if문,for문,while문등) 내에서만 유효
for(let i = 0; i < 5; i++) {
console.log(i); // 다섯번 반복
}
console.log('final i:', i); // ReferenceError함수 레벨 스코프 (function scope)
- 함수 내에서 선언된 변수는
함수 내에서만 유효하고 함수 외부에서는 참조할 수 없다.
⇒ 함수내부에서 선언한 변수는지역변수,외부에서 선언한 변수는 모두전역 변수 - function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만듬
var키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따름
선언 키워드 없는 선언은 최고 스코프에 선언 (var 한정)
🚨 유의할 점! 화살표 함수는 블록 스코프로 취급
// 블록 스코프; 화살표 함수를 사용
let getAge = user => {
return user.age;
}
// 함수 스코프; function 키워드 사용
let getAge = function(user) {
return user.age;
}렉시컬 스코프, 동적 스코프
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // ? ⇒ 1
bar(); // ? ⇒ 1
//함수 bar는 전역에서 선언되어 함수 bar의 상위 스코프는 전역 스코프로
// 변수 x의 값 1을 두번 출력함수의 실행 결과는 상위 스코프가 무엇인지에 따라 결정되는데 두가지 패턴이 있다.
1. 함수를 어디서 호출 하였는지 ⇒ 함수 bar의 상위 스코프는 foo & 전역
2. 함수를 어디서 선언 하였는지 ⇒ 함수 bar의 상위 스코프는 전역
렉시컬 스코프 (lexical scope or Static scope)
-
함수를 어디서
선언하였는지로 상위 스코프를 결정하는 것
⇒ 함수 bar의 상위 스코프는 전역 -
javascript 를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따름
동적 스코프
- 함수를 어디서
호출하였는지로 상위 스코프를 결정하는 것
⇒ 함수 bar의 상위 스코프는 foo & 전역
let, const, var 키워드 비교
let : 재선언 방지
const : 변하지 않는 값, 값의 재할당 불가능
var : 블록 스코프 무시하고 함수 스코프만 따름 (화살표함수는 무시하지 않음)
| let | const | var | |
|---|---|---|---|
| 유효범위 | 블록 스코프 및 함수 스코프 | 블록 스코프 및 함수 스코프 | 함수 스코프 |
| 값 재할당 | O | X | O |
| 재선언 | X | X | O |
window 객체
var로 선언된 전역 변수 및 전역 함수는window 객체에 속함- 브라우저 창을 대표하는 객체지만 브라우저 창과 관계없이 전역 항목도 담고 있다.
- 함수 선언식으로 함수를 선언하거나
var로 전역 변수를 만들면
window 객체에서도 동일한 값을 찾을 수 있음.
var myName = 'kim';
console.log(window.myName); // kim
function foo() {
console.log('bar');
}
console.log(foo === window.foo); // true🚨 주의사항
전역 변수에 너무 많은 변수를 선언하지 마세요!
전역 변수는 어디서든 접근이 가능해 편리한 대신, 다른 함수나 로직에 의해 의도치 않은사이드 이펙트(부수 효과) 발생할 수 있음.
let, const를 주로 사용하세요!
var은 블록 스코프를 무시하고, 재선언해도 에러를 내지 않아 버그 유발- 전역 변수를
var로 선언하는 것은window내장 기능을 사용하지 못하게 할 수 있다.
선언 키워드(let, const, var)없이 변수를 할당하지 마세요!
- 선언 없이 변수를 할당하면,
var로 선언한 전역 변수처럼 작동
// age는 선언한 적 없으나 값을 할당하면서 var로 선언된 전역 변수처럼 작동
function showAge() {
// age는 전역 변수 취급됨
age = 90;
console.log(age); // 90
}
showAge();
console.log(age); // 90
console.log(window.age); // 90Strick mode
// js 파일 상단에 입력
'use strick'- 선언 없이 할당된 변수의 경우도 에러로 판단
- 문법적으로 실수할 수 있는 부분을 에러로 판단에 방지할 수 있음
- js 파일 상단에 입력
- 브라우저가 보다 엄격하게 작동하도록 만듬
