🔍 변수와 데이터 타입에 대한 이해는 프로그래밍의 기본적인 부분을 이해하는 데 중요하기 때문에 이러한 개념들은 코드의 작동 방식, 메모리 관리, 그리고 버그의 발생 원인 등을 이해하는 데 큰 도움이 됩니다.
- 변수: 변수는 데이터를 저장하고 참조하는 데 사용되며, 어떤 변수가 어떤 값을 가질 수 있는지, 그리고 그 변수의 범위(scope)는 어디까지인지를 이해하는 것은 매우 중요합니다. 또한, 변수 선언 방식(var, let, const)에 따른 호이스팅과 스코프의 차이를 이해하는 것도 중요합니다.
- 데이터 타입: JavaScript는 동적 타입 언어이므로, 변수를 선언할 때 데이터 타입을 명시적으로 선언하지 않습니다. 그러나 JavaScript에는 여러 가지 데이터 타입(원시 타입과 객체 타입)이 있으며, 각각의 데이터 타입이 어떤 특성을 가지고 있는지, 어떻게 동작하는지를 이해하는 것은 코드의 예상치 못한 동작을 방지하고, 코드의 효율성을 높이는 데 도움이 됩니다.
- 얕은 복사와 깊은 복사: 이 개념은 데이터 타입과 밀접한 관련이 있습니다.
원시 타입은 값에 의한 전달(call by value)이 일어나며,객체 타입은 참조에 의한 전달(call by reference)이 일어납니다. 이로 인해 얕은 복사와 깊은 복사의 차이가 생기며, 이를 이해하지 못하면 예상치 못한 결과나 버그를 초래할 수 있습니다.
변수와 데이터 타입
변수는 데이터를 저장하고 참조하는 역할을 합니다. 데이터 타입은 변수가 가질 수 있는 데이터의 종류를 결정하며, JavaScript에서는 원시 타입과 객체 타입이 있습니다.
var, let, const 차이점
- 이들은 JavaScript에서 변수를 선언하는 방식입니다.
var는 함수 스코프를 가지며, 호이스팅이 발생합니다.let과const는 블록 스코프를 가지며, 호이스팅이 발생하더라도 Temporal Dead Zone(TDZ) 때문에 변수 선언 전에 접근할 수 없습니다.let은 재할당이 가능하지만,const는 한번 할당하면 변경할 수 없습니다.
자바스크립트의 타입 (call by value, call by ref)
- 원시 타입은 값에 의한 전달(call by value)이 일어나고, 객체 타입은 참조에 의한 전달(call by reference)이 일어납니다. 값에 의한 전달은 변수의 복사본이 생성되어 함수에 전달되고, 참조에 의한 전달은 변수의 참조(원본)가 함수에 전달됩니다.
얕은 복사와 깊은 복사
- 원시 타입은 얕은 복사가 일어나며, 객체 타입에서는 깊은 복사를 통해 완전히 새로운 객체를 생성할 수 있습니다. 얕은 복사는 원본의 참조를 복사하고, 깊은 복사는 원본의 값을 복사합니다.
Data Type
💡 크게 두가지로 나뉘어집니다.
기본형(Primitive) / 참조형 (Reference)
모든 데이터는 바이트 단위의 식별자, 즉 메모리 주솟값 을 통해 서로 구분하고 연결합니다.
변수 : 변할 수 있는 데이터 (숫자, 문자열, 객체, 배열 등)
식별자 : 어떤 데이터를 식별하는데 사용하는 이름 (== 변수명)
변수 선언
var a; // 변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다.- 즉, 변수는 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇
- 컴퓨터가 위와 같이 변수를 선언하면 메모리 영역에서 아래와 같은 작업을 수행한다.
데이터 할당
var a; // 변수 a 선언
a = 'abc'; // 변수 에 데이터 할당
var a = 'abc'; // 변수 선언과 할당을 한 문장으로 표현실제로 해당 ‘a’ 변수 데이터에 문자열 ‘abc’를 직접 저장하지는 않는다. 데이터를 저장하기 위한 별도의 메모리 공간을 다시 확보해서 문자열 ‘abc’를 저장하고, 그 주소를 변수 영역에 저장한다.
✨ 아래 그림과 순서를 참고하면 이해가 쉽다.
변수 영역
데이터 영역
- 변수 영역에서 빈 공간 (@1003)을 확보한다.
- 확보한 공간의 식별자를 a로 지정한다.
- 데이터 영역의 빈 공간(@5004)에 문자열 'abc'를 저장한다.
- 변수 영역에서 a라는 식별자를 검색한다.(@1003).
- 앞서 저장한 문자열의 주소(@5004)를 @1003의 공간에 대입한다.
⬇️
그렇다면, 이후에 같은 변수 a에 'abcdef'를 선언해주면 어떻게 될까?
쉽게 말해서 5004번에 들어있는 문자열 'abc'를 문자열 'abcdef'로 바꿀 수 있을 것 같지만 컴퓨터는 그렇게 하지 않는다.
'abcdef'를 별개의 문자열로 지정하고, 임의의 공간 5005에 문자열 'abcdef'를 넣고, 5005 를 들고 a를 검색한다. 1003번에 있으니 그 공간에 있는 값을 5004 대신에 5005로 바꾸게 된다.
즉, 기본형에서는 변수 값을 바꿀 때 가르키고 있는 주소를 직접 바꾼다 !
🤔 Why 변수 영역에 값을 직접 대입하지 않고, 한단계를 더 거치는걸까?
- 데이터 변환을 자유롭게 할 수 있게 함과 동시에, 메모리를 더욱 효율적으로 관리하기 위함.
- js는 숫자형 데이터에 8바이트(64비트)의 공간을 확보하는데, 문자열은 정해진 규격이 없다. 메모리 용량이 가변적이므로 ‘확보된 공간을 변환된 데이터 크기에 맞게 늘리는 작업'이 필요 없음.
- 결국, 효율적으로 문자열 데이터의 변환을 처리하려면 변수와 데이터를 별도의 공간에 나누어 저장해야함.
✋🏻 참고로 자바스크립트 메모리 구조는 스택 메모리와 힙 메모리 영역으로 나뉘어 있고, 이번 글에서는 둘을 하나로 묶어 메모리라고 하는 것이다.
기본형 데이터
number, string, boolean, null, undefined, symbol
- 기본형은 할당 / 연산 시에 값이 복제 됩니다. 즉 불변성을 띈다고 표현할 수 있습니다. 우리는 이걸
call by value라고 합니다 - 할당 / 연산 시에 값이 복제가 되는 간단한 예시
let a = 1;
let b = a;
a = 2;
console.log(b); // 1변수 b는 a의 값 1을 복사하여 할당받았습니다.
이후 a의 값이 2로 변경되었지만, b의 값은 여전히 1입니다.
a의 값 변경이 b에 영향을 미치지 않는 것을 볼 수 있습니다.
이는 기본형 데이터가 값에 의한 전달 방식을 사용하며, 불변성을 갖기 때문입니다.
참조형 데이터
object(Map, WeakMap, Set, WeakSet), array, function, date, regexp …
- 참조형은 할당 / 연산 시에 값이 참조 됩니다. 주솟값을 복제하기 때문에 주솟값만 불변성이고 실제 데이터는 가변적입니다. 우리는 이걸
call by reference라고 합니다 - 한 변수에서 객체의 속성을 변경하면, 같은 객체를 참조하는 다른 모든 변수들에게도 그 변경이 반영됩니다. 이 특성으로 인해 참조형 데이터는 가변적(mutable)이라고 합니다.
- 할당 / 연산 에 대한 예시
let obj1 = { value: 1 };
let obj2 = obj1;
obj1.value = 2;
console.log(obj2.value); // 2obj2는 obj1이 참조하는 객체를 참조합니다. 따라서 obj1에서 객체의 value 속성을 변경하면, obj2에서도 그 변경이 반영됩니다.
하지만 이것은 참조하는 주소값(객체의 실제 위치)은 불변적이라는 점에 주의해야 합니다. 즉, obj1이나 obj2가 참조하는 주소 자체는 변경되지 않습니다. 이들 변수가 참조하는 객체의 내용은 변경할 수 있지만, 다른 객체를 참조하도록 변경할 수는 없습니다. 이 점은 불변성과 가변성의 개념을 이해하는 데 중요합니다.
요약
값을 직접 저장
- 데이터 할당시에는 빠름
- 비교에 비용이 많이 듦
- 메모리 낭비가 심함
🧨 손해 > 이익
값의 주소를 저장
- 데이터 할당시에는 느림
- 비교에 비용이 들지 않음 : 같은 값이 오직 하나만 존재한다는 의미 = 기본형 데이터가 불변값이라는 것!
- 메모리 낭비 최소화
💎 손해 < 이익
📍 출처
코어 자바스크립트 - 데이터타입 (기본형과 참조형)
정재남, [코어자바스크립트]
윤국님 세션
