Imperative vs Declarative JavaScript

Imperative

Let's learn about the different between imperative code and declarative code. Imperative code generally describes the control flow lot more detail it's usually more verbose than declarative code whereas declarative code it generally expresses logic it'll sort of make more sense in terms of how you might describe how the program works to someone in real life and it sort of abstract away the control flow.

So usually you'll use some sort of function or method that sounds like what you want it to do but it's not necessarily obvious what's going on under the hood so to drive this point home let's go ahead and just create some identical functionality using both imperative and declarative methods.

So first I'm going to create an imperative function that essentially will take an array as it's argument and filter out any numbers that or retain any numbers that are less than the number 10.

So let's create a function and we'll assign it to a variable called filterValue and again it'll take array as an argument and we're just going to use arrow functions here.

So for control flow I'm going to manually iterate over the array so we're gonna have a less than 10 array that starts out as empty and this we're going to end up putting our less than 10 items there and then we're going to iterate through our array.

So we'll just do a for loop for i = 0 and i is less than the length of the array and then we'll increment i. So if our i fell increment of arr is less thean ten we will put it into our less than 10 array. So we'll say less than ten array push array item i and after we've iterated through everything what we're gonna do is just return or filterValue array. So to make sure that this actually works let's just go ahead and create an array here and we'll say it has values 1, 30, 2, 7, 11, 25 and earlier on let's just go ahead and put the number 30 in here.

So this will be our test array so we'll just console.log filterValue and pass the array to it. So if we run this. Great so we find that only 1 2 & 7 . Our array that are less than 10 so that's great.

So this is very imperative because we're describing exactly what happens there's no mystery to this code but it is fairly for both so let's see if we can accomplish the exact same thing using a more declarative method here.

const filterValue = arr => {
    const filterValue = [];
    for(let i = 0; i < arr.length; i++){
        if(arr[i] < 10){
            filterValue.push(arr[i]);
        }
    }
    return filterValue;
}

const arr = [1, 30, 2, 7, 11, 25];
console.log(filterValue(arr));

Output

Declarative

Again we'll create a constant n filter and equal an arrow function and so I'm going to do is use our built-in array prototype filter method and then for each item I'm going to say basically if that item is less than 10 we will retain it and so I think that'll actually be it and so we can test this out once again using it on the same array of items elements and we should basically end up with 1 2 & 7 again.

const filterValue = arr => arr.filter(item => item < 10);
const arr = [1, 30, 2, 7, 11, 25];
console.log(filterValue(arr));

Output

So we can see here that we're using a more declarative way of writing our function because we're basically saying yeah go ahead and filter our array based on this criteria we don't actually know what's going on under the hood necessarily of this filter method which is you know you could consider that good or bad but this is just more declarative way of doing.