객체의 병합

JEON HAN BIT·2023년 3월 20일

javaScript

목록 보기

4/6

객체를 병합할때 주의해야하는것

객체는 참조형이기때문에 항상 참조를 신경써야 한다

얕은복사 vs 깊은복사

const source = {
    user: { // depth : 1
        info: { // depth : 2
            age:30,
            name:'jeon'
            updated_at: 1623238587468
        },
    },
};

얕은복사 (shallow copy) : 1depth 까지만 분리, 그 뒤로는 원본 참조
깊은복사 (deep copy) : depth 상관없이 원본과 완벽히 분리

✔ 얕은복사 : ... 스프레드 연산자 , Object.assign({}, source)

깊은복사 구현하기

1. JSON.parse(JSON.stringify())

const newSource = JSON.parse(JSON.stringify(source))

제일 간단한 방법이지만 객체의 사이즈가 크면 성능이슈가 발생함!

2. lodash 라이브러리 deepcopy 함수 쓰기!

const newSource = _.cloneDeep(source)

간단한 방법2 , 성능좋고 호환성도 좋음!

3. 재귀모델 함수로 구현해보기!

function deepCopyObject(obj){
    const clone = {};
    for (const key in obj){
        if(typeof obj[key] == "object" && obj[key] != null){
            clone[key] = deepCopyObject(obj[key]);
        } else {
            clone[key] = obj[key];
        }
    }
    return clone;
}

재귀함수 컨셉을 개념으로 , 추상적으로만 알고있었는데
이렇게 실 예제를 통해 재귀함수 활용 케이스를 보니 신기했다.

디폴트값 다루기

const DefaultStyle = {
    color: '#fff',
    contColor: '#999',
    fontSize:14,
    fontWeight: 200,
};

function createParagraph(config){
    config = {...DefaultStyle, ...config};
}

createParagraph({fontSize:12});