변수란?
- 사용하고자 하는 데이터의 이름을 지정하고, 데이터를 할당하는 것.
- 쉽게 말해서 일종의 저장소라고 볼 수 있다.
변수의 선언
- 변수의 선언은
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; // 할당