- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
JavaScript jQuery.extend(), 두개 이상의 객체를 합치기(Merge)
2018.06.08 08:50
jQuery.extend(), 두개 이상의 객체를 합치기(Merge)
원문 링크 
http://api.jquery.com/jQuery.extend/
개요 : 두개 이상의 객체를 합칩(Merge)니다.
- jQuery.extend( target [, object1] [, objectN] )
- target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체
- object1 합쳐질 때 기준이 될 객체
- objectN 기준 객체에 합쳐질 추가 객체
- jQuery.extend( [deep], target, object1 [, objectN] )
- deep true 라면, 깊은 수준 복사가 됩니다.
- target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체
- object1 합쳐질 때 기준이 될 객체
- objectN 기준 객체에 합쳐질 추가 객체
두개 이상의 객체를 합치기 위해 $.extend() 함수를 사용합니다.
만약 $.extend() 함수에 사용된 인자가 하나라면, target 인자가 생략되었다는 의미입니다. 이런 경우, jQuery 객체는 target를 자체적으로 판단하게 됩니다. 이렇게 되면, jQuery 네임스페이스에 새로운 함수를 추가할 수 있게 됩니다. 이것은 새로운 함수를 jQuery에 추가해야 할 경우가 많은 plugin 제작 시 유용하게 사용할 수 있습니다.
var object = $.extend({}, object1, object2);
위의 예제는 배열이 반환되겠죠?
$.extend() 함수의 합침(merge) 기능은 유연하겍 동작하지 않습니다. 만약 첫번째 객체에 있는 키와 합쳐질 두번째 객체에 있는 키가 동일할 경우, 첫번째 객체의 값이 덮어써져 버립니다. values 는 합쳐지지 않습니다. 이것은 아래 예제들의 banana에 대한 내용을 확인하면 알 수 있습니다. 하지만, 첫번째 인자에 true라고 설정하면 유연하게 동작하게 됩니다. (false 는 사용할 수 없습니다.
예 제
두개의 객체를 합칩니다. 첫번째 객체값이 수정됩니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
/* merge object2 into object1 */
$.extend(object1, object2);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
};
$("#log").append( printObj(object1) );
</script>
</body>
</html>
미리보기
결과를 확인해 보세요. 첫번째 객체의 banana의 값이 바뀐것을 알 수 있습니다.
예 제
두개의 객체를 합칩니다. 첫번째 객체가 바뀝니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
/* merge object2 into object1, recursively */
$.extend(true, object1, object2);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
};
$("#log").append( printObj(object1) );
</script>
</body>
</html>
미리보기
위의 예제와 결과를 비교해 보세요. 깊은 복사가 실핼된 것을 알 수 있습니다. 완전 동일한 부분만 덮어 써졌네요.
예 제
세가지 객체의 차이점을 보여줍니다. 마지막 객체는 나머지 두 객체를 합친 것입니다. plugin 개발 시 사용하는 기본적인 패턴입니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
/* merge defaults and options, without modifying defaults */
var settings = $.extend({}, defaults, options);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
};
$("#log").append( "<div><b>defaults -- </b>" + printObj(defaults) + "</div>" );
$("#log").append( "<div><b>options -- </b>" + printObj(options) + "</div>" );
$("#log").append( "<div><b>settings -- </b>" + printObj(settings) + "</div>" );
</script>
</body>
</html>
미리보기
호~ 그렇단 말이죠~. 플러그인 제작해 볼건데;;;; 꼭 쓰게 되겠군요. 에혀~
기존 객체에 새로 만든 객체를 포함시키고 싶을 때 쓰는 함수인 듯 합니다. 배열을 합치는게 아니니 주의하세요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
출처: http://findfun.tistory.com/404 [즐거움을 찾자 Find Fun!!]
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 13 | [Next.js 개발] pm2 로 Next.js 실행하기 | 졸리운_곰 | 2025.07.01 | 480 |
| 12 | [Next.js 개발] NextAuth.js 를 이용한 자체 로그인 구현 | 졸리운_곰 | 2024.03.09 | 560 |
| 11 |
[Next.js 개발] Using Next.js Version 13
 | 졸리운_곰 | 2024.03.09 | 409 |
| 10 |
[Next.js 개발] Common Errors in Next.js and How to Resolve Them
| 졸리운_곰 | 2024.03.09 | 468 |
| 9 | [Next.js 개발] [Javascript] 현재 날짜, 시간 구하기 | 졸리운_곰 | 2024.03.09 | 431 |
| 8 |
[Next.js 개발] Using Next.js Version 13 : Next.js 버전 13 사용
| 졸리운_곰 | 2024.03.07 | 499 |
| 7 |
[Next.js 개발] [React] useEffect에서 async/await
| 졸리운_곰 | 2024.03.06 | 362 |
| 6 |
[next.js 개발] How to use fetch API in Next.js?
| 졸리운_곰 | 2024.03.05 | 368 |
| 5 | [next.js 개발] Next.js14에 Mysql연결하기 | 졸리운_곰 | 2024.03.05 | 458 |
| 4 |
[next.js 개발] How To Connect MySQL And Auth To A Next.js App
| 졸리운_곰 | 2024.03.05 | 323 |
| 3 |
[next.js 개발] Next.js 소개와 14 버전 변경사항 – React 인기 라이브러리
| 졸리운_곰 | 2024.03.05 | 523 |
| 2 | [next.js 개발] next.js API 호출시 - 수신부따로 호출하고 await 붙일것 | 졸리운_곰 | 2024.03.05 | 555 |
| 1 | [next.js 개발] [Next.js] Fetch POST body에 json 형태로 데이터 주고받기 (json형 / object형 차이) | 졸리운_곰 | 2024.03.05 | 457 |