230523 자바스크립트 객체와 배열 메모리 주소와 할당

230523 자바스크립트 메모리 할당

자바스크립트 문법반을 공부하면서 메모리 할당에 대해 배웠다.

원시값은 변경할 수 없고(불변성을 가짐), 복제할 때는 값이 담긴 주소값을 복제한다.

참조값은 변경이 가능하고, 복제할 때는 값이 담긴 주소값들을 묶음으로 가지고 있어 그 묶음에 대한 주소값을 복제한다.

객체에 대한 메모리 살펴보기

실제로 이런지 알아보기 위해 개발자 도구를 통해 메모리를 살펴 보았다.

실제 메모리 주소는 아니다.

과정은 아래와 같다.

1. 처음에 name, age 프로퍼티를 가지는 객체를 전역 객체로 생성한다
2.  name 값만 변경해 본다.
3. age 값만 변경해 본다.
4. 객체 아예 다른 객체로 변경해 본다.

1. 생성 후

2. name 변경 후

3. age 변경 후

4. 새로운 객체로 객체를 변경 후

주소 / 상태	객체 생성 후	name 변경 후	age 변경 후	객체 변경 후
객체 주소	294555	294555	294555	301821
name 주소	294577	296989	296989	301827
age 주소	294815	297199	301523	305533

알 수 있는 점

• 객체가 통째로 바뀌지 않으면 객체의 주소는 바뀌지 않았다.
• 객체를 통째로 바꾸는 경우에는 주소가 바뀌었고, 원래 주소에는 아직까지는 원래 객체가 남아있었다.
• name은 string 형으로 변경하지 않으면 주소가 바뀌지 않는다. ( age 변경할 때는 주소가 안바뀌었음)
• age는 number형으로 변경하지 않아도 주소가 계속 바뀌었다. (모든 상태 변화 마다 바뀌었음)

---

 

 

name만 연속 변경했을 때

알 수 있는 점

• 원시값인 name은 계속 새로운 메모리 주소를 사용하기 때문에 가리키는 메모리 주소가 바뀐다.

---

age만 변경했을 때

알 수 있는 점

• 원시값인 age 또한 계속 새로운 메모리 주소로 바뀐다.
• name은 변경되지 않기 때문에 메모리 주소는 바뀌지 않았다.

---

배열에 대한 메모리 살펴보기

숫자 값만 있는 배열을 생성하고 숫자와 객체를 원소로 넣었다가 다시 빼 보았다.

 

1. 배열 생성한 후

2. 새로운 원소 5를 넣은 후

3. 새로운 객체를 원소로 넣은 후

4. 마지막 원소를 pop()으로 꺼낸 후

5. 마지막 원소를 한 번 더 꺼낸 후

---

메모리 크기를 살펴보기 위해 크기가 매우 큰 배열을 생성해 보았다.

1. 빈배열 10000개 생성 / 100001 넣기

2. 1이 들어있는 크기 10000의 배열 생성 / 1 넣기

3. 1.1이 들어있는 크기 10000의 배열 생성 / 1.1 넣기

 

알 수 있는 점

크기가 10000인 빈 배열은  4 * 10000 = 약 4만 바이트의 배열을 생성했다.

크기가 10000이고 float형인 1.1이 들어있는 배열은 8 * 10000 = 대략 8만 바이트의 배열을 생성했다.

---