[javascript/jquery] extend 메소드

jQuery.extend()

jQuery.extend( [deep ], target, object1 [, objectN ] )

• deep
  Type: Boolean
  If true, the merge becomes recursive (aka. deep copy). Passing false for this argument is not supported.
• target
  Type: Object
  The object to extend. It will receive the new properties.
• object1
  Type: Object
  An object containing additional properties to merge in.
• objectN
  Type: Object
  Additional objects containing properties to merge in.

extend() : 2개 이상의 오브젝트를 타겟 오브젝트와 merge할 수 있는 기능이다.

예시1)

 
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 );

이렇게 object2에 있는 항목들을 object1에 있는 항목들과 merge 하게되면

기존에 있던 항목들은 남아있고 겹치는 항목은 새로운 값으로 대체된다.

결과 : 

기존에 있던 apple, cherry, durian은 남아있고

겹치는 항목인 banana는 내용이 새로운 값으로 변경된 것을 알 수 있다.

object1 = {

"apple":0,

"banana":{

"price":200

},

"cherry":97,

"durian":100

}

예시2)

 
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 );

첫번째 인자인 [deep]을 true로 주면 기존에 있는 항목이 대체되는 것이 아니라

기존에 있던 항목들은 남아있고 겹치는 항목은 새로운 값으로 대체된다.

결과 : 

기존에 있던 apple, cherry, durian은 남아있고

겹치는 항목인 banana는 기존값 weight는 남아있고

겹치는 값인 price는 새로운 값으로 대체된 것을 알 수 있다.

object1 = {

"apple":0,

"banana":{

"weight":52,

"price":200

},

"cherry":97,

"durian":100

}

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend( {}, defaults, options );
defaults -- {"validate":false,"limit":5,"name":"foo"}
options -- {"validate":true,"name":"bar"}
settings -- {"validate":true,"limit":5,"name":"bar"}