{"id":687,"date":"2024-01-16T18:58:00","date_gmt":"2024-01-16T18:58:00","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=687"},"modified":"2024-02-05T10:38:52","modified_gmt":"2024-02-05T10:38:52","slug":"object-oriented-javascript","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/object-oriented-javascript\/","title":{"rendered":"Object Oriented JavaScript"},"content":{"rendered":"\n

Object-oriented programming (OOP) in JavaScript involves creating objects and defining their behavior through methods and properties. JavaScript supports OOP concepts such as encapsulation, inheritance, and polymorphism, although its implementation differs from classical OOP languages like Java or C++. Here’s an overview of OOP in JavaScript:<\/p>\n\n\n\n

1. Objects and Prototypes:<\/h3>\n\n\n\n

JavaScript is a prototype-based language, which means objects inherit properties and methods from other objects. Objects in JavaScript can be created using object literals {}<\/code>, constructor functions, or classes (introduced in ES6).<\/p>\n\n\n\n

Object Literals:<\/h4>\n\n\n\n
let person = {\n  firstName: 'John',\n  lastName: 'Doe',\n  fullName: function() {\n    return this.firstName + ' ' + this.lastName;\n  }\n};<\/code><\/pre>\n\n\n\n
Constructor Functions:<\/h4>\n\n\n\n
function Person(firstName, lastName) {\n  this.firstName = firstName;\n  this.lastName = lastName;\n  this.fullName = function() {\n    return this.firstName + ' ' + this.lastName;\n  };\n}\n\nlet person = new Person('John', 'Doe');<\/code><\/pre>\n\n\n\n
Classes (ES6):<\/h4>\n\n\n\n
class Person {\n  constructor(firstName, lastName) {\n    this.firstName = firstName;\n    this.lastName = lastName;\n  }\n\n  fullName() {\n    return this.firstName + ' ' + this.lastName;\n  }\n}\n\nlet person = new Person('John', 'Doe');<\/code><\/pre>\n\n\n\n
2. Encapsulation:<\/h3>\n\n\n\n
Encapsulation is the bundling of data and methods that operate on the data within a single unit, typically a class or object. In JavaScript, encapsulation can be achieved using closures or private class fields (introduced in ES2022).<\/p>\n\n\n\n
Using Closures:<\/h4>\n\n\n\n
function Counter() {\n  let count = 0;\n\n  this.increment = function() {\n    count++;\n  };\n\n  this.getCount = function() {\n    return count;\n  };\n}\n\nlet counter = new Counter();\ncounter.increment();\nconsole.log(counter.getCount()); \/\/ Output: 1<\/code><\/pre>\n\n\n\n
Private Class Fields (ES2022):<\/h4>\n\n\n\n
class Counter {\n  #count = 0;\n\n  increment() {\n    this.#count++;\n  }\n\n  getCount() {\n    return this.#count;\n  }\n}\n\nlet counter = new Counter();\ncounter.increment();\nconsole.log(counter.getCount()); \/\/ Output: 1<\/code><\/pre>\n\n\n\n
3. Inheritance:<\/h3>\n\n\n\n
Inheritance is the mechanism by which one class (subclass) inherits properties and methods from another class (superclass). In JavaScript, inheritance is implemented using prototypes.<\/p>\n\n\n\n
function Animal(name) {\n  this.name = name;\n}\n\nAnimal.prototype.speak = function() {\n  console.log(this.name + ' makes a noise');\n};\n\nfunction Dog(name) {\n  Animal.call(this, name);\n}\n\nDog.prototype = Object.create(Animal.prototype);\nDog.prototype.constructor = Dog;\n\nDog.prototype.speak = function() {\n  console.log(this.name + ' barks');\n};\n\nlet dog = new Dog('Buddy');\ndog.speak(); \/\/ Output: Buddy barks<\/code><\/pre>\n\n\n\n
4. Polymorphism:<\/h3>\n\n\n\n
Polymorphism allows objects to be treated as instances of their parent class. In JavaScript, polymorphism is achieved through method overriding.<\/p>\n\n\n\n
class Animal {\n  speak() {\n    console.log('Animal makes a noise');\n  }\n}\n\nclass Dog extends Animal {\n  speak() {\n    console.log('Dog barks');\n  }\n}\n\nlet animal = new Animal();\nlet dog = new Dog();\nanimal.speak(); \/\/ Output: Animal makes a noise\ndog.speak(); \/\/ Output: Dog barks<\/code><\/pre>\n\n\n\n
Object-oriented programming in JavaScript provides a flexible and powerful way to structure and organize code, enabling developers to build complex applications with ease. Understanding OOP principles and their implementation in JavaScript is essential for writing maintainable and scalable code.<\/p>\n","protected":false},"excerpt":{"rendered":"
Object-oriented programming (OOP) in JavaScript involves creating objects and defining their behavior through methods and properties. JavaScript supports OOP concepts<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-687","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=687"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/687\/revisions"}],"predecessor-version":[{"id":688,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/687\/revisions\/688"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}