TIL day5 let vs var, hoisting

1. variable (변수)

: 변경 할 수 있는 값
Javascript에서 변수 사용 시 let 사용. 유일무이!!!
let(added in ES6)

let name = 'whinney'; 
//let을 이용해 변수 name 선언함. 선언과 동시에 'whinney'라는 값(value) 할당함.
console.log(name); // 'whinney'
name = 'heiney'; //변수 name에 값 'heiney' 재할당함.
console.log(name); // 'heiney'

keyword variable = value

: Application 실행 시 해당 APP가 사용 할 수 있는 memory가 할당된다.
memory는 비어이는 박스로 APP 실행 시 사용 할 수 있는 박스(memory)는 제한적으로 할당된다.
let name → 한 가지의 박스(memory)를 가리킬 수 있는 pointer가 생긴다.
name이라는 변수가 가리키는 어딘가에 'whinney'라는 값을 저장 할 수 있다.
추후 name이 가리키는 박스(memory)에 다른 값을 저장 할 수 있다.

1) Block Scope

{
let name = 'whinney';
console.log(name); // whinney
name = 'hello';
console.log(name); // hello
}

→ Block {} 설정 시 Block 밖에서는 block 안의 내용은 볼 수 없게된다.

{
let name = 'ellie';
console.log(name);
name = 'hello';
console.log(name);
}
console.log(name); // (blank)

→ console은 block 밖에 있으므로 값이 나오지 않는다.

2) Global Scope

let globalName = 'global name';
{
let name = 'whinney';
console.log(name); // whinney
name = 'hello';
console.log(name); // hello
consol.log(globalName); // global name
}
console.log(name); //(blank)
consol.log(globalName); // global name

→ Global Scope: block 안에 넣지 않고 file 안에 정의해서 쓰는 변수들로 어디에서나 접근 가능하다.
→ Block 안, 밖으로 출력해도 보인다.
→ APP가 실행되는 순가부터 종료 될 때까지 항상 memory에 탑재되어 있어 최소한으로 써야한다. 가능하면 class나 function, if, for loop 필요한 부분에서만 써야한다.

※ let 이전에는 변수 선언할 때 var 사용함
var 더 이상 쓰면 안 되는 이유

1. var hoisting

: var hoisting이란 선언 위치와 상관없이 선언을 가장 위로 끌어올려주는 것이다. (Move decalaration from bottom to top)
대부분의 프로그래밍 언어에서는 변수 선언 후 값을 할당하는 것이 순서이다.
But, Javascript는 너무 유연해서 변수 선언 전 값을 할당 할 수 있고 값 할당 전 출력이 가능하다.

console.log(age); //출력
age = 4; // 값 할당
var age; // 변수 선언
 : 확인 시 undefined으로 나옴 (값 설정이 안 되어 있기 때문에)
//정상 순서: 변수선언-> 값 할당-> 출력

console.log(age); // 출력 output: undefined
age = 4; // 값 할당
console.log(age); // 출력 output: 4
var age; // 변수 선언
// 변수 선언이 안 되어 있지만 4가 출력 됨.
	두번째 console 앞줄에 값 선언이 이루어졌기 때문

name = 4; // 값 할당
let name; // 변수 선언
// let 사용 할 경우 let 사용 전에 값을 넣었기 때문에 error 뜸 
	정상!!!

→ var hoisting 이다.

4. var는 block scope이 없다.

: var no block scope. block을 철저히 무시한다.

{
age = 4; // 값 할당
var age; //변수 선언
}
console.log(age); // 출력 4

→ block {}을 해 놓았음에도 block 밖에서 출력시 4가 출력됨
초창기 JS에서 유연성을 위해 빠르게 프로그래밍 되었으나 규모가 커지면서 Error를 일으킨다.

But. IE에서 let 사용 안 됨 → babel 이용해서 ES5나 ES4로 변환해서 배포하면 됨.

2. Constants(상수)

: 한 번 할당하면 값이 바뀌지 않는 것
변수를 가리키면 변수는 memory 어딘가에 할당된 박스를 가리키고 있어 pointer를 통해 값을 바꿀 수 있으나 const는 가리키는 pointer가 잠겨있어 값 변경이 불가능하다.

변경 가능한 값(let) : mutable data
변경 불가능한 값(const) : immutable data

변경 불가능한 값을 주로 사용해야한다.
(Favor immutable data type always for a few reasons):

1. Security 보안
   : 변수의 경우 한 번 작성한 값을 다른 해커들이 값을 변경하는게 가능하다.

2. Thread Safety
   : APP 실행 시 한 가지의 process가 할당되고 process 안에는 여러개의 thread가 동시 사용된다. (APP가 빠르게 실행되도록 한다.)
   → 다양한 thread가 동시에 변수에 접근 할 수 있다.
   → conflict 가능성!!! 가능하면 값이 변경되지 않는 것을 사용해야한다. (const 사용!!)

3. Reduce human mistake
   : 나중에 코드 변경, 타 개발자가 코드 변경 시에도 원할하다.

   출처 드림코딩