[JS] 변수 var, let, const / 선언, 할당, 초기화 / Literal 리터럴

일년전! 연합 동아리 면접볼때, 바닐라 JS 찌끄려봤던 경험으로

✌️고수✌️;; 라고 적었다가 들어온 질문이다.

그만큼 기본중에 기본인데 깊게 공부하니 꽤 복잡했다..

단순 재선언 재할당만 다룬다고 생각했는데,

호이스팅과 스포트에 대한 내용도 있어서 처음부터 정리해 보겠다!

📝 변수 선언

데이터를 나중에 사용하기 위해 변수라는 상자 안에 데이터를 할당한다.

데이터는 변수에 할당되는 이 과정에서 컴퓨터의 저장장치인 메모리, 정확히는 주 기억장치인 RAM에 저장된다.

- 이부분은 간단하게 컴퓨터의 메모리 공간에 데이터가 저장된다! 고 이해해도 될 것 같다. -

이후에 변수가 해당 데이터에 대한 메모리 위치를 참조하여 사용한다.

- 원래는 메모리 주소값을 통해서 데이터에 접근할 수 있었다면, 변수 선언 이후에는 변수로 데이터에 접근할 수 있는 것! - 

`메모리에 저장된 데이터` ← 메모리 주소값 ← 변수

(화살표는 참조한다를 뜻한다)

📝선언, 할당, 초기화

변수는 선언 단계 → 초기화 단계 → 할당 단계 에 걸쳐 생성된다.

선언

데이터 타입 var, let, const 를 이용해 변수 이름을 알려놓는 경우를 말한다.

할당

선언된 변수 안에 데이터 값을 넣어놓는다. 할당 연산자 `=`

var는 런타임 과정에서 할당하고

let, const는 초기화에서 undefined가 저장되어있는 주소값을 데이터가 저장된 주소값으로 교체하여 할당한다.

이때 할당하기 위해서는 먼저 초기화라는 개념을 사용한다.

초기화

선언된 데이터를 메모리 위에 올려놓는 과정이다.

 

var만 유일하게 선언과 동시에 초기화가 되고 (var 호이스팅으로 가독성에 문제가 발생하게 된다)

let, const는 동시에 초기화가 되지 않는다.

 

var 로 선언 할 시?

1. 실행 컨텍스트에 변수를 등록한다.

2. 메모리에 저장공간을 확보한다.

3. 그 공간의 주소값에 변수를 저장한다.

4. 저장공간에 `undefined` 를 할당해 초기화한다.

메모리를 갖고 있는 변수로 간주되어 선언문 앞에서도 해당 변수는 참조가 가능하게 된다.

이 과정에서 var 호이스팅이 일어난다

 

let, const 로 선언 할 시?

실행 컨텍스트 단계에서 변수를 등록하는 선언단계 후

아무런 작업이 일어나지 않는다. undefined, null 둘다 아닌 상태!

그럼 초기화는 언제 일어나는가? 런타임 과정에서 발생한다. undefined 상태!

*런타임(Run time) : 컴파일 과정을 마친 응용 프로그램이 사용자에 의해서 '실행, 동작되어 지는 때(time)'를 의미한다

따라서 선언 이전에 사용하려고 하면, `Reference Error`가 발생할 것이다.

❓undefined VS null

선언 되었을때, 변수는 데이터 값을 안가지고 있고 + 저장공간도 없는 상태일때 === undefined

javascript에서 기본적으로 빈 값은 undefined 상태이다

초기화 되면서 컴퓨터의 저장공간이 부여되는 상태 === null

코드에서는 `NULL` `NOTNULL`로 표현하는데, 특이하게 자바스크립트는 빈 문자열로 NULL을 표현할 수 있다.

const str1 = null;
const str2 = '';

* `===` 3개로 null인지 아닌지까지 확인할 수 있다.

→ `==`으로 비교 시, 0과 false같은 경우도 `''`와 같다고 판단한다. null이랑 undefined는 다르다고 구분하는데....

📝 var, let, const

	var	let	const
재선언	O	X	X
재할당	O	O	X
스코프	함수 스코프	블록 스코프	블록 스코프

재선언 : 변수를 같은 스코프에서 두번 이상 선언하는 것. 이름이 같은 변수에 데이터를 다시 선언할 수 있다.

* 처음 선언한 데이터와 데이터타입이 다르면 에러발생!

(ex. 처음에 문자열로 선언된 변수는 재선언 시 문자열로만 가능하다.)

var x = 10;
var x = 20; // 재선언: 허용됨

 

재할당 : 변수에 새로운 값을 할당하는 것이다. 이미 선언된 변수를 사용하여 할당한다.

let y = 30;
y = 40; // 재할당: 가능

var (variable)

재선언이 가능하고 재할당이 가능하다.

ES5 이전에 만들어진 예전 것이며,

ES6 에서는 다양한 문제점을 이유로 사용을 지양하고 있다.

*스코프는 간단하게 변수의 전역변수와 지역변수 관계를 판단하는 코드 영역을 말한다. 

var hoisting 발생 : 호이스팅은 변수가 아니라 함수를 위해 존재하는 기능이라고 한다. javascript 초기 설계에 문제가 있어 함수 뿐만 아니라 var 변수 선언도 호이스팅이 일어나게 되었다. 이를 해결하기위해 let과 const를 추가했다는 얘기도 있다.

❓문제점

• 메모리 차지 : 변수를 사용하지 않는데도, 게속 들고다니며 자리를 차지한다
• 변수명 충돌(네임스페이스) : 변수명 재선언을 방지하기위해 이름이 점점 길어진다.
• 유지보수성
• 중복선언으로 결과값 예측이 어려워짐
• 함수 스코프로 전역변수를 중복으로 선언할 위험성

let

재선언 불가능하고 재할당이 가능하다.

즉, 중복선언 덮어씌우기 등 불가능하다. 단순 데이터만 변경해주는 재할당은 가능하다

const

재선언과 재할당 모두 불가능하기 때문에

선언과 동시에 할당하는 코드를 작성한다. var, let은 선언만 먼저 하고 추후에 할당할 수 있다.

`const a = 0`

📝 Literal 리터럴

javascript에서 값을 나타낸다. 변수 안에 들어가는 고정된 데이터 값을 말한다.

리터럴을 사용한다는 것은 변수를 선언하면서 동시에 값을 할당해 주는 방식을 말한다

 = const 작성 방식

초기 선언의 데이터 타이은 불변한다. 재할당 할때 데이터타입이 다르면 불가능하다!

?? 고정된 데이터 값이기에 변경이 불가능하다

→ 컴퓨터는 변수명의 주소값을 저장하는거지, 리터럴을 저장하는 것이 아니기 때문에 변경 불가능!!

종류는 대표적으로 배열, 불리언, 숫자, 객체 등이 있으며 자세한 사항은 공식문서를 확인하자

Literal (리터럴) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

☑️ 배운점

최대한 풀어서 작성한다고 했는데 설명하는 글이 꽤 어렵구나...

확실히 정리하는 글을 쓰니까 깊게 공부하게 되었다!

이전에 알고있던 것은 수박 겉핥기일뿐... 꾸준히 글을 쓰자!

---

#참고

10분 테코톡

변수 선언, 초기화, 할당

 

var, let, const 차이점 / 호이스팅이란? / null, undefinded