Basic JavaScript for D3 V4 - Array Map
FREE     Duration: 3:13
Part of Course: D3 V4 Tutorial
 

Takeaways:

  • JavaScript Array Map Method evaluates a function for each element in the array
  • JavaScript Array Map Method returns a new array
  • The new array is made up of the values returned from passing each of the original array's values into the function we define

Resources:

Transcript:

Basic JavaScript for D3 V4 - Array Map

The JavaScript Array Method "Map" takes an array and applies a function that we define to each element of the array.

Then it returns a new array with the returned value of the function applied to each element.

In this exercise, we're going to create an array called "startArray", which is a list of five numbers.

var startArray = [1, 2, 3, 4, 5];

One, two, three, four, five.


Then we're going to create a variable called "evenArray".

var evenArray = startArray.map( function(x) { return x % 2 === 0; } );

What this does is it maps the function that we define, here an anonymous function, that takes in a value and calculates the value modulus 2 whether it's triple equals or not to 0.

What that means is that the 1 will go into the "x".

Then the 2.

Then the 3.

Then the 4.

Then the 5.

That will give us the "evenArray".

evenArray;

An array where each value goes through this anonymous function.


Then we do an "oddArray".

var oddArray = startArray.map( function(x) { return x % 2 !== 0; } );

Where we have the "startArray" and we map this anonymous function where rather than checking if the value modulus 2 is triple equals to 0, here we're looking to see if it's not equal to 0.

That will give us the "oddArray".

oddArray;


Finally, we're going to create a variable called "biggerThanTwoArray".

var biggerThanTwoArray = startArray.map( function(x) { return x > 2; } );

Which takes the "startArray" and maps the anonymous function.

Where it's going to take the value and check whether it is greater than the number two.

So it'll go 1, 2, 3, 4, 5.

And this anonymous function will be evaluated for each of those values.

And that will return the "biggerThanTwoArray".

biggerThanTwoArray;


Lastly, we look at the "startArray" to see what size it was.

startArray;


Let's open the Chrome web browser and run this exercise.


We start with the "startArray":

var startArray = [1, 2, 3, 4, 5];

And we create the "evenArray" variable:

var evenArray = startArray.map( function(x) { return x % 2 === 0; } );

When we look at the variable see that it is false, true, false, true, false.

Again, remember that this anonymous function gets applied to each element of the array.

So here we see that 1 modulus 2 is not equal to zero.

This is true because 2 modulus 2 will return zero.

3 gives us a false.

4 is true.

And 5 is false.


Next we create the "oddArray":

var oddArray = startArray.map( function(x) { return x % 2 !== 0; } );

Here we see that it returned an array where it's true, false, true, false, true.

Which is the opposite of the "evenArray".

Which is what we expect.


Then we create the "biggerThanTwoArray" variable:

var biggerThanTwoArray = startArray.map( function(x) { return x > 2; } );

When we look at this, we see false, false, true, true, true.

So we can check:

Is 1 bigger than 2?

False.

Is 2 bigger than 2?

False.

Is 3 bigger than 2?

True.

So on and so forth with 4 and 5.


Lastly, we look at the "startArray" to see that it was not modified in any way:

startArray;

So again, the "map" applies a function to each element of the array and returns a new array.

That's why the "startArray" is still the same.

<< Back To D3 Screencast and Written Tutorials Index