오늘은 내가 매일같이 쓰는 단어인 '변수', 그리고 변수의 '선언/할당/초기화'에 대해 간단히 정리해보자. 변수의 선언이 실행 컨텍스트와 연관지어 이해할 수 있다는 것을 처음 알았다! 깊이 있게 공부하자. 이해하자.
변수란?
하나의 값을 저장하기 위해 확보된 메모리 공간 자체이고 변할 수 있는 데이터이다. 변수명이란 메모리 공간을 식별하기 위한 식별자이다.
변수의 선언/초기화/할당
1. 선언
변수의 선언이란 var, let, const 키워드를 사용하여 변수를 정의하는 것을 의미한다.
자바스크립트는 코드 실행 전, 전체 코드를 훑으며 문제 사항을 확인하는 실행 컨텍스트 Execution phase(실행 단계)를 진행한다. 선언 단계는 바로 이 실행 컨텍스트에서 진행되며 우리가 만든 변수 또는 함수를 실행 컨텍스트에 등록한다.
2. 초기화
변수의 초기화란 변수를 선언함과 동시에 값을 넣어 주는 것을 의미한다.
이 때 var을 사용하여 선언된 변수와 let, const를 사용하여 선언된 변수의 진행과정이 다르다.
먼저 var를 사용한 선언 방식의 경우, 다음과 같이 선언과 초기화가 동시에 이루어진 후 런타임 단계에서 할당이 이루어져 호이스팅이 가능해진다. 참조가 가능해진 변수는 실행 컨텍스트 최상위로 이동하여 선언 전에 참조가 가능해지는 것이다.
1. 실행 단계에서 실행 컨텍스트에 변수를 등록한다. => 선언
2. 콜 스택의 메모리 저장 공간에 해당 변수를 위한 메모리 공간을 확보한다.
3. 실행 컨텍스트에 등록된 변수에 2에서 확보한 메모리 공간의 주소 값을 저장한다.
4. 그 저장 공간에 undefined를 할당한다. => 초기화
let 또는 const의 초기화 단계는 실행 컨텍스트 Execution phase(실행 단계)에서 실행 컨텍스트에 변수를 등록하는 선언 단계를 거치고 난 후 런타임 과정에서 변수 선언문에 도달했을 때 이루어진다. 초기화 이전에 변수에 접근하려고 하면 참조 에러(ReferenceError)가 발생한다. 이는 변수가 아직 초기화되지 않았기 때문이다. 다시 말하면 변수를 위한 메모리 공간이 아직 확보되지 않아 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없고, 이를 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부른다.
결론적으로, let 또는 const를 사용한 선언 방식은 1번 과정은 선언 단계에서, 2~4는 초기화 단계에서 이루어지지만, var를 사용한 선언 방식은 1~4가 동시에 이루어져 선언 단계와 초기화 단계가 나눠서 진행되지 않는다는 차이가 있다.
3. 할당
변수의 할당은 변수가 선언된 후 대입 연산자(=) 를 통해 값을 넣어주는 것을 의미한다. 모든 선언 키워드의 할당은 런 타임 과정에서 이루어진다.
새로운 콜 스택 메모리 저장 영역에 메모리를 확보하여 할당된 값을 저장한 후 해당 메모리의 주소값을 기존에 undefined가 저장되어 있는 주소값과 교체하여 변수에 저장한다.
단, const는 재할당이 금지된다. 이는 const 변수의 타입이 객체인 경우, 객체에 대한 참조를 변경하지 못한다는 것을 의미한다.
하지만 재할당은 불가능하지만 할당된 객체의 내용(프로퍼티의 추가, 삭제, 프로퍼티 값의 변경)은 변경할 수 있다. 객체의 내용이 변경되더라도 객체 타입 변수에 할당된 주소값은 변경되지 않기 때문이다.
메모리 주소값 교체 관련 개념은 아래의 블로그에 자세히 나와있다. 그림까지 있어 이해하기 편했다!
https://bbaktaeho-95.tistory.com/36
[Javascript] 데이터 타입과 할당 (typeof, var, memory, 기본형, 참조형, 불변성, 가변성)
📚 데이터 타입과 할당 사실상 자바스크립트의 데이터 타입은 모두 참조형이라고 해도 틀린 말은 아니다 자바스크립트는 null 을 Object 타입으로 반환한다 📗 기본형 기본형 데이터는 불변성의
bbaktaeho-95.tistory.com
끝으로,
변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에만 사용하는 것이 좋다.
원시 값의 경우, 가급적 상수를 사용하는 편이 좋다. 특히 객체를 선언하는 경우 const를 사용하도록 노력하자. 객체를 재할당하는 경우는 생각보다 흔하지 않다고 한다.
이해에 참고한 블로그
var, let, const의 차이 - 변수 선언 및 할당
var, let, const란,,,
velog.io
변수 선언, 초기화, 할당
자바스크립트 어플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다. 변수명은 식별자(identifier)라고 불리며 특정 규칙을 따릅니다.\- MDN 문법과 자료형변수는 쉽게 말해 프로그램 실행
velog.io
'CS > Javascript' 카테고리의 다른 글
| 객체 key 값으로 정렬하기 (0) | 2023.04.08 |
|---|---|
| 이벤트 버블링, 캡쳐링 및 이벤트 위임 (0) | 2023.03.31 |
| 객체지향 프로그래밍이란?(feat. javascript) (0) | 2023.03.29 |
| 자바스크립트는 어떤 언어인가? (0) | 2023.03.29 |
| 자바스크립트 렉시컬 환경이란? (0) | 2023.03.28 |
