배경

• var가 있는데 굳이 let & const가 나온 이유?

  문제점1!

  → 함수 스코프 : (함수가 아닌) 블록에서 선언된 변수는 전역 변수

  → 전역 변수가 너무 많아진다!!

  if(true){
  	var num = 10;             //if문 안에서만 쓰기 위한 변수
  	console.log(num);
  }
  
  //전역변수로 취급받음
  console.log(num);            //10
  console.log(window.num);     //10
  

  → num을 if문에서 한번쓰고 버리려고 했는데 전역 변수가 되어버린다..

  문제점2!

  → 중복된 이름 선언 가능

  → 의도치 않게 값의 변경이 일어날 가능성이 있다.

  → 변수의 불변성 보장 X

  → (유동적인 값을 담는 변수 vs 너무 중요해서 값이 바뀌면 안되는 변수)에 대한 구분이 없음

  var num = " 이 값은 중요하니까 바꾸지 말자";
  
  if(true){
  		var num = "아무 생각 없이 값을 바꾸어 버림!!";
  }
  
  console.log(num);  //값이 바뀌어버림
  

var의 문제점 보안 → let & const

• let

  • 중복 선언 불가!
  • 블록 레벨 스코프

  if(true){
  	let num = 3;
  	console.log(num);
  }
  
  console.log(num); //오류 뜸 -> num은 블록 안에서만 존재하기 때문에
  

  if(true){
  	let num = 3;
  	console.log(num);
  	let num = 10;
  } //오류 뜸 -> 중복 선언을 했기 때문
  

  //재할당 하는 것은 가능함 :D
  if(true){
  	let num = 3;
  	console.log(num);
  	num = 10;
    console.log(num);
  }
  

• const

  • 중복 선언 x
  • 블록 레벨 스코프
  • 값의 재할당 불가

  if(true){
  	const num = 5;
  	console.log(num);
  }
  
  console.log(num); // 오류 뜸 -> num은 블록 안에서만 존재하기 때문에
  

  if(true){
  	const num = 5;
  	console.log(num);
  	const num = 100;
  } //오류 뜸 -> 중복 선언을 했기 때문
  

  //재할당 하는 것도 불가능함
  if(true){
  	const num = 3;
  	console.log(num);
  	num = 10; // 오류 뜸 -> 재할당 하려고 했기 때문에
    console.log(num);
  }
  

  • const → 객체를 사용할 때도 자주 사용됨

    • const로 선언된 객체는 key값으로 바꾸는건 안됨

    const obj = {'key' : 'value' };
    const obj = {'key2' : 'value2' }; // -> key값을 바꾸는 건 안된다.
    

    • const로 선언된 객체는 value값은 바꿀 수 있음!! → 객체 틀은 유지한 체 value값 변경 가능

    const obj = {'key' : 'value' };
    obj.key = 'value2'; //value값은 바꿀 수 있음
    console.log(obj);
    

결론!

→ 앞으로 변수 선언은 let & const

→ 언제든 재할당이 필요한 경우는 let

→ 변할 일 없으면 기본적으로 const