Difference between angular.merge and angular.extend?

Question

Can some one please explain me the difference between angular.merge and angular.extend..And what does deep copy means and when should it be used ?

Vinit Solanki · Accepted Answer · 2018-05-02 08:43:55Z

12

Extend : to shallow copy the properties of the source objects from right to left, all the way to the destination object.

Example: extend person and job objects and vise versa.

       //------------------------------------Extend--------------------------

        $scope.extendPersonToJob = function () {
           var person = { 'Name': 'Monica', 'Age': '25', 'Skills': { 'name': 'travelling', 'place': 'Queenstown' } };
            var job = { 'Title': 'Programmer', 'Experience': '5',   'Skills': { 'name': 'Designing', 'experience': '2', 'certified': 'true' } };
            // extend from Person to Job

            $scope.personTojob = angular.extend(person, job);
             // output : { 'Name': 'Monica', 'Age': '25', 'Skills': { 'name': 'Designing', 'experience': '2', 'certified': 'true' } , 'Title': 'Programmer', 'Experience': '5'}             
        }

        $scope.extendJobToPerson = function () {
            var person = { 'Name': 'Monica', 'Age': '25', 'Skills': { 'name': 'travelling', 'place': 'Queenstown' } };
            var job = { 'Title': 'Programmer', 'Experience': '5', 'Skills': { 'name': 'Designing', 'experience': '2', 'certified': 'true' } };

            // extend from job to person
            $scope.jobToperson = angular.extend(job, person)
           // output : { 'Name': 'Monica', 'Age': '25', 'Skills': { 'name': 'travelling' , 'place': 'Queenstown' }  , 'Title': 'Programmer', 'Experience': '5'}             

        }

Merge is to deep (recursively) copy the properties of the source objects to the destination object.

Example: merge person and job objects and vise versa.

    //------------------------------------Merge------------------------------
        $scope.mergePersonToJob = function () {

            var person = { 'Name': 'Monica', 'Age': '25', 'Skills': { 'name': 'travelling', 'place': 'Queenstown' } };
            var job = { 'Title': 'Programmer', 'Experience': '5', 'Skills': { 'name': 'Designing', 'experience': '2', 'certified': 'true' } };
            // merge from Person to Job

            $scope.personTojob = angular.merge(person, job);

            // output :  { 'Name': 'Monica', 'Age': '25', 'Skills': { 'name': 'Designing', 'experience': '2', 'certified': 'true', 'place': 'Queenstown' }, 'Title': 'Programmer', 'Experience': '5' };
        }

        $scope.mergeJobToPerson = function () {
            var person = { 'Name': 'Monica', 'Age': '25', 'Skills': { 'name': 'travelling', 'place': 'Queenstown' } };
            var job = { 'Title': 'Programmer', 'Experience': '5', 'Skills': { 'name': 'Designing', 'experience': '2', 'certified': 'true' } };

            // merge from job to person
            $scope.jobToperson = angular.merge(job, person)

            // output : { 'Name': 'Monica', 'Age': '25', 'Skills': { 'name': 'travelling', 'experience': '2', 'certified': 'true', 'place': 'Queenstown' }, 'Title': 'Programmer', 'Experience': '5' };
        }

have a look this Example and compare for better understanding. please correct me if wrong.

PC : David Cai's Blog

edited May 2, 2018 at 8:43

Vinit Solanki

2,0412 gold badges20 silver badges34 bronze badges

answered Sep 15, 2016 at 20:24

monikapatelIT

1,00716 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

monikapatelIT Over a year ago

@Shijil Narayan i tried to explain deep (recursive) copy and shallow copy using Merge and extend with person and job objects example.

Shijil Narayanan Over a year ago

Thanks a lot Monica.The example you gave made things more clear.

monikapatelIT Over a year ago

@ShijilNarayan i am glad to help you. but i just came to know that my codepen example link was n't saved and showing default angular js page. i applologies for that. but i just have updated it have a look.

Shijil Narayanan Over a year ago

Yes ,but David Cai's blog link u shared helped me in understanding it more clearly.Will go through your codepen example too.Anyway Thank you

ruffin · Accepted Answer · 2020-08-31 18:30:42Z

2

From angular docs.

Unlike extend(), merge() recursively descends into object properties of source objects, performing a deep copy.

edited Aug 31, 2020 at 18:30

ruffin

17.8k11 gold badges99 silver badges155 bronze badges

answered Sep 12, 2016 at 23:48

levi

22.8k7 gold badges79 silver badges76 bronze badges

3 Comments

Shijil Narayanan Over a year ago

Thanks Levi but still what does deep copy mean ?

levi Over a year ago

@ShijilNarayan if you have nested objects, merge() will copy them as well, but using extend() doesn't.

Shijil Narayanan Over a year ago

Thanks Levi for the help

Collectives™ on Stack Overflow

Difference between angular.merge and angular.extend?

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related