[Javascript] var,let,const 차이와 사용법

안녕하세요

오늘은 다들 당연히 안다고 생각하지만 대답을 잘 못하는 var let const의 차이와 사용법에 대해

포스팅 해보겠습니다. 

 

우선 호이스팅이 처음 들어보신 분들은 본문 하단에 있는 설명부터 보시면 좋을것 같습니다 ^^7

 

var 

• 함수 스코프 : var로 선언된 변수는 함수 내부에서만 유효, 하지만 if,for 내부에서는 무시됨
• 호이스팅 : var 변수는 선언이 함수의 최상단에서 끌어올려지기떄문에 선언하기 이전부터 사용할 수 있다. (초기화 전 undefined)
• 재선언 가능 : 같은 스코프 내에서 다시 선언 가능

var의 가장 큰 단점으로는 변수 선언 방식이 있습니다.

var name = 'euijin'
console.log(name)

var name = 'geumjeong'
console.log(name)

이런식으로 변수를 두번을 선언 해도, 에러 없이 두가지의 값들이 출력되는 것을 보실 수 있습니다.

근데 이게 왜 문제가 되냐면, 지금은 짧디 짧은 코드량이지만, 코드량이 많아진다면 어디에서 어떻게 사용되는지
파악하기 힘들고, 값이 바뀔 수 있는 문제가 생깁니다.

 

let

 

블록 스코프 : let으로 선언된 변수는 블록 내부에서만 유효함 블록을 벗어나면 접근 불가.

호이스팅 : let 변수는 호이스팅되지만, 선언하기 전에는 접근 불가

재선언 불가 : 같은 스코프 내에서 다시 선언할 수 없음

let name = "euijin";
console.log(name);

let name = "geumjeong";
console.log(name);

만약에 이런식으로 선언을 한다면 name이 이미 선언되었다는 에러메세지가 나옵니다.

Uncaught SyntaxError: Identifier 'name' has already been declared

에러가 발생합니다. 

그리고, let은 변수에 재할당이 가능하다는 특징이 있는데

let name = "euijin";
console.log(name);

name = "suhjin";
console.log(name);

콘솔에 두개의 로그가 뜨는 것을 확인 할 수 있습니다.

 

const

블록스코프 : const도 블록 내부에서만 유효

호이스팅 : const 변수도 호이스팅되지만. 선언하기 전에는 접근할 수 없음

재선언 불가 : 같은 스코프 내에서 다시 선언할 수 없음

값 변경 불가 : const변수는 선언과 동시에 초기화 되어야하고, 이후에는 값을 변경할 수 없음

(단, 객체나 배열의 경우 내부 속성이나 요소는 변경할 수 있음)

 

const name = "euijin";
console.log(name);

// const name = "geumjeong";
// console.log(name);
// 주석을 제거하면 Uncaught SyntaxError가 뜸

name = "suhjin";
console.log(name);
// Uncaught TypeEroor 가나옴

 

이 글을 처음 입문한 사람이보면, 호이스팅이 뭐지? 하고 다른 페이지를 열어서 구글링을 하는 번거로움이 있을 수 있을것 같아,

호이스팅이 뭔지도 설명해드리겠습니다.

 

호이스팅이란 ?

var 선언문이나, function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말합니다.

자바스크립트는 ES6에서 도입된 let,const를 포함하여 모든 선언(var,let,const, function 등) 호이스팅합니다.

그렇지만, var로 선언된 변수와는 달리 let으로 선언한 변수를 선언문 이전에 참조하면 ReferenceError(참조 에러)가 발생하게 됩니다.

 

console.log(ej); // undefined
var ej;

console.log(gj); // Error: Uncaught ReferenceError
let gj;

 

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

 

변수는 선언 > 초기화 > 할당 단계에 걸쳐 생성이되는데

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

 

console.log(ej); // undefined

var ej;
console.log(ej); // undefined

ej = 27;
console.log(ej); // ej

//스코프의 선두에서 선언 단계 초기화 단계가 실행됨.
// 변수 선언문 이전에 변수 참조할 수 있음

 

console.log(gj); // ReferenceError : gj is not defined

let gj; //변수 선언문에서 초기화 단계 실행
console.log(gj); //undefined

gj = 27; // 할당문에서 할당 단계 실행
console.log(gj); //27

 

ConClusion

1. 기본적으로 const를 사용:

• 값을 변경할 필요가 없는 변수에 사용합니다.

• 예: 설정 값, 상수, 변경되지 않을 데이터.

2. 필요할 때만 let을 사용:

• 값이 변경될 가능성이 있는 경우에만 사용합니다.

• 예: 반복문 변수, 동적으로 변하는 값.

3. var는 사용하지 말 것:

• 함수 스코프와 호이스팅 문제로 인해 버그를 유발할 수 있습니다.

• 레거시 코드에서만 사용하는 키워드입니다.