SlideShare a Scribd company logo

React js t3 - es6

•
•
Jainul Musani
Jainul Musani

ES6 introduced several new features to JavaScript including classes, arrow functions, and new variable types. Classes allow for object-oriented programming with the class keyword. Methods and properties can be defined within classes. Arrow functions provide a concise syntax for writing anonymous functions. Variables can now be defined using let and const, which have block scoping, in addition to var which has function scoping.

1 of 4
Download to read offline
ReactJs : Tutorial-02 – ES6 ES6 – ECMAScript 6 Standardized JavaScript Version 6 in 2015 (ECMAScript 2015) ReactJs uses ES6 New Features: o Classes o Arrow Functions o Variables (let, const, var) ES6 – Class: A class is a type of function. Property in constructor. Example: class Car { constructor(name) { this.brand = name; } } mycar = new Car("BMW"); Method in Classes class Car { constructor(name) { this.brand = name; } present() { return 'I have a ' + this.brand; } } mycar = new Car("Ford"); mycar.present(); Output I have a Ford
ReactJs : Tutorial-02 – ES6 Class Inheritance To create a class inheritance, use the extends keyword. A class created with a class inheritance inherits all the methods from another class: Example Create a class named "Model" which will inherit the methods from the "Car" class: class Car { constructor(name) { this.brand = name; } present() { return 'I have a ' + this.brand; } } class Model extends Car { constructor(name, mod) { super(name); this.model = mod; } show() { return this.present() + ', it is a ' + this.model } } mycar = new Model("Ford", "Mustang"); mycar.show();
ReactJs : Tutorial-02 – ES6 Arrow Functions Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax: Before: hello = function() { return "Hello World!"; } With Arrow Function: hello = () => { return "Hello World!"; } Arrow Functions Return Value by Default: hello = () => "Hello World!"; Arrow Function With Parameters: hello = (val) => "Hello " + val; Arrow Function Without Parentheses: hello = val => "Hello " + val;
ReactJs : Tutorial-02 – ES6 Variables Before ES6 there were only one way of defining your variables: with the var keyword. Now, with ES6, there are three ways of defining your variables: var, let, and const.  var has a function scope, not a block scope.  let has a block scope.  const has a block scope. const is a variable that once it has been created, its value can never change.

More Related Content

React js t3 - es6

  • 1. ReactJs : Tutorial-02 – ES6 ES6 – ECMAScript 6 Standardized JavaScript Version 6 in 2015 (ECMAScript 2015) ReactJs uses ES6 New Features: o Classes o Arrow Functions o Variables (let, const, var) ES6 – Class: A class is a type of function. Property in constructor. Example: class Car { constructor(name) { this.brand = name; } } mycar = new Car("BMW"); Method in Classes class Car { constructor(name) { this.brand = name; } present() { return 'I have a ' + this.brand; } } mycar = new Car("Ford"); mycar.present(); Output I have a Ford
  • 2. ReactJs : Tutorial-02 – ES6 Class Inheritance To create a class inheritance, use the extends keyword. A class created with a class inheritance inherits all the methods from another class: Example Create a class named "Model" which will inherit the methods from the "Car" class: class Car { constructor(name) { this.brand = name; } present() { return 'I have a ' + this.brand; } } class Model extends Car { constructor(name, mod) { super(name); this.model = mod; } show() { return this.present() + ', it is a ' + this.model } } mycar = new Model("Ford", "Mustang"); mycar.show();
  • 3. ReactJs : Tutorial-02 – ES6 Arrow Functions Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax: Before: hello = function() { return "Hello World!"; } With Arrow Function: hello = () => { return "Hello World!"; } Arrow Functions Return Value by Default: hello = () => "Hello World!"; Arrow Function With Parameters: hello = (val) => "Hello " + val; Arrow Function Without Parentheses: hello = val => "Hello " + val;
  • 4. ReactJs : Tutorial-02 – ES6 Variables Before ES6 there were only one way of defining your variables: with the var keyword. Now, with ES6, there are three ways of defining your variables: var, let, and const.  var has a function scope, not a block scope.  let has a block scope.  const has a block scope. const is a variable that once it has been created, its value can never change.