Javascript 개념 정리(2) - 객체와 불변성

🐤 JavaScript 객체와 불변성이란 ?

 

기본형 데이터와 참조형 데이터

 

기본형(원시형) 데이터(Primative Type)

객체가 아닌 데이터 유형 6가지

 - Number

 - String

 - Boolean

 - null

 - undefined

 - Symbol(ES6에 추가, 객체 속서을 만드는 데이터 타입)

 

기본형 데이터는 값을 그대로 할당함

메모리상에 고정된 크기로 저장되며, 원시데이터 값 자체를 보관하므로, 불변적임

기본적으로 같은 데이터는 하나의 메모리를 사용함(재사용)

var a;
a = 10;

var b = 'abc';
b = false;

var c = b;
// b === c

c = 20;
// b !== c

변수 선언

변수 할당

변수 재 할당

 

 

참조형 데이터(Reference Type)

변수에 할당할때 값이 아닌 데이터의 주소를 저장함

참조형은 기본형 데이터의 집합

참조형 데이터는 값이 지정된 주소값을 할당함

 

참조형 데이터의 대표 : object

하위

 - Array

const로 선언된 변수 배열에 array.push()를 할 수 있는 이유는 배열은 참조 타입이기 떄문에 데이터의 주소를 대입할 수 있기 때문

 - function

 - RegExp(정규식)

문자열에 나타나는 특정 문자조합과 대응시키기 위해 사용되는 패턴

 - map

var obj = {
    a : 1,
    b : 'b'
};

var obj2 = obj;
obj2.a = 10;
console.log(obj2.a); // 10
console.log(obj.a); // 10

obj2 객체가 obj 객체와 다른 새로운 객체를 만든 것이 아니라 본래 obj이 바라보던 객체를 함께 바라 봄

obj === obj2 는 완벽히 동일한 객체를 참조 함

 

객체의 선언

값이 저장된 주소값을 할당

비어있는 데이터 공간을 확보하고, 객체 속 프로퍼티에 대한 공간을 다시 확보

객체의 프로퍼티 명과 주소를 매칭하고 확보했던 두 번째 주소에 데이터를 할당

 

 

기본형과 참조형의 차이

기본형 : 바로 값을 그대로 할당함

참조형: 값이 저장된 주소 값을 할당(참조)함

 

변수를 선언하면 데이터가 담길 공간을 확보하고, 확보된 데이터의 주소값을 가지고 변수면과 매칭시키는 선언과정까지 동일하나, 할당 과정에 차이가 있음

 

https://webclub.tistory.com/638

JS Basics #1 - JS 기본형과 참조형 차이점 정리

 

 

 

불변 객체를 만드는 방법

 

불변객체란

변하지 않는 객체, 이미 할당된 객체가 변하지 않는다는 뜻

 

이게 불변인가?

const

변수를 상수로 선언 함(일반적으로 상수로 선언된 변수는 값을 바꾸지 못함)

객체 재할당은 불가능하지만 객체의 속성은 변경 가능

const test = {};
test.name = "mingyo"; 
console.log(test); // {"mingyo"}

재할당이 불가능 한 이유는 변수와 값(객체) 사이의 바인딩 자체가 변경이 되기 때문에 상수인 test변수는 재할당이 불가능 하지만, 

객체의 속성이 변경가능 한 이유는 실제 객체가 변경은 되지만 ( {} -> name : "mingyo" ) 객체와 변수(test)사이의 바인딩은 변경이 되지 않기 때문에 객체의 속성은 변경가능함

 

 

Object.freeze()

객체를 동결하기 위한 메소드

객체는 객체의 속성을 변경하는 시도는 불가능 그러나 동결된 객체를 반환하지만 객체의 재할당은 가능

let test = {
    name : 'kim'
}

Object.freeze(test);

test.name = 'Jung';
console.log(test) // {name: 'kim'}

test = {
    age : 15
};
console.log(test); // {age: 15}

 

그럼 불변객체를 만드는 법은?

const와 Object.freeze()를 조합 하여 만듬

