var는 변수 재선언, 재할당이 가능하다.
let은 변수 재선언이 불가능하지만 재할당은 가능하다.
const는 변수 재선언, 재할당 모두 불가능하다.
var
은 (1)변수 재선언,재할당이 가능하며, (2)전역 변수(Global Variable)를 선언한다.
(1) cafe라는 변수를 아래와 같이 재선언, 재할당해도 값이 모두 출력된다.
///재선언
var cafe = 'starbucks'
console.log(cafe); //starbucks
var cafe = 'paulbassett
console.log(cafe); // paulbassett
///재할당
var cafe = 'starbucks'
console.log(cafe); //starbucks
cafe = paulbasset;
console.log(cafe); //paulbasset
(2) function scope를 따라 전역 변수를 선언할 수 있다.
var x = 1;
if (x === 1) {
var x = 2;
console.log(x); // 2 (함수스코프의 변수 선언결과)
}
console.log(cafe); // 2 (전역스코프의 변수 선언결과)
let
은 (1)재선언은 불가능하지만, 재할당은 가능하며 (2)지역 변수(Local variable)를 선언한다. 다시말해, block scope를 따른다.
(1) 재선언이 불가능하지만 재할당은 가능하다.
let cafe = 'starbucks';
console.log(cafe); // starbucks
let cafe = 'paulbassett';
console.log(cafe); // Identifier 'cafe' has already been declared (재선언 오류)
cafe = 'ediya'
console.log(cafe); // ediya (재할당 ok!)
(2) 선언된 블록 또는 표현식 내에서만 변수를 선언한다(block scope).
let x = 1;
if (x ===1) {
let x =2;
console.log(x); // 2 (변수가 선언된 함수스코프 내의 변수를 선언)
}
console.log(x); // 1 (변수가 선언된 함수스코프 밖에 console.log를 찍었기 때문에 결과 값은 함수스코프 밖의 1로 선언)
const
는 (1) 재선언, 재할당 모두 불가능하며, (2) 지역 변수(Local variable)를 선언한다. 다시말해, block scope를 따른다.
(1) 재선언, 재할당 모두 불가능하다.
const cafe = 'starbucks';
console.log(cafe); // starbucks
const cafe = 'paulbassett';
console.log(cafe); // Identifier 'cafe' has already been declared
cafe = 'ediya'
console.log(cafe); // Assignment to constant variable
(2) 선언된 블록 또는 표현식 내에서만 변수를 선언한다(block scope).
const x = 1;
if (x ===1) {
const x =2;
console.log(x); // 2 (변수가 선언된 함수스코프 내의 변수를 선언)
}
console.log(x); // 1 (변수가 선언된 함수스코프 밖에 console.log를 찍었기 때문에 결과 값은 함수스코프 밖의 1로 선언)
var
로 변수를 선언할 경우 재선언,재할당이 가능한점 그리고 전역변수로 선언되는 점으로 인해 scope가 오염되는 문제가 발생했다.
이러한 문제들로 인해, ES6에서 재선언이 불가능한 let
과 재선언,재할당이 모두 불가능한const
의 개념이 추가되어 안전하게 코딩을 할 수 있게 되었다. 기본적으로 const
로 변수를 선언하되 재할당이 필요한 변수의 경우 let
을 사용해주는 것을 기본으로 하면 된다.
눈으로만 개념을 이해하다 나만의 글로 그 개념들을 적어보려고하니 생각보다 많은 시간이 걸렸다. 하지만 그만큼 오늘 배운 개념들을 더 잘 이해한 것 같다. 첫 개념공부에 너무 많은 시간을 쏟아 공부 속도가 너무 느린거 아닌가하는 생각이 들었지만 기초만큼 중요한 것은 없으니까 꼭꼭 씹어 소화하자! 코딩 재밌다아👻
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/
https://velog.io/@marcus/2019-02-10-1702-%EC%9E%91%EC%84%B1%EB%90%A8
https://velog.io/@rememberme_jhk/JS-Scope-%EC%A7%80%EC%97%AD-%EB%B3%80%EC%88%98-%EC%A0%84%EC%97%AD-%EB%B3%80%EC%88%98
제가 잘못 이해한 부분이 있다면 꼭 알려주시면 감사하겠습니다!🙆🏻♀️