« Previous Tutorial Next Tutorial »

Welcome back to Five Minute React. In our last tutorial, we got set up with a package manager and initialized a project. Now we’re going to write a simple JavaScript app and run it. That’s right, some actual coding! Finally, right?

Let’s dive right in. In the previous tutorial, we created a file called index.js in our yarntest directory. For this test, we’re going to create an array, run a map function on it, check and make sure that works, and then run a reverse map function on it using the third party map-reverse module that we already added as a dependency.

Let’s start by building an array. I like to use realistic-looking data in my tutorials, rather than foo bar baz stuff, because I’ve always found it easier to follow along that way. Hopefully you guys agree. So, here’s our array of data:

const userNames = [
  'cwbuecheler',
  'bort',
  'captaincode',
  'hotpants6969',
  'kelly',
  'steve',
  'starlord'
];

Nothing unusual there, but you might notice that we’re using const and not var. That’s because Node 8.10.0 fully supports ES2015, so we’re going with the new variable declaration syntax of const for variables that don’t change, and let for variables that do. If you need help with ES2015 (aka ES6), I absolutely recommend checking out Wes Bos’s ES6 For Everyone course. He goes through all of the new features in detail. I’ll be explaining a bit as I go along, but for a more thorough grounding, definitely give his stuff a look.

Now let’s use Array.map to convert those usernames to uppercase. In case you need a refresh, Array.map runs through every item in an array and executes a function through which you can manipulate that item, and generates a whole new array from the results. Here’s the code:

// Use map to generate an array of uppercase usernames
const userNamesUp = userNames.map(name => {
  return name.toUpperCase();
});

OK, there’s some more ES2015 stuff here. Another const since once we define the value of userNamesUp, we’re never changing it. Also our first “arrow function” of this series, which you’re going to see a lot, especially once we hit React development. The code above is functionally equivalent to a regular JavaScript anonymous function like this:

const userNamesUp= userNames.map(function(name) {
  return name.toUpperCase();
});

It’s just slightly more concise. Arrow functions also handle how this is scoped somewhat differently, but that’s not relevant here. For more info, again, check out that Wes Bos course. You can also read up on arrow functions at a variety of places on the web, including, of course, Mozilla’s Developer Network.

Now that we’ve got our map function in, let’s write a quick for loop to run through our brand new array of uppercased names and console.log them. Three lines, here we go:

for (let i = 0; i < userNamesUp.length; i++) {
  console.log(userNamesUp [i]);
}

All right. That’s all we need for now. Save the file, jump back into a terminal window, make sure you’re in your yarntest directory, and type the following:

node index.js

Assuming you typed out all of the code correctly, you’re going to get this:

CWBUECHELER
BORT
CAPTAINCODE
HOTPANTS6969
KELLY
STEVE
STARLORD

and be returned to your command prompt. You’ve successfully mapped an array and then output the results. Nice job. Note that if you were to change those final lines to use userNames instead of userNamesUp, you’d get the original, non-capitalized list. This is because Array.map is non-destructive. It doesn’t overwrite the array on which you use it, but rather generates a brand new one.

Now we’re going to introduce a third-party module. Unfortunately, as of 8.10.0, Node.js does not yet support ES6 import syntax, so we have to use require instead unless we want to run Babel on all of our code, which is a little tedious just to go from this:

let mapReverse = require('map-reverse');

to this:

import mapReverse from 'map-reverse';

Though there are a few other handy things you can do with import that you can’t do with require, we don’t need them right now, so let’s just stick with require. Add this line to the top of your code:

let mapReverse = require('map-reverse');

If you were to dig in to the map-reverse module, you’d see that it exports a master object. This is what we’re importing with the “require” statement. We’ll get more into exporting in a future tutorial, although the truth is for this particular app, we’re not going to be doing a lot of it at the Node level … most of our exports will be in various React files.

Now that we have mapReverse, let’s use it. At the bottom of index.js, type the following:

const userNamesUpRev = mapReverse(userNames, name => {
  return name.toUpperCase();
});

this is very similar to our map statement above, but we’re using the mapReverse function and passing it two parameters: the array we want to use, and the anonymous function we want to run on that array. Again, you could also write this code in the following non-ES6 way:

const userNamesUpRev = mapReverse(userNames, function(name) {
  return name.toUpperCase();
});

What this code is going to do is leverage mapReverse to iterate backwards through the array while performing our requested operation on each item, resulting again in a brand new array (userNamesUpRev) filled with the modified content. If you think it through, you can probably determine what the output’s going to be, but let’s write another for loop at the bottom of index.js to show the results. We’ll also put in a little separator just to make it easier to read in the console. Add the following code:

console.log('--------------');
for (let i = 0; i < userNamesUpRev.length; i++) {
  console.log(userNamesUpRev[i]);
}

We can use i again as an iterator because of the way JavaScript scope works. The variable i only exists while each for loop is running.

Save your file and head back to the command prompt. Type:

node index.js

and hit enter. You’ll see the new results:

CWBUECHELER
BORT
CAPTAINCODE
HOTPANTS6969
KELLY
STEVE
STARLORD
--------------
STARLORD
STEVE
KELLY
HOTPANTS6969
CAPTAINCODE
BORT
CWBUECHELER

So, there you have it: we’re using a third party module in our code to save ourselves from having to write the routine ourselves. We’ll be using this functionality a lot, especially once we get to React development. First, though, we need to get our database up and running. Join me in the next tutorial and we’ll do exactly that!

« Previous Tutorial Next Tutorial »