DEV Community: Jessica Iwu

Understanding Array Higher-Order Functions

Jessica Iwu — Thu, 31 Oct 2019 10:11:05 +0000

Having an understanding of how Array Higher-Order functions work can make complex looping operations in JavaScript very seamless.

The higher-order functions to be discussed in this article are : forEach(), map(), filter(), and reduce().

At the end of this article, you'll understand what each function represents, and how to apply them in problem-solving.

Array.forEach()

Running the .forEach() method on an array executes a callback function for each element that exists in that array.

The callback function is the block that specifies what operation is to be carried out.

In the snippet below, the .forEach() method iterates over every friend element in the friends array, and logs each string to the console dynamically using the ${friend} template literal.


    const friends = ['Chief', 'Somto', 'Elma', 'Zee'];
    friends.forEach(friend => {
      console.log (`I love working with ${friend}`);
    });

    // I love working with Chief
    // I love working with Somto
    // I love working with Elma
    // I love working with Zee

Array.map()

The .map() method is similar to the .forEach() method except that it produces a new array.

With the .map() method, you can create a new array by manipulating each element in the existing array. In the illustration above, the original array contains [2,3,4], and by mapping, the new array contains the square of the original array; [4,9,16].


const ingredients = ['Jam', 'oat', 'lemon', 'lettuce', 'oil', 'fish'];

const newMeal = ingredients.map(ingredient => {
  return ingredient[0];
});

console.log(newMeal); // ['J', 'o', 'l', 'l', 'o', 'f']
console.log(newMeal.join(' ')); //Jollof

In the snippet above, there’s an ingredients array that is mapped to create a newMeal array by returning the first character of each ingredient. Notice that by attaching .join(' ') to the newMeal array, the array strings become one single string.

Array.filter()

The .filter() method shares similar characteristics with the .map() method because it returns a new array. However, just like the name implies, it filters the elements in the array based on any conditions provided.

filtering strings


const stack = ['desk', 17, 'chair', 5, 'sofa'];
const newStack = stack.filter(item => {
    return typeof(item) === 'string'; 
});

console.log(newStack); //['desk', 'chair', 'sofa']

filtering numbers


const stack = ['desk', 17, 'chair', 5, 'sofa'];
const newStack = stack.filter(item => {
    return typeof(item) === 'number'; 
});
console.log(newStack); //[17, 5]

Array.reduce()

The .reduce() method iterates an array and returns a single value. This value could be any data structure - number, string, array, etc.

The callback function passed to the reduce method accepts accumulator and currentValue as parameters and returns a single value.

Using the reduce method in the code snippet below, we are able to loop through the objects in the socialMedia array in order to get the values of the name property.

Note: When using the reduce method on an object array, a second parameter (like the empty array in the snippet) should be added.


const socialMedia = [
  {name: 'Instagram', url:'jessontel.com'},
  {name: 'twitter', url:'abc.com'}
];

const mediaName = socialMedia.reduce((accumulator,currentValue) => {
  accumulator.push(currentValue.name);
  return accumulator
}, []);

console.log(mediaName); //[ 'Instagram', 'twitter' ]

Another quick reduce example


const expenseList = [1000, 50, 250, 999];
const expenseSum = expenseList.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
, 0}
);
console.log(expenseSum); // 2,299

In the reduce method example above, the expenseList array is reduced to the expenseSum value 2,999.

The first element in the array is the default accumulator value, and the second element is the current value.

Conclusion

Iterators are very useful methods, not just in JavaScript but in programming generally. Each of them solves specific problems and make array manipulations an easy feat.

Thanks for reading! 👋🏽

If you found this article useful, please let me know and share it too so that others could benefit.
To connect with me, kindly follow me on twitter.

Getting started with Git? 10 commands that would save you…

Jessica Iwu — Wed, 22 Nov 2017 16:25:38 +0000

Pushing, Pulling, fixing Merge issues among many others, used to be insurmountable problems for me because I was not familiar with git. I was always scared that I would ruin something along the way, and cause my code to break or just disappear completely. It took a while getting to understand how these processes work. After getting a grasp of some of it, I thought I should share the knowledge.

If you do not already know why Git is important, know this:

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
~ https://git-scm.com

I’d talk about 10 Git commands that would help you work effectively.

1. git init

This is basically the starting point for you. You would need to choose a location on your system which would be used as your local Git repository. The 'init' command would create a new git repository for you. If you already have an existing project, 'init' would create a git repository in your working directory. On your terminal, cd into the directory path where your project is, and type git init.

  $ cd var/www/devProj
  $ git init

2. git clone

If you are working in a team, and you need to work on an already existing repository, you might need to clone it so as to have a version on your local. Git clone simply replicates the content of an existing repository, and reproduces it in a new directory. On your terminal, cd into the the directory path where you would want the project to be, and clone it there.

  $ cd var/www/
  $ git clone path/to/the/repo

3. git add

If you have been working on a branch, you would need to add the files you have been working on to your index before you can stage for a commit. You can add a specific file using git add or you can add all your new and modified files at once using git add . You can git add several times before committing, as long as new changes are being made.

    $ git add /name/of/file
    $ git add . //new and modified files

4. git commit

After you have added all the changes, you can stage all of them for a commit. This updates the Head but not the remote repository. Every time you use git commit,what you are doing is to collate all the file changes you have earlier recorded using git add .,and making it into an object.

    $ git commit -m "write-a-commit-message"

      //You can actually add and commit at once using -

    $ git commit -am "write-a-commit-message"

5. git branch

Git branch shows a list of all the branches available in a repository. It also shows what branch you are presently on. A branch is a portion of a project that is independent of all others.Your first commit is usually made to Git’s default branch,master. If there is a need to create a new branch, you can use git branch new-branch. This new branch would be independent of all other existing branches until it is merged into another branch.

      $ git branch branch-name
      $ git branch -D branch-name //This deletes the created branch

6. git checkout

Git checkout is necessary when you want to leave a branch. Recall that git branch only creates a new branch, however, git checkout moves you to an already existing branch.

      $ git checkout branch-name //This switches you to another branch
      $ git checkout -b new-branch-name //This creates a branch and checks out to 
         it also.

7. git status

This command tells you what branch you are currently on. It identifies all the changes that have been made, and all the changes that have not yet been added and committed to that branch.

      $ git status

8. git log

It lists all the previous commits made on that branch, the author, the time and the date of commit. This helps you keep track your activities.

      $ git log

9. git push

If there are several people working on a project,the several others would definitely need to work with the new changes you have just made on a branch. For them to access your changes, you would need to push your commits to the remote repository.This way, the remote version would be updated, and can be easily accessed by others.

       $ git push origin master

10. git pull

As a developer, you might need to pull from a couple of repositories.Pulling takes files from a remote source and merges them to your local files. That way, you would have access to the same file contents as the remote repository.

       $ git pull origin master

There are a lot of other git commands, and usually, you would find them out when you exactly need them. Nevertheless, the above listed git commands would definitely be of help to you especially if you are just getting acquainted with git.

No one knows it all, so, if there are other commands you would like to share, please don’t hesitate to drop them as comments.
If you like the article, please like and share.