Simple JavaScript Object and Class Examples

In JavaScript, most things are objects. An object is a collection of related data and/or functionality

Namespace: Everything you create in JavaScript is by default global. In JavaScript namespace is Global object.
How to create a namespace in JavaScript?
Create one global object, and all variables, methods, and functions become properties of that object.
Example: 
// global namespace
var MYAPP = MYAPP || {};
Explaination: Here we first checked whether MYAPP is already defined.If yes, then use the existing MYAPP global object, otherwise create an empty object called MYAPP

How to create sub namespaces?
// sub namespace
MYAPP.event = {};

Class
JavaScript is a prototype-based language and contains no class statement.JavaScript classes create simple objects and deal with inheritance.

Example:
var Person = function () {};
Explaination: Here we define a new class called Person with an empty constructor.

Use the class keyword
class Calculation {};
A class expression is another way to define a class. Class expressions can be named or unnamed.
// unnamed
var Calculation = class {};

// named
var Calculation = class Calculation { };

Function based classes

function Calculation() { }
// associate method to class
Calculation.prototype.square = function() {
  return this;
}
Calculation.cube = function() {
  return this;
}

let obj = new Calculation();
let square = obj.square;
square(); // global object

let cube = Calculation.cube;
cube(); // global object

Sub classing with extends
class Teacher { 
  constructor(name) {
    this.name = name;
  }
  
  attendance() {
    console.log(this.name + ' teacher present.');
  }
}

class Student extends Teacher {
  attendance() {
    console.log(this.name + ' student present.');
  }
}

var d = new Student('Sudhir');
d.attendance(); // Sudhir student present.


JavaScript object
A JavaScript object is a collection of named values
var address = {city:"Noida", state:"Uttar Pradesh", country:"India"};
To access city use : address.city;

Or you can create using new keyword

var address = new Object();
address.city = "Noida";
address.state = "Uttar Pradesh";
address.country = "India";

Note:JavaScript objects are mutable.Any changes to a copy of an object will also change the original.Every object in JavaScript is an instance of the object Object and therefore inherits all its properties and methods.
Example:
var address = {city:"Noida", state:"Uttar Pradesh", country:"India"}
var x = address;
x.state = "Delhi";
document.getElementById("demo").innerHTML =
address.city + " is " + address.state + " state.";

Constructor
In JavaScript the function serves as the constructor of the object, therefore there is no need to explicitly define a constructor method.
Example:
var Person = function () {
  console.log('instance created');
};

var person1 = new Person();
Example:
function Person(name) {
  this.name = name;
}
var thePerson = new Person('Redwood');
console.log('thePerson.constructor is ' + thePerson.constructor);

This example displays the following output:

thePerson.constructor is function Tree(name) {
  this.name = name;

} 

The methods
To define a method, assign a function to a named property of the class's prototype property.
Example:
var Person = function (firstName) {
  this.firstName = firstName;
};

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.firstName);
};
var person1 = new Person("Alice");
person1.sayHello();

var helloFunction = person1.sayHello;
helloFunction.call(person1);

For loop in JavaScript
var address = {fname:"Noida", state:"Uttar Pradesh", country:"India"}; 
for (x in address) {
txt += address[x];
}


JavaScript object method: 
var address = {
    city: "Noida",
    state:"Uttar Pradesh", 
    country:"India"
   fullAddress : function() {
        return this.city + " " + this.state + " " + this.country;
   }
};
address.fullAddress(); // returns fullAddress

JavaScript Prototypes
A prototype is an object from which other objects inherit properties.Every object has a prototype by default.

Adding Methods to a Prototype
Example: 
function Address(city, state) {
     this.city = city;
     this.state = last;
     this.cityState = function() {
         return this.city + " " + this.state
      };
}

Address.prototype.location = function() {
return this.city*this.state;
}

var myAddress = new Address("Noida", "Delhi");
myAddress.cityState(); 
myAddress.location(); // It will return Noida Delhi

Using the prototype Property

JavaScript prototype property allows you to add new properties to an existing prototype
Example: Address.prototype.nationality = "English";

Place the javascript function inside a variable
var consoleOutput = function consoleOutput()
{
console.log('Hello Sudhir');
}

Bind a function with event javascript
document.getElementsByClassName("inner-heading")[0].addEventListener("click", consoleOutput);

Same thing can be done by using jquery
$(".inner-heading").click(consoleOutput);


Lets us take real example for bootstrap notification
var flashMessage;
flashMessage = flashMessage || (function(){
var loadingDiv = $('<div id="myModal" class="modal fade" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><i class="fa fa-spin fa-spinner fa-5x"></i></div></div></div></div>');
return {
showPleaseWait: function() {
loadingDiv.modal('show');
loadingDiv.on('hidden.bs.modal', function(){
loadingDiv.remove();
});
},
hidePleaseWait: function () {
loadingDiv.modal('hide');
},
alertMessageBox:function(msg,type){
if ($('section').hasClass('_alertDialog')) {
$('._alertDialog').remove();
}
if(type == 'success'){
_curAlertClass = 'alert-success';
_curAlertIcon = 'fa-check';
}else{
_curAlertClass = 'alert-danger';
_curAlertIcon = 'fa-warning';
}

var _dialogContainer = $('<section class="content _alertDialog" style="display:none;"></section>');
var _ele = $('<div class="alert '+ _curAlertClass +' alert-dismissable"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><div class="alert-message"><i class="fa '+_curAlertIcon+'"></i> '+msg+'</div></div>');
_dialogContainer.html(_ele);
$('body').after(_dialogContainer);
_dialogContainer.fadeIn(400);
var _timerId = setTimeout(function() { _dialogContainer.slideUp( 300 ); clearTimeout(_timerId); }, 5000);
}
}
})();

Now How to access its function
flashMessage.showPleaseWait();
flashMessage.hidePleaseWait();

flashMessage.alertMessageBox('<p>This is testing javascript object</p>', 'success');