var, let, const 차이 [js지식]

변수

자바스크립트에서 변수란 무엇인가?
변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.

자바스크립트는 매니지드언어(managed language)이기 때문에 C언어와는 다르게 개발자가 직접 메모리를 제어하지 못한다. 따라서 개발자가 메모리 주소를 통해 저장하고 참조할필요가없어 안전하게 접근이 가능하다

변수선언

선언은 var, let, const 키워드가 있으며, let과 const는 2015년 ES6부터 추가되었다.

자바스크립트에서 변수선언은 선언 -> 초기화 단계를 거쳐 수행된다

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

아래의 두 코드를 보고 확인해보자

var name
console.log(name)

output > undefined

console.log(name)
var name

output > undefined

놀랍게도 두개의 결과는 undefined를 뱉는다. 이는 변수 선언이 런타임에 되는것이 아니라, 그 이전 단계에서 먼저 실행되기 때문이다. 자바스크립트 엔진은 소스를 한줄씩 처리하기전에 변수선언을 포함한 모든 선언문들을 찾아낸후 실핸한다. 그래서 선언단계가 어디에있든 상관없이 다른코드보다 먼저 실행되는걸 호이스팅(hoistiong)이라고 한다.

변수선언뿐만 아니라 var, let, const, function, function*, class 키워드를 사용한 선언문 전체가 호이스팅된다.

변수할당

변수할당은 할당연산자 "="를 사용한다

var name
name = "박준형"

var age = 26

name변수는 선언과 할당의 단계가 2라인에 걸쳐서 진행되었고
age변수는 선언과 할당이 1라인에서 발생하였다

console.log(name) // output : undefined

var name = "박준형"
console.log(name) // output : 박준형

변수선언과 할당은 한줄로 단축하여 표현할수있지만 두개의 실행시점이 다르다. 변수 선언이 호이스팅되어 런타임 이전에 실행되었지만, 할당은 소스코드가 순차적으로 실행되는 런타임 시점에 실행되었다.

스코프

스코프는 유효범위를 말한다. 선언된 위치에 따라 유효범위가 달라지고 전역에 선언된 변수는 전역스코프를, 지역에 선언된 변수는 지역스코프를 갖게된다.

전역변수는 어디서든 참조가 가능하지만 지역변수는 함수 몸체 내부를 말한다. 지역변수는 자신의 지역 스코프와 하위 스코프에서 유효하다.

하지만 주의할점!! 자바스크립트에서는 모든 코드 블럭이 존재한다.
ex) if, for, while, try/catch 등등...
이러한 코드블럭들이 지역 스코프를 만들며, 이러한 특성을 블럭 레벨 스코프라고 한다.
하지만 var 키워드로 선언된 변수는 함수의 코드 블럭만을 지역 스코프로 인정하고 함수 레벨 스코프라고 한다

var name = "박준형"

if(true) {
  var name = "빡준"
}

console.log(name) // output : 빡준

함수가 아닌 var 키워드로 변수를 선언했기때문에 전역변수로 취급하고 기존에 선언됐던 name변수가 재선언되어 최하단에서 뱉는값은 빡준이 되었다.

var의 문제점

• 변수 중복 선언이 가능하며, 예측불가한 값을 반환하기도함
• 함수레벨스코프로인해 함수 외부에서 선언한 변수는 모두 전역 변수로 취급된다
• 변수 선언문 이전에 참조시 모두 undefined를 뱉는다
  
  js진짜 좋은데,,,, 변수 선언하기 편하고 한데 잘못하면 큰일인데 var에는 단점이 존재한다... 그래서 const, let이 2015년에 나왔다!!

let

let은 변수 중복 선언이 불가능하지만 재할당은 가능하다

let name = "박준형"
console.log(name) // output : 박준형

let name = "빡준" // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = "BBAKJUN"
console.log(name) // output : BBAKJUN

const

let과 다른점은 반드시 선언과 초기화를 동시에 진행해야한다는것이다

const name = "박준형"

그리고 재선언과 재할당도 불가능하다.. 하지만 원시값은 불가하지만 객체는 가능하다

const obj = {
  name : "박준형"
}

obj.name = "bbakjun"

console.log(obj) // output : {name : "bbakjun"}