Advanced Javascript
ECMAScript was created to give some standard format to Javascript. 6th version of ECMAScript was introduced in 2015. It is also called as advanced Javascript. React uses ES6 because of its following features:-
Classes, Arrow functions, Variables (let, const, var), Array methods like map(), Destructuring, Modules, Ternary operator, Spread operator.
Classes:-
A class is a type of function or template used to create objects. We use the keyword class to create it with its name & it’s properties are assigned inside a constructor () method.
e.g. class Student
{
constructor(name)
{ this.Sname=name; }
}
Always use first letter of class name as capital because it is a standard format for naming classes. You can create n number of objects using a class.
For Free Demo classes Call: 02071173035
Registration Link: Click Here!
e.g. const stud1=new Student(“ABC”);
document.write(stud1.Sname);
The constructor function is called automatically when the object is initialized or created in the program. Attention all aspiring web developers in Pune! Are you looking for a comprehensive and hands-on training program in Angular? Look no further than our Angular classes in Pune.
Method in classes:-
You can add your own methods in a class. Methods are nothing but functions that can be added in the class.
e.g. class Student
{
constructor(name)
{ this.Sname=name; }
display()
{
return ‘ My name is ’ + this.Sname;
}
}
const stud1=new Student(“ABC”);
stud1.display();
You can use the concepts like inheritance, polymorphism and encapsulation using classes.
Arrow functions:-
Arrow functions are used to write shorter functions. Arrow function returns value by default. We can also pass parameters to arrow function. In arrow functions there is no need of this keyword. In regular functions this keyword represents the object which calls the function but in arrow functions this keyword always represents the object which defines arrow function.
e.g. <script>
// simple arrow function
var fun;
fun = () => “Hello World!”;
document.getElementById(“p1”).innerHTML = fun();
// Arrow function with parameters
let add = (a, b) => a + b;
document.getElementById(“p2”).innerHTML = add(4, 5);
// Arrow Function Without Parentheses
var msg;
msg = displ => “Hello ” + displ;
document.getElementById(“p3”).innerHTML = msg(“Everyone!”);
</script>
Advanced Javascript Array methods:-
Array uses different methods from which we mostly use map() method which allows you to run a function on each item in the array returning a new array as a result. In react map() method can be used to generate lists.
Destructuring:-
It is used to get only what we need from number of elements. If we have an array or object that we are working with, but we need only some of the items contained in these then that can be achieved by destructuring. That means destructuring can be used with arrays and objects.
e.g. <script>
const employee=[“AAA”,”BBB”,”CCC”,”DDD”,”EEE”];
const [,a]=employee;
document.write(a);
const [,…r]=employee
document.write(b+”<br>”);
document.write(r+”<br>”);
const employ=
{
name:”ABC”,
age:25,
dept:”Development”,
salary:38900,
address:{
city:”Pune”,
country:”India”
}
}
const {name,age}=employ
document.write(name+”,”+age)
const {name:x=”Sarika”,age}=employ
document.write(x+”,”+age);
const {address:{city}}=employ
document.write(city);
const users=
[
{fname:”ABC”,age:22,add:”P”},
{fname:”LMN”,age:25,add:”N”},
{fname:”PQR”,age:28,add:”L”},
{fname:”XYZ”,age:24,add:”O”},
]
const [,{fname},…r]=users;
console.log(fname);
console.log(r);
const users=
{
name:”Sevenmentor”,
locations:[“pune”,”Chinchwad”,”Mumbai”]
}
const {locations:[a,…r]}=users
console.log(r);
const employ=
{
name:”ABC”,
age:25,
dept:”Development”,
salary:38900,
address:{
city:”Pune”,
country:”India”
}
}
function print({name,age,address:{city}})
{
console.log(`My name is ${name} and my age is ${age}.I live in ${city}.`)
}
print(employ);
</script>
For Free Demo classes Call: 02071173035
Registration Link: Click Here!
Advanced Javascript Spread operator:-
The javascript spread operator (…) is used to quickly copy all or part of an existing array or object into another array or object. The spread operator is always used in combination with destructuring.
e.g. const users=
{
name:”Sevenmentor”,
locations:[“pune”,”Chinchwad”,”Mumbai”]
}
const {locations:[a,…rest]}=users
console.log(r);
Ternary operator:-
It is the shorter and simplified format of conditional operator like if/else.
Syntax:-
condition?<expression if true>:<expression if false>
e.g.
<script>
var a;
a=parseInt(prompt(“Enter a number”));
a%2==0?alert(“Even Number”):alert(“Odd Number”);
Modules:-
Javascript modules are used to break your code into separate files. This makes it easy to maintain the code. ES6 modules always depend on the import and export statements.
You can export a function, variable or class from any file. For that create a javascript file, and include all the contents which you want to export in that file, using either named export or default export you can export the contents.
You can import modules into a file in two ways, based on named exports or default exports. Named exports must be destructured using curly braces and default exports do not need curly braces. Join SevenMentor’s Angular training in Pune to become proficient in one of the most popular and powerful front-end web development frameworks.
e.g. file1.js
export default function()
{
console.log(“React is fast”);
}
let message=”Hello!!!”;
function fun()
{
console.log(“Today we will learn Modules”);
}
class user
{
constructor()
{
console.log(“Welcome!!”);
}
}
export {message,fun,user}
For Free Demo classes Call: 02071173035
Registration Link: Click Here!
file2.js
import {default as abc} from “./file1.js”;
import abc from “./file1.js”;
abc();
import * as b from “./file1.js”;
import {fun,user} from “./file1.js”;
import { fun } from “./file1.js”;
console.log(b.message);
b.fun();
let a=new user;
console.log(a);
let a=new b.user
console.log(a);
modules.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<!– <script type=”module” src=”./js/bridge.js”></script> –>
<script type=”module” src=”./js/file2.js”></script>
</head>
<body>
</body>
</html>
Author:-
Sarika Ganesh Kore
Call the Trainer and Book your free demo Class For Angular Call now!!!
| SevenMentor Pvt Ltd.
© Copyright 2021 | SevenMentor Pvt Ltd.