Programing/JavaScript

Javascript Object Extend, merge, copy 객체 합치기, 병합하기 복사하기 assign

리커니 2020. 3. 16.
반응형

Javascript Object Extend, merge, copy 객체 합치기, 병합하기 복사하기 assign

 

이번 포스팅에서는 Javascript 에서 Object를 다루는 방법을 알아보겠습니다.

 

Object 선언

//리터럴방식
var obj = {a:'a', b:'b'};

//OBject생성자방식
var obj2 = new Object();
obj2['a'] = 'a';
obj2['b'] = 'b';

//생성자함수방식
function Func(c, d){
    this.a : c,
    this.b : d
};
var obj3 = new Func('a', 'b');

javascript 에서 Object를 선언하는 방식은 위와 같은 3가지 방식이 있습니다. 프로토타입 체이닝이 약간 다르긴 하지만 Object를 생성하는 건 같죠.

 

obj, obj2, obj3 차이

 

Object Value 접근

Object의 값에 접근하는하는 방법은 아래와 같습니다.

 

var value = obj.a;
var value2 = obj2['a'];
var value3 = obj3.a;
var value4 = obj3.c;

console.log(value);   //a
console.log(value2);  //a
console.log(value3);  //a
console.log(value4);  //undefined

 

없는 값에 접근할때는 undefined가 출력됩니다.

 

Object Value Override

obj['a'] = 'c';
obj.b = 'd';
console.log(obj);

Result : {a : "c", b : "d"};

 

Object Extend, Merge

Object를 Extend, Merge 할때 jQuery에선 extend 함수를 사용했죠.

javascript 에선 Object의 assgin 함수를 사용합니다. (IE는 지원하지 않음.)

 

var obj = {a:'a', b:'b'};
var obj2 = {b:'c', d:'d'};
var obj3 = Object.assign(obj, obj2);
console.log(obj);   //{a:'a', b:'c', c:'d'}
console.log(obj2);  //{b:'c', c:'d'}
console.log(obj3);  //{a:'a', b:'c', c:'d'}

보시는 것과 같이 같은 속성값이 있으면 override됩니다. 그리고 기준이되는 객체(obj)도 같이 변하게 되죠. 

obj의 값은 변하지 않으면서 병합하기 위해선 아래와 같이 합니다.

 

var obj = {a:'a', b:'b'};
var obj2 = {b:'c', d:'d'};
var obj3 = Object.assign({}, obj, obj2);
console.log(obj);  //{a:'a', b:'b'}
console.log(obj2); //{b:'c', d:'d'}
console.log(obj3); //{a:'a', b:'c', d:'d'}

 

IE에서는 아래와 같이 사용

 

var obj = {a:'a', b:'b'};
var obj2 = {b:'c', d:'d'};
var keys = Object.keys(obj2);

for(var i=0, n=keys.length; i<n; i++){
    obj[keys[i]] = obj2[keys[i]];
}
console.log(obj); //{a:'a', b:'c', d:'d'}

 

Object Copy

위에서 느낌이 오셨겠지만 assign 을 활용해서 객체를 복사 할 수 있습니다.

 

assign 사용 방법 (얕은 복사 - 복사한 객체 변경 시 원복 객체도 변경)

var obj = {a:'a', b:'b'};
var obj2 = Object.assign({}, obj);
console.log(obj);  //{a:'a', b:'b'}
console.log(obj2); //{a:'a', b:'b'}

 

함수 사용 방법

 

var obj = {a:'a', b:'b'};
var obj2 = clone(obj);
console.log(obj);  //{a:'a', b:'b'}
console.log(obj2); //{a:'a', b:'b'}

function clone(obj) {
	if (obj === null || typeof(obj) !== 'object'){
		return obj;
	}
	var copy = obj.constructor();
	for(var attr in obj){
		if (obj.hasOwnProperty(attr)){
	    		copy[attr] = obj[attr];
	   	}
	}
	return copy;
}

 

JSON 사용 방법(깊은 복사 - 복사한 객체 변경 시 원본 객체는 변동없음)

 

var obj = {a:'a', b:'b'};
var obj2 = JSON.parse(JSON.stringify(obj));
console.log(obj);  //{a:'a', b:'b'}
console.log(obj2); //{a:'a', b:'b'}
반응형

댓글

💲 추천 글