[🌳javascript] var, let, const

변수 👛

변수란? 🤔

데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'를 의미한다.

변수 생성법 및 규칙 ✍🏻

자바스크립트에서는 var, let, const 라는 이 3가지 키워드를 사용해 변수를 선언할 수 있다.
또한, 할당 연산자(=)를 사용해 값을 할당하며, 식별자인 변수명을 사용해 변수에 저장된 값을 참조한다.
변수명은 식별자(identifiers)라고 불리며, 작성시 문자 혹은 _ 혹은 $ 로 시작해야 하고, 그 이후에는 숫자를 입력할 수 있다. JS는 대소문자를 구분하기에 문자 작성시 대소문자도 유의해야 한다.
참고로 변수를 선언만 하고 값을 할당하지 않을 경우, 초기값으로 undefined를 갖는다.

관련 개념 📖

전역 스코프 vs 지역 스코프

변수는 선언 위치에 의해 스코프를 갖는다. 즉, 전역에서 선언된 변수는 전역 스코프, 지역(함수 내에서) 선언된 변수는 지역 스코프를 갖는 지역 변수가 된다.

• 전역 스코프(Global scope): 코드 어디에서든지 상관없이 참조할 수 있다. 모든곳에서 사용 가능. script 태그 가장 바깥쪽에 만들어놓으면 된다.
• 지역 스코프(Local scope or Function-level scope) : 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

함수 레벨 유효범위 vs 블록 레벨 유효범위

• 함수레벨 스코프(Function-level scope): 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효! 함수 외부에서는 유효하지 않다.

function a(){
  if(true){
	var fruit = "apple";
    console.log(fruit);//apple
  }
  console.log(fruit);//apple
}
console.log(furit);//Uncaught ReferenceError: furit is not defined
a();