const의 재할당불가 + Object.freeze()의 객체속성 변경불가

const test = {
    'name' : 'jung'
};

Object.freeze(test);

https://spiderwebcoding.tistory.com/8

[JavaScript] 불변 객체 만들기(const, Object.freeze())

 

 

 

얕은 복사와 깊은 복사

 

기본형 데이터를 변경하면 데이터는 변하지 않음, 

참조형 데이터도 데이터 자체를 변경하고자 하면 즉, 새로운 데이터를 할당한다면 기본형 데이터와 같이 기존 데이터는 변경되지 않음

 

BUT 

참조형 데이터인 객체를 복사해서 그 객체안의 내부 프로퍼티를 변경 한다면?

참조형 데이터인 내부 프로퍼티를 수정했을 때는 가변성이라는 성질로 인하여 기존의 객체도 변하게 됨 

 

해결방법

기존 객체의 정보를 복사해서 새로운 객체를 반환 하기

var student = {
    name : "coder_h",
    ban : 3,
    gender : 'male'
}

var copyObject = function(target){ // (1)
    var result = {};
    for(var prop in target){
        result[prop] = target[prop];
    }
    return result;
}

var student2 = copyObject(student);

student2.name = "kim";


console.log(student === student2); // false
console.log(student.name, student2.name); // coder_h kim

for in 문법을 이용해서 target 파라미터에 담기는 객체의 프로퍼티를 복사해서 새로운 result라는 객체를 만들어 반환

이거는 문제가 없지만,

 

객체안에 프로퍼티로 또 객체가 있는 중첩객체의 경우

var student = {
    name : "coder_h",
    ban : 3,
    gender : 'male',
    friend : { // 새로 추가한 프로퍼티 (1)
        name : "hello"
    }
}

var copyObject = function(target){
    var result = {};
    for(var prop in target){
        result[prop] = target[prop];
    }
    return result;
}

var student2 = copyObject(student);

student2.name = "kim";
student2.friend.name = "Bye"; // student2의 친구이름을 변경 (2)


console.log(student === student2); // false
console.log(student.name, student2.name);// coder_h kim
console.log(student.friend.name, student2.friend.name); // Bye Bye (3)

기존 객체의 내부프로퍼티도까지 변경됨

중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사함

즉, 복사한 객체에서 해당 프로퍼티에 대해 같은 주소값을 가지고 있다는 의미이기 때문에 복사 객체의 프로퍼티를 변경하면 원복객체까지 영향을 끼치게 됨

 

이것이 얕은 복사의 한계...

 

얕은 복사 : 바로 아래 단계의 값만 복사함.
깊은 복사 : 내부의 모든 값들을 하나하나 찾아서 전부 복사함

 

var student = {
    name : "coder_h",
    ban : 3,
    gender : 'male',
    friend : {
        name : "hello"
    }
}

// 깊은복사 (1)
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;
}

var student2 = copyObjectDeep(student);

student2.name = "kim";
student2.friend.name = "Bye"; // (2)


console.log(student === student2);
console.log(student.name, student2.name);
console.log(student.friend.name, student2.friend.name); // hello Bye (3)

기본형 데이터인 경우에는 그대로 복사하면 되지만 참조형 데이터는 다시 그 내부의 프로퍼티들을 복사해야 함

즉, 참조형 데이터가 있을때 마다 재귀적으로 수행해야만 비로소 깊은 복사가 되는 형태가 됨

target이 객체라면 내부 프로퍼티를 순회하면서 함수를 재귀적으로 호출하고**, 객체가 아닌 경우에는 target을 그대로 result에 할당 시켜 반환

중첩객체를 복사하더라도 원본과 복사한 객체는 서로 완전히 다른 객체를 참조하게 되므로 얕은 복사일때와 같은 상황이 벌어지지 않음

 

https://velog.io/@hazzang/JS-%EC%8B%9C%EB%A6%AC%EC%A6%88-%EB%B6%88%EB%B3%80-%EA%B0%9D%EC%B2%B4

JS 시리즈 - 불변 객체