Javascript & JQuery & CSS

extend 말 그래도 확장 한다는 뜻 인데요.

서로 다른 object 혹은 플러그인 작성 시 default object를 정의해 두고 사용자가 임의로 options 값을 주었을 때 

default로 정의 된 object의 값을 options의 값으로 merge 하는데 용이하게 사용됩니다.

샘플 코드를 보는 것이 이해하기 더 쉬울 것 같습니다.
 

	var object1 = { apple : 0,  banana : {weight : 52, price : 100}, cherry : 97 };
	var object2 = { banana : {price : 200},  durian : 100 };
	$.extend(object1, object2);

	# 결과 (object2 의 값이 object1의 값을 덮어쓰며 병합되었습니다.)
	------------------------------------------------------------------------------------------------
	object1 = { apple: 0, banana: { price: 200 }, cherry: 97, durian: 100 };

 

	var object1 = {  apple: 0,  banana: {weight: 52, price: 100},  cherry: 97};
	var object2 = {  banana: {price: 200},  durian: 100};
	$.extend(true, object1, object2);

	# 결과 (object2 과 object1이 병합되었으나 object1의 원본 값을 그대로 유지하며 병합되었습니다.)
	------------------------------------------------------------------------------------------------
	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);
	
	# 결과
	------------------------------------------------------------------------------------------------
	settings --> { validate: true, limit: 5, name: bar }
	options --> { validate: true, name: bar }

알고보면 참 쉬운데 소스 상에서 저런 코드를 만나면 뭘까 멍때리게 된다는;;

어째든 api 보고 확인하는게 가장 좋은 방법인 듯합니다.