Object-oriented programming (OOP) is a fundamental concept in JavaScript, and it revolves around three fundamental aspects: objects, classes, and methods. <\/p>\n\n\n\n
Understanding these three concepts and how they interact is crucial for mastering JavaScript programming language. <\/p>\n\n\n\n
In this article, we’ll explore these concepts in depth and demonstrate their practical applications.<\/p>\n\n\n\n
Picture a real-world object, such as a car. It has properties like color and model, and it can perform actions such as driving and honking. Similarly, JavaScript objects<\/a> have properties and methods (actions). Properties represent values associated with an object, while methods represent tasks that can be performed by objects.<\/p>\n\n\n\n Also Read: Best JavaScript Roadmap Beginners Should Follow<\/a><\/em><\/strong><\/p>\n\n\n\n JavaScript objects are mutable\u2014they are addressed by reference, not by value. If the person is an object, then changing the name property of the person changes the name for the “person” object, because the person and the person are the same object.<\/p>\n\n\n\n JavaScript provides several ways to create objects:<\/p>\n\n\n\n Here’s an example of creating an object using literal notation:<\/p>\n\n\n\n In the code above, Also Read: How to Render an Array of Objects in React? [in 3 easy steps]<\/a><\/em><\/strong><\/p>\n\n\n\n JavaScript objects are dynamic, meaning properties can be added, changed, or deleted after an object is created.<\/p>\n\n\n\n Properties can be added to an object by simply giving it a value. Let’s add a The The The Also Find 4 Key Differences Between == and === Operators in JavaScript<\/a><\/em><\/strong><\/p>\n\n\n\n In JavaScript, object keys are always strings. Whether you use an integer, a string, a symbol, or any other type as key, they are converted into strings (except for symbols).<\/p>\n\n\n\n In the example above, the key There are two main ways to access or get the values of properties within an object:<\/p>\n\n\n\n If the property name is a number or a special key, you have to use bracket notation:<\/p>\n\n\n\n Must Read: Variables and Data Types in JavaScript: A Complete Guide<\/a><\/strong><\/em><\/p>\n\n\n\n JavaScript allows you to set properties dynamically using bracket notation. This is useful when you need to create properties based on certain conditions.<\/p>\n\n\n\n In ES6, there is a shorthand for defining methods in an object. You can remove the function keyword and the colon.<\/p>\n\n\n\n Object short methods have several advantages over regular methods:<\/p>\n\n\n\n Also Explore: Constructors in JavaScript: 6 Uses Every Top Programmer Must Know<\/a><\/em><\/strong><\/p>\n\n\n\n The object spread operator ( Object destructuring is a JavaScript feature that allows you to extract properties from objects and bind them to variables.<\/p>\n\n\n\n Also Read: Most Popular JavaScript Front-End Tools<\/a><\/em><\/strong><\/p>\n\n\n\n Classes in JavaScript<\/a> are a blueprint for creating objects. They encapsulate data with code to manipulate that data. <\/p>\n\n\n\n They are primarily syntactic sugar over JavaScript’s existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.<\/p>\n\n\n\n Before we dive headfirst into our exploration of classes in JavaScript<\/strong>, there are a few prerequisites you should be familiar with:<\/p>\n\n\n\n The advent of ECMAScript 2015 (ES6) marked a significant milestone in JavaScript’s evolution, introducing the concept of classes. <\/p>\n\n\n\n This was a game-changer for developers, providing a cleaner, more streamlined approach to implementing object-oriented programming patterns.<\/p>\n\n\n\n While JavaScript continues to operate on a prototype-based inheritance model, classes offer a layer of syntactic sugar over this model, making it more digestible and user-friendly. <\/p>\n\n\n\n They brought JavaScript closer to other OOP-based programming languages such as C++ and Java, thereby broadening its appeal.<\/p>\n\n\n\n Also Read: All About Loops in JavaScript: A Comprehensive Guide<\/a><\/em><\/strong><\/p>\n\n\n\n At their core, classes in JavaScript are essential functions. Before classes made their debut, developers used constructor functions to achieve object-oriented programming in JavaScript. <\/p>\n\n\n\n The advent of classes simply provided a cleaner, more intuitive syntax for doing so.<\/p>\n\n\n\n Within a JavaScript class, the constructor method plays a crucial role. This special method is used for creating and initializing objects created with that class. <\/p>\n\n\n\n There can only be one special method with the name “constructor” in a class. Having more than one occurrence of a constructor method in a class will throw a SyntaxError error.<\/p>\n\n\n\n The introduction of classes in JavaScript has made it significantly easier for developers to build software around OOP concepts. Some of the advantages include:<\/p>\n\n\n\n Also Read: Best JavaScript Frameworks<\/a><\/em><\/strong><\/p>\n\n\n\n The syntax for creating a class involves the In the To create an object from a class, you use the The Also Read: Functions in JavaScript: Important Things To Know<\/a><\/em><\/strong><\/p>\n\n\n\n Inheritance is a key feature of OOP. It allows you to create a new class that inherits the properties and methods of an existing class. To create a class that inherits from another class, you use the For example, suppose we want a In the Now that we have a basic understanding of JavaScript classes, let’s delve into some more advanced concepts.<\/p>\n\n\n\n In JavaScript, a class can inherit features from another class, a process known as inheritance. This can be achieved using the Abstract functions are functions that exist in the parent class but do not have a body, meaning that they don’t perform any action themselves. The responsibility to provide a specific implementation of the function lies with the class that extends the parent class.<\/p>\n\n\n\n The JavaScript classes also support private members \u2014 properties and methods that can only be accessed from within the class that defines them. They are created by prefixing a hash Also Read: What are Events in JavaScript? A Complete Guide<\/a><\/em><\/strong><\/p>\n\n\n\n In JavaScript, methods are essentially functions that are stored as object properties. They operate on the data contained within the object and can be invoked using the dot notation. <\/p>\n\n\n\n JavaScript methods allow developers to perform actions on objects and manipulate object data.<\/p>\n\n\n\n In the above example, Must Read: Java vs JavaScript: Top 3 Comparisons<\/a><\/em><\/strong><\/p>\n\n\n\n JavaScript offers a plethora of built-in methods that can be used on different data types. These methods can be broadly classified into:<\/p>\n\n\n\n Explore: JavaScript Modules: A Comprehensive Guide<\/a><\/em><\/strong><\/p>\n\n\n\nconst person = {\n name:'John',\n age:30,\n hobbies:[\n 'reading','playing','sleeping'\n ],\n greet:function(){\n console.log('Hello World')\n }\n}<\/strong><\/code><\/pre>\n\n\n\n1) Creating JavaScript Objects<\/h3>\n\n\n\n
\n
const person = {\n name:'John',\n age:30,\n hobbies:[\n 'reading','playing','sleeping'\n ],\n greet:function(){\n console.log('Hello World')\n }\n}<\/strong><\/code><\/pre>\n\n\n\nperson<\/code> is an object with properties name<\/code>, age<\/code>, hobbies<\/code>, and a method greet<\/code>.<\/p>\n\n\n\n2) Adding Properties to JavaScript Objects<\/h3>\n\n\n\n
gender<\/code> property to our person<\/code> object:<\/p>\n\n\n\nperson.gender = 'male';<\/strong><\/code><\/pre>\n\n\n\nname<\/code> property of the person<\/code> object now has the value ‘David’.<\/p>\n\n\n\n3) Deleting Object Properties<\/h3>\n\n\n\n
delete<\/code> operator in JavaScript removes a property from an object. If the object inherits a property from a prototype, and you delete the property from the object, the object will continue to use the inherited property.<\/p>\n\n\n\ndelete person.gender;<\/strong><\/code><\/pre>\n\n\n\ngender<\/code> property is now removed from the person<\/code> object.<\/p>\n\n\n\n4) Dealing with Object Keys<\/h3>\n\n\n\n
let person = {\n 'first name':'John',\n age:30,\n hobbies:[\n 'reading','playing','sleeping'\n ]\n}<\/strong><\/code><\/pre>\n\n\n\nfirst name<\/code> is a special key because it contains a space. It’s enclosed in quotation marks to avoid a syntax error.<\/p>\n\n\n\n5) Accessing Object Properties<\/h3>\n\n\n\n
\n
objectName.propertyName<\/code><\/li>\n\n\n\nobjectName['propertyName']<\/code><\/li>\n<\/ol>\n\n\n\nconsole.log(person['first name']); \/\/ Outputs: 'John'<\/strong>\n<\/code><\/pre>\n\n\n\n6) Dynamically Setting Properties<\/h3>\n\n\n\n
const userInput ='level';\n\nlet person = {\n 'first name':'John',\n age:30,\n [userInput]: 'see',\n}\nconsole.log(person); \/\/ Outputs: { 'first name': 'John', age: 30, level: 'see' }<\/strong>\n<\/code><\/pre>\n\n\n\n7) Object Method Shorthand<\/h3>\n\n\n\n
let person = {\n name:'John',\n age:30,\n greet(){\n console.log('Hello World')\n }\n}<\/strong>\n<\/code><\/pre>\n\n\n\n8) Advantages of Using Object Short Methods<\/h3>\n\n\n\n
\n
9) The Object Spread Operator<\/h3>\n\n\n\n
...<\/code>) is used to take the properties and values of one object and copy them (spread them) into another object.<\/p>\n\n\n\nlet person = {\n name:'John',\n age:30,\n hobbies:[\n 'reading','playing','sleeping'\n ]\n}\n\nconst person2 ={...person};\nconsole.log(person2.age); \/\/ Outputs: 30<\/strong>\n<\/code><\/pre>\n\n\n\n10) Object Destructuring<\/h3>\n\n\n\n
const person = { name: 'David', age: 39 };\nconst { name, age } = person;\nconsole.log(name); \/\/ Outputs: 'David'\nconsole.log(age); \/\/ Outputs: 39<\/strong><\/code><\/pre>\n\n\n\n11) The
this<\/code> Keyword in JavaScript<\/h3>\n\n\n\nthis<\/code> is a special keyword in JavaScript<\/a> that refers to the context in which a function is called. In the context of an object method, this<\/code> refers to the object the method is called on.<\/p>\n\n\n\nlet person = {\n name:'John',\n age:30,\n greet:function(){\n return `My name is ${this.name}, and my age is ${this.age} years old`;\n },\n}\nconsole.log(person.greet()); \/\/ Outputs: 'My name is John, and my age is 30 years old.'<\/strong>\n<\/code><\/pre>\n\n\n\nGetting on with Classes in JavaScript<\/h2>\n\n\n\n
1) Understanding Prerequisites<\/h3>\n\n\n\n
\n
2) The Advent of Classes in JavaScript<\/h3>\n\n\n\n
2.1) The Essence of JavaScript Classes<\/h4>\n\n\n\n
2.2) The Role of Constructors in Classes<\/h4>\n\n\n\n
3) Advantages of Using JavaScript Classes<\/h3>\n\n\n\n
\n
4) Creating a Class in JavaScript<\/h3>\n\n\n\n
class<\/code> keyword followed by the name of the class. The methods and properties are defined inside the class using the constructor<\/code> function. For example:<\/p>\n\n\n\nclass Car {\n constructor(make, model, year) {\n this.make = make;\n this.model = model;\n this.year = year;\n }\n \n drive() {\n console.log(this.make + ' ' + this.model + ' is driving...');\n }\n}<\/strong>\n<\/code><\/pre>\n\n\n\nCar<\/code> class, make<\/code>, model<\/code>, and year<\/code> are properties, and drive<\/code> is a method. The constructor<\/code> function is automatically called when a new object is created from the class.<\/p>\n\n\n\n5) Instantiating a Class<\/h3>\n\n\n\n
new<\/code> keyword followed by the class name and any necessary arguments. For example:<\/p>\n\n\n\nlet myCar = new Car('Toyota', 'Camry', 2005);<\/strong>\n<\/code><\/pre>\n\n\n\nmyCar<\/code> object is an instance of the Car<\/code> class.<\/p>\n\n\n\n6) Class Inheritance<\/h3>\n\n\n\n
extends<\/code> keyword.<\/p>\n\n\n\nTruck<\/code> class that has all the properties and methods of the Car<\/code> class, plus a tow<\/code> method.<\/p>\n\n\n\nclass Truck extends Car {\n constructor(make, model, year) {\n super(make, model, year);\n }\n\n tow() {\n console.log(this.make + ' ' + this.model + ' is towing...');\n }\n}<\/strong><\/code><\/pre>\n\n\n\nTruck<\/code> class, the super<\/code> keyword is used to call the constructor of the parent class. This ensures that the Truck<\/code> class has all the properties of the Car<\/code> class.<\/p>\n\n\n\n7) Advanced Concepts in JavaScript Classes<\/h3>\n\n\n\n
7.1) Abstract Functions and Inheritance<\/h4>\n\n\n\n
extends<\/code> keyword.<\/p>\n\n\n\n7.2) Static Keywords in JavaScript<\/h4>\n\n\n\n
static<\/code> keyword in JavaScript defines a static method for a class. Static methods aren’t called on instances of the class. Instead, they’re called on the class itself.<\/p>\n\n\n\n7.3) Private Members in JavaScript<\/h4>\n\n\n\n
#<\/code> to their names.<\/p>\n\n\n\nIntroduction to JavaScript Methods<\/h2>\n\n\n\n
let person = {\n firstName: \"John\",\n lastName : \"Doe\",\n fullName : function() {\n return this.firstName + \" \" + this.lastName;\n }\n};<\/strong>\n<\/code><\/pre>\n\n\n\nfullName<\/code> is a method of the person<\/code> object, and it returns the full name of the person.<\/p>\n\n\n\n1) Types of JavaScript Methods<\/h3>\n\n\n\n
\n
push()<\/code>, pop()<\/code>, shift()<\/code>, unshift()<\/code>, splice()<\/code>, slice()<\/code>, sort()<\/code>, filter()<\/code>, map()<\/code>, etc. These methods allow developers to manipulate array elements effectively.<\/li>\n\n\n\ncharAt()<\/code>, concat()<\/code>, indexOf()<\/code>, slice()<\/code>, split()<\/code>, toLowerCase()<\/code>, toUpperCase()<\/code>, etc., provide a way to manipulate and work with strings.<\/li>\n\n\n\ntoString()<\/code>, toExponential()<\/code>, toFixed()<\/code>, toPrecision()<\/code>, valueOf()<\/code>, etc., are used to manipulate numbers.<\/li>\n\n\n\ngetDate()<\/code>, getDay()<\/code>, getFullYear()<\/code>, getHours()<\/code>, getMinutes()<\/code>, etc.<\/li>\n<\/ul>\n\n\n\n2) Understanding
this<\/code> in JavaScript Methods<\/h3>\n\n\n\n