DEV Community: Tejashwa Rajvardhan

map, filter and reduce in javascript - the easy way

Tejashwa Rajvardhan — Fri, 19 Aug 2022 18:41:00 +0000

There are three array methods in JavaScript: map, reduce, and filter. All these functions will iterate over the array and perform the function. Each will create a new array in response to the function's output. You will discover the rationale for each one's use in this article.

map()
The map method creates a new array with the results of calling a function for every array element.

const output = arr.map(function)
this function tells about the transformation I want on each element of the array.

Let's take an example:

const arr = [6, 3, 5, 9, 2];
//if we want to double each element in the arr, we can use map
const doubleArr = arr.map(double);
//creating the function double
function double(x){
  return 2 * x;
}

//the map will run double function for each element in the arr, and create a new array and returns it.
console.log(doubleArr); //[12, 6, 10, 18, 4];

So, basically map function is mapping each and every value and transforming based on the given condition.

filter()
Filter function is used to filter the value inside the array. This method also creates a new array from the given array consisting of only those elements from the given array which satisfy a condition set by the argument method.

Let's take an example:
Suppose we have given an array and we want a new array with all the elements greater than 4 for the values present in arr.
So, the ans will look like [5, 6, 9, 8]

const arr = [5, 6, 1, 4, 9, 8];
//filter values > 4
function isGreaterThan4(x){
  return x > 4;
}
const arr2 = arr.filter(isGreaterThan4);

//we can also use arrow function to rewrite the same code as :
const arr2 = arr.filter((x) => x > 4);

console.log(arr2); //[5, 6, 9, 8]

reduce()
It is function which take all the values of array and gives a single output of it. It reduces the array to give a single output.
Let's take an example:

First we will find the sum of a given array using loops and then will move on to use reduce to better understand it.

const array = [5, 1, 3, 2, 6];
// Let's calculate sum of elements of array - Non functional programming way
function findSum(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum = sum + arr[i];
    }
return sum; }
console.log(findSum(array)); // 17

// reduce function way
const sumOfElem = arr.reduce(function (accumulator, current) {
    // current represent the value of array
    // accumulator is used the result from element of array.
    // In comparison to previous code snippet, *sum* variable is
*accumulator* and *arr[i]* is *current*
    accumulator = accumulator + current;
    return accumulator;
}, 0); //In above example sum was initialized with 0, so over here
accumulator also needs to be initialized, so the second argument to reduce
function represent the initialization value.
console.log(sumOfElem); // 17

This tweets sums the entire article:
// Detect dark theme var iframe = document.getElementById('tweet-741089564329054208-354'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=741089564329054208&theme=dark" }

Also, if you want a detailed explanation, do check out Namaste Javascript

How to create animating gradients in CSS easy way.

Tejashwa Rajvardhan — Mon, 08 Aug 2022 18:01:00 +0000

A gradient is a continuation of colors with a starting and stopping point and a linear-gradient gradually moves in a straight line to another color.

Animation in Gradients are the latest trends these days and most of the websites are designed using gradients. With the background-clip property, and animations of CSS, it's very easy to implement animating text gradients.

Syntax: How to create Animating Text gradients
First, we have to set up a font using h1 or any tag of our choice and place it at the desired location. I have placed my font in the center using a flexbox.

The result can be achieved with the help of

linear-gradient()
background-clip
text-fill-color
animation

1.Linear-gradient() property:
As explained above, this property creates a background linear gradient on the text block.
In CSS, linear-gradient is implemented using:

background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

And the result will be:

2.background-clip() property:
This CSS property sets whether an element's background extends underneath its border-box, padding-box, or content-box.

background-clip: text;

And after applying this property, our text will look like:

The background is painted within (clipped to) the foreground text.
Due to the text-color, we cannot see our linear gradient color, and then comes the use of our third property.

3.text-fill-color property:
Since we want to see the linear-gradient which is clipped to the foreground text, we have to make the color of the text transparent and the outcome will be:

Now, let us put some animations to achieve our desired result.
For this we will increase the background size of the gradient so that when we make the animation we can see the effect clearly.

background-size:300%;

Now, let's add the css animation:

animation: bg-animations 2s infinite alternate;

Here, bg-animation is the name of the keyframe which we will use to animate. You can name it anything you like.

Now we will create out keyframe animation as below:

@keyframes bg-animations{
  0%{
    background-postion:left;
  }
  100%{
    background-position:right;
  }
}

And voila, we are done. You can see you your gradients animating:

View Full Code in Codepen:

Six free websites to generate Gradients

Tejashwa Rajvardhan — Fri, 11 Sep 2020 16:33:53 +0000

These free websites let you generate myriad options of gradients available and even you can create your own custom gradients.
These websites have the option to copy the CSS Code of that particular gradient swatch with just a click.
Let's take a look.

How to create text gradients using CSS easily.

Tejashwa Rajvardhan — Fri, 11 Sep 2020 07:46:51 +0000

A gradient is a continuation of colors with a starting and stopping point and a linear-gradient gradually moves in a straight line to another color.

Gradients are the latest trends these days and most of the websites are designed using gradients. With the background-clip property of CSS, it's very easy to implement gradients in text.

Syntax: How to create Text gradients

First, we have to set up a font using h1 or any tag of our choice and place it at the desired location. I have placed my font in the center using a flexbox.

The result can be achieved with the help of

linear-gradient()
background-clip
text-fill-color

1.Linear-gradient() property:

As explained above, this property creates a background linear gradient on the text block.
In CSS, linear-gradient is implemented using:

background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

And the result will be:

2.background-clip() property:

This CSS property sets whether an element's background extends underneath its border-box, padding-box, or content-box.

background-clip: text;

And after applying this property, our text will look like:

Now you are wondering what happened to the linear-gradient we applied earlier, but after looking closely in the image you can see colors surrounding the text.

The background is painted within (clipped to) the foreground text.

Due to the text-color, we cannot see our linear gradient color, and then comes the use of our third and last property.

3.text-fill-color property:

Since we want to see the linear-gradient which is clipped to the foreground text, we have to make the color of the text transparent and we can achieve our result.

text-fill-color: transparent

And the result will be something like this:

View full code in Codepen

DEV Community: Tejashwa Rajvardhan

map, filter and reduce in javascript - the easy way

How to create animating gradients in CSS easy way.

Six free websites to generate Gradients

1.Grabient

2. CSS Matic

3.UI Gradients