Introduction to modern Javascript-Part I (ECMAScript5 / ES5)

JavaScript was initially created by Brendan Eich in 1995 to “make web pages alive” or in other words it was a simple scripting language that was simply used to make webpages "interactive".Since the goals of the language was very limited it was given very limited capabilities within a browser. Fast forward 20 years and javascript is used anywhere and everywhere from web browsers to servers , native mobile applications , desktop applications & IoT. Within these last few years javascript went under some major changes which addressed most of the shortcomings the language had and added some awesome cool new features to it. Major changes were by the ECMAScript(ES) 5,6,7 & 8.ECMAScript is a standard, while JavaScript is the most popular implementation of that standard. JavaScript implements ECMAScript and builds on top of this standard. The major change occurred with and after ES5 a change on standard after nearly 10 years !

Js cover image

ECMAScript5 - Mostly introduced these array iteration methods :

.every() - The .every() method expects to return true if all elements/values in the provided function() returns true. In the example below you would see an arrow function (value)=>.

const listOfNumbers = [1, 2, 3, 4, 5];
const listDosentHaveZero = listOfNumbers.every(value => value !== 0);
console.log(listDosentHaveZero);

console : true

.filter() - The filter() method creates and returns a new array with all elements that return true in the provided function(). would see an arrow function (value)=>.

const listOfNumbers = [1, 2, 3, 4, 5];
const listGreaterThanThree = listOfNumbers.filter(value => value > 3);
console.log(listGreaterThanThree);

console : [4,5]

.forEach() - The forEach() method executes a provided function() once for each array element.

const listOfNumbers = [1, 2, 3, 4, 5];
listOfNumbers.forEach(value => console.log(value));

console :
1
2
3
4
5

.indexOf() -The indexOf() method returns the first index at which a given element can be found in an array/string, or -1 if it is not present.

const listOfNumbers = [1, 2, 3, 4, 5];
const foundIndex = listOfNumbers.indexOf(3);
console.log(foundIndex);
//expect the index to be 2 here as index of an array starts from 0

console : 2

.lastIndexOf() - The lastIndexOf() method returns the last index at which a given element can be found in an array/string, or -1 if it is not present.

const listOfNumbers = [1, 2, 3, 3, 3];
const foundLastIndex = listOfNumbers.lastIndexOf(3);
console.log(foundLastIndex);
//expect the index to be 4 here as index of an array starts from 0

console : 4

.map() - The map() method creates and returns a new array with the returned results of calling a provided function() on every element in the calling array.

const listOfNumbers = [1, 2, 3, 4, 5];
const newMappedNumbers = listOfNumbers.map(value => value * 5);
console.log(newMappedNumbers);

console : [5, 10, 15, 20, 25]

.reduce() - The reduce() method executes a reducer function that you provide on each member of the array resulting in a reduced result on each iteration.

const listOfNumbers = [1, 2, 3, 4, 5];
const reducedNumber = listOfNumbers.reduce(
  (accumulator, current) => accumulator + current
);
console.log(reducedNumber);

console : 15

.some() - The .some() method expects to return true if any element/value in the provided function() returns true

const listOfNumbers = [1, 2, 3, 4, 5];
const anyGreaterThanFour = listOfNumbers.some(value => value > 4);
console.log(anyGreaterThanFour);

console : true

ES5 also brought in methods to parse and work with JSON data which was a common data format used to interact with API's/Servers that became popular really fast! You can read more about the changes in detail in here. This article I hope would be a part a series on Javascript on which I hope to cover most of modern javascript from ES5 to ES8. Let me know your feedback / thoughts / comments below would really appreciate it :)