[자바스크립트 문법 종합반 3주차] 250103 TIL

 

1 . 데이터 타입의 종류 및 변수 선언과 데이터 할당

어제 데이터의 타입을 배웠다면,

오늘은 어제 배운 데이터 타입을 더 큰 분류로 묶고, 데이터 타입과 메모리의 상관 관계에 대해 공부했다.

 

데이터 타입은 크게 기본형(primitive type)과 참조형(reference type)으로 나눌 수 있는데,

기본형에는 Number, String, Boolean, null,  undefined 그리고 ES6에서 추가된 Symbol이 있다.

참조형에는 Array, Function, Date, RegExp, Map, WeakMap, Set, WeekSet이 포함된다.

 

1-1. 기본형

• 값 자체를 메모리에 저장
• 불변성을 띔

잉 ? 근데 기본형 데이터가 불변성을 띈다는게 무슨 말이지?

let number = 3;
console.log(number); // 3
number = 5;
console.log(number); // 5

 

변하는 거 아냐??

 

이렇게 헷갈릴 수 있는데 여기서 말하는 불변성 여부는 메모리 관점에서 봐야 한다.

 

상수와 변수는 메모리에 저장될 때 Stack 메모리에 따로 저장된다.

해당 변수에 할당된 값은 Heap 메모리에 저장된다.

 

위의 코드를 예시로 보자면,

1. number는 Stack메모리에 저장된다.

2. 3이라는 기본형 Number Type의 데이터가 Heap 메모리의 @5002라는 주소에 저장된다.

3. 변수 number는 @5002 주소를 참조한다.

4. number를 출력하면 number의 참조값인 @5002 주소에 저장된 데이터, 즉 3이 출력된다.

5. number에 5를 재할당 -> 새로운 데이터 영역 메모리 공간 @5003에 5가 저장된다. 

6. number의 참조값이 @5002 -> @5003으로 변경된다.

7. number를 출력하면 @5003을 참조하여 5가 출력된다.

 

다시 말해 number라는 변수의 참조값이 달라진 것이지 @5002에 저장된 데이터 3이 바뀐 것이 아니다!

즉 위의 예시는 변수에 재할당(변수가 참조하는 주소를 변경)을 한 것이지 데이터가 변한 것이 아니다.

 

(참고로 만약 더이상 @5002가 사용되지 않는다면 자바스크립트의 가비지 컬렉터가 @5002가 수거해간다 -> 효율적인 메모리 관리)

 

1-2. 참조형

• 값이 아니라 값이 저장된 메모리 주소를 저장
• 가변적임

const object = {
    name : 'Dana',
    age : 30
};

console.log(object); // { name : 'Dana', age : 30 }

object['age'] = 29;

console.log(object); // { name: 'Dana', age : 29 }

 

참조형은 메모리에 어떤식으로 저장되고 관리되는지 알아보자.

 

1. object라는 변수가 Stack 메모리에 저장된다.

2. 객체 { name : 'Dana', age : 30 }는 Heap 메모리의 주소 @7002에 저장된다.

   -> 변수 object는 @7002를 참조하게 됨.

3. @7002에는 key-value 쌍이 저장된다.

4. name이라는 key의 value 'Dana'는 기본형 String타입으로, 또다시 Heap 메모리 @5001에 저장된다.

    -> name은 @5001은 참조하게 됨.

5. age역시 value인 30이 Heap 메모리 @5002에 저장된다.

    -> age는 @5002를 참조함.

6. 콘솔 출력 시, object가 가리키는 주소값 @7002를 참조하여 { name : 'Dana', age : 30 }가 출력된다.

7. 객체 object의 key 'age'의 값을 29로 재할당한다.

8. 29가 새로운 Heap 메모리 주소값 @5003에 저장된다.

9. @7002에 저장된 key 'age'의 참조값이 @5002 -> @5003으로 변경된다.

    ( 여기서 ! 객체의 참조값이 바뀔 수 있다는 점에서 가변적인 특징을 갖고있다고 할 수 있다. )

10. 즉, 변수 object는 여전히 @7002를 참조하고, @7002의 age의 참조값만 바뀌었다.

 

결론적으로, 참조형 데이터가 가변적이라는 것은 Heap 메모리의 객체 내부 데이터(key-value 쌍의 value 참조 값)를 수정할 수 있다는 의미이다.

---

2. 변수 복사

 2-1. 기본형 데이터

 : 값을 복사하며 각 변수가 독립적으로 관리됨

 

