In the previous article we learned how to tackle problems one step at a time. It’s time to get some practice and learn a little bit about one of the most common structures found in JavaScript - Arrays.

If you don’t like the “Array” word then replace it with “Collection”. Collections hold items so they act as a grouping thus we can operate on all of them in the same manner.

When things don’t scale

Imagine the following code:

 
  /**
   * Sample Usage:
   *
   *   fullName({ firstName: 'Jason', lastName: 'Bourne' });
   *   // => 'Jason Bourne'
   *
   */
  function fullName(person) {
    return person.firstName + ' ' + person.lastName;
  }
 

Given we have a function that takes person’s first and last name, we can apply it to an object:

  fullName({ firstName: 'Jason', lastName: 'Bourne' });
  // => Jason Bourne

We learned how to apply a function to a single person and return a string out of it. What if we had more records to operate on? Would it end up like this?

  var jasonBourne = fullName({
    firstName: 'Jason',
    lastName: 'Bourne',
  });
  // => 'Jason Bourne'

  var nickyParsons = fullName({
    firstName: 'Nicky',
    lastName: 'Parsons',
  });
  // => 'Nicky Parsons'

  var marieKreutz = fullName({
    firstName: 'Marie',
    lastName: 'Kreutz',
  });
  // => 'Marie Kreutz'

It does not scale, does it?

Map to the rescue

Mapping a collection means taking each of the elements, applying a function to that element and returning a totally new collection with the results.

The purpose of the drawing above is just to illustrate the process.

What you can see above is a collection of numbers 1, 2 and 3. We take a function that morphs each of those elements into the same number plus one and outputs a totally new collection with numbers 2, 3 and 4. Now let’s use the examples from the beginning of the article and learn how to use map in JavaScript.

Okay, first let’s bring back our fullName function definition:

  
  /**
   * Sample Usage:
   *
   *   fullName({ firstName: 'Jason', lastName: 'Bourne' });
   *   // => 'Jason Bourne'
   *
   */
  function fullName(person) {
    return person.firstName + ' ' + person.lastName;
  }
 

Next, let’s define a variable holding a collection of people:

  var people = [
    { firstName: 'Jason', lastName: 'Bourne' },
    { firstName: 'Nicky', lastName: 'Parsons' },
    { firstName: 'Marie', lastName: 'Kreutz' },
  ];

Now that we have a collection of people and the mapping function, let’s map a collection to a new one:

  var fullNames = people.map(fullName);
  // => [ 'Jason Bourne', 'Nicky Parsons', 'Marie Kreutz' ]

That’s it! We just learned how to apply functions that operate on single items to a collection of items! Now please go and test your new skills in the JavaScript console.

Full code:

  /**
   * Sample Usage:
   *
   *   fullName({ firstName: 'Jason', lastName: 'Bourne' });
   *   // => 'Jason Bourne'
   *
   */
  function fullName(person) {
    return person.firstName + ' ' + person.lastName;
  }

  var people = [
    { firstName: 'Jason', lastName: 'Bourne' },
    { firstName: 'Nicky', lastName: 'Parsons' },
    { firstName: 'Marie', lastName: 'Kreutz' },
  ];


  var fullNames = people.map(fullName);
  // => [ 'Jason Bourne', 'Nicky Parsons', 'Marie Kreutz' ]
 

Very important - you don’t have to map numbers to numbers, strings to strings and so on. Actually, you can map items to any type you can imagine so long as you tell the JavaScript engine how to morph the value!

Good luck!