var, let, const

ES6 var ⇒ let, const

• var, let, const는 변수 선언키워드

• ES5 이전, 변수키워드 var가 있는데..왜 let, const가 나왔을까?
• var 변수 스코프, 함수
• let, const 변수 스코프, 블록문(중괄호)
• scope
교과서대로 하자면,
식별자 접근규칙에 따른 유효범위
• 식별자(변수, 함수, 클래스 등)에 접근할 수 있는 범위가 존재한다
• 식별자를 어디서든 참조할 수 있는 건 아니란 말
쉽게 하자면,
• 참조가능한 범위, 구간
• scope === 유효범위
스코프 규칙
1. 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다.
2. 지역 변수는 전역 변수보다 우선순위가 더 높다
 
이 규칙들은 스코프 체인의 결과입니다
• 코드 실행 전, 실행컨텍스트를 만들어 식별자, 스코프 체인을 정의
• 코드 실행할 때, 해당 변수 없다면 스코프 체인으로 찾음
• 즉, 현재 지역변수부터 전역순으로 찾게됨 → 우선순위가 높다고 표현
 
 

• var의 문제점

// 1. 변수 참조범위가 넓음 → 전역 오염 쉬움 

// 2. 변수 중복선언 가능 - 에러없이 이전 변수의 값을 덮어씀
var x = 1;
console.log(x); // 1

var x = 100;
console.log(x); // 100

// 3. 키워드 없이도 변수선언 가능 - 전역 변수로 할당됨 -> 전역 오염 
const hi = () => {
    hello = "hello world"; 
}
console.log(hello); // 레퍼런스 에러가 떠야하는데..hello world 잘 출력됨 

// 4. 선언 라인 전 호출해도 에러 안남 
console.log(pizza); // 참조에러를 예상했지만..undefined 
var pizza = "pizza";

(개인적인 생각) var의 문제점을 정리하자면
💩 호이스팅처럼 예상에 빗나가는 동작발생 ⇒ ✨ let, const
💩 전역 오염 ⇒ ✨ let, const ⇒ ✨✨import, export 모듈시스템 정의

var, let, const 모두 호이스팅이 일어난다

차이점 변수 생성과정

변수 생성과정은, 변수 선언 - 값 초기화 - 값 할당

• 변수선언
• 메모리 공간을 확보하고 식별자와 연결하는 것
• var let const 코드 실행 전, 실행컨텍스트에 선언문을 먼저 읽고, 기록함

• 값 초기화
• undefined으로 값을 초기화함
• var 선언과 동시에 일어남
• let const 코드 실행 후, 변수 선언라인에서 일어남

• 값 할당
• 할당된 값을 메모리에 넣음
• let const 코드 실행 후, 변수 할당라인에서 일어남
• var 코드 실행 후, 변수 할당 라인에서 일어남

var score;  // 변수의 선언 -> 선언라인 
score = 80; // 값의 할당 -> 할당라인 
score = 90; // 값의 재할당
score;      // 변수의 참조

// 차이점 
console.log(varHello); 
console.log(letHello);

var varHello = "var hello: 선언라인 전 호출하면 undefined 출력됨"; 
let letHello = "let hello: 선언라인 전 호출하면 TDZ에 의해 에러남";

일시적 사각지대 Temporal Dead Zone; TDZ

• 초기화 전에 변수 접근 시, 참조에러 발생하도록 하는 구간

• 참조에러가 발생하는 건,
• 변수가 초기화 되지않았기 때문
• 변수를 위한 메모리공간이 확보되지 않았기때문에

• 한줄정리: 스코프 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없는 구간을 일시적 사각지대

정리

참고자료

추가로 읽어볼 자료 ✨

자바스크립트는 어떻게 작동하는가: 메모리 관리 + 4가지 흔한 메모리 누수 대처법

몇 주 전 우리는 자바스크립트를 좀 더 깊이 살펴 보고 실제로 어떻게 작동하는지 알아보는 시리즈를 시작했습니다. 이 시리즈의 동기는 자바스크립트가 무엇으로 구성되어 있고 그 구성요소가 어떻게 맞물려 작동하는지 더 잘 알면 더 나은 코드와 앱을 작성할 수 있다는 생각이었습니다. 시리즈의 첫 번째 글은 엔진, 런타임, 콜스택의 개관에 초점을 맞췄습니다. 두...

https://engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EA%B4%80%EB%A6%AC-4%EA%B0%80%EC%A7%80-%ED%9D%94%ED%95%9C-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%EB%8C%80%EC%B2%98%EB%B2%95-5b0d217d788d

자바스크립트의 메모리 관리 - JavaScript | MDN

C 언어같은 저수준 언어에서는 메모리 관리를 위해 malloc() 과 free()를 사용합니다. 반면, 자바스크립트는 객체가 생성되었을 때 자동으로 메모리를 할당하고 더 이상 필요하지 않을 때 자동으로 해제합니다(가비지 컬렉션). 이러한 자동 메모리 관리는 잠재적 혼란의 원인이기도 한데, 개발자가 메모리 관리에 대해 고민할 필요가 없다는 잘못된 인상을 줄 수 있기 때문입니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management