let a = 10;
let b = a;
b = 15;
console.log(a); // 10
console.log(b); // 15

 

위의 예시를 살펴보자.

 

1. 변수 a는 Stack 메모리에 저장되고 a에 할당된 값 10은 Heap 메모리 주소 @5001에 저장된다.

2. 변수 a는 @5001을 참조한다.

3. 변수 b도 Stack 메모리에 저장되고 b = a 할당으로 인해 b도 @5001을 참조한다.

4. b에 15를 재할당한다.

5. 15는 Heap 메모리의 새 주소 @5002에 저장된다.

6. b = 15로 재할당을 했기 때문에 변수 b는 이제 @5002를 참조하게 된다.

7. 변수 a는 여전히 @5001을 참조한다.

 

이런 과정을 통해 a는 @5001을 참조하고 b는 @5002를 참조하여 출력값이 달라지게 된다.

 

 

 

2-2. 참조형 데이터

 : 참조를 복사하며 동일한 객체를 가리킴

 

let obj1 = { c : 10, d : 'ddd' };
let obj2 = obj1;
obj2.c = 20;
console.log(obj1); // { c : 20, d : 'ddd' }
console.log(obj2); // { c : 20, d : 'ddd' }

 

obj1과 ob2를 보자.

 

1. 변수 obj1은 Stack 메모리에 저장되고 객체 { c : 10, d : 'ddd' }는 Heap 메모리 주소 @7001에 저장된다.

2. @7001에 저장된 key 'c'의 value는 10으로, 위의 예시에서 저장된 Heap 메모리 주소 @5001을 참조한다.

3. @7001에 저장된 또 다른 key 'd'의 value 'ddd'는 Heap 메모리 주소 @5002에 새로 저장된다.

4. 변수 obj1은 객체  { c : 10, d : 'ddd' }가 저장된 메모리 주소 @7001을 참조한다.

5. 변수 obj2도 Stack 메모리에 저장된다.

6. obj2 = obj1 할당으로 인해 obj2도 obj1과 마찬가지로 메모리 주소 @7001을 참조한다.

7.  기존에 저장된 데이터에 20이 없기 때문에 Heap 메모리 주소 @5003에 20을 새로 저장된다.

8. obj2.c = 20으로 재할당 되어 key 'c'의 value는 메모리 주소 @5002가 아닌 주소 @5003을 참조한다.

 

결론적으로 obj1과 obj2는 여전히 메모리 주소 @7001을 참조하지만

메모리 주소 @7001 내부에서 key 'c'의 참조 값이 @5002 -> @5003으로 바뀌었기 때문에

obj1과 obj2의 console 출력값은 모두 { c : 20, d : 'ddd' }가 된다.

---

3. 깊은 복사 vs 얕은 복사

3-1. 얕은 복사

const getShallowCopy = (obj) => {
    return {
        ...obj
    }
};

const orgin = { 
	name : 'Dana', 
    age : 30, 
    homepage : { blog : 'string', instagram : 'string', isPublic : true }
};

const shallowCopyObj = getShallowCopy(orgin);


orgin.name = "Bob";
shallowCopyObj.age = 27;
shallowCopyObj.homepage.isPublic = false;


console.log('orgin',orgin); 
// {name: 'Bob',age: 30, homepage: { blog: 'string', instagram: 'string', isPublic: false }}

console.log('shallowCopyObj',shallowCopyObj); 
// { name: 'Dana', age: 27,homepage: { blog: 'string', instagram: 'string', isPublic: false }}


console.log(orgin === shallowCopyObj); // false

 

origin의 출력값을 보자.

name 값은 변경한 대로 잘 들어 갔는데.. 잉? 갑자기 왜 isPublic이 false가 되었지?

isPublic의 값을 false로 수정한 것은 shallowCopyObj인데 

origin === shallowCopyObj가 false인데 왜지 ???!

 

자 이제 천천히 살펴보자.

 

1. 변수 origin은 stack 메모리에 저장되고,

   객체 { name: 'Dana', age: 30, homepage: { blog: 'string', instagram: 'string', isPublic: true }}는 heap 메모리 주소 @7002     에 저장된다. 

   -> 이 시점에서, 변수 origin은 heap 메모리 주소 @7002를 참조한다.

 

2. 메모리 주소 @7002에는 homepage라는 key의 value가 또 다시 객체로 할당되어 있다. 

    따라서 객체 {  blog: 'string', instagram: 'string', isPublic: true }를 heap 메모리 주소 @7003에 새로 저장한다.

   -> 여기서, homepage는 @7003을 참조한다.

 

