[JavaScript] 🌟 var, let, const 차이점 💯 총정리

목차

자바스크립트에서의 변수 

JavaScript

var Name = 'Kim';

자바스크립트에서 변수는 자료를 임시로 저장하는 공간이다. 

1. var이라는 키워드 오른쪽에 작명을 하시고, 변수에 저장할 자료를 등호로 집어넣어주시면 됩니다. 
2. 오브젝트, 어레이, 함수 등 모든 자료들을 담을 수 있습니다. 
3. 그리고 var 이름이라는 부분은 선언, Name = Kim 이라는 부분은 값 할당이라고 전문 용어로 표현합니다. 보통 변수만들 땐 두개를 동시에 사용합니다. 
4. 그리고 변수를 만들 땐 var, let, const라는 3개 키워드를 이용가능합니다. 

3개 키워드마다 특징이 있습니다. 변수의 선언, 할당, 범위에서 차이가 존재하는데 자세한 내용은 밑에 나와있다.

---

변수의 선언

JavaScript

var Name;
let Age;
const Gender;

이렇게 var, let, const 키워드를 이용하여 변수를 선언할 수 있다. 등호를 사용하지 않아도 변수를 만들 수 있다.

 

그런데 var 키워드는 재선언이 가능하고 let, const 키워드는 재선언이 불가능하다. 

JavaScript

let Age;
let Age; //에러

const Gender = '여자';
const Gender = '남자'; //에러

let, const로 변수를 선언하면 같은 이름의 변수를 두번 이상 재선언할 시에 에러가 발생한다. 이 때문에 나중에 변수 이름을 실수로 중복해서 만드는 것을 방지할 수 있다. 

---

변수의 값 할당

변수에 값을 할당한다는 것이 무슨 의미냐면, 밑의 코드 중 둘째줄에서 이렇게 만들어놓은 변수에 'Kim' 이라는 값을 집어넣는걸 할당이라고 한다.  

JavaScript

var Name;
Name = 'Kim';

 

또한 할당도 선언과 동시에 할 수 있는데, 밑의 코드가 선언과 할당을 동시에 하는 방법이다. 

JavaScript

var Name = 'Kim';

 

그런데 변수를 var, let으로 만들면 재할당이 가능하고 const로 만들면 값 재할당이 불가능하다. const로 변수 만들면 나중에 등호를 이용하여 값을 변경하는 것이 불가능하다 의미이다. 

JavaScript

let Name = 'Kim';
Name = 'Park';  //가능

const Age = 30;
Age = 40; //에러

const는 애초에 constant의 약자로 바뀌지 않는 일정한 값을 뜻한다. 그래서 변경되면 안 될 값을 저장하고 싶을 때 사용하면 좋다. 

 

다만 const 변수에 오브젝트를 담으면 오브젝트 내의 데이터는 변경 가능합니다. 

JavaScript

const Object = { Name : 'Kim' }
Object.Name = 'Park'; //가능

위의 예제는 변수를 재할당한 것이 아니기 때문에 가능하다. 만약 완전히 변경이 불가능한 오브젝트를 만들고 싶다면 Object.freeze()라는 자바스크립트 기본함수를 사용하면 된다.

 

Object.freeze() 소괄호에 오브젝트를 담으시면 불변의 Object가 완성됩니다. 하지만 오브젝트 내의 오브젝트까지 freeze 해주진 않는다.

---

변수의 범위 

변수를 만들면 존재범위가 있다. var 변수는 존재범위가 function이지만, let, const 변수는 존재범위가 거의 모든 {중괄호}이다. for, if, function 등등.

JavaScript

function Func(){
  var Name = 'Kim';
  console.log(Name); //가능
}

console.log(Name); //에러

위의 예제처럼 var 변수는 function 내에서 만들면 function 내에서만 쓸 수 있다. 만약 function 바깥에서 부르면 값이 없다고 나온다. 

 

JavaScript

if ( 100 == 100 ){
  let Name = 'Kim';
  console.log(Name); //가능
}

console.log(Name); //에러

위의 예제처럼 let 변수는 {} 중괄호 내에서 만들면 중괄호 내에서만 쓸 수 있고, 중괄호 바깥에서 부르면 값이 없다고 나온다.

---

참고 문헌

• 1변수 신문법 총정리 1. var let const와 선언,할당,범위
• 2📚 var / let / const 차이점 정리 (변수 호이스팅)
• 3let, const와 블록 레벨 스코프
• 3var, let, const 차이점