Tuesday, September 17, 2024

JavaScript each vs forEach

This article demonstrates how to use the ‘each()’ and ‘forEach()’ functions. The ‘each()’ function is part of the jQuery library, while ‘forEach()’ is a native JavaScript method.

In the next section, we explain the two functions and demonstrate how to use them to iterate over different structures with jQuery and JavaScript code snippets. Note that these snippets are part of a complete code example, which can be found in the final section.

1. The ‘each’ Function

The jQuery ‘each()’ method is a versatile iterator used to loop over a collection of DOM elements, arrays, or objects. It simplifies the process of performing actions or applying logic to each item within a set, handling the iteration for you.

The table below provides a summary of how the ‘each()’ method is used to iterate over objects and collections of elements, illustrated with examples.

Function	Iterates over	Code Snippet	Code Output
$.each	jQuery object	let person = {name: "Mary", age:22, email: "mary@gmail.com"}; $.each(person, function(key, value) { console.log(key + ": " + value); });	name: Mary age: 22 email: mary@gmail.com
$.each	jQuery array	let arr_num = [4, 12, 20]; $.each(arr_num, function(index, value) { console.log(index + ": " + value); });	0: 4 1: 12 2: 20
$(selector).each	jQuery DOM elements	$('li').each(function(index, element) { console.log('index: ' + index + ', element: ' + $(element).text()); });	index: 0, element: li 1 span 1 index: 1, element: li 2 span 2 index: 2, element: li 3 span 3
		$.each($('li'), function(index, element) { console.log('index: ' + index + ', element: ' + $(element).text()); });	index: 0, element: li 1 span 1 index: 1, element: li 2 span 2 index: 2, element: li 3 span 3

2. The ‘forEach’ Function

The ‘forEach()’ method is a built-in array method in JavaScript that allows you to iterate over arrays to execute a provided function once for each element in the array. This method provides a more concise and readable alternative to traditional ‘for’ loops.

The table below offers an overview of how the ‘forEach()’ method is used to iterate over arrays and ‘NodeLists’, accompanied by illustrative examples.

Function

Iterates over

Code Snippet

Code Output

forEach

JavaScript array

(Arrray.prototype.forEach)

let array_num = [1, 2, 3];

array_num.forEach(function(value, index, array) {

console.log('index: ' + index + ', value: ' + value);

});

index: 0, value: 1

index: 1, value: 2

index: 2, value: 3

JavaScript nodelist

(NodeList.forEach)

document.querySelectorAll('li').forEach(function(element, index) {

console.log('index: ' + index + ', element: '

+ element.innerHTML);

});

index: 0, element: li 1

index: 1, element: li 2

index: 2, element: li 3

3. HTML Example

The code snippets presented in the tables above are excerpts from the complete example provided below:

<!DOCTYPE html>

<html>

<head>

<style>

.wrapper * {

display: block;

border: 1px solid grey;

color: grey;

padding: 5px;

margin: 10px;

}

</style>