3. @7003 메모리 내부의 isPublic에는 true가 할당되어 있는데, true는 또 다시 heap 메모리 주소 @5001에 새로 저장된다.

   -> isPublic은 @5001을 참조한다.

 

4. 변수 shallowCopy는 stack 메모리에 저장되고, origin을 얕은 복사하여

   새롭게 얻은 객체 { name: 'Dana', age: 30, homepage: { blog: 'string', instagram: 'string', isPublic: true }}는 heap 메모리 주    소 @7003에 저장된다.

  -> 여기서 변수 shallowCopy는 @7003을 참조한다.

 

 5. 메모리 주소 @7003에도 homepage라는 key의 value가 또다시 객체로 할당되어 있다.

    객체 {  blog: 'string', instagram: 'string', isPublic: true }는 heap 메모리 주소 @7003에 할당되어 있어 해당 값을 가져온다.

   -> 여기서도 homepage는 @7003을 참조한다.

 

따라서 위에서부터 살펴본 바에 따르면, 

얕은 복사를 하여 1-depth의 객체는 서로 다른 메모리 주소를 참조하기 때문에 객체의 값을 바꿔도 영향을 미치지 않지만

2-depth 이상의 객체는 같은 메모리 주소를 참조하여 객체의 값이 바뀔 경우 서로 영향을 주게 된다.

 

여기서 얻게 된 교훈 ! 얕은 복사를 할 시, 중첩된 객체가 제대로 복사되지 않을 수 있다.

그렇다면 이런 문제를 어떻게 해결하면 좋을까?

바로 이어서 깊은 복사를 살펴보자.

 

3-2. 깊은 복사

const getDeepCopy = (obj) => {
    
    if(obj === null || typeof obj !== 'object') {
        return obj;
    }

    let copy = {};
    
    for (let key in obj) {
        copy[key] = getDeepCopy(obj[key]);
    }

    return copy;
}


const origin =  { 
	name : 'Dana', 
	age : 30, 
	homepage : { blog : 'string', instagram : 'string', isPublic : true }
} ;
const deepCopyObj = getDeepCopy(origin);

deepCopyObj.name = 'Bob';
deepCopyObj.homepage.isPublic = false;

console.log('origin', origin); //{ name : 'Dana', age : 30, homepage : { blog : 'string', instagram : 'string', isPublic : true } } ;
console.log('deepCopyObj', deepCopyObj); // { name : 'Bob', age : 30, url : { image : 'string', path : 'string', isPublic : false } } 

console.log(origin === deepCopyObj); //false

 

깊은 복사를 했더니 object가 의도했던 대로 잘 복사되었다!

재귀 함수를 이용하여 중첩된 객체도 계속해서 새로운 메모리 주소를 참조하도록 하였기 때문이다.

 

깊은 복사를 실행하는 함수 getDeepCopy의 if 조건문에서 null 체크는 왜 하는 건지 의문이 들어서 구글링을 해봤다.

만약 null 체크를 뺀다면,

if문은  매개변수로 받은 obj의 타입이 'object'가 아닐 경우에만 실행되게 된다.

 

여기서 아주 재밌는 사실을 알게 되었는데,

typeof null을 console에 찍으면 'object'가 출력된다!!

 

원인은 자바스크립트 초기의 오류가 여태껏 이어지고 있어서 그렇다고 한다.

 

따라서 null체크를 하지 않으면

if문을 타지 않게 되고 null은 반복을 할 수 없기 때문에 for문 실행 시 오류가 발생한다.

---

오늘 하루 회고

어제는 강의를 연속으로 듣고 난 후에 복습을 하면서 TIL을 작성했다.

강의를 연속해서 들으니 진도를 빨리 나갈 수 있어서 좋았다.

그러나 마지막에 복습하며 TIL을 작성해보니, 강의를 듣는 중에는 다 이해했다고 생각했지만

막상 내 언어로 풀어서 쓰려고 하니 완전히 이해를 하지 못 했는지 내 말로 표현하는데 어려움이 있었다.

그래서 오늘은 강의 진도를 빠르게 나가는 것을 포기하고

한 주제에 대한 강의를 듣고나서 복습하며 내 언어로 표현해 보았는데,

나에게는 오늘 했던 방식이 더 잘 와닿았다.

 

그동안 얕은 복사 - 깊은 복사라는 말은 많이 들어봤지만 자세한 뜻은 알지 못 했는데

오늘 제대로 공부를 할 수 있었다.