변수
변수(variable)는 값을 저장하기 위해 확보한 그 공간을 식별하기 위해 사용되는 이름
변수 생성 과정
1. 선언 단계 (Declaration)
- 변수를 변수 객체에 등록
- 변수 객체는 스코프가 참조하는 대상이 된다.
2. 초기화 단계 (Initialization)
- 변수 객체에 들어간 변수를 위한 공간을 메모리에 확보
- 초기화 단계에서 변수는 undefined로 초기화 된다.
3. 할당 단계(Assignment)
- undefined로 초기화된 변수에 실제 값을 할당
- var 키워드로 선언한 변수는 선언 단계, 초기화 단계가 동시에 이루어진다.
- let 키워드로 선언된 변수는 선언 단계, 초기화 단계가 분리되어 실행
- let,const의 경우에 초기화는 실행 후, 변수 선언문에 도달했을 때 이루어진다. -> 초기화 이전에 변수 접근시 변수를 위한 메모리 공간이 확보되지 않았기 때문에 오류가 발생
- 스코프의 시작지점으로부터 초기화 시작 지점까지 구간을 Temporal Dead Zone. TDZ 라고 부른다.
const age = 27;
// 변수명 - age
// 해당 값의 위치(메모리 주소) - 0012CCGWH80
// 저장된 값 - 27
변수인 age는 변수 값이 아닌 메모리 주소를 저장하고 있다, 변수 명을 사용하면,
변수명과 메모리 주소를 통해 저장된 값(27)을 반환한다.
- 할당(assignment) : 변수의 값을 저장 (대입)
- 참조(reference) : 변수에 저장 된 값을 읽어 들이는 것
- 선언(declration) : 변수명을 자바스크립트에 알리는 것
변수 선언
자바스크립트 변수는 let, const, var 키워드로 사용할 수 있다. (선언 -> 초기화 단계를 거쳐 수행)
1. var
var name='leejunyoung'
function t() {
var name='a1;
console.log(name)
}
// a1 출력
t()
console.log(name)
// leejunyoung 출력
var 키워드는 생력이 가능하기 때문에, 함수가 선언한 환경의 'this'에 영향을 받는다.
var의 가장 큰 특징은 중복 선언이 가능하다.
var a=10; // 출력 값 10
var a=20; // 출력 값 20
var a=30; // 출력 값 30
var를 사용하면 변수명을 중복으로 선언하고 값을 넣어도 오류가 발생하지 않는다.
처음과 두번 째 넣은 10, 20 값은 초기화가 되고 가장 마지막에 넣은 30값만 저장이 된다.
유연하게 변수 선언이 가능하지만, 위험요소가 크기 때문에 단점이 될 수도 있다.
ES6 이후 보완을 하기 위해 let과 const가 추가가 된다.
2. const
const a = 100; // 출력 값 100
const a = 200; // SystaxError : Identifier 'a' has already been declared
// 중복 선언 불가
a = 300; // Assignment to constant variable
// 값 재할당 불가
var 키워드와는 다르게 중복으로 선언을 하면 오류가 발생한다. 값 재할당도 불가능하다
처음 선언 후 다른 값을 넣을 수 없기 때문에 const는 상수로 선언하는 키워드로 사용하게 된다.
3. let
let a = 10; // 출력 값 10
let a = 20; / SyntaxError : Identifier 'a' has already been declared
a = 30;
console.log(a) // 결과 값 30
// 값 재할당 가능
let 키워드는 const와 마찬가지로 중복 선언을 하게 되면 오류가 발생한다.
const와 다르게 값 재할당이 가능하다.
var는 중복 선언, 재할당 모두 가능
let은 재할당만 가능하고, const는 모두 불가능
'Frontend > JAVASCRIPT' 카테고리의 다른 글
[JAVASCRIPT] Map (0) | 2022.06.20 |
---|---|
[JAVASCRIPT] Event (0) | 2022.06.19 |
[JAVASCRIPT] Hoisting, 호이스팅 (0) | 2022.06.13 |
[JAVASCRIPT] 자바스크립트 기본 문법 (0) | 2022.06.11 |