javascript - let, var, const

varaible

* mutable = 값을 계속 변경될 수 있는, all objects type

* immutable = 값을 변경할 수 없는, primitive type

 var 

1. 값을 재선언 및 재할당 할 수 있다

console.log(age); //undefined
age = 4;
console.log(age); //4
var age;

첫 줄에서 변수는 정의되어있지만, 값이 안 들어가 있다는 의미.

값을 할당하고 console.log를 찍어보면 값인 4가 반환된다.

 

=> var hoisting 

호이스팅은, 어디에서 선언하는 것과 상관없이 제일 위로 끌어올려주는 것.

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

 

2. var 키워드로 선언한 변수는 오직 function-level scope 이다

function callMyName () {
    var myName = "taenami";
    console.log(myName);
}

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

 let  ( ES6에서 추가 ), Mutable type

1. 메모리가 할당되고, 다시 값을 바꿀 수 있다. 즉 재선언은 할 수 있지만, 재할당은 할 수 없다.

let age;
age = 29;
console.log(age); // 29

let myName = "taenami";
let myName = "kim"; // Uncaught SyntaxError: Identifier 'myName' has already been declared

 

 

2. let 키워드로 선언한 변수는 block-level scope 이다.

모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.

let name = 'taenami';

{
  let age = 29;
}

console.log(name); // taenami
console.log(age); // Uncaught ReferenceError: age is not defined

 const  , Immutable type

값을 재선언 및 재할당 할 수 없다.

const myCity = "seoul";

myCity = "busan"; // Uncaught TypeError: Assignment to constant variable.

const 장점

1. 보안상의 이유, 해커들이 코드를 바꿀 수 없게끔 하기 위해

2. 한 가지 프로세서가 할당되고, 다양한 스레드들이, 동시에 값을 변경할 수 있는데 이건 위험한 것

3. 사람의 실수를 줄일 수 있다.

 

let, const 키워드로 선언한 변수는 모든 코드 블록(함수, if문, for문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

 

정리

재할당이 필요한 경우에 한정해 let을 사용한다.

재할당이 필요 없는 상수와 객체에는 const를 사용한다.

기본적으로 변수를 선언할 때, const 사용을 지향한다.

 

let의 브라우저 지원율

const의 브라우저 지원율

+++ 추가

let과 const 키워드를 이용해서 변수를 선언하면, window에 등록되지 않습니다.

block-level, 로컬 스코프에서 작성한 함수나 변수는 window에서 접근이 불가능합니다.

 

하지만, var키워드를 이용한 변수는, block-level 스코프가 아니기 때문에, window에서 접근이 가능합니다.

const age = 29;
let name = "taenami";

var temp = "temp";

console.log(window.age); // undefined
console.log(window.name); // undefined

console.log(window.temp) // 'temp'

 

 

 

출처: www.youtube.com/watch?v=OCCpGh4ujb8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=3