분노 그 잡채

todo: 자바스크립트 중급 강좌: 140분 완성 듣고 정리하기

https://youtu.be/4_WLS9Lj6n4

변수 var, let, const 차이 공부

변수 (let, const, var)

- let const : es6에 나온 변수

- var 와 let은 미리 할당해두지 않아도 된다는 점에서 크게 다르지 않아, 바꾸어 사용해도 크게 문제가 없다. 

- var과 let의 차이점은? var은 한번 선언된 변수를 다시 선언할 수 있다. let은 한번 선언되면 변수를 다시 바꿀 수 없다.

var name = 'dody';
console.log(name); // dody
var name = 'dorothy';
console.log(name); // dorothy

let name = 'dody';
console.log(name); // dody
let name = 'dorothy';
console.log(name); // error!

변수와 호이스팅? 

- var은 선언하기 전에 사용할 수 있다.

console.log(name); // undefined, name이 나오기 전에 사용했는데 에러를 일으키지 않았다. 
var name = 'mike';

- var 변수가 스코프 최상위로 끌어올려진 것처럼 작동하기 때문. 이건 호이스팅이라는 개념이 작동하기 때문.

- console.log 값이 undefined가 나온다는 것은 선언(name)은 호이스팅이 되지만, 할당('mike')은 호이스팅이 되지 않기 때문.

var name;
console.log(name); // undefined
name = 'mike';

- 같은 상황에서 let은 에러가 나는데, let은 호이스팅이 되지않는걸까? 그건 아니다. 모든 변수는 호이스팅이 된다.

console.log(name); // ReferenceError!
let name = 'mike';

- 호이스팅 : 스코프 내부 어디에서든 변수 선언은 최상위에 선언된 것처럼 행동

- 근데 왜 let const 는 오류를 뱉는 것일까?

- 이유는 Temporal Dead Zone, TDZ 라는것 때문. TDZ에 있는 영역의 변수들은 사용할 수 없다.

- let과 const는 TDZ의 영향을 받는다. 그렇기 때문에 변수선언을 하기 전에는 에러가 발생한다.

- 강제로 TDZ의 영향을 받게 한 이유로는 코드를 예측가능하게 하고, 잠재적인 버그를 줄일 수 있기 때문이다. 안정적인 코드를 위해 let, const를 주로 사용하자.

- 아래 예시를 보면, 호이스팅은 스코프 단위로 작동하기 때문에 let age = 30; 을 위에서 선언해주었다 한들, 스코프는 함수영역이기 때문에 console.log(age); 는 TDZ에 속했다는 판단을 받아 에러가 발생!

변수의 생성과정

1. 선언단계 ->  2. 초기화단계 ->  3. 할당단계

var

- 1. 선언단계, 초기화단계가 동시. 2. 할당단계

- 선언단계, 초기화단계가 동시에 되기 때문에, 할당하지 않고 호출해도 에러가 나지 않고 Undefined가 나오게 되는 것. 

let

- 1. 선언단계 2. 초기화단계 3. 할당단계

- 선언단계와 초기화 단계가 분리되어서 작동, 초기화 단계는 실제 코드에 도달했을때 작동하기 때문에 reference error가 발생하는 것

const

- 1. 선언 + 초기화 + 할당 

- let과 var는 값을 바꿀 수 있기 때문에 할당 단계가 나뉘어져있는 것

var age;
age = 20; // 가능
let name;
name = 'dody'; // 가능
const gender;
gender = 'female' // 불가능, 선언+초기화+할당 이 동시에 작동하기 때문

변수의 스코프

var: 함수스코프 function-scoped

function dody(){
    var say= 'hello';
}
console.log(say); // error. 함수 밖에서 호출하는 경우 오류

let, const : 블록스코프 block-scoped

블록에서만 접근 가능하며, 외부에서는 접근 불가능하다. 즉 지역변수라는 뜻

ex. 함수, if문, for문, while문, try catch문 등..