var , let, const 의 차이는 무엇일까요?

안녕하세요! 오늘은 JavaScript에서 변수 선언 방식인 var,let,const의 차이점에 대해 알아볼려고합니다.

알아보기전 ES6에 대해서 미리 알아보고 가보면 좋을 것 같습니다
ES6는 자바스크립트에서 도입된 var, let, const를 포함한 function, function*, class을 호이스팅 하는 것을 말합니다.

---

1.변수선언 방식

먼저 var는 변수 선언 방식인데요.
var는 업데이트도 가능하고 재선언도 가능합니다. 바로 예시를 보며 이야기를 해보아요

그림을 보시는 거와 같이 변수를 한번 더 선언했지만 에러가 나오지 않고 각각 다른 출력 값이 나오는것을 볼 수 있습니다.

var는 유연한 변수 선언으로 간단하게 하는 테스트에서는 편하게 사용할 수 있지만, 자바스크립트 내에서 많은 코드량을 사용한다면 어느부분에서 사용되는지 알기 힘들기도 하고 값이 바뀌기 때문에 단점이 있습니다.

그래서 ES6 이후, 이를 보완하기 위해 let 과 const를 사용하여 변수를 선언합니다.

---

다음은 let 선언방식입니다
let의 경우 업데이트는 가능하지만 재선언은 불가능합니다.

첫 name의 경우 첫 선언문이기 때문에 'dongtori'라는 출력값이 나오지만
두번째 name에서 선언 한값은 에러메세지가 나오는 것처럼 변수 재선언은 되지 않습니다

하지만
세번재 선언한 name처럼 변수에 재할당이 가능하다는 차이가 있습니다.

---

다음은 const 선언 방식입니다

const의 경우 let과 동일하게 재선언도 불가능하고 추가적으로 재할당도 불가능하다는 let과의 차이가 있습니다.

---

다음은 스코프에 대해서 이야기 해볼텐데요 생각보다

(이 조준경 스코프 아닙니다...!)

스코프 / 변수의 유효 범위

JavaScript는 기본적으로 Function Scope(함수 스코프)를 가지고, var또한 함수 스코프를 가집니다 하지만

let, const는 Block Scope를 가집니다. / 다르게 설명을 해보면 전역에 선언된 전역변수는 전역 스코프를 가

져 하위 모든 곳에서 참조가 가능하고

지역에 선언된 지역변수는 지역 스코프를 가져 해당 지역과 하위 지역에서만 참조가 가능합니다.

var - 함수 스코프수 스코프

var은 함수의 코드 블록만을 스코프로 인정하기 때문에, 함수 내부 이외에 생성한 변수스는 모두 전역 변수가 되어, 전역 변수가 남발 될 가능성이 있습니다.

-위와 같이 if문 내부에 선언된 result 변수가 전역 변수로 선언되어 resule값이 true로 할당되어 찍힙니다.

-for문의 변수 선언문에서 선언한 변수를 for문 외부에서 참조 가능합니다!

-하지만 함수내에서 선언되어 이루어진 변수는 참조가 불가능하다는점!

let과 const의 경우에는 모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며, 코드 블록 외부에서는 참조를 할 수가 없습니다. 즉 코드 블록 내부에서 선언한 변수는 지역 변수 라고 합니다!

-if 문 내부에 선언한 result는 지역변수로 해당 코드블록 외부에서는 참조가 불가능합니다.

-for문도 마찬가지로 변수 선언문에서 선언한 변수를 for문 외부에서 참조를 할 수 없습니다.

-함수도 함수내에서는 유효하지만 외부에서는 참조 할 수 없다는 점이 있습니다.

---

추가적으로 호이스팅에 대해서 말씀 드려볼텐데요

호이스팅(Hoisting)
호이스팅이란 var선언문이나 function선언문 등을 해당 스코프의 선두로 옮김 것 처럼 동작하는 특성을 말합니다.

자바스크립트에 도입된 ES6을 호이스팅합니다.

하지만 var로 선언된 변수와 다르게 let으로 선언된 변수를 선언문 이전에 참조하면 참조 에러가 발생합니다.

이는 let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적인 사각지대에 빠지기 때문입니다.

추가적으로 변수는 선언단계 -> 초기화 단계 -> 할당 단계 에 걸쳐 생산되는데

var으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어 집니다. 단,

let으로 선언된 변수는 선언단계와 초기화단계가 분리되어 진행됩니다.

---

끝으로

변수 선언에는 기본적으로 const를 사용하고(실제로 사용해보니 정말 많이 사용합니다...)
재할당이 필요한 경우에는 let을 주로 사용합니다.

그리고 객체를 재할당하는 경우는 흔하지 않기 때문에 const를 사용하면 의도하지 않은 재할당에 대비해 방지해주기 때문에 안전합니다!

---

그럼! 오늘은 여기까지...

다들 환절기 건강 조심하시고

오늘 하루도 좋은 하루 보내세요!

그럼 20000....