In this guide i will try to explain the new features of es6 JavaScript focusing in the Object-Oriented Paradigm. First of all, What is a programming paradigm? A paradigm is a example or model of something, so, is a pattern to follow for, in this case, create computer programms. What is Object-Oriented? Obviously you realize that is a programming paradigm, but like exist this option we have a lot of other options like functional programming, reactive programming etc. What are the characteristics of this paradigm? What we do in this paradigm is to program in a way closer to reality, we program in terms of classes, objects, methods, properties, etc., and especially integrates terms such as: abstraction, escapsulation, modularity, privacy, polymorphism, inheritance, etc. The problem with JavaScript is that is not so a POO language, why? because in JavaScript all is a object, so we can fix this using the famous prototype. In ES5 we can do the next sample using the factory pattern: console.log('*** PERSON ***'); function Person (name) {this.name = name;} Person.prototype = {eyes: 2,mouth: 1,sleep: function () {return 'zzz';}}; const p1 = new Person('Nick');// and we can do:console.log(`name: ${p1.name}`,`eyes: ${p1.eyes}`,`mouth: ${p1.mouth}`,p1.sleep()); // We define our properties/methods // We create a person console.log('*** EMPLOYEE ***') function Employee (name, salary) {this.name = name;this.salary = salary;} Employee.prototype = Object.create(Person.prototype);Employee.prototype.constructor = Employee; const em1 = new Employee('John', 3000); console.log(`name: ${em1.name}`,`salary: ${em1.salary} USD`,`eyes: ${em1.eyes}`,`mouth: ${em1.mouth}`,em1.sleep()); // But now, if we have a employee 'class' we can inheritance person's properties. // Prototype Inheritance // Set his own constructor// So now, we just can do the same thing// We create a employee // and we can do: Now in ES6 we can do all of this in a simple way, but we must remember that is just syntactic sugar: The last example with ES6 syntac. class Person {constructor (name) {this.name = name;this.eyes = 2;this.mouth = 1;}sleep () {return 'zzz';}} class Employee extends Person {constructor (name, salary) {super(name);this.salary = salary;}} const p1 = new Person('Nick');// and we can do:console.log(`name: ${p1.name}`,`eyes: ${p1.eyes}`,`mouth: ${p1.mouth}`,p1.sleep()); const em1 = new Employee('John', 3000); console.log(`name: ${em1.name}`,`salary: ${em1.salary} USD`,`eyes: ${em1.eyes}`,`mouth: ${em1.mouth}`,em1.sleep()); // We create a employee // and we can do: In this case, with the keyword we just say: ‘Alright i want to inhertanced the Person class propierties’. But behind the scenes this is the same that we did in the es5 example using prototypes. extends Static Methods: class Dog {static whatIs() {return 'A dog is a beatiful animal';}} // So, with static we can access to methods without the need to instantiate a new object of the class.console.log( Dog.whatIs() ); Private Methods In JavaScript we don’t have the private keyword like Java and C# have, something important is that in JavaScript we have a convention to use for values, that convention is to let me show you: ‘private’ use a underscore before the word, class Person {constructor (name, phone) {this.name = name;this._phone = phone;}}const p1 = new Person('John', 544342212);// But 'phone' is not a private propertie because we can do this:console.log(p1._phone); Nevertheless in ES6 we have a object call WeakMap that allows us to create private propierties, let’s see: const secret = new WeakMap();class Person {constructor (name, phone) {this.name = name;secret.set(this, {_phonenumber: phone});}}const p1 = new Person('John', 544342212); console.log(p1._phone); // Don't use private like variable name because is a reserved word // Now the phonenumber is a private propertie. // Print's undefined Getters and Setters When we have private methods is usual that create a public method that return the private value, so we have get to return a value and set to define a new value. const secret = new WeakMap();class Person {constructor (name, phone) {this.name = name;secret.set(this, {_phonenumber: phone});}get phoneNumber() {return secret.get(this)._phonenumber;}set phoneNumber(newNumber) {secret.get(this)._phonenumber = newNumber;}}const p1 = new Person('John', 544342212); console.log(p1.phoneNumber); // Now we can access to the phone by using the getter: // Print's the number// Set a new number ; // We get the new number p1.phoneNumber = 432232323;console.log(p1.phoneNumber) Polymorphism Is the ability for an object during execution, to reference either an occurrence of his class or an occurrence of any of his descendants classes. Descendants classes may redefine a method. class Person {constructor(name) {this.name = name;}me() {return `My name is ${this.name}`;}}const axel = new Person('Axel');console.log(axel.me());// ->  'My name is Axel'class Employee extends Person {constructor (name, salary) {super(name);this.salary = salary;}me() {return `My name is ${this.name} and my salary is ${this.salary}`;}} const nick = new Employee('Nick', 3000);console.log(nick.me());// ->  'My name is Nick and my salary is 3000' Some Concepts: Creation of a new class/model. function inside a class. Method that initializes an object when the class is instantiated. Used for set a inheritance. Method that set the inheritance properties calling the father. constructor. The supe must be in the first line of the constructor method. Method to return a value. Method to re-define a new existing value. Creation of an object by the class constructor method. class: method: constructor: extends: super: get: set: new: You can go to my to find JavaScript examples. Github Thank you 😊!

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The Little Guide for OOP in JS

Too Long; Didn't Read

Company Mentioned

Germán Cutraro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The Little Guide for OOP in JS

Too Long; Didn't Read

Company Mentioned

Germán Cutraro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES