Purple Bobblehead Bunny

Frontend/JAVASCRIPT

[JAVASCRIPT] 변수 선언, let, var, const

준영어린이 2022. 6. 13. 17:17

변수

 

변수(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