• 블록레벨 스코프(Block-level scope): 모든 코드블록(함수, if문, for문, while문, try/catch문 등등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며, 선언된 코드 블록 외부에서는 참조할 수 없다.

function a(){
  if(true){
	const fruit = "apple";
    console.log(fruit);//apple
  }
  console.log(fruit);//Uncaught ReferenceError: fruit is not defined
}

재할당

변수명이 같은 변수에 할당을 여러 번 하는 것

let A =1
A =2 // let은 재선언이 불가능하기 때문에 let A =2 로 쓰면 안 된다
console.log(A) // 2

중복선언

변수명이 같은 변수를 중복해 선언하는 것

var B ="banana"
console.log(B) // banana
var B = "book"
console.log(B) //book

호이스팅

선언문이 해당 scope의 맨위로 옮겨진 것처럼 동작하는 특성(hoist는 끌려올려진다는 뜻)
참고로, 선언은 호이스팅되지만 할당은 호이스팅되지 않는다.
다음과 같이 코드를 작성해도,

function sayHi(){
  alert(phrase);
  var phrase="Hello"
}
sayHi(); 

자바스크립트는 이렇게 읽는다.

function sayHi(){
  var phrase;
  alert(phrase);
  phrase="Hello"
}
sayHi(); // 선언이 위로 호이스팅되므로 alert창이 잘 작동한다.

함수 역시 호이스팅될 수 있는데,

함수()
var 함수=function (){어쩌구코드}

이런 경우 역시 var의 선언부는 위로 올라간다. 그러나 중요한 건 선언부만 올라가지, 할당부분은 호이스팅되지 않는다는 사실.

var 함수;
함수()
함수=function (){어쩌구코드}

자바스크립트는 위와 같이 읽을 텐데, var 함수 이것만 봐서는 function인지 알 수 없다. 그래서 함수()를 실행하면 undefined가 아닌 error가 나온다.

변수 생성과정

선언 단계 ---> 초기화 단계 ---> 할당 단계

선언단계

자바 스크립트는 우리가 쓴 코드를 실행하기 전, 코드 전체를 훑으면서 문제가 없는지 확인하는 과정을 거친다. 이를 실행 컨텍스트 Execution phase(실행 단계)라고 하는데, 선언단계는 자바스크립트의 실행 컨텍스트(Execution phase)에서 진행된다.
이 과정에서 실행 컨텍스트를 생성하고, 변수와 함수를 등록한다.
쉽게 말해 컴퓨터에 내가 쓴 변수, 함수의 존재를 알리는 역할을 하는 과정이다.

초기화 단계

초기화: 변수를 선언하고 처음으로 값을 저장하는 행위
초기화 단계에서는 선언 키워드를 통해 이름이 정해진 변수에 값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined를 할당한다.

초기화 단계는 어느 선언 키워드를 사용하느냐에 따라 다른데,
var 키워드를 사용한 선언 방식의 경우,
1. 실행 단계에서 실행 컨텍스트에 변수를 등록한다.
2. 콜 스택의 메모리 저장 공간에 해당 변수를 위한 메모리 공간을 확보한다.
3. 그 공간의 주소값을 실행 컨텍스트에 등록된 변수에 저장한다.
4. 해당 저장 공간에 undefined를 할당하는 것으로 초기화를 진행한다.
var키워드의 경우 선언과 초기화가 함께 일어나기 때문에, 메모리를 갖고 있는 변수로 간주되어 선언문 앞에서도 해당 변수는 참조가 가능하게 된다.
참조가 가능해진 var로 선언된 변수는 실행 컨텍스트 최상위로 이동하게 되고, var 키워드로 선언한 변수가 호이스팅이 일어나는 과정이라고 볼 수 있다.

const와 let 키워드를 사용한 선언방식의 경우, 실행 단계에서 실행 컨텍스트에 변수를 등록하는 선언단계를 거치고 난 후 해당과정에서는 아무런 작업이 일어나지 않는다.

var

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

let

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

const

1. 선언 + 초기화 + 할당

var

• 함수 레벨 유효범위 ⬜️
• 재선언 가능 ⭕️
• 재할당 가능 ⭕️
• 호이스팅 가능 ⭕️
• 전역 선언시 전역 객체의 속성으로 등록 가능 ⭕️

var C = "cheese"//전역 선언시 전역 객체의 속성으로 등록 가능
function sayHi(){
  if(true){
    var C = "cherry" 
	var C = "candy" // 재선언 가능
	console.log(C) //candy
    C = "cotton" // 재할당 가능
  }
  console.log(C)//cotton
}
console.log(C)//cheese

let

• 블록 레벨 유효범위 ▪
• 재선언 불가능 ❌
• 재할당 가능 ⭕️
• 호이스팅 불가능 ❌
• 전역 선언시 전역 객체의 속성으로 등록 불가능 ❌

let D = "diamond"
function sayHi(){
  if(true){
    let C = "cherry"
	C = "candy"  // 재할당만 가능(재선언 불가능)
	console.log(C) //candy
    C = "cotton" 
  } // 이 코드블록 넘어가면서부터 변수 C 사용 불가능
  console.log(C) // sayHi()하면 Uncaught ReferenceError
}
console.log(C) // sayHi()하면 Uncaught ReferenceError
sayHi()
console.log(window.D) // undefined

const

• 블록 레벨 유효범위 ▪
• 재선언 불가능 ❌
• 재할당 불가능 ❌
• 호이스팅 불가능 ❌
• 전역 선언시 전역 객체의 속성으로 등록 불가능 ❌

const F = "friend"
F = "flower" // 재할당조차 불가능: Uncaught TypeError: Assignment to constant variable.

심화학습

for (var i = 1; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, i * 1000);
}

이 코드는 5 만 4번 출력되는 결과가 나온다.
왜 그럴까?
이건 클로저라는 개념도 함께 공부하면 이해할 수 있을 것 같다.

여담

var은 variable, const는 constant에서 왔는데 let은 대체 어디서 왔냐는 어떤 이의 질문. 생각해보니까 갑자기 나도 궁금해졌다.

그에 대한 답변

이 분을 포함해 다른 답변들도 자신들만의 추측을 써놓았는데, 이게 가장 그럴듯한 이야기였다. 그냥 수학적 전통을 따라, 'x를 임의의 실수라고 하자'라고 하는 것처럼.
let은 어디서 왔을까 스택오버플로우 질문링크

오늘 공부 참고 사이트:

• MDN 공식문서
• https://ko.javascript.info/variables
• https://poiemaweb.com/js-scope
• https://jmjmjm.tistory.com/64
  코딩앙마