<데이터 타입의 종류>
기본형 / 참조형
기본형: 숫자, 문자열, 불리언, null, undefined 등
참조형: 객체, 배열, 함수, 날짜, 정규표현식 등
~기본형은 주솟값을 바로 복제하는 반면
참조형은 값이 담긴 주솟값들리 이루어진 묶음을 가리키는
주솟값을 복제한다~
<데이터 타입에 관한 배경지식>
비트: 0 또는 1만 표현할 수 있는 하나의 메모리 조각
각 비트는 고유한 식별자를 통해 위치를 확인한다
여러 개의 비트를 묶어 효율적으로 쓸 수 있는데
이를 위해 바이트byte라는 단위를 만들었다
모든 데이터는 바이트 단위의 식별자, 메모리 주솟값을 통해
서로 구분하고 연결할 수 있다
<변수 선언과 데이터 할당>
메모리 용량은 가변적으로 필요하기에 우리가 변수를 저장할 때에는
이름:A
값: @5004, 5004 = 'ABC' 이런식으로 저장한다
즉, 문자열 데이터의 변환을 처리할 때 변수와 데이터를 별도의 공간에 나누어 저장하는
최적의 방법을 쓴다는 것이다.
<기본형 데이터와 참조형 데이터>
변수 영역 메모리에 다른 데이터를 재할당할 수 있는지에 따라 변수와 상수로 나뉨
변수: 바꿀 수 있음
상수: 바꿀 수 없음~
불변값
~불변성 여부를 구분할 때의 변경 가능성의 대상은
데이터 영역 메모리임~
불변값: 기본형 데이터
변경은 새로 만드는 동작을 통해서만 이루어진다
한 번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한
영원히 변하지 않는다
~가변값~
객체의 변수(프로퍼티) 영역이 별도로 존재한다
객체가 별도로 할애한 영역은 변수 영역이지 '데이터 영역'은 기존의 메모리 공간을 그대로 활용하고 있다.
데이터 영역에 저장된 값은 모두 불변값이다.
그러나 변수에는 다른 값을 얼마든지 대입할 수있다
이 부분 때문에 흔히 참조형 데이터는 불변하지 않다
(가변값이다)라고 하는 것이다
참조형 데이터의 프로퍼티에 다시 참조형 데이터를
할당하는 경우를 중첩 객체라고 합니다
이 경우를 살펴봅시다 ↓
예제 1-6 중첩된 참조형 데이터의 프로퍼티 할당
var obj = {
x = 3,
arr: [3,4,5]
};
1. 컴퓨터는 변수 영역의 빈 공간(@1002)를 확보하고,
그 주소의 이름을 obj로 지정합니다
2. 임의의 데이터 저장공간에(@5001)을 저장하려는데
이데이터는 여러 개의 변수와 값들을 모아놓은 그룹(객체)입니다. 이 그룹의 각 변수(프로퍼티)들을 저장하기 위해
별도의 변수 영역을 마련하고(@7103 ~ ?),
그 영역의 주소를 @5001에 저장합니다.
3. @7103에 이름 x를, @7104에 이름 arr를 지정합니다
4. 데이터 영역에서 숫자 3을 검색합니다. 없으므로 임의로 @5002에 저장하고, 이 주소를 @7103에 저장합니다.
5. @7104에 저장할 값은 배열로서 역시 데이터 그룹입니다. 이 그룹 내부의 프로퍼티들을 저장하기 위해 별도의 변수 영역을 마련하고(@8104~?), 그 영역의 주소 정보(@8104~?)을 @5003에 저장한 다음, @5003을 @7104에 저장합니다.
6. 배열의 요소가 총 3개이므로 3개의 변수 공간을 확보하고 각각 인덱스를 부여합니다(0,1,2)
7. 데이터 영역에서 숫자 3을 검색해서(@5002) 그 주소를 @8104에 저장합니다
8. 데이터 영역에 숫자 4가 없으므로 @5004에 저장하고,
이 주소를 @8105에 저장합니다
9. 데이터 영역에 숫자 5가 없으므로 @5005에 저장하고,
이 주소를 @8106에 저장합니다
Q. 만약 이 상태에서 다음과 같이 재할당 명령을 내리면?
obj.arr = "str";
@5006에 문자열을 'str'에 저장하고 그 주소를 @7104에 저장합니다. 그러면 @5003은 더이상 자신의 주소를 참조하는 변수가 하나도 없게 됩니다. 어떤 데이터에 대해 자신의 주소를 참조하는 변수의 개수를 참조 카운트라고 합니다
@7104에 @5003이 저장되어 있는 시점까지는 참조 카운트가 1이지만 "str"이 저장되는 순간은 참조 카운트가 0이 됩니다
참조 카운트가 0인 메모리 주소는 가비지 컬렉터(GC)의 수거 대상이 됩니다.
ChatGPT의 말:
정말 깊이 있게 질문해주셔서 감탄했어요.
메모리 내부 동작까지 궁금해하신 걸 보면, 이해를 진짜 제대로 하고 싶어하는 마음이 느껴집니다. 🌱
차분히, 아주 쉽게 풀어볼게요.
질문 요점
"문자열 str을 저장할 때, @5006에 문자열 자체가 바로 저장되나요? 아니면 또 다른 여러 공간에 쪼개서 저장하고 주소만 저장하나요?"
라는 질문이었죠!
💡 답변: 자바스크립트에서는 문자열 전체가 하나의 데이터로 저장됩니다.
- "str" 이라는 문자열은 중첩 객체처럼 복잡하게 저장되지 않고,
- 그냥 하나의 데이터처럼 @5006 한 곳에 통째로 저장해요.
즉,
- @5006 = "str"
이렇게요!
그리고 @7104에는 이 @5006이라는 주소가 저장돼서
필요할 때 "str"을 가져올 수 있게 됩니다.
🎯 정리
| 숫자 3 | 숫자 하나 = 데이터 하나 = @5002 |
| 문자열 "str" | 문자열 전체 = 데이터 하나 = @5006 |
| 배열 [3,4,5] | 여러 개 데이터 그룹 = 별도 영역(@8104~?) |
- 숫자나 문자열은 단일 데이터로 다루기 때문에
별도로 쪼개서 저장하지 않아요. - 객체나 배열처럼 여러 요소가 있는 경우에만
각각 따로 메모리를 더 마련해서 주소 체계를 만들어요.
📦 비유
- 숫자나 문자열은 편의점에서 음료수 하나 사는 것 같아요.
- (한 병 = 하나의 데이터 = 하나의 주소)
- 배열이나 객체는 마트에서 여러 개 사서 장바구니에 담는 것 같아요.
- (장바구니 = 별도 메모리 묶음 공간)
🌟 추가 Tip
중간에 표현하신
"s가 @8003, t가 @8004, r이 @8005에 저장된다"
이런 식은 메모리를 엄청 세세하게 다루는 'C언어' 같은 저수준 언어에서나 나오는 이야기예요.
자바스크립트는 고수준 언어이기 때문에, 문자열을 하나의 덩어리 데이터로 관리합니다.
(우리는 그냥 "str" 하나로 생각하면 되고, 컴퓨터 내부에서 복잡하게 관리는 알아서 해줘요!)
🧡 마무리
💬 한 줄 정리:
"자바스크립트에서는 문자열 "str" 전체를 하나의 데이터로 보고, @5006 한 칸에 저장해요. 따로 나눠서 저장하지 않습니다."
가비지 컬렉터: 런타임 환경에 따라 메모리 사용량이 포화 상태에 임박할 때마다 자동으로 수거 대상들을 수거합니다.
변수 복사 비교
기본형은 주솟값을 복사하는 과정이 한 번만 이뤄지고,
참조형은 한 단계를 더 거치게 된다
var obj1 = { c:10, d='ddd'}
는 객체라서
var obj2 = obj1을 하면
값 복사가 아니라 주소 복사가 됨
즉, obj1과 obj2는 같은 객체를 가리키게 됨
이 상태에서 obj2 = { c:20, d = 'ddd'}; 처럼
새로운 객체를 할당해 값을 변경하면
새로운 공간에 새 객체가 저장된다
가변값이라고 설명할 때의 가변은
참조형 데이터 자체를 변경할 경우가 아니라
그 내부의 프로퍼티를 변경할 때만 성립한다
<불변 객체>
!! 가변은 내부 프로퍼티를 변경할 때만 성립한다 !!
~데이터 자체를 변경하고자 하면(새로운 데이터를 할당하고자 하면) 기본형 데이터와 마찬가지로 기존 데이터는 변하지 않습니다~
=“객체를 직접 수정하면 원본도 바뀌지만, 새로운 객체를 만들어 재할당하면 원본은 바뀌지 않는다. 마치 기본형처럼 동작한다.”
## 이 말은 객체를 새로 만들어서 기존 객체 대신 사용하면, 원본은 손상되지 않는다는 뜻이에요.
즉, 불변성을 지키는 방식이에요
= "객체를 복사해서 새로 만들고 수정하면, 원본은 절대 변하지 않는다. 이것이 불변성이다."
var copyObject = function (target) {
var result = {};
for (var prop in target) {
result[prop] = target[prop];
}
return result;
};
얕은 복사: 바로 아래 단계의 값만 복사
깊은 복사: 내부의 모든 값들을 찾아 전부 복사하는 방법
얕은 복사 = 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사한다는 의미
그러면 해당 프로퍼티에 대해 같은 참조형 데이터의 주소를 가리키게 된다 (원본을 바꾸면 사본도 바뀜)
var user = {
name: 'Jaenam',
urls: {
portfolio: 'http://github.com/abc',
blog: 'http://blog.com',
facebook: 'http://facebook.com/abc'
}
};
var user2 = copyObject(user);
user2.name = 'Jung';
console.log(user.name === user2.name);
user.urls.porfolio = 'http://portfolio.com';
console.log(user.urls.portfolio === user2.urls.portfolio);
user2.urls.blog = '';
console.log(user.urls.blog === user2.urls.blog);
얕은 복사와 깊은 복사 과정을 다시 차분히 설명드릴게요. 🌿
1. 현재 상태 (원본)
user 객체 (@1001)
- 이름: user → 값: @7103 (객체)
@7103 객체
- name → @5001 ('Jaenam')
- urls → @7104 (객체)
@7104 객체
- portfolio → @6001 (객체)
- blog → @6002 (객체)
- facebook → @6003 (객체)
@6001, @6002, @6003 각각은 문자열 주소(@5002, @5003, @5004)를 가리킵니다.
2. 얕은 복사 (Shallow Copy)
user2 = copyObject(user) 를 했다고 가정할게요.
- @1002라는 새 객체를 만들어요.
- 하지만 안의 값들은 단순히 주소값만 복사합니다.
👉
- user.name (@7103) 복사
- user.urls (@7104) 복사
→ 둘 다 '주소'만 복사한 것이지, 실제 내용(객체)을 복제한 게 아닙니다!
얕은 복사 후 상태
주소 데이터| @1001 (user) | name: @7103 |
| @1002 (user2) | name: @7103 |
- user와 user2는 겉껍질은 다르지만,
안쪽 내용물은 같은 곳(@7103, @7104 등)을 가리킵니다.
얕은 복사의 문제점
- user2.name을 바꾸면 → user.name에도 영향!
- user2.urls 안의 portfolio를 바꾸면 → user.urls의 portfolio도 바뀜!
서로 엮여있기 때문에 위험해요.
🌟 "표면만 복사, 내부까지 복사하지는 않는다."
3. 깊은 복사 (Deep Copy)
user2.urls = copyObject(user.urls) 같이, urls 안쪽 객체도 별도로 복사했다면, 즉
- user2.urls를 새 객체(@7200)로 만들고
- urls 안의 portfolio, blog, facebook도 각각 복제해 새로 연결
했다면 깊은 복사가 부분적으로 일어난 겁니다.
깊은 복사 후 상태 (urls만 깊게 복사한 경우)
주소 데이터| @1001 (user) | name: @7103, urls: @7104 |
| @1002 (user2) | name: @7103, urls: @7200 (새 주소) |
- user와 user2는 name은 여전히 공유(@7103),
- 하지만 urls는 이제 서로 다른 객체!
진짜 '완전한' 깊은 복사를 하려면
- user 전체를 복사할 때
- name, urls 모두 별개의 새 객체로 만들어야 해요.
(ex. JSON.parse(JSON.stringify(user)) 같은 방법으로)
✨ 요약: 이 표를 통해 다시 정리하면
복사 방법 겉 객체 복사 내부 객체 복사 결과| 얕은 복사 | O | X | 내부 데이터는 공유되어 연결 |
| 깊은 복사 | O | O | 내부 데이터까지 별개로 복사 |
이 경우 14번 째 17번째 줄에서는 원본과 사본 중 어느 쪽을 바꾸더라도 한 쪽의 값도 함께 바뀐다
user 객체에 속한 프로퍼티는 새로운 데이터가 만들어진 반면, 한 단계 더 들어간 urls의 프로퍼티들은 기존 데이터를 그대로 참조하는 것이다
객체의 프로퍼티가 기본형 데이터면 그대로 복사하면 되지만, 참조형 데이터는 다시 그 내부의 프로퍼티를 복사해야한다(재귀적으로 수행해야)
✨ 정리하면
| 단순 복사 (얕은 복사) | 내부 객체는 공유됨 (같이 바뀜) |
| 내부 객체도 따로 복사 (깊은 복사) | 서로 완전히 독립됨 (따로 움직임) |
var copyObjectDeep = function(target) {
var result = {};
if (typeof target === 'object' && target !=null){
for (var prop in target) {
result[prop] = copyObjectDeep(target[prop]);
};
} else {
result = target;
}
return result;
};
간단하게 깊은 복사를 처리하는 방법은
객체를 JSON 문법으로 표현된 문자열로 전환했다가
다시 JSON 객체로 바꾸는 것이다
좋은 질문이에요🌸
"얕은 복사"와 "깊은 복사"는 자바스크립트에서 객체를 다룰 때 정말 중요한 개념입니다.
확실히 이해하실 수 있도록 아주 천천히, 예시랑 함께 설명드릴게요. 🥰
📚 1. 얕은 복사 (Shallow Copy)
➡️ 의미
- 바깥쪽(1단계) 데이터만 복사해요.
- 내부에 **객체(또는 배열)**가 있으면 주소(참조)만 복사합니다.
(진짜 내용까지 복사하는 게 아니에요.)
➡️ 그림으로
원본 ----> (내부 객체 A)
복사본 ---┘
(같은 객체 A를 가리킴)
➡️ 예시 코드
var user = {
name: '바람',
hobbies: ['코딩', '독서']
};
var userCopy = Object.assign({}, user); // 얕은 복사
userCopy.name = '하늘'; // name은 기본형, 따로 움직임
userCopy.hobbies[0] = '영화 감상'; // hobbies는 객체, 함께 움직임
console.log(user.name); // '바람'
console.log(userCopy.name); // '하늘'
console.log(user.hobbies); // ['영화 감상', '독서']
console.log(userCopy.hobbies); // ['영화 감상', '독서']👉 여기서 name은 문자열(기본형)이라 따로 변경되지만,
👉 hobbies 배열은 같은 걸 공유하기 때문에 한쪽을 바꾸면 둘 다 바뀌어요.
📚 2. 깊은 복사 (Deep Copy)
➡️ 의미
- 안쪽(모든 단계) 까지 진짜 새로 복사합니다.
- 내부 객체까지 새로 만들어서 복사해요. (참조 공유 없음)
➡️ 그림으로
원본 ----> (내부 객체 A)
복사본 ---> (복제한 새로운 객체 B)
(서로 다른 객체를 가리킴)
➡️ 예시 코드
var user = {
name: '바람',
hobbies: ['코딩', '독서']
};
var userDeepCopy = JSON.parse(JSON.stringify(user)); // 깊은 복사 방법 중 하나
userDeepCopy.name = '하늘';
userDeepCopy.hobbies[0] = '영화 감상';
console.log(user.name); // '바람'
console.log(userDeepCopy.name); // '하늘'
console.log(user.hobbies); // ['코딩', '독서']
console.log(userDeepCopy.hobbies); // ['영화 감상', '독서']👉 이번엔 hobbies도 서로 완전히 분리됐어요.
👉 그래서 user를 바꿔도 userDeepCopy는 아무 영향 없어요.
🎯 요약
구분 얕은 복사 깊은 복사| 복사 범위 | 1단계만 복사 | 안쪽까지 전부 복사 |
| 내부 객체 | 주소만 복사 (공유) | 새로 복사 (독립) |
| 대표 방법 | Object.assign(), spread ({...obj}) | JSON.stringify/parse, 재귀함수 |
| 특징 | 한쪽 수정하면 다른 쪽도 영향 | 서로 완전히 분리 |
✨ 한 문장 정리
"얕은 복사는 껍데기만 복사하고, 깊은 복사는 속까지 복사한다."
<undefined와 null>
undefined
(1) 값을 대입하지 않은 변수
(2) 객체 내부의 존재하지 않는 프로퍼티에 접근하려할때
(3) return 문이 없거나 호출되지 않는 함수의 실행 결과
값을 대입하지 않는 배열을 특이하게 empty를 출력
undefined 조차도 할당돼 있지 않음
(예제 1-21 빈 요소와 배열의 순회)
var arr1 = [undefined,1];
var arr2 = [];
arr2[1] = 1;
arr1.forEach(function (v,i) {console.log(v,i); });
arr2.forEach(function (v,i) {console.log(v,i); });
arr1.map(function (v,i) {return v+i;});
arr2.map(function (v,i) {return v+i;});
arr1.filter(function (v) {return !v;});
arr2.filter(function (v) {return !v;});
arr1.reduce(function (p,c,i) {return p+c+i;});
arr2.reduce(function (p,c,i) {return p+c+i;});
기본적인 개념부터
자바스크립트에서 배열(arr)에 대해
- forEach, map, filter, reduce 같은 함수를 사용하면
배열 안의 각 요소(element) 를 하나씩 꺼내서 처리할 수 있어요.
이때, 꺼낼 때마다 "매번 함수 하나를 실행" 시켜요.
그 함수 안에 들어가는 매개변수(parameter) 가 바로
👉 v, i, p, c 같은 거예요!
각 매개변수의 의미
| v | value | 배열 안에 있는 현재 값 |
| i | index | 배열 안에서의 현재 위치(인덱스) |
| p | previous | reduce 함수에서 이전까지 계산한 값 |
| c | current | reduce 함수에서 현재 배열의 값 |
하나씩 예시로 설명
1. forEach
- 배열의 모든 요소를 하나하나 돌면서
- v는 그때그때 꺼낸 값이고
- i는 그때그때 꺼낸 값의 인덱스입니다.
예를 들면:
2. map
- 배열을 돌면서
- 각 요소마다 v + i 결과를 만들어서
- 새로운 배열을 반환해요.
예를 들면:
🌟 map은 '배열 변형'용!
3. filter
- 배열을 돌면서
- !v (v가 거짓이면) 참이 되는 애들만 남깁니다.
예를 들면:
🌟 filter는 '조건에 맞는 것만 남기기'용!
4. reduce
- 배열을 왼쪽에서 오른쪽으로 하나하나 줄여가면서
- 이전 값(p), 현재 값(c), 현재 인덱스(i)를 받아서
- 계속 계산해 나갑니다.
예를 들면:
🌟 reduce는 '배열을 하나의 값으로 모으기'용!
✨ 정리
| forEach | 배열 돌면서 하나씩 처리 | console.log 출력 |
| map | 배열 돌면서 변형해서 새 배열 만들기 | v+i 반환 |
| filter | 조건에 맞는 것만 골라 새 배열 만들기 | !v인 것 남기기 |
| reduce | 배열 전체를 하나의 값으로 줄이기 | p+c+i |
비어있는 자리는 건너뛴다
배열도 객체임을 명심!
📌 예시
let arr = [];
arr[2] = 'hello';
위 코드가 의미하는 건:
인덱스 2번이 "필요하니 만들어줘!" 라고 말한 것
자바스크립트는 2번 인덱스를 객체의 프로퍼티처럼 생성
그 자리에 'hello' 값을 저장
배열의 length가 자동으로 3으로 늘어남
여기서 중요한 건:
인덱스 0과 1은 존재하지 않음
메모리 공간도 따로 확보되지 않음
그래서 .forEach() 같은 함수도 그 자리는 무시함
undefined가 비록 '비어있음'을 의미하지만
하나의 값이기 때문에 고유의 키값(프로퍼티 이름)이 존재하고, 순회의 대상이 될 수 있다.
값으로써 할당된 undefined는 실존하는 데이터인 반면
엔진이 반환해주는 undefined는 값이 없음을 나타냄에 주의하자
-> 값을 대입하지 않은 식별자(변수 이름)에 접근할 때 undefined를
반환하는 것은, 변수 a에 접근하고자 할 때를 말한다
"아무것도 할당하지 않고" 끝난다.
undefined와 비슷한 null도 있는데,
== (동등연산자)로 비교하면 null 과 undefined가 서로 같다고 판단한다(오류)
=== (일치연산자)를 써야지 정확히 판별할 수 있다
<정리>
변수: 변경 가능한 데이터가 담길 수 있는 공간
식별자: 그 변수의 이름
변수 선언 시: 빈 공간에 식별자를 저장, 값은 undefined를 할당.
기본형 데이터를 할당할 때: 별도의 공간에 데이터 저장, 그 주소를 변수 값에 할당
참조형 데이터를 할당할 때: 내부 프로퍼티들을 위한 변수 영역을 별도로 확보, 확보된 주소를 변수에 연결, 다시 식별자 저장, 별도에 공간에 저장해 그 주소를 식별자와 매칭
(가끔 가변값이 되는 이유임)
불변값으로 사용하려면 깊은 복사를 사용하면 된다
undefined는 어떤 변수에 값이 존재하지 않을 경우
null은 명시적으로 '없음'을 표현
웬만하면 null로 하자!
그래야 undefined가 오직 값을 대입하지 않은 변수에 접근하고자 할 때 자바스크립트 엔진이 반환해주는 값으로서 존재할 수 있다
'교재 > 코어 자바스크립트' 카테고리의 다른 글
| 코어 자바스크립트 | 챕터 6: 프로토타입 (0) | 2025.04.26 |
|---|---|
| 코어 자바스크립트 | 챕터 5: 클로저 (1) | 2025.04.25 |
| 코어 자바스크립트 | 챕터 4: 콜백 함수 (0) | 2025.04.24 |
| 코어 자바스크립트 | 챕터 3: this (0) | 2025.04.24 |
| 코어 자바스크립트 | 챕터 2: 실행 컨텍스트 (1) | 2025.04.22 |