13장 스코프
13-1 스코프란
‘범위’라는 뜻
즉, 스코프(Scope)란 변수에 접근할 수 있는 범위
13-2 스코프의 종류
- 전역과 전역 스코프
코드의 가장 바깥 영역
전역 변수는 어디서든지 참조 가능
- 지역과 지역 스코프
함수 몸체 내부
지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효
13-3 스코프 체인
스코프가 함수의 중첩에 의해 계층적 구조를 갖는 것
변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동해 선언된 변수 검색
- 스코프 체인에 의한 변수 검색
상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유요한 변수를 상위 스코프에서 참조할 수 없다는 것 의미
- 스코프 체인에 의한 함수 검색
// 전역 함수
function foo() {
console.log('global function foo');
}
function bar() {
// 중첩 함수
function foo() {
console.log('local function foo');
}
foo(); // "local function foo"
}
bar();자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 선언하고 생성된 함수 객체를 할당
이처럼 함수도 식별자에 할당되기 때문에 스코프를 갖는다. 따라서 스코프를 "변수를 검색할 때 사용하는 규칙" 보다는 "식별자를 검색하는 규칙"이라고 표현하는 편이 좀 더 적합
13-4 함수 레벨 스코프
블록 레벨 스코프 c나 자바 등을 비롯한 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록이 지역 스코프 생성
함수 레벨 스코프 var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정
var x = 1;
// 전역 변수
if(true){
var x = 10;
}
console.log(x); // 10
var i = 10;
// 전역 변수이다.
for(var i = 0; i < 5; i++){
console.log(i); // 0 1 2 3 4
}
console.log(i); // 5ES6에서 도입된 let, const 키워드는 var 키워드와 다르게 블록 레벨 스코프를 지원한다.
13-5 렉시컬 스코프
var x = 1;
function foo(){
var x = 10;
bar();
}
function bar(){
console.log(x);
}
foo(); // 1
bar(); // 1어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프 결정
자바스크립트를 비롯한 ㅂ대부분의 프로그래밍 언어는 렉시컬 스코프를 따름
14장 전역 변수의 문제점
14-1 변수의 생명 주기
변수는 자신이 선언된 위치에서 생성되고 소멸됨
함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성, 종료하면 소멸
- 전역 변수의 생명 주기
전역 코드는 명시적인 호출 없이 실행
웹페이지 닫을 때까지 유효
14-2 전역 변수의 문제점
암묵적 결합
모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합 허용하는 것
긴 생명 주기
스코프 체인 상에서 종점에 존재
변수를 검색할 때 전역 변수가 가장 마지막에 검색됨
전역 변수의 검색 속도가 가장 느림
네임스페이스 오염
14-3 전역 변수의 사용을 억제하는 방법
전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역변수 사용
변수의 스코프는 좁을수록 좋음
- 즉시 실행 함수
(function() {
var foo = 10;
// ...
}());
console.log(foo); // ReferenceError: foo is not defined- 네임스페이스 객체
var MYAPP = {}; // 전역 네임스페이스 객체
MYAPP.name = 'YEJUN';
console.log(MYAPP.name); // YEJUN- 모듈 패턴
var Counter = (function() {
// private 변수
var num = 0;
// 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환한다.
return {
increase(){
return ++num;
},
decrease(){
return --num;
}
};
}());
console.log(Counter.num); // undefined
console.log(Counter.increase()); // 1
console.log(Counter.decrease()); // 0- ES6모듈
ES6 모듈을 사용하면 더는 전역 변수를 사용 불가
ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공
구형에서 동작하지않아 webpack 사용하는 것이 일반적
<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>15장 let,const 키워드와 블록 레벨 스코프
15-1 var 키워드로 선언한 변수의 문제점
- 변수 중복 선언 허용
var x = 1;
var y = 1;
var x = 100;
var y;
console.log(x); // 100
console.log(y); // 1중복 선언 시 초기화문 유무에 따라 다르게 동작
초기화문이 있을 경우
자바스크립트 엔진이 var 키워드가 없는 것처럼 동작하며, 값을 재할당
초기화문이 없을 경우
무시됨 에러 발생 x
- 함수 레벨 스코프
var 키워드로 선언한 변수는 오직 함수의 코드 블록만을 지역 스코프로 인정하므로 함수 외부에서 선언한 변수는 모두 전역 변수
- 변수 호이스팅
var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작
즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조 가능
15-2 let 키워드
- 변수 중복 선언 금지
중복 선언 문법 에러 발생
let bar = 123;
let bar = 456; // SyntaxError 'bar' has already benn declared- 블록 레벨 스코프
let foo = 1; // 전역 변수
{
let foo = 2; // 지역 변수
let bar = 3; // 지역 변수
}
console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined- 변수 호이스팅
var 키워드로 선언한 변수와 달리 let 키워드로 선언한 변수는 호이스팅 발생하지 않는 것처럼 동작
console.log(foo); // ReferenceError: foo is not defined
let foo;
let foo = 1;
{
console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
let foo = 2; // 지역 변수
}만약 변수 호이스팅이 발생하지 않았다면 위 예제는 전역 변수 foo의 값을 출력했겠지만 let 키워드로 선언한 변수도 호이스팅이 발생하기 때문에 참조 에러가 발생
- 전역 객체와 let
암묵적 전역은 window 프로퍼티
전역 객체의 프로퍼티 참조할 때 window 생략 가능
// 이 예제는 브라우저 환경에서 실행해야 한다.
var x = 1; // 전역 변수
y = 2; // 암묵적 전역
function foo(){
console.log(window.x); // 1
console.log(x); // 1
console.log(window.y); // 2
console.log(y); // 2
}let x = 1;
console.log(window.x); // undefinded;15-3 const 키워드
- 선언과 초기화
const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화
const foo = 1;
const bar; // SyntaxError : Missing initaializer in const declaration- 재할당 금지
var/let은 재할당 자유
const 는 재할당 금지
- 상수
재할당이 금지된 변수
// 세율을 의미하는 0.1은 변경할 수 없는 상수로서 사용될 값
// 변수 이름을 대문자로 선언해 상수임을 명확히 나타냄
const TAX_RATE = 0.1;
let preTaxPrice = 100; // 세전
let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE); // 세후- const 키워드와 객체
const 키워드로 선언된 변수에 객체를 할당한 경우 값 변경 가능
재할당을 금지할 뿐 불변 x
const person = {
name: "YEJUN"
};
person.name = 'BAMBY'
console.log(person); // {name: "BAMBY"}15-4 var vs let vs const
변수 선언에는 기본적으로 const
재할당 필요할 경우 let
es6이면 var 사용 x
