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

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'}