변수

변수는 하나의 값을 지정하기 위해 확보한 메모리 공간 자체, 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.(입문자들한테 이렇게 말하면 다들 너무 어려워한다 ㅋㅋㅋ..)

나는 처음 배울때 변하는값이 변수다 라고만 생각했다.

변수는 선언단계와 초기화단계가 있다.

• 선언단계: 변수이름을 등록해서 자바스크립트 엔진에 변수에 존재를 알린다.
• 초기화단계: 값을 저장하기위한 메모리공간을 확보하고 undefined를 할당해 초기화한다.

변수선언이 런타임(소스코드 실행)이전에 먼저 실행된다.
변수, 함수, 클래스등 선언문들을 코드의 선두로 끌어올려진것처럼 동작하는 특징을 호이스팅이라고한다. 모든 선언문들은 런타임 이전에 실행된다.

변수할당(값의 할당)은 순차적으로 실행되는 시점인 런타임에 실행이된다!

변수선언

변수선언 3가지 방법이 있다.
하나씩 어떤 차이점이 있는지 알아가보자.

• var (es5)
• let (es6)
• const (es6)

문제가 많은 var

1. 중복선언이 가능하다
2. 함수레벨 스코프(함수를 기준으로 유효범위)
3. 변수선언 이전에 undefined를 나타내는 호이스팅.
4. 전역으로 선언한 전역변수와 전역함수 선언하지않은 변수에 값을 할당하면 window의 프로퍼티가된다.

	var name = 'dongs';
    var name = 'dong'; 
	
	// 에러가 안난다.
	
	var x = 5;
	y = 10;
	console.log(window.x) // 5
	console.log(window.y) // 10

    function number(){
      var x = 10;

      console.log(x); // 10
    }

	number();
	console.log(x); // 5

var 대신 let

1. 중복선언이 안된다.(중복선언시 syntax Error 발생)
2. 블록레벨 스코프({} 중괄화 기준으로 유효범위)
3. 호이스팅이 안되는것처럼 동작한다.

let은 호이스팅이 안되는것처럼 동작한다.
안되는것도 아니고 안되는것처럼은 무엇일까 ???

let 키워드로 선언한 변수는 선언단계와 초기화단계가 분리되어 진행된다.
모든 선언문들은 런타임 이전에 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다.
따라서 변수가 초기화되지않은 상태일때 변수를 접근하려고하면 ReferenceError를 발생시킨다.

스코프의 시작지점과 변수 선언문까지 변수를 참조할 수 없다.
이것을 TDZ(Temporal Dead Zone)일시적 사각지대라고 부른다.

	let name = 'Dongs';
    console.log(name) // Dongs

	if(true){
      /** 
      * 스코프의 시작지점
      * 사이구간을 TDZ라고 한다.
      */
      // console.log(name) ReferenceError
      
      let name = 'Dong' // 변수 선언문
      console.log(name) // Dong
    }

결론은 let도 호이스팅이 된다.

재할당이 금지된 const

1. const로 선언한 변수는 선언과 동시에 초기화해야한다.
2. 블록 레벨 스코프
3. 재할당이 안된다.
4. 원시값은 변경이 안된다. (Object는 가능하다)
5. let과 마찬가지로 호이스팅이 안되는것처럼 동작한다.

const name = 'dongs';
// name = 'Hello'; TypeError Assigment to constant variable

const obj = {
  name: 'Dongs',
}

obj.name = 'Dong'

// 객체는 변경 가능한값이다.
// 위코드는 재할당이 아니라 객체를 변경시킨거다.
console.log(obj)