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 ?

Answer 1

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

Answer 2

From angular docs.

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