스코프의 범위

자바스크립트에는 선언 시 3가지의 변수 선언이 있다. var, let, const

한마디로 정리하면 var 는 function scope 이고 let과 const는 block scope 이다

var 는 함수 내에서 선언되면 함수가 종료되는 순간 없어진다.

function myFunction(){
  var carName = "Volvo";
  console.log(carName);
}
 
myFunction(); //Volvo
 
console.log(carName); //error 

그리고 변수가 함수 내에서만 유효하다.

var carName = "BMW";
function myFunction(){
  var carName = "Volvo";
  console.log(carName);
}
 
myFunction(); //Volvo
 
console.log(carName); //BMW

위에것만 보면 문제가 없다고 생각하겠지만 블록에서는 이게 적용이 안된다;;

var carName = "BMW";
 
if(carName == "BMW") {
  var carName = "I am BMW";
}
 
console.log(carName); //I am BMW 

carName이라는게 정의되어 있어도 함수안에서 선언한게 아니라면 원래있는걸 무시하고 다시 선언를 해버린다.

var i = 5;
for(var i = 0; i < 10; i++){
}
 
console.log(i); //10

반면에 let과 const는 블록 스코프이다.

일반적인 C++이나 자바 같은거라고 생각하면 좋을거같다.

let x = 2;
{
  let x = 4;
  console.log(x); // 4
}
 
console.log(x); // 2

var다르게 5가 출력된다! for문 안에서 선언한 i는 블록안에서만 유효하기 때문

let i = 5;
for(let i = 0; i < 10; i++){
}
 
console.log(i); //5

그리고 같은 이름으로 선언을 할 수 없다. const도 마찬가지

let x = 2;
let x = 4; 
//Uncaught SyntaxError: Identifier 'x' has already been declared

let과 const의 차이는 값을 바꿀 수 있는냐의 차이

let x = 2;
x = 4; //가능
 
const constX = 2;
constX = 4; 
//VM770:4 Uncaught TypeError: Assignment to constant variable.
 

하지만 const가 객체인경우 다시 정의하지 않고 안에 있는 값을 바꾸는건 가능하다

const car = {type:"Sport", price:500, color:"red"};
 
car.color = "white"; // 가능!
 
car.owner = "ME!"; //가능!

console.log(car); //{type: "Sport", price: 500, color: "white", owner: "ME!"}

car = {type:"Sport", price:500, color:"white", owner:"ME!"}; // 불가능
// Uncaught TypeError: Assignment to constant variable.

배열 또한 인덱스로 접근하거나 자체함수를 써서 추가나 삭제가 가능하다. 하지만 역시 재정의는 안된다

const cars = ["Saab", "Volvo", "BMW"];
 
car[0] = "Audi"; // 가능
 
cars.push("Benz"); // 가능
 
cars = ["Audi", "Volvo", "BMW", "Benz"]; // 에러!

요약하자면, 

var는 함수가 아닌 곳에서 선언을 하면 원래 있는 변수라도 그냥 무시하고 다시 정의한다!

 -> 코드가 복잡해지고 디버깅이 힘들어질수도있다.

let 과 const 는 일반적인 프로그래밍언어에서 사용되는 것과 비슷하다

 -> 이걸 많이 쓰자

그리고 함수나 객체 같은 건 const를 이용하는게 좋다고들한다.

const func = function() {
    console.log("const Func");
}
 
func = 10; // Error!

혹시 모르는 실수를 위해 const로 선언하면 바뀔일이 없기 때문이다