$(document).ready(function(){

//JQuery object

let person = {name: "Mary", age:22, email: "mary@gmail.com"};

$.each(person, function(key, value) {

console.log(key + ": " + value);

});

//JQuery array

let arr_num = [4, 12, 20];

$.each(arr_num, function(index, value) {

console.log(index + ": " + value);

});

//JQuery DOM elements

$('li').each(function(index, element) {

console.log('index: ' + index + ', element: ' + $(element).text());

});

//JQuery DOM elements

$.each($('li'), function(index, element) {

console.log('index: ' + index + ', element: ' + $(element).text());

});

//JavaScript array

let array_num = [1, 2, 3];

array_num.forEach(function(value, index, array) {

console.log('index: ' + index + ', value: ' + value);

});

//JavaScript NodeList

document.querySelectorAll('li').forEach(function(element, index) {

console.log('index: ' + index + ', element: ' + element.innerHTML);

});

</script>

</head>

<div>

<ul>ul

<li>li 1

</li>

<li>li 2

</li>

<li>li 3

</li>

</ul>

</div>

</body>

</html>

How to Calculate Code Execution Time in jQuery

Here are some methods to calculate code execution time in jQuery.

1. Using console.time(label), console.timeEnd(label)

function sayHello(i){

console.log(i, 'Hello world!');

}

// Start the timer with label "codeTimer"

console.time("codeTimer");

// Code being timed

for (let index = 0; index < 100; index++) {

sayHello(index);

}

// Stop the timer and logs the elapsed time with the same label "codeTimer"

console.timeEnd("codeTimer");

2.Using Date

//Set start point where you want

var start = new Date();

// Code being timed

for (let index = 0; index < 10000; index++) {

sayHello(index);

}

//Set end point where you want

var end = new Date();

//Get the elapsed time in milliseconds

var duration = end - start;

console.log('Code execution took', duration, 'milliseconds')

3. Using performance

// Take a timestamp at the beginning before executing the code being timed

var start = performance.now();

// Code being timed

for (let index = 0; index < 10000; index++) {

sayHello(index);

}

// Take a final timestamp to stop time measurement

var end = performance.now();

//Get the elapsed time in milliseconds

var duration = end - start;

console.log('Code execution took', duration, 'milliseconds')

Prototype in JavaScript

Prototype is a powerful concept in JavaScript because it allows for code reuse and inheritance. In this article, I want to give an overview of this concept. Before that, I will introduce prototype-based programming languages. Then, I will explain the prototype concept in JavaScript using an example. Then, I will present an example of the built-in JavaScript prototype, ‘Date.prototype’. I will show how you can extend this prototype with new methods. I will end this article with some recommendations for using prototypes.

Prototype-based Programming Language

JavaScript is a prototype-based programming language. Prototype-based programming languages are languages in which object creation and behavior inheritance can be done by cloning existing objects that act as prototypes. Here we mention some common characteristics of these languages:

No Class: Unlike class-based languages, prototype-based languages do not use classes. Remember that class-based languages are mainly based on defining classes and creating objects from them. A class is an abstract concept that defines its objects’ common behavior (properties and methods). But, a prototype is a concrete concept, from which objects can be created by copying and extending. Prototype-based languages make object creation and inheritance easier as they create objects from the existing ones.

Prototype: The concept of the prototype is implemented in JavaScript using a built-in property [[Prototype]] (or Object.prototype) that belongs to each object. This property is a pointer to another object which is the prototype. As the prototype is an object, it also has a property [[Prototype]] that points to its prototype! This chain can continue until we reach a null prototype.

Prototype Chain: This is the chain of objects linked by the [[Prototype]] property. When you want to access a property or method of an object, JavaScript looks for the property in its direct properties. If it is not there, it looks for the property in the [[Prototype]] properties and so on. The search will only stop if the property is found or the prototype is null.

Delegation: In prototype-based language, an object can delegate behavior to its prototype.

Shared Properties and Methods: The prototype enables the sharing of properties and methods between objects. This fosters reusability and optimal memory usage.

Object Mutability: Objects are modified dynamically. At runtime, new properties and methods can be added and existing ones can be overridden.

Example of Prototype

Let’s illustrate with an example how an object can inherit from other objects using the prototype property:

const person = {

setName(name) {

this.name = name;

getName() {

return this.name;

}

};

Here we define an object called ‘person’ with a property ‘name’ and two methods ‘setName()’ and ‘getName()’. The method ‘setName()’ is declared to set the ‘name’ property and ‘getName()’ is declared to return the value of ‘name’. We can use ‘Object.create()’ method and the ‘person’ object as a prototype to create a new ‘employee’ object as follows:

const employee = Object.create(person);

employee.setSalary = function(salary) {

this.salary = salary;

};

employee.getSalary = function() {

return this.salary;

};

The ‘employee’ object can access the ‘name’ property, ‘setName()’ and ‘getName()’ methods of ‘person’ through delegation via its ‘person’ prototype. Moreover, ‘employee’ has its own properties (‘salary’) and methods (‘setSalary()’ and ‘getSalary()’).

employee.setName("Jack Roberts");

employee.setSalary(4000);

console.log(employee.getName()); // Jack Roberts

console.log(employee.getSalary()); //4000

We can extend the prototype chain by creating a new object ‘developer’ and setting ‘employee’ as its prototype:

const developer = Object.create(employee);

developer.task = "coding with Java";

If we call the ‘getName()’ and ‘getSalary()’ methods for a ‘developer’ object, we get those of the ‘employee’ object because ‘developer’ doesn’t have its own:

console.log(developer.getName()); // Jack Roberts

console.log(developer.getSalary()); //4000

If you try to call the ‘toString()’ method on the ‘developer’ object, you will get ‘[object Object]’. We haven’t defined this method anywhere but it exists! This method is not defined in ‘person’, ‘employee’, or ‘developer’. It is inherited from the object [[Prototype]] (Object.prototype).

console.log(developer.toString()); //[object Object]

You can explore the properties of this object using ‘console.log’:

console.log(developer);

Fig 1. Part of the properties of the ‘developer’ object

As illustrated in the figure above, you will notice that ‘developer’ has only the ‘task’ property and [[prototype]] which points to ‘employee’ as its prototype. The ‘employee’ prototype points to the ‘person’ prototype. Finally, the ‘person’ prototype is linked to the object prototype. The object prototype is the one that has general properties and methods shared by all JavaScript objects like the ‘toString()’ method.

Note that you can customize any method of the prototype, for example by overriding the ‘toString()’ method:

developer.toString =function() {

console.log("I am a tool that converts caffeine to code!");

};

In summary, the prototype chain looks like this:

developer -> employee -> person -> Object.prototype -> null

So, to look for an available property or method of the object ‘developer’, JavaScript searches for it in ‘developer’, if it is not found it looks for it in the ‘employee’, then ‘person’, and finally ‘Object.prototype’. The search will be stopped only if the property or method is found or a null prototype is reached.

Date.prototype

Prototypes in JavaScript help you to augment objects by adding new properties and methods. The objects you can extend are user-defined or built-in objects. We take here an example of a built-in object in JavaScript which is ‘Date’. We will add some methods to ‘Date.prototype’ to extend the behavior of all instances of ‘Date’ (shared properties). To explore the contents of ‘Date.prototype’, type it into the Chrome console and see what you get. There are many predefined methods that new instances of ‘Date’ can reuse:

Fig 2. Part of the properties of the ‘Date.prototype’

Extending Date.prototype

‘Date.prototype’ methods are basic and insufficient for real applications. In general, applications often need specific methods like displaying dates with a particular format or checking if a day is a workday or a weekend. If such methods are frequently called in your application, it is better to integrate them into ‘Date.prototype’. You can reuse these methods as they are now available for any ‘Date’ instance. The following table contains some examples illustrating the use of ‘Date.prototype’ in JavaScript.

JavaScript Date.prototype Examples
Example of Method	Code Snippet	Code Output
Custom formatting a date	Date.prototype.appFormat = function() { let year = this.getFullYear(); let month = (this.getMonth() + 1).toString().padStart(2, '0'); let day = this.getDate().toString().padStart(2, '0'); return `${day}.${month}.${year}`; }; console.log((new Date()).appFormat()); console.log((new Date('2023-09-12')).appFormat());	27.07.2024 12.09.2023
Check if a date is a working day	Date.prototype.isWorkingDay = function() { let day = this.getDay(); return (day > 0 && day < 6); }; console.log((new Date('2023-09-12')).isWorkingDay()); console.log((new Date('2024-10-13')).isWorkingDay());	true false
Add days to a date	Date.prototype.addDays = function(days) { const date = new Date(this.valueOf()); date.setDate(date.getDate() + days); return date; }; console.log(new Date().addDays(10)); console.log(new Date("2024-04-15").addDays(15));	Wed Aug 07 2024 11:04:31 GMT+0200 (Central European Summer Time) Tue Apr 30 2024 02:00:00 GMT+0200 (Central European Summer Time)

Code Dev Insights

Tuesday, September 17, 2024

JavaScript each vs forEach

1. The ‘each’ Function

2. The ‘forEach’ Function

3. HTML Example

How to Calculate Code Execution Time in jQuery

1. Using console.time(label), console.timeEnd(label)

2.Using Date

3. Using performance

Prototype in JavaScript

Prototype-based Programming Language

Example of Prototype

Date.prototype

Extending Date.prototype

Blog Posts

Enhancing Performance of Java-Web Applications