T.I.L (Java Script-변수 선언) 20.05.23

😎 변수 선언 (var , let , const) 그리고 차이점.

변수가 생성 되면 3단계 (선언 -> 초기화 -> 할당) 순으로 생성 된다.

● var (function-level-scope)

ES6 이전에는 변수 선언 방법이 var 밖에 없었다.
var 에는 여러가지 문제가 있었는데 ,
아래 코드들을 보자.

1. var로 변수 선언 후 중복 선언 가능

var chicken = 'nice';
console.log(chicken); // 'nice

var chicken = 79;
console.log(chicken); // 79

2. 변수 선언 하지도 않았는데 참조 가능

cosole.log(chicken); // undifined
var chicken = 'nice'; // (할당)
console.log(chicken); // nice

3. function-level-scope

● function-level-scope란 ?
변수의 유효범위가 함수가 되는 것을 의미하며 , 아래 코드를 살펴보자.

var pizza = 'good';

(function(){
  var pizza = 'Great';
  console.log(name);
})();

console.log(pizza);

// Great
// good

var만 있었던 당시에는 저렇게 코드를 해야하는 불편함이 있었다.
밑에 let 내용을 다뤄보면서 깔끔해진 코드를 보자.

● let, const (block-level-scope)

위에 내용을 토대로 var 대신 let 을 사용해보겠다.

let pizza = 'good';
{
  let pizza = 'Great';
  console.log(pizza);
}
console.log(pizza);

// Great
// good

해당 코드는 let을 사용하여 깔끔하게 작성 할 수 있다.

let 과 const는 유효범위가 block이 되고 , 변수 재선언이 불가하다는 공통점이 있지만

let 은 변수에 재할당이 가능하고
const는 변수 재선언 , 재할당 전부 불가능하다.

이해를 돕기 위해 아래 코드를 살펴 보자.

// let 
let chicken = 'good'
let chicken = 'Great' 
//Uncaught SyntaxError: Identifier 'chicken' has already been declared
chicken = 'always right'
// always right

// const 
const pizza = 'good'
const pizza = 'Great'
//Uncaught SyntaxError: Identifier 'pizza' has already been declared
pizza = 'always right'
//Uncaught TypeError: Assignment to constant variable.

해당 내용에 이해한 만큼 적어 봤는데 혹시라도 수정사항 , 추가사항 있으면 언제든 댓글 부탁드립니다.

참조

https://happycording.tistory.com/entry/let-const-%EB%9E%80-%EC%99%9C-%EC%8D%A8%EC%95%BC%EB%A7%8C-%ED%95%98%EB%8A%94%EA%B0%80-ES6

https://aljjabaegi.tistory.com/352