revision:
OOP is a programming paradigm based on the concept of "objects", which may contain data, in the form of fields, often known as attributes; and code, in the form of procedures, often known as methods.
For example, a person is an object which has certain properties such as height, gender, age, etc. It also has certain methods such as move, talk, and so on.
name:
, mobile number:
, landline number:
<div><p>name: <span id="OOP-1"></span><p>,
mobile number: <span id="OOP-2"></span></p><p>,
landline number: <span id="OOP-3"></span></p></div>
<script>
let person = {
first_name:'Eric',
last_name: 'Verbeeck',
//method
getFunction : function(){
return (`the name of the person is ${person.first_name} ${person.last_name}`)
},
//object within object
phone_number : {
mobile:"12345",
landline:"6789"
}
}
document.getElementById("OOP-1").innerHTML = person.getFunction();
document.getElementById("OOP-2").innerHTML = person.phone_number.mobile;
document.getElementById("OOP-3").innerHTML = person.phone_number.landline;
</script>
name:
, name:
<div><p>name: <span id="OOP-4"></span><p>, name: <span id="OOP-5"></span></p></div>
<script>
function personA(fname,lname){
this.fname = fname;
this.lname = lname;
}
//creating new instances of person object
let person1 = new personA('Eden','Hazard');
let person2 = new personA('Romelu','Lukaku');
document.getElementById("OOP-4").innerHTML = person1.fname + " " + person1.lname;
document.getElementById("OOP-5").innerHTML = `${person2.fname} ${person2.lname}`;
</script>
statement:
<div><p>statement: <span id="OOP-6"></span><p><span id="OOP-7"></span></p></div>
<script>
const coder = {
isStudying : false,
printIntroduction : function(){
document.getElementById("OOP-6").innerHTML = `my name is ${this.name}. Am I studying?: ${this.isStudying}.`
}
}
// Object.create() method
const me = Object.create(coder);
// "name" is a property set on "me", but not on "coder"
me.name = 'Vanhimst';
// Inherited properties can be overwritten
me.isStudying = true;
me.printIntroduction();
</script>
<div><p id="OOP-8"></p></div>
<script>
var personB = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
document.getElementById("OOP-8").innerHTML = personB.firstName + " is " + personB.age + " years old.";
</script>
<div><p id="OOP-9"></p></div>
<script>
var personC = new Object();
personC.firstName = "John";
personC.lastName = "Doe";
personC.age = 50;
personC.eyeColor = "blue";
document.getElementById("OOP-9").innerHTML = personC.firstName + " is " + personC.age + " years old.";
</script>
bike one:
, bike 2 maker:
, bike one, details:
<div>
<p>bike one: <span id="OOP-10"></span>
<p>, bike 2 maker: <span id="OOP-11"></span></p>
<p> , bike one, details: <span id="OOP-12"></span></p>
</div>
<script>
class Vehicle {
constructor(name, maker, engine) {
this.name = name;
this.maker = maker;
this.engine = engine;
}
getDetails(){
return (`the name of the bike is ${this.name}.`)
}
}
// Making object with the help of the constructor
let bike1 = new Vehicle('Hayabusa', 'Suzuki', '1340cc');
let bike2 = new Vehicle('Ninja', 'Kawasaki', '998cc');
document.getElementById("OOP-10").innerHTML = bike1.name; // Hayabusa
document.getElementById("OOP-11").innerHTML = bike2.maker; // Kawasaki
document.getElementById("OOP-12").innerHTML = bike1.getDetails();
</script>
<div><p id="OOP-13"></p></div>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
myCar = new Car("Ford", 2014);
document.getElementById("OOP-13").innerHTML = myCar.name + " " + myCar.year;
</script>
<div><p id="OOP-14"></p></div>
<script>
class Car2 {
constructor(name1, year1) {
this.name1 = name1;
this.year1 = year1;
}
age() {
let date = new Date();
return date.getFullYear() - this.year1;
}
}
let myCar = new Car2("Ford", 2015);
document.getElementById("OOP-14").innerHTML = "my car is " + myCar.age() + " years old.";
</script>
<div><p id="OOP-15"></p></div>
<script>
class Car3 {
constructor(name3, year3) {
this.name3 = name3;
this.year3 = year3;
}
age(x) {
return x - this.year3;
}
}
let date3 = new Date();
let year3 = date3.getFullYear();
let myCar3 = new Car3("Ford", 2012);
document.getElementById("OOP-15").innerHTML= "My car is " + myCar3.age(year3) + " years old.";
</script>
name:
, marks:
<div><p>name: <span id="OOP-16"></span><p>, marks: <span id="OOP-17"></span></p></div>
<script>
class Student{
constructor(){ var name4; var marks;}
getName(){return this.name4;}
setName(name4){this.name4=name4;}
getMarks(){return this.marks;}
setMarks(marks){this.marks=marks;}
}
var stud=new Student();
stud.setName("Kelvin");
stud.setMarks(85);
document.getElementById("OOP-16").innerHTML = stud.getName();
document.getElementById("OOP-17").innerHTML = stud.getMarks();
</script>
<div><p><span id="OOP-18"></span><p><span id="OOP-19"></span></p></div>
<script>
class Emp_details{
constructor(name5,id){
this.name5 = name5;
this.id = id;
}
add_Address(add){
this.add = add;
}
getDetails(){
document.getElementById("OOP-18").innerHTML = (`Employee name: ${this.name5}, ID: ${this.id}, address: ${this.add}`);
}
}
let person11 = new Emp_details('Armand',27);
person11.add_Address('Belgium');
person11.getDetails();
</script>
<div><p><span id="OOP-19"></span><p><span id="OOP-20"></span></p></div>
<script>
class person_B{
constructor(name,id){
this.name = name;
this.id = id;
}
add_Address(add){
this.add = add;
}
getDetails(){
document.getElementById("OOP-19").innerHTML = (`Name is ${this.name}, address is: ${this.add}`);
}
}
let person22 = new person_B('Charles',21);
person22.add_Address('Belgium');
person22.getDetails();
</script>
<div><p><span id="OOP-22"></span><p><span id="OOP-23"></span></p></div>
<script>
class persons{
constructor(name){
this.name = name;
}
//method to return the string
toString(){
return (`name of person: ${this.name}`);
}
}
class student extends persons{
constructor(name,id){
//super keyword to for calling above class constructor
super(name);
this.id = id;
}
toString(){
return (`${super.toString()},student ID: ${this.id}`);
}
}
let student1 = new student('Kris',22);
document.getElementById("OOP-22").innerHTML = (student1.toString());
</script>
<div><p><span id="OOP-24"></span><p><span id="OOP-25"></span></p></div>
<script>
class Human{
constructor(name, age){
this.name = name;
this.age = age;
}
greet(){
return `my name is ${this.name} and I am ${this.age} years old`;
}
}
class Programmer extends Human{
constructor(name, age, language){
super(name, age);
this.language = language;
}
program(){
return `I am programming in ${this.language}...`;
}
}
const programmer = new Programmer("Guy",34,"JS")
document.getElementById("OOP-24").innerHTML = (`${programmer.greet()} <br> ${programmer.program()}`);
</script>
<p class="example">example 1: polymorphism - overriding the method</p>
<div><p><span id="poly"></span><p><span id="poly1"></span></p></div>
<script>
class Humans{
constructor(name, age){
this.name = name;
this.age = age;
}
greet(){
return `my name is ${this.name} and I am ${this.age} years old`;
}
}
class Programmers extends Humans{
constructor(name, age, language){
super(name, age);
this.language = language;
}
program(){
return `I am programming in ${this.language}...`;
}
greet(){
return `Hi there! My name is ${this.name} and I am ${this.age} years old.`;
}
}
const programmer_A = new Programmers("Tamara",27,"JS")
document.getElementById("poly").innerHTML = (`${programmer_A.greet()} <br> ${programmer_A.program()}`);
</script>
<div>
<div><p><span id="poly2"></span><p></div>
<div><p><span id="poly3"></span></p></div>
</div>
<script>
class Human1{
constructor(name1, age1){
this.name1 = name1;
this.age1 = age1;
}
greet(){
return `my name is ${this.name1} and I am ${this.age1} years old`;
}
}
class Programmer1 extends Human1{
constructor(name1, age1, language1){
super(name1, age1);
this.language1 = language1;
}
program(){
return `I am programming in ${this.language1}...`;
}
greet(){
return `Hi there! ${super.greet1()}`;
}
}
const programmer1 = new Programmer("Tamara",27,"JS")
document.getElementById("poly2").innerHTML = (`${programmer1.greet()} <br> ${programmer1.program()}`);
const human1 = new Human1("Leona", 34);
document.getElementById("poly3").innerHTML = human1.greet();
</script>
<div>
<div><p><span id="poly4"></span><p></div>
<div><p><span id="poly5"></span></p></div>
</div>
<script>
class Shape {
area() {return 0;}
toString() {return Object.getPrototypeOf(this).constructor.name;
}
}
class Circle extends Shape {
constructor(r) {
super();
this.radius = r;
}
area() {return Math.PI * this.radius ** 2;}
}
class Rectangle extends Shape {
constructor(w, h) {
super();
this.width = w;
this.height = h;
}
area() {return this.width * this.height;}
}
class Triangle extends Shape {
constructor(b, h) {
super();
this.base = b;
this.height = h;
}
area() {return this.base * this.height / 2;}
}
function cumulateShapes(shapes) {
return shapes.reduce((sum, shape) => {
if (shape instanceof Shape) {
document.getElementById("poly4").innerHTML = (`Shape: ${shape.toString()} - area: ${shape.area()}`);
return sum + shape.area()
}
throw Error('Bad argument shape.');
}, 0);
}
const shapes = [new Circle(3), new Rectangle(2, 3), new Triangle(3, 4), new Circle(2)];
document.getElementById("poly5").innerHTML = (cumulateShapes(shapes));
</script>
<div><p><span id="poly6"></span><p></div>
<div><p><span id="poly7"></span></p></div>
<script>
let book1 = function () {}
book1.prototype.summary = function() {
return "summary of book1"
}
let book2 = function() {}
book2.prototype = Object.create(book1.prototype);
book2.prototype.summary = function() {
return "summary of book2"
}
let book3 = function() {}
book3.prototype = Object.create(book1.prototype);
book3.prototype.summary = function() {
return "summary of book3"
}
var books = [new book1(), new book2(), new book3()];
books.forEach(function(book){
document.getElementById("poly6").innerHTML = (book.summary());
document.getElementById("poly7").innerHTML = (book.summary());
console.log(book.summary());
});
</script>
<div>
<div><p><span id="ab1"></span><p></div>
<div><p><span id="ab2"></span></p></div>
<div><p><span id="ab3"></span></p></div>
</div>
<script>
const Book = function(getTitle, getAuthor) {
let title = getTitle;
let author = getAuthor;
this.giveTitle = function() {
return title;
}
const summary = function() {
return `${title} written by ${author}.`
}
this.giveSummary = function() {
return summary()
}
}
const bookA = new Book('Hippie', 'Paulo Coelho');
document.getElementById("ab1").innerHTML = bookA.giveTitle();
document.getElementById("ab2").innerHTML = bookA.summary;
document.getElementById("ab3").innerHTML = bookA.giveSummary();
</script>
<div>
<div><p><span id="ab4"></span><p></div>
<div><p><span id="ab5"></span></p></div>
<div><p><span id="ab6"></span></p></div>
</div>
<script>
function personC(fname,lname){
let firstname = fname;
let lastname = lname;
let getDetails_noaccess = function(){
return (`First name is: ${firstname} Last name is: ${lastname}`);
}
this.getDetails_access = function(){
return (`First name is: ${firstname}, Last name is: ${lastname}`);
}
}
let person1A = new personC('Van Remoortel','Jaak');
document.getElementById("ab4").innerHTML = person1A.firstname;
document.getElementById("ab5").innerHTML = person1A.getDetails_noaccess;
document.getElementById("ab6").innerHTML = person1A.getDetails_access();
console.log(person1A.firstname);
console.log(person1A.getDetails_noaccess);
console.log(person1A.getDetails_access());
</script>
Object.entries() method is used to return an array consisting of enumerable property [key, value] pairs of the object, which are passed as the parameter. The ordering of the properties is the same as that given by looping over the property values of the object manually.
Syntax: Object.entries(obj)
Object.values() method in JavaScript returns an array whose elements are the enumerable property values found on the object.
Syntax: Object.values(obj)
examples : Object.values(), Object.entries()
<div>
<p class="spec" id="values_01"></p>
<p class="spec" id="entries_01"></p><br>
<p class="spec" id="values_02"></p>
<p class="spec" id="entries_02"></p>
</div>
<script>
var object = { 0: '23', 1: 'JS projects', 2: 'true' };
document.getElementById("values_01").innerHTML = "Object values: " + Object.values(object);
console.log(Object.values(object));
document.getElementById("entries_01").innerHTML = "Object entries: " + Object.entries(object);
console.log(Object.entries(object));
const obj_Z = { foo: 'bar', baz: 42 };
document.getElementById("values_02").innerHTML = "Object values: " + Object.values(obj_Z);
console.log(Object.values(obj_Z));
document.getElementById("entries_02").innerHTML = "Object entries: " + Object.entries(obj_Z);
console.log(Object.entries(obj_Z));
</script>
returns an array of [key, value] pairs.The main difference between the "Object.entries() method" and the "for...in loop" is that the "for...in loop" also enumerates object properties in the prototype chain.
code:
<div class="grid spec">
<div>
<p class="spec" id="entries_03"></p><br>
<p class="spec" id="entries_04"></p><br>
<p class="spec" id="entries_05"></p><br>
<p class="spec" id="entries_06"></p>
</div>
<script>
const ssn = Symbol('ssn');
const person_ZZ = {
firstName: 'John',
lastName: 'Doe',
age: 25,
[ssn]: '123-345-789'
};
const kv = Object.entries(person_ZZ);
document.getElementById("entries_03").innerText = "person's details: " + kv;
console.log(kv);
const obj1 = { 0: "A", 1: "B", 2: "C" };
document.getElementById("entries_04").innerHTML = "Object.entries : " + Object.entries(obj1);
console.log(Object.entries(obj1));
const obj2 = { 42: "a", 22: "b", 71: "c" };
// [ [ '22', 'b' ], [ '42', 'a' ], [ '71', 'c' ] ] -> arranged in numerical order of keys
document.getElementById("entries_05").innerHTML = "Object.entries: " + Object.entries(obj2);
console.log(Object.entries(obj2));
</script>
The Object.values() returns an array of values, which contains the given object's own enumerable property values, in the same order as that provided by a "for...in loop".
code:
<div>
<p class="spec" id="values_03"></p><br>
<p class="spec" id="values_04"></p><br>
<p class="spec" id="values_05"></p><br>
<p class="spec" id="values_06"></p>
</div>
<script>
const obj4 = { foo: 'bar', baz: 42 };
document.getElementById("values_03").innerHTML = Object.values(obj4);
console.log(Object.values(obj4));
const object1 = {
a: 'Rahul',
b: 0,
c:false
};
document.getElementById("values_04").innerHTML = Object.values(object1);
console.log(Object.values(object1));
Object.values = function(object) {
var values = [];
for(var property in object) {
values.push(object[property]);
}
return values;
}
var foo = {a:1, b:2, c:3};
document.getElementById("values_05").innerHTML = Object.values(foo);
console.log(Object.values(foo));
</script>
Cloning in javascript is nothing but copying an object properties to another object so as to avoid creating an object that already exists.
There are a few ways to clone a javascript object: 1/ iterating through each property and copy them to a new object; 2/ using JSON method; 3/ using object.assign() method.
<div>
<p class="spec" id="source-1"></p>
<p class="spec" id="cloning-1"></p>
<p class="spec" id="source-1_1"></p>
<p class="spec" id="cloning-1_1"></p>
</div>
<script>
// 1
const sourceObject = {name:"Ernst", age:23, salary:25000};
document.getElementById("source-1").innerHTML = "1/ sourceObject: name =
" + sourceObject.name + " , age = " + sourceObject.age + " , salary = "
+ sourceObject.salary;
let requiredObj = {};
for (let pro in sourceObject) {
if (sourceObject.hasOwnProperty(pro)) {
requiredObj[pro] = sourceObject[pro];
}
}
document.getElementById("cloning-1").innerHTML = "targetObject: name = "
+ requiredObj.name + ", age = " + requiredObj.age + ", salary = " + requiredObj.salary;
// 2
let user = {name: "John", age: 30};
document.getElementById("source-1_1").innerHTML = "2/ user: name:" +user.name
+ ", age: " + user.age;
let clone = {}; // the new empty object
for (let key in user) {
clone[key] = user[key];
}
clone.name = "Pete"; //
document.getElementById("cloning-1_1").innerHTML = "user: name: " + user.name;
</script>
<div>
<p class="spec" id="source-1A"></p>
<p class="spec" id="cloning-1A"></p>
<p class="spec" id="source-1B"></p>
<p class="spec" id="cloning-1B"></p>
</div>
<script>
let object = { a: 2, b: 3,};
document.getElementById("source-1A").innerHTML = "1/ object: -> a: "
+ object.a + " , b:" + object.b;
let copy = object;
// object.a = 5;
document.getElementById("cloning-1A").innerHTML = "copy: -> a: "
+ copy.a + " , b:" + copy.b;
</script>
2/ objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }]
<div>
<p class="spec" id="source-2"></p>
<p class="spec" id="cloning-2"></p>
<p class="spec" id="source-2_1">2/ objsArr = [{ name: "John Doe" },
{ name: "Roy Daniel" }]</p>
<p class="spec" id="cloning-2_1"></p>
</div>
<script>
// 1
const sourceObject1 = {name:"Sarah", age:31, salary:35000};
document.getElementById("source-2").innerHTML = "1/ source: name =" +
sourceObject1.name + ", age = " + sourceObject1.age + ", salary = " +
sourceObject1.salary;
let requiredObj1 = {};
requiredObj1 = JSON.parse(JSON.stringify(sourceObject1));
document.getElementById("cloning-2").innerHTML = "targetObject:
name = "+ requiredObj1.name + ", age = " + requiredObj1.age + ", salary
= " + requiredObj1.salary;
// 2
const objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }];
// first convert the array into a string using the JSON.stringify()
method
const objsArrStr = JSON.stringify(objsArr);
// convert the string again to array of objects using the JSON.parse()
method
const objsArrDeepCopy = JSON.parse(objsArrStr);
document.getElementById("cloning-2_1").innerHTML = "objsArrDeepCopy: "+
toString(objsArrDeepCopy);
console.log(objsArrDeepCopy);
// copied array of objects -> [{ name: "John Doe" }, { name: "Roy Daniel" }]
</script>
<div>
<p class="spec" id="source-2A"></p>
<p class="spec" id="cloning-2A"></p>
</div>
<script>
var bob = {name: "Bob", age: 32};
var bill = (JSON.parse(JSON.stringify(bob)));
bill.name = "Bill";
document.getElementById("source-2A").innerHTML = "source: name = "
+ bob.name + ", age = " + bob.age;
document.getElementById("cloning-2A").innerHTML = "target: name = "
+ bill.name + ", age = " + bob.age;
</script><div>
<p class="spec" id="source-2A"></p>
<p class="spec" style="margin-left: 6vw;" id="cloning-2A"></p>
</div>
<script>
var bob = {name: "Bob", age: 32};
var bill = (JSON.parse(JSON.stringify(bob)));
bill.name = "Bill";
document.getElementById("source-2A").innerHTML = "source: name = "
+ bob.name + ", age = " + bob.age;
document.getElementById("cloning-2A").innerHTML = "target: name = "
+ bill.name + ", age = " + bob.age;
</script>
<div>
<p class="spec" id="source-3"></p>
<p class="spec" id="cloning-3"></p>
<p class="spec" id="source-3_1"></p>
<p class="spec" id="cloning-3_1"></p>
<p class="spec" id="source-3_2"></p>
<p class="spec" id="cloning-3_2"></p>
<p class="spec" id="source-3_3"></p>
<p class="spec" id="cloning-3_3"></p>
<p class="spec" id="cloning-3_4"></p>
</div>
<script>
// 1
const sourceObject2 = {name:"Theodore", age:53, salary:35500};
document.getElementById("source-3").innerHTML = "1/ sourceObject: name ="
+ sourceObject2.name + " , age = " + sourceObject2.age + " , salary = "
+ sourceObject2.salary;
let requiredObj2 = {};
requiredObj2 = Object.assign({}, sourceObject2);
document.getElementById("cloning-3").innerHTML = "targetObject: name =
"+ requiredObj2.name + ", age = " + requiredObj2.age + ",salary = "
+ requiredObj2.salary;
// 2
let obj = { key1: "value1", key2: "value2"};
document.getElementById("source-3_1").innerHTML = "2/ object: key1: "
+ obj.key1 + " , key2: " + obj.key2;
let clonedObject = Object.assign({}, obj);
document.getElementById("cloning-3_1").innerHTML = "cloned object: key1:
" + clonedObject.key1 + " , key2: " + clonedObject.key2;
// 3
let userA = { name: "John", };
document.getElementById("source-3_2").innerHTML = "3/ name: " + userA.name;
let permissions1 = { canView: true };
let permissions2 = { canEdit: true };
// copies all properties from permissions1 and permissions2 into user
Object.assign(userA, permissions1, permissions2);
let txt = "";
for (let x in userA) {
txt += userA[x] + " ";
};
document.getElementById("cloning-3_2").innerHTML = "name: " + userA.name + ",
" + userA.permissions1 + ", " + userA.permissions2;
console.log(userA);
// now user = { name: "John", canView: true, canEdit: true }
// 4
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
document.getElementById("source-3_3").innerHTML = "4/ o1: " + o1.a +", o2: "
+ o2.b + ", o3: " + o3.c;
const objZ = Object.assign(o1, o2, o3);
document.getElementById("cloning-3_3").innerHTML = "obj = " + objZ.a +", "+
objZ.b +", " + objZ.c;
document.getElementById("cloning-3_4").innerHTML = "o1 = " + o1.a +", "+
o1.b +", " + o1.c;
console.log(objZ); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.
</script>
<div>
<p class="spec" id="source-3B"></p>
<p class="spec" id="source-3B_1"></p>
<p class="spec" id="cloning-3B"></p>
<p class="spec" id="source-3C"></p>
<p class="spec" id="cloning-3C"></p>
<p class="spec" id="source-3D"></p>
<p class="spec" id="cloning-3D"></p>
</div>
<script>
// 1
let objectA = {a: 1, b: 2};
document.getElementById("source-3B").innerHTML = "1/ objectA = " + objectA.a +
" , " + objectA.b;
let objectB = {c: 3, d: 4}
document.getElementById("source-3B_1").innerHTML = "objectB = " + objectB.c +
" , " + objectB.d;
Object.assign(objectA, objectB)
document.getElementById("cloning-3B").innerHTML = "objectA = " + objectA.a + ",
" + objectA.b + ", " + objectA.c + "," + objectA.d;
console.log(objectA);
// 2
const person_x = { name: 'John', age: 35, interests: { javascript: true }};
document.getElementById("source-3C").innerHTML = "2/ person: name = " + person_x.name +
" , age = " + person_X.age + ", interests: " + person.interests.object;
const clone1 = Object.assign({}, person_X);
document.getElementById("cloning-3C").innerHTML = "clone: name = " + clone1.name +
", age = " + clone1.age + ", interests:" + clone1.interests.object;
console.log(clone1);
// 3
const o4 = { a: 1, b: 1, c: 1 };
const o5 = { b: 2, c: 2 };
const o6 = { c: 3 };
document.getElementById("source-3D").innerHTML = "3/ 04:a = " + o4.a + ", o4:b = " +
o4.b + ", o4:c = " + o4.c + ", o5:a =" + o5.b + ", o5.c = " + o5.c + ", o6:c = " + o6.c;
const objW = Object.assign({}, o1, o2, o3);
document.getElementById("cloning-3D").innerHTML = "objW:a = " + objW.a + ", objW:b = "
+ objW.b + ", objW:c = " + objW.c;
// console.log(objW); // { a: 1, b: 2, c: 3 }
</script>