How to Extend an Object in JavaScript ?

The extends keyword can be used to extend the objects as well as classes in JavaScript. It is usually used to create a class which is child of another class.

Syntax:

class childclass extends parentclass {...}
class parentclass extends in-built object {...}

Below example depicts how a child class uses properties of parent class using the keyword extends and by creating objects of the child class. In example 1, we see that class Profile has two attributes name and age. Now we will see that class Student acquires both attributes of class Profile using the keyword extends with an added attribute languages and then all attributes are displayed.



Example 1: In this example, we use the extends keyword.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
        // Declaring class
        class Profile { 
              
            // Constructor of profile class
            constructor(name, age) { 
                this.name = name;
                this.age = age;
            }
      
            getName() {
                  
                // Method to return name
                return this.name; 
            }
      
            getAge() {
                  
                // Method to return age
                return this.age; 
            }
      
            getClass() {
                return this;
            }
        }
      
    // Class Student extends class Profile 
    class Student extends Profile { 
          
        // Each data of class Profile can be
        // accessed from student class.
        constructor(name, age, languages) {
              
            // Acquiring of attributes of parent class
            super(name, age); 
            this.lang = [...languages];
        }
      
        // Method to display all attributes
        getDetails() {
            console.log("Name : " + this.name);
            console.log("Age : " + this.age);
            console.log("Languages : " + this.lang);
        }
    }
      
    // Creating object of child class with passing of values
    var student1 = new Student("Ankit Dholakia", 24,
                ['Java', 'Python', 'PHP', 'JavaScript']);
    student1.getDetails(); 
    </script>

    chevron_right

    
    

  • Output:
    Name : Ankit Dholakia
    Age : 24
    Languages : Java,Python,PHP,JavaScript
    

Example 2: In this example, we will see how spread syntax can be used to extend two objects into a third object and display the containing attributes of both objects.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // Creating first object
    var obj1 = { 
         name: 'Ankit',
         age: 20
    };
      
    // Creating second object
    var obj2 = { 
        marks: 50
    };
      
    // Using spread syntax to extend
    // both objects into one
    var object = {
        ...obj1,
        ...obj2
    };
    console.log(object); 
    </script>

    chevron_right

    
    

  • Output:
    { name: 'Ankit', age: 20, marks: 50 }
    

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.