How to Extend an Object in JavaScript ?

30 Jan, 2020
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:<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 valuesvar student1 = new Student("Ankit Dholakia", 24,            ['Java', 'Python', 'PHP', 'JavaScript']);student1.getDetails(); </script>
<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 valuesvar student1 = new Student("Ankit Dholakia", 24,            ['Java', 'Python', 'PHP', 'JavaScript']);student1.getDetails(); </script>
Output:Name : Ankit Dholakia
Age : 24
Languages : Java,Python,PHP,JavaScript

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:<script>// Creating first objectvar obj1 = {      name: 'Ankit',     age: 20};  // Creating second objectvar obj2 = {     marks: 50};  // Using spread syntax to extend// both objects into onevar object = {    ...obj1,    ...obj2};console.log(object); </script>
<script>// Creating first objectvar obj1 = {      name: 'Ankit',     age: 20};  // Creating second objectvar obj2 = {     marks: 50};  // Using spread syntax to extend// both objects into onevar object = {    ...obj1,    ...obj2};console.log(object); </script>
Output:{ name: 'Ankit', age: 20, marks: 50 }

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

JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?