변수, 스코프(scope), 호이스팅(hoisting)과 예약어

변수란?

• 사용하고자 하는 데이터의 이름을 지정하고, 데이터를 할당하는 것.
• 쉽게 말해서 일종의 저장소라고 볼 수 있다.

변수의 선언

• 변수의 선언은 var, let. const를 이용하여 할 수 있다.
• 그러나 var는 잘 사용되지 않으며, let과 const를 주로 이용한다.

• 예시엔 var를 계속 쓰지만 요즘엔 let 으로 대체되었음!!!!!!!!!!

var a = 5;
let b = 5;
const c = 5;

console.log(a+b+c); // 15
console.log(a*b*c); // 125

• 선언된 변수를 다른 계산에 사용하는 것을 변수의 재사용이라고 한다.

변수의 재할당

• 이미 선언된 변수에 다른 값이 해당 변수에 다시 할당되는 것을 변수의 재할당이라고 한다.
• var와 let은 재할당이 되지만, const는 재할당이 되지 않는다.

var a = '기존값';
a = '재할당값';

let b = '기존값';
b = '재할당값';

const c = '기존값';
c = '재할당값';

console.log(a); // "재할당값"
console.log(b); // "재할당값"
console.log(c); // 재할당 될 수 없는 값이므로 Error 표시

• 이후에 값이 바뀌거나, 바뀔 수 있는 값이라면 재할당이 가능한 let을 사용한다.(var ㄴㄴ)
• 지정한 변수가 고정된 값이여야한다면 const를 사용한다.
  ( const : constant : 상수 - 변하지 않는 값을 뜻한다. )

스코프(Scope)

• Scope 란 변수가 영향을 끼치는 범위를 뜻 한다.
• 어디서든 접근이 가능한 Global Level Scope, 함수 내에서만 작동하는 Function Level Scope,
  블럭(중괄호 내) 에서만 작동하는 Block Level Scope 가 있다.
• 글로벌 스코프를 제외한 Scope 들을 Local Level Scope 라고 한다.
• var는 함수 스코프, let과 const는 블럭 스코프를 가진다.

let a = "Global Level Scope" // 어디서든 접근이 가능하다.

function f() {
 let b = "function Level Scope" // 함수 내에서만 접근이 가능하다.
 console.log(b) // "function Level Scope"
}

{
let c = "block Level Scope" // 블럭 내에서만 접근이 가능하다. (if, else, while, for 등)
console.log(c) // "block Level Scope"
}

console.log(a) // "Global Level Scope"
console.log(b) // Error 표시
console.log(c) // Error 표시

• 예시에서 변수 b와 c는 외부에서는 접근이 불가능하므로 에러메시지가 표시된다.
• Global Level Scope 는 앱을 실행하는 동안 항상 메모리에 존재하기 때문에 되도록 필요한 만큼만 최소한으로 쓰는 것이 최적화 측면에서 좋다고 함.
  (필요한 경우에 함수 혹은 조건문 내에서 선언하는 것을 기본으로.)

호이스팅(Hoisting)

• JS의 컴파일 특성 중 하나이며 변수의 선언을 어디에 했던 해당 선언이 속한 스코프의 최상단으로 끌어올려지는 현상.
  ( Hoisting : 끌어올리다. )
• 변수를 선언하면 선언, 초기화, 할당이 각각 이루어지는데, var의 경우 선언과 초기화가 함께 일어나므로 undefined이 표시된다.

console.log(a); // undefined
var a = 5; 
console.log(a); // 5

• 위 내용은 Hoisting에 의해서 아래 내용과 같아진다.

var a; 
// hoisting 되어 최상단에서 변수의 선언과 초기화(undefined)
console.log(a); // undefined
a = 5; // 할당
console.log(a); // 5

• 변수값은 최초로 선언되었던 위치에 그대로 있지만, 변수의 선언과 초기화만 올라가 버린다.
• var를 사용한 경우에만 undefined이 표시나며, let을 사용 할 경우 해당 상황에 오류가 표시된다.
  (즉, 선언한 변수가 꼬일 일이 없다.)
• let 과 const 도 Hoisting이 발생하지만, undefined대신 에러가 표시될 뿐이다.
  (선언과 초기화가 함께 이루어지지 않아 데이터가 없기 때문에 문법에러가 뜬다.)
• 좋은 글의 링크는 요기 -> https://yceffort.kr/2020/05/var-let-const-hoisting

var를 사용하지 않는 이유

• 위에서 말했듯 var는 함수 스코프를 가지고 있는데, 동시에 블럭 스코프를 무시한다.

function f () {
	if(true) { 
		var a = 5;
		let b = 10;
	}
console.log(a) // 5, 함수 스코프 내에서 블럭 스코프를 무시하고 작동한다.
console.log(b) // Error 표시 -> 블럭 스코프 안에 있으므로 참조할 값이 없기 때문
}

• 그러므로 블럭 스코프 내에 var가 존재할 경우 var의 선언은 hoisting 에 의해 함수 스코프의 최상단에서 선언이 이루어진다.
• 즉, 원치않은 곳에서 var로 선언된 변수와 할당된 값이 튀어 나올 수 있다는 이야기.
• 그렇기 때문에 블럭 스코프를 가진 let과 const를 사용하고, var는 먼 곳으로 가버렸다.

예약어

• 이미 사용처가 지정된 이름들을 변수의 이름으로 사용 할 수 없는 것을 이야기한다.
  (this, if, break 등등)
• IDE 상에서 에러가 발생하며, 대체적으로 명령어나 키워드로 사용되는 것들이 그러하다.

• 전부 외울 필요는 없고, 그럴 수도 없으니 IDE 가 알려주니 참고합시다.

+

• 변수를 선언할 때는 const를 자주 사용함, 다른 값이 필요한 경우 let으로 수정한다.

• 호이스팅을 이해 할 때는 기억하자 선언 - 초기화 - 할당.

• 어쨌든 var 만 안쓰면 됨 아무튼 그럼.

• var의 선언과 초기화, 할당의 단계

var a = 5; // 작성된 값

var a; // 선언
var a = undefined; // 초기화 (선언과 함께 스코프 최상단에서 이루어짐)
a = 5; // 할당