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 –
- Classes
- Arrow Functions
- Variables
- Array Methods
- Destructuring
- Modules
- 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 var
, let
, 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}