Object Literal vs Object-Oriented Javascript: Comparing the Two

When it comes to using Object-Oriented Programming (OOP) in JavaScript, I often find myself not utilizing it much. For instance, instead of defining a constructor function and setting up prototypes like this:

function Person(name){
return this.name = name;
}

Person.prototype.dateOfBirth = function(){
//some stuff here
}

var John = new Person('John');
console.log(John.dateOfBirth);

I sometimes prefer to group my methods using object literals, as shown below:

    var John = {
    name:'John',
    dateOfBirth: function(){
    // return etc
    }
    }

John.dateOfBirth();

This could be because JavaScript is primarily a client-side language, making OOP seem redundant at times. Have you had different experiences with OOP in JavaScript? Share your thoughts on prototypical inheritance, advanced objects, and any practical use cases you've encountered.

Answer №1

Exploring the concept of the revealing module pattern can provide a valuable insight into maintaining control over what is exposed and what remains private in Object-Oriented Programming. Many find that it offers a level of public/privacy control that aligns with their preferences.

For more information, check out this informative blog post

var User = (function() {

  var username = "anonymous";

  function accountDetails() {
    privateInformationAccess(); 
    console.log( 'accountDetails' );
  }

  function privateInformationAccess() {
    console.log( 'restricted access method' );
  }

  // Only return specific public methods and properties upon instantiation
  return {
    accountDetails : accountDetails,
    username: username
  };

})();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having issues with getting Bootstrap to function properly in my create-react-app

I've been attempting to use traditional Bootstrap instead of react-bootstrap to render my React component, but I can't seem to get it right. I've installed Bootstrap via npm and included the CDN links and scripts as well. Despite trying vari ...

Issue with Jquery 1.10.2 not functioning properly on IE10 with JSON data

I am currently experiencing difficulties with parsing JSON data. The following function is causing errors: parseJSON: function( data ) { //Try to parse using the native JSON parser first if (window.JSON && window.JSON.parse) { retu ...

Storing JSON data from a Github Gist in an array using the AJAX method - a step-by-step guide

I'm experimenting with storing JSON data in a variable and then randomly accessing it. (Superhero Alias Generator) The JSON data can be found on GitHub gist below I decided to try using the ajax method for the first time, but it doesn't seem to ...

Expanding Your jQuery Library from a Content Delivery Network

As of now, I have a jQuery hosted on my FTP along with other web files. YSlow recommends using a CDN for jQuery. However, I am wondering how I can extend that jQuery. Is it possible to add custom functions to it without being able to edit the original co ...

Video is not visible in safari browser initially, but becomes visible only after scrolling for a little while

Having issues with a video not displaying correctly in Safari? The problem is that the video only becomes visible after scrolling the browser window. Want to see an example of this issue in action? Click here and select the red bag. Check out the code sni ...

Avoiding the automatic alphabetical ordering of JSON objects in ReactJS

I'm facing a challenge where JSON is automatically sorting stored data causing a lot of issues for me. Here's the code snippet I'm working with: <FormControl component="fieldset"> <FormLabel component="legend">Days of ...

Customizing a thumbnail script to dynamically resize and display images according to their size properties

I am attempting to modify a simple JavaScript script that enlarges an image from a thumbnail whenever it is clicked. The issue I am facing is that the enlarged image is displayed based on a fixed width size. I want the enlarged image to be displayed accord ...

Eliminate parameter from URL

Here is the URL I am working with: http://my.site/?code=74e30ef2-109c-4b75-b8d6-89bdce1aa860 My goal is to redirect to this URL: http://my.site#/homepage To achieve this, I use the following code snippet: import { push } from 'react-router-redux& ...

Access the value of localStorage when the body has finished loading or when the document is fully

Utilizing jQuery UI 1.12.1 alongside jQuery 3.1.1, I have implemented a function to save the state of two tabs in localStorage under currentIdx: $("#tabs").tabs({ active: localStorage.getItem("currentIdx"), activate: function(event, ui) { localSto ...

The JavaScript Top Slide Down effect is malfunctioning

Every time I press the "More" button, I expect some forms to pop out but nothing happens. Can someone please assist me with this issue? <body> <!--Hero Image--> <div class="hero-image"> <div class="hero ...

Defeat a JavaScript function or turn it into a Singleton Function

Is there a method to stop a running JavaScript function? Or is there a way to make sure that only one instance of the function runs at a time and any previous instances are removed upon restart? For example, if I call: _.defer(heavyDutyPaint); //How ca ...

Google Extension PHP Plugin

Is it feasible to integrate a PHP file into a Google Extension for Chrome? I've been exploring the idea of creating an extension and most resources only mention HTML, CSS, and JavaScript. Any guidance on using PHP in the extension would be highly valu ...

Divide a collection of q promises into batches and execute them sequentially

In order to achieve my objective of copying files while limiting the number of files copied in parallel based on a defined variable, I decided to divide an array of promises using calls to fs.copy into packets. These packets are then executed in series by ...

Most efficient method for comparing two JSON arrays and rearranging their positions

I am faced with a challenge involving two Javascript JSON arrays. The arrays in question are named this.BicyclePartsOLD and this.BicyclePartsNEW. Both arrays contain an attribute named "ListOrder". The OLD array is currently ordered from ListOrder 1 to n ...

combine object with an array attribute

If we have the following objects: let firstObject = {items: ["apple"]}; let secondObject = {items: ["orange"]}; and then execute Object.assign(firstObject, secondObject); the new state will be: firstObject.items[0] //"orange" firstObject.items === sec ...

Troubleshooting: Success with AJAX call in Chrome, but issues in IE

Having issues retrieving JSON data from a URL that displays the last 3 numbers of a webpage. The AJAX call functions correctly in Google Chrome but fails in Internet Explorer. I tried disabling caching using cache: false as suggested, but the problem persi ...

"Utilizing jQuery's getJSON method in a session to fetch data

I have a code snippet that fetches the current number of likes on Facebook like this: $(document).ready(function() { $.getJSON('https://graph.facebook.com/<username>?callback=?', function(data) { var fb_count = data['likes ...

invoking a jquery method through the onClick event handler

How can I make use of jQuery to perform different actions based on which checkbox is clicked? I am encountering an issue where the onClick event is not triggered for any of the checkboxes below. <HTML> <HEAD> <script type="text/javascr ...

Give a class to the element contained within an anchor tag

One way to add a class to the <a>-tag is through this line of code. $("a[href*='" + location.pathname + "']").addClass("active"); However, I am looking to add the class to an li element inside the <a>-tag. What would be the best ap ...

Is it possible to restrict the application of jquery .css() to a particular media query only?

Whenever a user's browser width is below 1160px, a media query is set up to hide my website's right sidebar. They can bring it back by clicking on an arrow icon, causing it to overlap the content with absolute positioning. To achieve this functi ...