Abdullah Yahya

For Loop

ForEach Function

The forEach() method calls a provided function once for each element in an array, in order.
Note: forEach() does not execute the function for array elements without values.

Map Function

The map() method creates a new array with the results of calling a function for every array element.
The map() method calls the provided function once for each element in an array, in order.
Note: map() does not execute the function for array elements without values.
Note: map() does not change the original array.
https://www.w3schools.com/jsref/jsref_map.asp

Using a named function

Using an anonymous function

Using shorthand pointer notation

Using an array of JSON objects

Using an array of JSON objects

Filter Function

The filter() method creates an array filled with all array elements that pass a test (provided as a function).
Note: filter() does not execute the function for array elements without values.
Note: filter() does not change the original array.
https://www.w3schools.com/jsref/jsref_filter.asp

Using a named function

Using an anonymous function

Using an array of JSON objects

Reduce Function

The reduce() method reduces the array to a single value.
The reduce() method executes a provided function for each value of the array (from left-to-right).
The return value of the function is stored in an accumulator (result/total).
Note: reduce() does not execute the function for array elements without values.
https://www.w3schools.com/jsref/jsref_reduce.asp

Using a named function

Using an anonymous function

Using an array of JSON objects

Get Unique Array of JSON Objects

Sort Array of JSON Objects

Nested JavaScript Map Function and Non-Mutated Copying of Object Raw

Array Methods

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

If you need to upscale images without losing much quality, this free tool called Let’s Enhance does a pretty amazing job.

Animating elements can be done simply with linear speed. However, you can achieve some very interesting effects using different bezier curves. Many popular easing functions and how to use them can be found at Eastings.net. If that’s not enough, you can play around with creating custom easing functions at Cubic-Bezier.com.

Continue reading CSS Transitions / Animations with Different Easing Functions

In jQuery, if you dynamically add an element to the DOM and want to attach an event handler to it, that’s very easy with the following line of code.

However, if you try to do that with native Javascript, you have to do with by checking for all clicks on the page and only acting on clicks where the click occurred on the element you want to act on.

Obviously that’s no good. One workaround is to put the HTML element in the page somewhere(if that’s possible in your case), then detach and attach it to where you want to dynamically put it, then add an event listener specifically for that element, e.g.