1. var, let, const 비교

var는 변수 재선언, 재할당이 가능하다.
let은 변수 재선언이 불가능하지만 재할당은 가능하다.
const는 변수 재선언, 재할당 모두 불가능하다.

1) var (variable)

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 (전역스코프의 변수 선언결과)

2) let

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로 선언)

3) const

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로 선언)

2. 무엇으로 변수를 선언하는것이 좋을까?

var로 변수를 선언할 경우 재선언,재할당이 가능한점 그리고 전역변수로 선언되는 점으로 인해 scope가 오염되는 문제가 발생했다.

이러한 문제들로 인해, ES6에서 재선언이 불가능한 let과 재선언,재할당이 모두 불가능한const의 개념이 추가되어 안전하게 코딩을 할 수 있게 되었다. 기본적으로 const로 변수를 선언하되 재할당이 필요한 변수의 경우 let을 사용해주는 것을 기본으로 하면 된다.

오늘의 생각

눈으로만 개념을 이해하다 나만의 글로 그 개념들을 적어보려고하니 생각보다 많은 시간이 걸렸다. 하지만 그만큼 오늘 배운 개념들을 더 잘 이해한 것 같다. 첫 개념공부에 너무 많은 시간을 쏟아 공부 속도가 너무 느린거 아닌가하는 생각이 들었지만 기초만큼 중요한 것은 없으니까 꼭꼭 씹어 소화하자! 코딩 재밌다아👻

추가 공부해야 할 것

1. 호이스팅 개념 차근히 다시보고 추가 (20.11.21 - scope개념 정리하여 추가함!)
2. MDN web docs의 선언개념 차근히 다시보고 이해!(20.11.21 - 추가공부하여 본 글에 무엇으로 변수를 선언하면 좋을지 추가함!)

참고한 페이지

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

제가 잘못 이해한 부분이 있다면 꼭 알려주시면 감사하겠습니다!🙆🏻‍♀️