Java Script

A brief overview of ES6 javascript features in react

A Brief Overview of ES6 or ECMAScript 6 for React Native Developers, What is ES6, What is new in ES6 or ECMAScript 6, React ES6

What is ES6?

If you learn React Native or React and you’re new to JavaScript and have’t use ES6/ES2015+, don’t worry here we learn all ES6/ES2015+ feature step by step

ES6 stands for ECMAScript 6. ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015

Why I Learn ES6?

Here we list down all new ES6 feature and learn about that. Some new features are –

  1. Classes
  2. Arrow Functions
  3. Variables
  4. Array Methods
  5. Destructuring
  6. Modules
  7. Spread Operator

1. ES6 Classes

ES6 introduced classes features.

A class is looks like a function or we can say its a type of function, but without using the function keyword to initiate it, we use the class keyword, and the properties are assigned inside a constructor() method.

Note: The constructor function is called automatically when the object is initialized.

class Student {
  constructor(name) {
    this.studentName = name;
  }
}

We can create an object of my class like bellow

class Student {
  constructor(name) {
    this.studentName = name;
  }
}
const student = new Student("xyz");

We can add a method in a class and also inherit class with other calls

Method in a class

class Student {
  constructor(name) {
    this.studentName = name;
  }
}
  
  getName() {
    return 'my name is ' + this.studentName;
  }
}

const student = new Student("xyz");
student.getName();

Inheritans of the class

class Student {
  constructor(name) {
    this.studentName = name;
  }
}

  getName() {
    return 'my name is ' + this.studentName;
  }
}

class Model extends Student {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const student = new Model("xyz", "abc");
student.show();

The super() method refers to the parent class.


2. ES6 Arrow Functions

In a arrow function we can write a function in shorter way and return value without return keyword.

Example

Normal function –

add = function(a,b) {
  return a+b;
}

Arrow Function –

add = (a, b) => {
  return a+b;
}

OR

add = (a, b) => {
  a+b;
}

OR 

add = (a, b) => a+b;

3. ES6 Variables

Previously there was only one way of defining your variables that is var that is define like var keyword.

var x = 5;

It belongs to the global scope If use var outside of a function.

It belongs to that function If you use var inside of a function.

The variable is still available outside of that block If you use var inside of a block, i.e. a for loop,

But now in ES6 there are three way to define the variables like varlet, and const

var x = 5;
let y = 6;
const z = 7;

var is a globle scope and can be modify or change there value anywhere.

let is a block scope and can be modify or change there value with in block where its define

const is a block scope and can not be modify or change there value


4. ES6 Array Functions:

There are many array function in a javascript but on ES6 a new function implemented that is .map(). This is very use full functions. .Its allow to run a function in each item in the array and return a new array.

const myArray = ['Dog', 'Cat', 'Lion'];

const myList = myArray.map((item) => <Text>{item}</Text>)

5. ES6 Destructuring

Destructuring is a way to take out items what you want from an array or object. On the other way you can say its allows us to “destructure”, or break down, an object or array so that you can easly get information what you want.

This is understand by following example

// Destructuring method

const student = {
  name: 'xyz',
  class: '4',
  address: {
    city: 'Noida',
    state: 'Uttar Pradesh',
  },
};
const { name, address } = student;
const { city, state } = address;

/// Old Method

const student = {
  name: 'xyz',
  class: '4',
  address: {
    city: 'Noida',
    state: 'Uttar Pradesh',
  },
};

const name = student.name;
const city = student.address.city;
const state = student.address.state;

6. ES6 Modules

JavaScript modules allow to break the code into a peace of code file and use that code file by Modules.

There are two methods 1. Export and 2. Import

Export

Export look like send information from one file to other where you want to use.

There are two way one is by Named and other is Default

Default Exports can explain in following way- Create a file Student.js

const student = () => {
  const name = "xyz";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default student;

Named Exports can explain in following way- Create a file Student.js

export const name = "xyz"
export const age = 30

// ----   OR  -----  //

const name = "xyz"
const age = 30

export { name, age }

Import

If you want some information from other file then you can do this by Import function. This can be done in two way depend on type of Export like named exports or default exports. If named Export then destructured using curly braces else not

/// Named Export Example 

import { name, age } from "./student.js";

/// Default Export Example

import student from "./student.js";


7. ES6 Spread Operator

If you want to copy all or some data from existing object or array into a new variable then we use Spread Operator like (…).

Its create a new variable from exist variable without reference of existing variable.

const arrayOne = [1, 2, 3];
const arrayTwo = [4, 5, 6];
const combinedArray = [...arrayOne, ...arrayTwo];

/////////////

const student = {
  name: 'xyz',
  class: '4',
  category: 'science'
}

const studentAddress = {
  city: 'noida',
  state: UP, 
  address: 'Delhi'
}

const combinedObject = {...student, ...studentAddress}
Visited 13 times, 1 visit(s) today

Leave a Reply

Your email address will not be published. Required fields are marked *