[TIL]03. 자바스크립트 데이터 저장 원리

Map, Set 자료구조 그리고 데이터 저장 원리

Map과 Set 자료구조에 대해서는 프로그래밍 언어에서 비슷한 개념으로 많이 사용되는 것을 알고 있었다.

Map은 자바의 Map가 비슷했고 Set은 스위프트를 공부할 때 배웠던 개념이랑 유사했다. 그래서 비교적 이해하는데 수월했던 것 같다.

그리고 변수를 선언하고 할당할 때 메모리에 어떻게 저장되는지는 이번에 처음 배웠는데 원리를 알고 나니까 자바스크립트를 깊이 있게 알아가는 느낌이 들었다.

 

• Map 이란
  • Key, Value 값으로 이루어져 Object와 비슷하지만 순서를 가진다.
  • 검색, 삭제, 검색, 존재여부 등 활용할 수 있음

const myMap = new Map();

// Map에 값을 저장하기 
myMap.set("one", 1);
myMap.set("two", 2);

// Map에 값 불러오기
myMap.get("two");

// Map에는 반복을 위한 api가 존재한다 keys, values, entries

myMap.keys(); // key값을 모아서 반환한다
myMap.values(); // value값을 모아서 반환한다.
myMap.entries(); // key,value를 배열로 묶어서 반환한다.

myMap.size; // 사이즈 가져오기
myMap.has("two"); // 특정값 가져오기

 

• Set 이란
  • 고유한 값을 저장하는 자료구조(중복값은 두 개를 저장해도 한 개만 저장된다.)
  • 값만 저장한다
  • 검색, 삭제, 검색, 존재여부, 모든 값 제거 등 활용할 수 있음

const mySet = new Set();

mySet.add('value1');
mySet.add('value2');
mySet.add('value3');

mySet.values() // value들을 전부 반환
mySet.size // set에 사이즈를 알수있다.
mySet.has('value1') // set에서 특정 값을 검색한다.

 

• 데이터 복제 방식
  • 기본형 : 값이 담긴 주소를 복사한다.
  • 참조형 : 값이 담긴 주소값으로 이루어진 묶음의 주소값을 복사한다.
• 불변성 여부
  • 기본형 : 불변성을 뜀
  • 참조형 : 불변하지 않다.

불변 === 상수를 같은 개념으로 보면 안 된다. 상수는 변수영역의 주소가 변경가능한지에 따라 정해지고 불변은 데이터영역이 변경가능한가 에 따라 정해진다.

코어 자바스크립트

이러한 특징 때문에 참조형을 복사할 시 동일한 데이터 묶음의 주소를 가리키기 때문에 값이 공유된다.

 

 

참조형을 불변성 띄게 만들기 위한 방법

• 얕은 복사

// 얕은복사
const user2 = {
    name : "홍길동",
    age : 20
}

function copyObject(obj) {
    let newObj = {};

    for (const key in obj) {
        newObj[key] = obj[key];
    }

    return newObj;
}

그러나 중첩 객체에 대한 처리는 부족하다....

 

• 깊은 복사
  • 깊은 복사를 통해 중첩 객체에 대한 처리를 한다
  • 재귀 함수를 이용한다.

// 깊은복사
// 재귀적으로 수행해줘야 가능하다
const user3 = {
    name : "홍길동",
    age : 20,
    urls : {
        naver : "naver.com",
        google : "google.com"
    }
}

function copyObject2(obj) {
    let newObj = {};

    if (typeof obj === 'object' || obj !== null) {
        for (const key in obj) {
            newObj[key] = copyObject2(obj[key]);
        }
    } else {
        newObj = obj;
    }
  
    return newObj;
}

https://github.com/iufan1526/TIL/tree/main/WEEK_3