<p>출처 :&nbsp;<a href="https://gomakethings.com/merging-objects-with-vanilla-javascript/" target="_blank">https://gomakethings.com/merging-objects-with-vanilla-javascript/</a>&nbsp;</p><p><br></p><p>뷰에서는 아래처럼 플러그인으로 생성 후 사용하면 된다.</p><div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">const</span>&nbsp;common&nbsp;=&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">install</span>&nbsp;(<span style="color: #9cdcfe;">Vue</span>,&nbsp;<span style="color: #9cdcfe;">options</span>)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #4ec9b0;">Vue</span>.<span style="color: #9cdcfe;">prototype</span>.<span style="color: #dcdcaa;">$extend</span>&nbsp;=&nbsp;<span style="color: #569cd6;">function</span>&nbsp;()&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;https://gomakethings.com/merging-objects-with-vanilla-javascript/</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;Variables</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">extended</span>&nbsp;=&nbsp;{}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">deep</span>&nbsp;=&nbsp;<span style="color: #569cd6;">false</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">i</span>&nbsp;=&nbsp;<span style="color: #b5cea8;">0</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">length</span>&nbsp;=&nbsp;<span style="color: #569cd6;">arguments</span>.<span style="color: #9cdcfe;">length</span></div><div>&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;thisFn&nbsp;=&nbsp;<span style="color: #569cd6;">this</span></div><div>&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;Check&nbsp;if&nbsp;a&nbsp;deep&nbsp;merge</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #4ec9b0;">Object</span>.<span style="color: #9cdcfe;">prototype</span>.<span style="color: #9cdcfe;">toString</span>.<span style="color: #dcdcaa;">call</span>(<span style="color: #569cd6;">arguments</span>[<span style="color: #b5cea8;">0</span>])&nbsp;===&nbsp;<span style="color: #ce9178;">'[object&nbsp;Boolean]'</span>)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">deep</span>&nbsp;=&nbsp;<span style="color: #569cd6;">arguments</span>[<span style="color: #b5cea8;">0</span>]</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">i</span>++</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;Merge&nbsp;the&nbsp;object&nbsp;into&nbsp;the&nbsp;extended&nbsp;object</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #dcdcaa;">merge</span>&nbsp;=&nbsp;<span style="color: #569cd6;">function</span>&nbsp;(<span style="color: #9cdcfe;">obj</span>)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">for</span>&nbsp;(<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">prop</span>&nbsp;<span style="color: #569cd6;">in</span>&nbsp;<span style="color: #9cdcfe;">obj</span>)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #4ec9b0;">Object</span>.<span style="color: #9cdcfe;">prototype</span>.<span style="color: #9cdcfe;">hasOwnProperty</span>.<span style="color: #dcdcaa;">call</span>(<span style="color: #9cdcfe;">obj</span>,&nbsp;<span style="color: #9cdcfe;">prop</span>))&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;If&nbsp;deep&nbsp;merge&nbsp;and&nbsp;property&nbsp;is&nbsp;an&nbsp;object,&nbsp;merge&nbsp;properties</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #9cdcfe;">deep</span>&nbsp;&amp;&amp;&nbsp;<span style="color: #4ec9b0;">Object</span>.<span style="color: #9cdcfe;">prototype</span>.<span style="color: #9cdcfe;">toString</span>.<span style="color: #dcdcaa;">call</span>(<span style="color: #9cdcfe;">obj</span>[<span style="color: #9cdcfe;">prop</span>])&nbsp;===&nbsp;<span style="color: #ce9178;">'[object&nbsp;Object]'</span>)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">extended</span>[<span style="color: #9cdcfe;">prop</span>]&nbsp;=&nbsp;<span style="color: #9cdcfe;">thisFn</span>.<span style="color: #dcdcaa;">$extend</span>(<span style="color: #569cd6;">true</span>,&nbsp;<span style="color: #9cdcfe;">extended</span>[<span style="color: #9cdcfe;">prop</span>],&nbsp;<span style="color: #9cdcfe;">obj</span>[<span style="color: #9cdcfe;">prop</span>])</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">else</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">extended</span>[<span style="color: #9cdcfe;">prop</span>]&nbsp;=&nbsp;<span style="color: #9cdcfe;">obj</span>[<span style="color: #9cdcfe;">prop</span>]</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;Loop&nbsp;through&nbsp;each&nbsp;object&nbsp;and&nbsp;conduct&nbsp;a&nbsp;merge</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">for</span>&nbsp;(;&nbsp;<span style="color: #9cdcfe;">i</span>&nbsp;&lt;&nbsp;<span style="color: #9cdcfe;">length</span>;&nbsp;<span style="color: #9cdcfe;">i</span>++)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">obj</span>&nbsp;=&nbsp;<span style="color: #569cd6;">arguments</span>[<span style="color: #9cdcfe;">i</span>]</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">merge</span>(<span style="color: #9cdcfe;">obj</span>)</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #9cdcfe;">extended</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;</div><div>&nbsp;&nbsp;<span style="color: #c586c0;">export</span>&nbsp;<span style="color: #c586c0;">default</span>&nbsp;<span style="color: #9cdcfe;">common</span></div><div>&nbsp;&nbsp;</div><br><br><div>&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;newOptions&nbsp;=&nbsp;<span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">$extend</span>(<span style="color: #569cd6;">true</span>,&nbsp;<span style="color: #9cdcfe;">object1</span>,&nbsp;<span style="color: #9cdcfe;">object2</span>)</div><br><br><br></div><p><br></p><p><br></p><p><br></p><hr><p><br></p><p>바닐라 자바스크립트에서 사용시에는 위 출처에서 처럼 아래와 같이 사용하면 된다.</p><div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">var</span>&nbsp;<span style="color: #dcdcaa;">extend</span>&nbsp;=&nbsp;<span style="color: #569cd6;">function</span>&nbsp;()&nbsp;{</div><br><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;Variables</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">extended</span>&nbsp;=&nbsp;{};</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">deep</span>&nbsp;=&nbsp;<span style="color: #569cd6;">false</span>;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">i</span>&nbsp;=&nbsp;<span style="color: #b5cea8;">0</span>;</div><br><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;Check&nbsp;if&nbsp;a&nbsp;deep&nbsp;merge</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #569cd6;">typeof</span>&nbsp;(<span style="color: #569cd6;">arguments</span>[<span style="color: #b5cea8;">0</span>])&nbsp;===&nbsp;<span style="color: #ce9178;">'boolean'</span>)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">deep</span>&nbsp;=&nbsp;<span style="color: #569cd6;">arguments</span>[<span style="color: #b5cea8;">0</span>];</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">i</span>++;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;}</div><br><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;Merge&nbsp;the&nbsp;object&nbsp;into&nbsp;the&nbsp;extended&nbsp;object</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #dcdcaa;">merge</span>&nbsp;=&nbsp;<span style="color: #569cd6;">function</span>&nbsp;(<span style="color: #9cdcfe;">obj</span>)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">for</span>&nbsp;(<span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">prop</span>&nbsp;<span style="color: #569cd6;">in</span>&nbsp;<span style="color: #9cdcfe;">obj</span>)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #9cdcfe;">obj</span>.<span style="color: #dcdcaa;">hasOwnProperty</span>(<span style="color: #9cdcfe;">prop</span>))&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #9cdcfe;">deep</span>&nbsp;&amp;&amp;&nbsp;<span style="color: #4ec9b0;">Object</span>.<span style="color: #9cdcfe;">prototype</span>.<span style="color: #9cdcfe;">toString</span>.<span style="color: #dcdcaa;">call</span>(<span style="color: #9cdcfe;">obj</span>[<span style="color: #9cdcfe;">prop</span>])&nbsp;===&nbsp;<span style="color: #ce9178;">'[object&nbsp;Object]'</span>)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;If&nbsp;we're&nbsp;doing&nbsp;a&nbsp;deep&nbsp;merge&nbsp;and&nbsp;the&nbsp;property&nbsp;is&nbsp;an&nbsp;object</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">extended</span>[<span style="color: #9cdcfe;">prop</span>]&nbsp;=&nbsp;<span style="color: #dcdcaa;">extend</span>(<span style="color: #569cd6;">true</span>,&nbsp;<span style="color: #9cdcfe;">extended</span>[<span style="color: #9cdcfe;">prop</span>],&nbsp;<span style="color: #9cdcfe;">obj</span>[<span style="color: #9cdcfe;">prop</span>]);</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">else</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;Otherwise,&nbsp;do&nbsp;a&nbsp;regular&nbsp;merge</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">extended</span>[<span style="color: #9cdcfe;">prop</span>]&nbsp;=&nbsp;<span style="color: #9cdcfe;">obj</span>[<span style="color: #9cdcfe;">prop</span>];</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;};</div><br><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;Loop&nbsp;through&nbsp;each&nbsp;object&nbsp;and&nbsp;conduct&nbsp;a&nbsp;merge</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">for</span>&nbsp;(;&nbsp;<span style="color: #9cdcfe;">i</span>&nbsp;&lt;&nbsp;<span style="color: #569cd6;">arguments</span>.<span style="color: #9cdcfe;">length</span>;&nbsp;<span style="color: #9cdcfe;">i</span>++)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">merge</span>(<span style="color: #569cd6;">arguments</span>[<span style="color: #9cdcfe;">i</span>]);</div><div>&nbsp;&nbsp;&nbsp;&nbsp;}</div><br><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #9cdcfe;">extended</span>;</div><br><div>};</div><br><br><div><span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">shallowMerge</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">extend</span>(<span style="color: #9cdcfe;">obj1</span>,&nbsp;<span style="color: #9cdcfe;">obj2</span>);</div><div><span style="color: #569cd6;">var</span>&nbsp;<span style="color: #9cdcfe;">deepMerge</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">extend</span>(<span style="color: #569cd6;">true</span>,&nbsp;<span style="color: #9cdcfe;">obj1</span>,&nbsp;<span style="color: #9cdcfe;">obj2</span>);</div></div><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p>

[Vue.js] Jquery.extend 함수처럼 object 속성 합치기(merge)