jQuery - $.extend()

99·2024년 11월 4일

jQuery(제이쿼리)

목록 보기
2/3
post-thumbnail

📌 $.extend()

jQuery에서 객체를 병합할 때 사용하는 유틸리티 메서드입니다. 이 메서드는 한 객체의 속성을 다른 객체에 복사하거나, 여러 객체를 병합하는 데 사용 됩니다.

📖기본 문법

$.extend(target, object1, object2, ...);
  • target: 병합될 객체입니다. object1,object2...의 속성이 target에 복사 됩니다.
  • object1, object2, ...: 병합될 객체들입니다. 여러 객체를 전달할 수 있습니다.
    object들의 속성값으로 덮어 씌워집니다.

📖 사용 방법

1. 객체 병합

  • $.extend()를 사용하여 객체를 병합할 때, target객체가 원래의 속성을 유지하면서 병합됩니다.
var obj1 = {name: "Joon",
           age: 25
           };
var obj2 = {age: 30,
           city: "New York"
           };

$.extend(obj1, obj2);
console.log(obj1); // {name: "Joon", age: 30, city: "New York"}
  • obj2속성이 obj1에 병합되고, 중복된 속성(age)은 obj2의 값으로 덮어씌워집니다.

2. 빈 객체에 병합하여 새 객체 생성

  • 원본 객체를 변경하지 않고 새로운 객체를 생성할 때 유용합니다.
var obj1 = {name : "Joon"};
var obj2 = {age : 30};

var mergerObj = $.extend({}, obj1, obj2);
console.log(mergeObj); // {name:"Joon",age:30}
console.log(obj1); // {name:"Joon"} 원본객체는 변경되지 않음


📖 예제

jQuery.fn.egovTable = function(config){
	var _config = $.extend({
      
	}, config ||{});
  return new EgovTable(_config);
};

config || {} 부분은 config객체가 정의되어 있는지를 확인하고, 만약 confignull, undefined, 또는 false와 같은 falsy값일 경우 빈 객체 {}를 대신 사용하도록 하는 표현입니다.

의미 및 동작

  • config : 외부에서 전달된 설정 객체입니다. 이 객체가 올바르게 정의되어 있으면 그대로 사용됩니다.
  • || : 논리 연산자로, 왼쪽 값이 falsy일 경우 오른쪽 값을 반환합니다.
  • {} : config가 falsy일 때 기본값으로 사용될 빈 객체입니다.

예제 설명

  • 만약 config가 다음과 같이 주어졌다면
var config = {
	url : "https://example.com",
  	pager : false
};

config가 truthy이므로 $.extend()config를 사용해 기본 설정과 병합합니다.

  • 반대로, config가 정의 되지 않았거나 null이라면
var config = null; // 또는 config가 아예 선언되지 않았을 때

config || {}는 빈 객체 {}를 반환하여 $.extend()가 기본 설정만 사용하게 됩니다.

결론

config || {}는 외부에서 설정 객체가 제공되지 않더라도 코드가 문제없이 동작하도록 안전장치를 마련하는 것입니다.

profile
99

0개의 댓글