[TIL 07] 변수와 호이스팅

사전스터디 2주차 기간이 되었다. 자바스크립트는 원래 벅차했고, 게임만들기와 과제와 병행하려고 하는데 뭔가 이번주는 시간이 없는 느낌이라 조금은 막막하다..

변수 (variable)

변수는 변할 수 있는 값, 상수는 변하지 않는 값을 뜻한다.
변수는 프로그래밍 상에선 데이터가 변할 수 있다라는 뜻이고,
쉽게, 데이터를 저장하는 공간으로 생각하면 된다.
그래서 변수선언은 데이터 저장공간의 이름을 정해주는(선언해주는) 거라고 보면 된다.

var

var는 한번 더 선언해도 에러가 없고 다른 값으로 출력할 수 있다.
var는 같은 변수를 작성해도 에러 메세지 없이 콘솔 값에 출력 된다.

😮 주의 😮
var는 간단한 테스트하기에는 편리하지만 코드량이 많아지면
어떻게 어디에 사용될 지 파악하기 어렵고 값이 바뀔 수 있어서
요즘에는 var를 쓰는 것을 권장하고 있지 않다고 한다.

하지만 아예 사용을 안하는 것도 아니라서 사용법을 이해하고 넘어가야겠다.

코드 예시 ✍️

var a = 10;
console.log(a);   //10

var a = 20;
console.log(a);   //20

let

let은 var와 다르게 변수에 중복 선언이 불가능하다.

코드예시✍️

let a = 10;
console.log(a);

let a = 20;
console.log(a);

Error

에러가 뜨게 되면 에러메세지의 내용은 이미 a라는 변수가 있어! 라는 에러메세지가 나올거고,
var와 다르게 중복 선언이 불가능한 것을 알 수 있다.

그래서 똑같은 이름의 변수를 선언하는 일이 없어서
개발자들이 안전성 있는 변수 선언 방법으로 사용하고 있다.

그렇다면 let에서 가능한 건 뭘까? 🧐

코드예시✍️

let a = 10;
console.log(a);   //10

a = 20;
console.log(a);   //20

let은 변수에 재할당이 가능하다.
변수선언을 해준 뒤 밑에 다시 값을 재할당 해줘서 에러 없이 잘 적용된다.

const

const는 let처럼 중복 선언이 안된다. 또한, const는 재할당이 불가능하다.
const는 최초의 할당한 값에서 데이터를 변경할 수 없어서 상수라고 불린다.

코드예시✍️

const a = 10;
console.log(a);   

a = 20;
console.log(a);

ERROR

const는 let과 다르게 에러 메세지가 뜨게 되는데 상수에는 재할당할 수 없어! 라는 에러메세지가 뜬다.

호이스팅 (hoisting)

프로그램은 작성한 순서에 따라 윗줄부터 차례대로 실행된다.
하지만 변수선언은 이 원칙을 따르지 않는다.

코드예시✍️

console.log(a); undefined
var a;

에러가 발생하지 않고 undefined라고 나타나는데 그 이유가 변수가
처음에 선언된 것처럼 변수를 끌어올려주기 때문이다.

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

😮 주의 😮
1. 호이스팅할땐 위에서 설명했던 데이터 저장공간의 이름(변수선언)만 호이스팅되고
데이터 저장공간의 내용들(할당)은 호이스팅 되지 않는다.
2. let,const,함수표현식에서는 호이스팅이 발생하지 않는다.

다음엔 비교연산자와 undefined와 비교연산자 차이를 알아보도록 하자