Skip to main content

The Class in Javascript - ES 6

In Javascript ES 5,we didn't have class as other languages like Java or C#. However, we use to create a function, in such a way, that it will act as a class. e.g.
function Person(name,age) { 
      this.name = name; 
      this.age = age;
 } 
var person1 = new Person("Alex", 27);
console.log(person1);
  1. Person {name: "Alex", age: 27}
    1. age27
    2. name"Alex"
We already had prototype-based inheritance for class, provided by functions, in javascript. The JavaScript classes, introduced in ES 6, are primarily syntactical sugar over this. The class syntax does not introduce a new object-oriented inheritance model to JavaScript. That means, JavaScript class is a type of function. Classes are declared with the class keyword. We usually write class name in Pascal-caseing.
Like function, classes can be written in two ways, class declaration and class expression.

Class Declaration 

We use function expression syntax to initialize a function and class expression syntax to initialize a class.The code declared with function and class both return a function prototype. With prototypes, any function can become a constructor instance using the new keyword.

Important: Function declarations gets hoisted but class declarations are not. Meaning, classes cannot be referenced before they are declared. So we must first declare our class before attempting to access it else we will get ReferenceError.

Let's write, Person class using ES 6 class syntax.
class Person {
      constructor(name, age) {
            this.name = name;
            this.age = age;
        }
}
let person = new Person("Alex", 27);
console.log(person);
  1. Person {name: "Alex", age: 27}
    1. age27
    2. name"Alex"
    3.  
One more class example with method.
class Person{
      name = 'Alex';
      printMyName = () => {
             console.log(this.name);
       }
 }
const person = new Person();
person.printMyName();    //
Alex

Class Expression

A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. It can be retrieved through the class's (not an instance's) name property. e.g.
// unnamed
let Person = class { 
      constructor(name, age) {
           this.name = name;
           this.age = age; 
      } 
}; 
console.log(Person.name);      //  "Person"
 // named
let Person = class Employee {
    constructor(name, age) {
           this.name = name;
           this.age = age; 
      } 
  }; 
console.log(Person.name);       // "Employee"

Hope this article was helpful. Subscribe and leave your comment to support.
Thank you !!

Comments

Popular Posts

Come Closure in Javascript

What is a closure? If we want to derive a definition,we can say, A closure is a feature of Javascript where inner function has access to the outer (enclosing) function’s variables—scope chain. This scope chains means inner function has: access to its own scope (variables defined between its curly brackets and its parameters),access to the outer function’s variables and parameters, access to the global variables. Now we will look into it in detail. Consider following example
var globalVar = "xyz"; function outerFunc(outerArg) { var outerVar = 'Alex'; function innerFunc(innerArg) { var innerVar = 'Chris'; console.log("globalVar = " + globalVar); console.log("outerArg = " + outerArg); console.log("innerArg = " + innerArg); console.log("outerVar = " + outerVar); console.log("innerVar = " + innerVar); } innerFunc(456); } outerFunc(123); In this example, i…

Javascript Hoisting Interview Question and Answers - 5

In this post,I have tried to cover all the types of possible interview questions and answers on hoisting. If you are not familiar with the hoisting, I would highly recommend you to go to my post on hoisting. Once you are comfortable with the topic, you can attempt these questions. Understanding the type of question will help you to answer. I have provided the hint after each question. All the answers are given at the end of the post.
//Question 1 console.log('bar:', bar) bar = 15 var foo = 1 console.log(foo, bar) var bar Hint: Basics of hoisting //Question 2 var foo = 5 console.log('foo:', foo) var foo; var bar = 10; var bar; console.log('bar:', bar) var baz = 10 var baz = 12 console.log('baz:', baz) Hint: Basics of hoisting //Question 3 function foo() { function bar() { return 5 } return bar() function bar() { return 10 } } console.log(foo()); Hint: Think what happens if two functions wit…

Javascript Interview Question and Answer - 1

In this article we are going to discuss 2 javascript interview question and their answers.These questions are highly asked in the Javascript interviews.

Disclaimer: - You might have different solution working with all test cases for both the problems.

So lets discuss the first question.This question is to test your ability in terms javascript object knowledge and your logical thinking.

Q1. You have been given a nested object "Person" which has one of the property as "password".Write a generic function to change the value of all the "password" property to "*****". Object is nested and may contain other object with property "password" and so on. Here is a sample object.

var Person = {
     name: 'Alex',
     age : 40,
    password : 'abc',
    x : {
       name : 'Chris',
       password: 'abcd',
       y : {
          name : 'Mike',
          password: 'abcd',
         },
     }
.
.
}

Before we …