Declaring Variable
Earlier were using var to declare variables. But in ES6 new keywords got introduced – Let and Const. Const is used to declare a constant (whose value would not be changed throughout).
Creating Function
Before function keyword was used to declare the function as –
function myFunc(){
//code
}
But now, we can replace it with modern way of writing as –
Const myFunc = () => {
//code
}
Where myFunc is the function name and in round brackets we can pass the required arguments.
In the case of a single argument we can omit round brackets () –
Const myFunc = name => {
//code
}
const func=name=>{
alert("My name is - "+ name);
}
func("xyz");
In case of a function having a return statement only we can omit curly brackets {} and return keyword –
Below I am showing the comparison of writing code in different ways.
| Const myFunc = number => { return number*2 } Console.log(myFunc(2)); |
const myFunc = number => number*2; alert(myFunc(4)); |
Export and Import
If we have to export things from one js file to another js file then we use imports and exports
If we have a file as person.js and we export as “export default person” at the end of the file. Then in import, we do not care about what to import by default everything will be available to us if we import anything from the file.
But we can’t use default and export multiple things.
For exporting multiple things –
export const clean=()=>{…}
export const baseData = 10;
in one file – let say utility.js
Then while importing we need to specify what we are importing specifically this variable or function from that file
As – import {baseData} from utility.js
Import {clean} from utility.js
Note – These are called “named exports” and name goes in curly brackets.
We can also set alias like import {baseData as bd} from utility.js
Or we can import everything as * and bundle it in alias – import * as all from utility.js
Class
Class className{}
Extends keyword to inherit
Note – If we have constructor methods implemented we need to use the “super” keyword in the child class constructor.
For example –
class Human{
constructor(){
this.gender = "female";
}
printGender(){
alert(this.gender);
}
}
class Person extends Human{
constructor(){
super();
this.name = "xyz";
}
printName(){
alert(this.name);
}
}
const obj = new Person();
obj.printName();
obj.printGender();
In new-generation js we can directly assign properties a value hence we can omit use of constructor function.
class Humans{
gender = "female";
printGender=()=>{
alert(this.gender);
}
}
const obj1 = new Humans();
obj1.printGender();
class Humans{
gender = "female";
printGender=()=>{
alert(this.gender);
}
}
class Persons extends Humans{
name = "xyz";
printName=()=>{
alert(this.name);
}
}
const obj1 = new Persons();
obj1.printGender();
obj1.printName();
Spread and Rest Operator (…)
Both operators are denoted by three dots (…)
Spread operator is used to split up array elements or object properties
const oldArray = [1,2,3];
const newArray = [...oldArray,4,5];
console.log(newArray);
oldArray splits as all single elements and then we added more elements. It’s the same as defining an array for the 1st time using square brackets.
Rest Operator is used to merge a list of function arguments into an array. If the number of arguments are not known to us.
const sortArgs = (...args) => args.sort();
console.log(sortArgs(10, 67, 23, 60));
We can give any number of arguments here.
Destructuring
Easily extract array elements or object properties and store them in variables.
const arr = [1,2,3];
[first, second] = arr;
console.log(first, second)
Reference and Primitive Type
Reference Type – Array and Objects are reference types because while copying, they don’t copy the value instead they copy the pointer pointing towards that variable.
For example
const person ={
name: "xyz"
}
const other = person;
console.log(other)
Output
{name: “xyz“}
Here we copy “person” into another variable, but if we change a person’s name value, the other’s name value will also be changed because it points to the same pointer.
For example
const person ={
name: "xyz"
}
const other = person;
person.name = "abc"
console.log(other)
Output
{name: “abc“}
Primitive Type – Number, Strings, Floats etc. are primitive types.
Copy Reference Type
We will use the “spread operator”.
For example–
const person ={
name: "xyz"
}
const other = {
...person
}
person.name = "abc"
console.log(other)
console.log(person)
Output
{name: “xyz“}
{name: “abc“}
Map Array Function
Map is an inbuilt function, itself iterates all elements and performs a function on every element.
For example –
const number = [1, 2, 3]
const doubleNum = number.map(num=> num*2);
console.log(number)
console.log(doubleNum)
Output
(3) [1, 2, 3]
(3) [2, 4, 6]
If you need to prove your skills in the .NET framework, get .NET certified on StudySection. StudySection provides .NET certification exam for beginners as well as experts in the .NET framework. This .NET certification can improve your resume’s success rate.
