에몽이

jQuery.extend(), 두개 이상의 객체를 합치기(Merge) 본문

web/javascript

jQuery.extend(), 두개 이상의 객체를 합치기(Merge)

ian_hodge 2019. 1. 17. 12:27

jQuery.extend()

원문 링크  http://api.jquery.com/jQuery.extend/

jQuery.extend( target [, object1] [, objectN] )Returns : Object

개요 : 두개 이상의 객체를 합칩(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?category=383258 [즐거움을 찾자 Find Fun!!]

'web > javascript' 카테고리의 다른 글

fetch() API  (0) 2019.02.20
자기호출 익명함수(Self-invoking anonymous function)  (0) 2019.01.17
trim()  (0) 2019.01.03
reduce  (0) 2019.01.03
map / reduce  (0) 2019.01.03
'web/javascript' Related Articles more
Comments