제이쿼리 extend(), 객체 합치기

제이쿼리의 extend()는 다수의 객체를 하나의 객체로 합치는 merge기능을 수행할 수 있습니다. 만약 두 개 이상의 객체를 하나로 합치려는 경우 extend()를 사용하여 새로운 객체로 만들 수 있죠. 아래는 extend()를 사용하는 간단한 방법 및 문법은 아래와 같습니다.

$.extend(대상, 객체1, 객체2, ... , 객체n)


그럼 extend()를 사용한 예제를 알아보겠습니다. 예제에서는 objA, objB를 사용하여 새로운 objC를 생성합니다. 새롭게 만들어진 objC가 extend()를 통해 어떤 값을 가졌는지 확인해보세요.

# extend() 객체 예제 보기

아래 코드의 자바스크립트 객체 objA 그리고 objB는 각각의 프로퍼티 a, b 그리고 c, d를 가지고 있습니다. 이 객체들을 합칠 경우 가지고 있던 프로퍼티와 값이 어떻게 되는지 알아보겠습니다.

위 객체의 merge 수행 이후인 출력 결과는 아래와 같습니다.

위 결과를 통해 우리는 기존의 객체를 합친 새로운 객체 objC를 생성하였습니다. 아래는 만약 각각의 객체가 동일한 프로퍼티를 가진 경우 값이 어떻게 되는지 알아보겠습니다.

# extend() 사용시 중복된 값의 결정

만약 merge 대상인 객체가 동일한 프로퍼티를 가지게 되는 경우... 즉 프로퍼티가 중복되는 경우 그 값은 어떻게 될까요? 결과부터 얘기하면 기본적으로는 나중에 덮어 씌어지는 값이 최종값으로 남게 됩니다. 즉 둘 다 남는게 아닌 새로운 값으로 덮어씌워지는 결과가 나타나죠. 아래와 같은 두 개의 객체를 extend()를 통해 merge하는 경우 결과가 어떻게 나타나는지 보세요.

출력결과는 아래와 같습니다.

여기서 궁금한 부분이 생깁니다. 만약 객체가 가진 값이 객체 타입인 경우... 그리고 그 객체의 프로퍼티가 있는경우 어떻게 될까요? 예를들어...

이 경우 위와 예제처럼 나중에 추가되는 값이 덮어씌어지게 됩니다. 하지만 전달하는 인자로 true를 입력하는 경우 값이 달라지죠. 아래의 경우 결과를 확인해보겠습니다. 

이 값의 출력결과는 다음과 같습니다.

여기서 true를 사용하였다해도 동일한 이름의 값이 사라지는 것은 동일하다. 하지만 프로퍼티가 다른 이름을 가진 객체의 경우 모든 값들이 남아있게 되는 것을 확인할 수 있습니다.

# extend() 언제 사용하는가?

객체를 합치는 일이 매우 자주 있는 것은 아니죠... 많이 사용되는 것 중 예를 들면 바로 제이쿼리 플러그인(plug-in)을 생성하면서 선택 옵션값을 전달받은 경우 인자를 합칠 경우가 있을 수 있습니다. 플러그인을 보면 이런 코드가 매우 많이 존재합니다.

아래의 예제를 보면...

위와 같이 인자로 객체 형태의 값을 전달하는 경우 플러그인 내부에서는 settingup 변수에 다음처럼 사용할 수 있을 것입니다.

여기서 Default값은 opt에 없는 값의 경우에 기본값으로 사용될 것입니다. 이런 이유로 이처럼 객체를 머지, 합쳐서 사용하면 매우 편리합니다.