반응형
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를 생성하는 건 같죠.
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'}
반응형
'Programing > JavaScript' 카테고리의 다른 글
vanila javascript 개선된 초성검색 기능 구현 (0) | 2020.10.26 |
---|---|
javascript 요소(Element)의 이동 추가 삽입 insertBefore() (0) | 2020.09.28 |
customoverlay를 활용한 kakaomap marker 회전 마커회전 (2) | 2020.02.24 |
javascript call, apply, bind 차이점! 알짜만 빼먹기! (0) | 2020.02.21 |
javascript DOM 변경 감지 How to detect javascript dom change (0) | 2020.01.31 |
댓글