let vs. var, hoisting, constants

Variable (변수 : 변경될 수 있는 값, 값의 재할당이 가능)

⭐ let

• added in ES6부터 추가, 더 모던한 것이 특징
• 기본 선언
• Block scope : block( {} ) 안에 있는 변수는 밖에서 사용 불가!
• Global scope
  • 어느 곳에서나 접근 가능
  • 글로벌한 변수들은 어플리케이션이 시작하는 순간부터 끝나는 순간까지 항상 메모리에 탑재되어 있으므로 최소한의 사용을 권장
  • 클래스나 함수, if, for loop 등의 필요한 부분에서만 사용하는 것이 좋음

// 1. 기본 선언
let name = 'yeseul';
console.log(name);
name = 'kimyeseul';
console.log(name);

// 콘솔창 출력 결과
// yeseul
// kimyeseul

// 2. Block scope : 
{
	let name = 'yeseul';
	console.log(name);
	name = 'kimyeseul';
	console.log(name);
}
console.log(name);

// 콘솔창 출력 결과
// yeseul
// kimyeseul
// 

// 3. Global scope
let globalName = 'global name';
{
	console.log(globalName);
}
console.log(globalName);

// 콘솔창 출력 결과
// global name
// global name

🧨 var

• 변수의 선언 전에도 콘솔창 출력이 가능한 문제
• 변수의 선언 전에도 값을 할당하여 출력 가능한 문제
• 중복 선언이 가능

console.log(age); // 선언도 전에 출력할 수 있음
age = 4; // 선언도 전에 값을 할당할 수 있음
console.log(age); // 4 출력
var age;

// 콘솔창 출력 결과
// undefined
// 4

// 만약 let이었다면? Error!!
name = 4;
let name;

// 콘솔창 출력 결과
// Uncaught ReferenceError: Cannot access 'name' before initialization
// name이라는 변수를 선언하기도 전에 값을 넣어 오류 메세지 출력

let a = 5;
let a = 6; // Error! (a는 이미 정의되어 있다)

// but, var...
var a = 5;
var a = 6; // 에러가 나지 않는다.
console.log(a); // 6

var를 사용하면 안되는 이유

1. 중복 선언 문제
2. var hoisting (move, declaration from bottom to top)
   : hoisting이란 어디에 선언했냐에 상관없이 항상 파일 제일 위로 선언을 끌어올려주는 것
3. has no block scope : 블록 스콥이 없다
   : block을 철저히 무시하고 블록 안에서 선언한 값이 밖에서 출력되는 현상이 발생

1. 중복 선언의 문제점

예제 코드

var a = 10;
var a = 20;

➡️ 두 번째 var a = 20; 선언은 첫 번째 선언을 덮어쓰게 되어 의도치 않은 결과가 나타날 수 있어 디버깅이 어려워질 수 있는 문제점이 있다.

2. 호이스팅의 문제점

: 호이스팅이란 자바스크립트 실행 이전에 평가 과정에서 선언부를 상단부로 끌어올려 먼저 저장하는 것이다. var의 경우 아래에서 선언해도 선언부가 먼저 저장되어 실행 시에 선언된다. 할당되지 않아도 undefined라는 값을 갖고 있고, 이러한 현상이 마치 선언부가 상단에 올라오는 효과 같다고 해서 hoisting이라는 이름으로 불리고 있다.

그렇다면 호이스팅의 문제점은 대체 무엇일까? 예시로 살펴보자.

console.log(a); // a is not defined : error
let a;
// 해당 경우에는 선언이 되지 않았다는 에러를 뱉는 게 정상이다.

// 그러나 var는...
console.log(a); // undefined
var a;

// 이렇게 호이스팅이 되는 것!
var a;
console.log(a);

➡️ var의 경우 호이스팅이 되므로 변수를 이전에 사용해도 에러가 아닌 undefined 값을 내뱉기 때문에 개발자가 변수를 사용할 때 혼란을 준다.

3. 블록 스콥이 없을 때 문제점

has no block scope 예제 코드

{
	age = 4;
	var age;
}
console.log(age);

// 콘솔창 출력 결과
// 4

// 반면 let에서 동일 문 사용의 경우
{
	let age;
	age = 4;
}
console.log(age);

// 콘솔창에 어느 값도 출력되지 않는다!

➡️ 블록 스콥이 없다는 것은 블록 내에서 선언한 변수가 블록 외부에서도 접근 가능하다는 것을 의미하는데 이로 인해 의도치 않은 변수 노출이 발생할 수 있다. 코드 가독성이 좋지 않고 예기치 못한 변수 충돌이 발생할 수 있다.

➡️ let과 const의 도입으로 블록 스코프에서 변수를 격리하고 변수 노출을 제한하여 코드의 가독성을 향상시키고 예기치 못한 변수 충돌을 방지할 수 있다.

var의 호이스팅 문제 어떻게 해결할까?

ES6(ES2015), ECMAScript 에서 let과 const를 추가하여 중복 선언 및 호이스팅을 개선하였다.

❄️ constant

• 한 번 할당하면 값이 절대 바뀌지 않는 특징
• favor immutable data type always for a reasons: : 웬만하면 값을 할당한 다음엔 다시 변경되지 않는 데이터 타입을 사용할 것
  
• constant를 사용하는 이유
  • security : 보안에 좋다. 해커들이 다른 값을 삽입하여 변경하는 것을 방지
  • thread safety : 스레드에서 동시에 값이 변경되는 건 좋지 않을 수 있으므로 가능한 한 값이 변경되지 않는 것을 사용하는 것이 좋음
  • reduce human mistakes : 개발자의 실수를 줄여준다
• cf. mutable(값이 계속 변경될 수 있는 데이터 타입, 보안상 좋지 않다.

const daysInWeek = 7;
// daysInWeek = 10; // Error 재할당할 수 없습니다.
const maxNumber = 5;