We all know that Javascript is one of the most preferred platforms for all front and back ends and even mobile application development.
While Javascript is continuously evolving and a lot of frameworks being released every year. Like NodeJS,VueJS, QuaserJS, BackboneJS etc.
When you are being introduced to javascript as a beginner, you might have seen various kinds of syntax being followed for the same code or requirement.
Consider the following example where you want to process the Array elements one by one. we have used two different syntaxes one in ES5 and another one is ES6
While both of them, Achieve the same result the Syntax in ES6 seems easier
If you are not able to understand, What is ES? Let me give you a quick overview.
What is ES or ECMA Script
ECMA Script is a Scripting Language Specification. Simply put the way we write the code and syntaxes.
As Java script adheres to the ECMA Script specifications, We have various methods to write our code in javascript.
The specifications are often called ES5, ES6, ES7, and ES8, etc.
In this article, we have given the important and distinctive features of each specification relative to Javascript.
If you want to read further about ECMA Script. refer here
JavaScript ES5
ES5 easily manipulated in old browser versions. We are going to see some intriguing methods or features in ES5 javascript specifications.
1.Use strict();
If you usestrict() method your JS program, it helps to write cleaner code, it does not allow undeclared variables in the program.
Example:
"use strict"
var name;
name = ('Deena') ;
window.alert (name);
window.alert(job);
Output:
Deena
Uncaught ReferenceError: job is not defined
2. String .trim();
String.trim() is one of the builtin functions. if you use this function in the Js program, it removes white spaces on both sides of string or word.
This is often used in String or Text formatting.
Example:
var string = (" hello india!!!! ");
alert (string.trim());
Output:
hello India!!!
Consider the preceding code snippet, where we have a string with Extra Whitespace at the front end back. We want to trim this unwanted space and this trim() method is helping us to do the same.
3 Array.isArray();
An isArray() the method helps to determine if the object is an array or not.
Example:
var emp;
emp=["dhiya","raga","kavi"];
for(i=0;i<emp.length;i++){
document.write(emp[i]);
}
output:
dhiyaragakavi
The document.getElementry.ById () method is used to get info from an element on your document. x.innerHTML is used to return or set the HTML content of an element.
4.Array.forEach();
The Array. forEach () method calls a function for each element in an array in order. it is one of them a recall function.
Example:
var text=('dheena');
var numbers=[45,4,16];
var value;
numbers.forEach(myfunction);
function myfunction(value){
text=text + value;
}
window.alert(text);
Output: dheena 45416
5. Array.map();
We know that In javascript, every array has a specific set of variables and values. This method is used to looping over array elements. same time it calls the function on every element of the array.
Examples:
var numbers =[4,6,9,16,25]; var x=numbers.map(Math.sqrt) console.log(x); output: 1.(4)[2,3,4,5]
The return method is used to return the output of value.
6.Array.reduce();
The array.reduce the method works in a set of an array and makes less single value.
Examples:
var add= [1,2,3];
var sum = add.reduce(myFunction);
function myFunction(sum, add){
return sum+ add;
}
console.log(sum);
Output
6
An array consists of a lot of elements inside of an array. if you used array.reduce() method in your program, the method runs and functions on each element to produce a single value.
7.Array.filter();
The Array.filter the function works within some logical operations. It creates a new array using which array elements are passes the reasoning.
var superHeros = [
{ month: "november, Jr.", name: "nehru" },
{ month: "october", name: "gandhi" },
{ month: "sep", name: "Dr.A.P.J" },
{ month: "sep", name: "radha" }
];
var newArray = superHeros.filter(function (element) {
return (element.month === "october");
});
console.log(newArray);
8.Array.every();
The method tests all elements in the array and passes the tested array values. It returns a boolean value.
Example:
var superHeros = [ { month: "november, Jr.", name: "nehru" },
{ month: "october", name: "gandhi" },
{ month: "sep", name: "Dr.A.P.J" },
{ month: "sep", name: "radha" } ];
var newArray = superHeros.some(function (element) {
return (element.month === "october");
});
console.log(newArray);
output
false
9.Array.some();
if it finds an array element where the function returns a true value. And does not check the remaining values.
Example:
var superHeros = [ { month: "november, Jr.", name: "nehru" },
{ month: "october", name: "gandhi" },
{ month: "sep", name: "Dr.A.P.J" },
{ month: "sep", name: "radha" } ];
var newArray = superHeros.some(function (element) {
return (element.month === "october");
});
console.log(newArray);
output:
true
10. Array.indexOf();
Array.indexof() the method searches for the specified object and returns the index value of its appearance in an array.
Example:
var colors=["red", "yellow" , "orange"];
var rain = colors.indexOf(“yellow”)
console.log(rain);
output
1
10.Array.lastindexOF();
Example:
var colors=["red", "yellow", "orange", "violet", "green", "yellow", "white" ];
var rain = colors.lastIndexOf(“yellow”)
console.log(rain);
output:
5
In an example, the array got a lot of elements. Elements point out by the index value. Meantime array has the same values in different elements.
Javascript ES6:
ES6 has some short coding skills compare with ES5. it's run in the modern browser only, like chrome, firefox, etc.
In ES6 compared with ES5 they have some advance specifications;
1.JavaScript let.
let() the method used to declare the variable in the program. In ES5 the variable declares in var ()method.
Example :
{
let x = 10 ;
}
console.log(x);
In the above example, the x value is 10.
2.JavaScript Const:
The const() declaration creates a read-only reference to a value. It cannot re-assigned value.
Example:
{
const x=12;
console.log (x);
}
output:
12
3.Arrow Functions:
Arrow functions() are used to easily handle the element in arrow function compared with regular function.
{
const sum = ( x, y) => x + y ;
}
A function has two arguments named x and y. (=>) it releases the expression x+y and returns the result.
4. JavaScript classes:
Class is the type of function. Use the keyword class to create a class. In every class function the properties and variables assigned inside of a constructor() using constructor keyword.
Example:
Class rainbow{
Constructor (colors)
{
this.color = colors ;
}
5. Array.find();
The array.find() the method is used to get the value of the first element in the array.
Example:
var age=[1,2,28,29,30];
var find = age.find(myFunction);
function myFunction
(value, index, array)
{
return value > 25;
}
Output
28
6.Array.findIndex();
it returns the index value of the first element in the array that meets the specific condition. none of the elements satisfy the condition, the method will return an unexplained value.
Example:
var age=[1,2,28,29,30];
var find = age.findIndex(myFunction);
function myFunction
(value, index, array)
{
return value > 25;
}
console.log(find);
Output
2
Javascript ES7:
ES7/2016 has introduced some set of features,
1.Array.prototype.includes():
This function using to checks the array element passed as values.it used to allow to add new methods and properties to the object.
Example:
let numbers = [1,2,3,4,5];
if ( numbers.includes (2))
{ console.log ('array contains value')
}
else
{
console .log ('value not in array');
}
Output
Array contain value
2. Exponentiation operator():
The exponent of a number says how many times to use the number in a multiplication.
function val()
{
let height, result;
height = 3;
result => height**;
console.log(result);
}
output:
result = 9.
Example program:
<html>
<head>
<script>
function add(){
var a,b,c;
a=Number(document.getElementById("first").value);
b=Number(document.getElementById("second").value);
c= a + b;
document.getElementById("answer").value= c;
}
</script>
</head>
<body>
Enter the First number : <input id="first">
Enter the Second number: <input id="second">
<button onclick="add()">Add</button>
<input id="answer">
</body>
</html>
If you like this article feel free to share.
Cheers
Ragavi
