javascript에서 var, let, const 차이점을 알고 사용해보자.

See the Pen Untitled by hyeryeonkim (@khr777) on CodePen.

 

 

 

 

var 변수 선언은 전역 변수 또는 함수 내에서 사용하기 위해 선언하죠. 

 

 

 

 

let과 const 변수가 나오기 전에는 모두 var 변수를 사용했는데 var 변수가 갖는 문제가 많다보니

let과 const를 접한 이후로는 자연스럽게 let과 const를 사용하게 되더라구요.

 

 

 

 

var변수는 재선언이 가능하며 값도 다시 설정할 수 있습니다. 

물론 여기에서 발생하는 문제가 흔히 알고 있는 var의 문제점이죠. 

 

 

 

 

 

var mung = 3; 
mung = 4; 

console.log(mung); 

function method_1() {
  mung = '사람'; 
  console.log(mung); //사람 
  var mung = '강아지'; 
  console.log(mung); //강아지 
}

method_1();

mung이라는 변수명으로 var 변수에 3을 초기화 하고 바로 4를 할당합니다.

그리고 콘솔을 찍으면 4가 나오겠죠.

 

 

 

 

 

 

method_1() 이라는 함수를 만들어서 전역 변수인 mung에 '사람'을 할당하고 출력 해본 후에 mung을 var 변수로 재선언해도 오류 없이 동작되며 재선언한 '강아지'값이 출력되는 것을 확인 할 수 있습니다.

 

 

 

 

 

 

 

 

다음으로 let 변수를 살펴볼게요.

 

let hoho; 
console.log(hoho); 

function method_2() {
  hoho = '호호'; 
  console.log(hoho); 
  // let hoho = '잉 재선언 불가'; 
  //console.log(hoho); 
  let a = 30; 
  let b = 80; 
  let total = a + b;
  console.log(total); 
}

method_2();

굉장히 간단해 보이는 코드이지만 let 변수의 경우 전역 범위에서

이미 선언한 변수를 함수 내에서 재선언 할 수 없기 때문에 오류가 발생합니다. 

 

 

 

 

 

 

 

 

let도 전역 범위에서 사용할 수 있기 때문에 상황에 따라서 적절하게 사용한다면

나도 모르게 중복되는 변수를 만들고 의도치 않은 값들을 가지고 있는 변수를 확인한다면 굉장히 당혹스럽겠죠.

 

 

 

 

 

 

 

 

 

 

const con = '변경할 수 없는'; 
console.log(con);  // 변경할 수 없는

// con = '변경 할 수 없군, 오류 발생'; error  

const obj = {
  a:1,
  b:2
}


console.log(obj)  // obj
console.log(obj.a) // 1 
console.log(obj.a + obj.b)  // 2 

const obj_v2 = {}; 
obj_v2.name = 'mangaji'; 
obj_v2.age = '10'; 

console.log(obj_v2);  // obj_v2

obj_v2.name = 'mangaji___2'; 
console.log(obj_v2.name)  //

마지막으로 const 변수 입니다.

 

 

 

 

const는 값을 변경하지 않는 상수를 초기화 한다고 생각하시면 되세요. 

보통 const에는 일반적인 값들 보다는 변경되면 안되는 값이나 객체를 할당해서 사용하죠. 

 

 

객체를 초기화(선언)하는 방법은 위와 같이 2가지가 있습니다. 

 

 

 

const의 값을 직접적으로 변경할 수는 없지만 const에 주입한 객체의 속성 값은 수정되는 것을 확인해보았으니

테스트 해보시며 var, let, const의 차이를 익히시고 적절한 상황에 이용하시면 좋을 것 같네요!