15.1. var 키워드
15.1.1 변수 중복 선언 허용
var 키워드로 선언한 변수는 재선언이 가능하다.
var x = 1;
var y = 20;
var x = 100;
var y; //두번째 변수 선언은 무시
console.log(x); //100
console.log(y); // 2015.1.2 함수 레벨 스코프
var 키워드는 함수 내에서 선언된 변수는 함수 내에서만 유효하며
함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
ex1) 함수 외부에서 선언한 경우 ➡️ 전역변수로 인식
var x = 1;
if(true) {
var x = 20;
}
console.log(x); // 20ex2) 함수 내부에서 선언한 경우 ➡️ 지역변수로 인식
var 키워드는 함수 내에서 만들면 함수 내에서만 쓸 수 있다.
함수 바깥에서 부르면 에러가 발생한다.
function person(){
var name = 'Kim';
console.log(name); //'Kim'
}
console.log(name); //error15.1.3 변수 호이스팅
Q. 호이스팅이란?
A. 변수의 선언을 변수 범위 맨 위로 끌고오는 현상
즉, var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다.
단, 할당문 이전에 변수를 참조하면 항상 undefined를 반환한다.
console.log(foo); //undefined
var foo = 123;
console.log(foo); //123- 변수 선언은 런타임 이전에 JS 엔진에 의해 암묵적으로 실행된다.
(호이스팅 현상)
//변수 호이스팅
var foo; //➡️ 변수 선언이 맨 위로 이동
console.log(foo); //undefined
foo = 123;
console.log(foo); //12315.2 let 키워드
var 키워드의 단점을 보완하기 위해 ES6에서 새로운 변수 키워드인 let과 const 도입
15.2.1 변수 중복 선언 금지
var 키워드와 달리, let 키워드는 이름이 같은 변수를 중복 선언할 경우 문법 에러가 발생한다.
let bar = 123;
let bar = 456; //SyntaxError15.2.2 블록 레벨 스코프
let 키워드로 선언한 변수는 모든 코드 블록(함수,if 문, for 문, while 문, try/catch 문 등)을 지역 스코프로 인정하는
블록 레벨 스코프를 따른다.
let foo = 1; //전역 변수
{
let foo = 2; //지역 변수
let bar = 3; //지역 변수
}
console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined-
위 예제처럼 코드 블록 내에서 선언된 foo 변수와 bar 변수는 지역 변수이다.
-
전역에서 선언된 foo 변수와 코드 블록 내에서 선언된 foo 변수는
다른 별개의 변수이다.
- bar 변수 역시 블록 레벨 스코프를 갖는 지역 변수이므로 전역에서 bar 변수를 참조할 수 없다.
15.2.3 변수 호이스팅
var 키워드와 달리 let 키워드로 선언한 변수는 호이스팅이 발생하지 않는 것처럼 동작한다.
console.log(a);
let a; //ReferenceError
let b;
console.log(b); //undefined
var 키워드의 경우, 런타임 이전에 JS 엔진에 의해 암묵적으로 선언 단계와 초기화 단계가 한번에 진행되기 때문에 선언문 이전에 변수를 참조할 수 있었다.
그러나 let 키워드는 선언 단계와 초기화 단계가 분리되어 진행된다. 따라서 변수를 선언하기 전까지는 변수를 참조할 수 없다.
let foo = 1; //전역 변수
{
console.log(foo); //ReferenceError
let foo = 2;
} 만약 변수 호이스팅이 발생하지 않는다면 3번째 줄에서 전역 변수
foo 값을 출력해야 한다. 그러나 let 키워드도 호이스팅이 발생하기 때문에 참조 에러가 발생한다.
15.2.4 전역 객체와 let
var 키워드로 선언한 전역 변수와 전역 함수, 선언하지 않은 변수에 값을 할당하는 암묵적 전역은 전역 객체 window의 프로퍼티가 된다.
전역 객체의 프로퍼티를 참조할 때 window를 생략할 수 있다.
var x = 1; //전역 변수
y = 2; // 암묵적 전역
//전역 함수
function func() {}
console.log(window.x); // 1
console.log(x); // 1
console.log(window.y); //2
console.log(y); // 2
console.log(window.func); //f func() {}
console.log(func); //f func() {}단, let과 const로 선언한 전역 변수는 전역 객체 window 의
프로퍼티가 아니다.
let x = 1;
console.log(window.x); //undefined
console.log(x); //115.3 const 키워드
const키워드는 상수(constant)를 선언하기 위해 사용한다.
상수는 재할당이 금지된 변수를 말한다.
15.3.1 선언과 초기화
const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
const foo; //SyntaxError : Missing initializer in const declaration
const foo = 1;const 키워드는 let 키워드와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
{
console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
const foo = 1;
console.log(foo); //1
}
console.log(foo); //ReferenceError: foo is not defined-
변수 선언하기 이전에 foo를 출력하면 참조 에러가 발생해 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
-
블록 레벨 스코프를 가지므로 중괄호 밖에서의 foo 변수는
존재하지 않는다.
15.3.2 재할당 금지
var 또는 let 키워드는 재할당이 자유로우나 const 키워드로 선언한 변수는 재할당이 금지된다.
const foo = 1;
foo = 2; //TypeError15.3.3 const 키워드와 객체
const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다. 변경 가능한 값인 객체는 재할당 없이도 직접 변경이
가능하기 때문이다.
const person = {
name : "Kim"
};
//객체는 변경 가능한 값. 재할당 없이 변경 가능!
person.name = "Lee";
console.log(person); // {name: "Lee"}따라서 const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지
않는다. 즉, 새로운 값을 재할당하는 것은 불가능하지만 프로퍼티
동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능하다!
15.4 var vs let vs const
| var | let | const | |
|---|---|---|---|
| 재선언 | ⭕ | ❌ | ❌ |
| 재할당 | ⭕ | ⭕ | ❌ |
| 범위 | function | { } | { } |
변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다.
const 키워드는 의도치 않은 재할당을 방지해 좀 더 안전하다.
변수 연습문제
Q1.
sayHi();
function sayHi() {
console.log(hi);
let hi = 'Hello!';
} let 키워드는 변수 호이스팅이 되지만 undefined라는 값을 할당하지 않아 에러가 출력된다.
let은 호이스팅 시 자동으로 undefined를 할당하지 않는다.
✨ 즉, let, const 키워드는 선언과 할당 사이에 시간차가 있기 때문에 발생하는 현상이다.
Q2.
sayHi();
var sayHi = function() {
console.log(hi);
var hi = 'Hello!';
} - 함수를 선언하기 전에 함수를 실행하면 함수가 호이스팅 되어 실행가능하다.
function 함수명( ) { } : 전부 hosting
var 함수명 = function( ) { } :변수의 선언(var 함수명)만 hosting
- 위 코드에서
var sayHi부분만 맨 위로 올라가는 셈이다.
따라서 함수가 아니라고 에러가 발생한다.
Q3.
let a = 1;
var b = 2; //전역 변수
window.a = 3; //전역 변수로 a 생성
window.b = 4; //b는 재할당
console.log(a + b); //5 -
var b = 2와 window.b = 4는 같은 의미로 변수 b를 4로
재할당한 것과 같다. -
a를 출력할 때 가장 가까운 범위 즉, 범위가 좁은 변수를
먼저 참조해 출력한다.
** JS 변수를 사용할 때 참조할만한 변수가 내 주변에 없으면
점점 상위 중괄호로 시선을 돌리면서 참조함
