👶🏽 Steps

learnyounode

From your terminal: learnyounode to open up that menu again, and this time, select the 2nd challenge.

Create a New File

Navigate to your directory for our work and do: touch baby-steps.js

Overview

1. We will receive some numbers as command line arguments.
2. We need to sum the numbers to the console.

process.argv

node runs using process. Basically...just a...process 😼, but modeled as an object, we can use dot notation to access various 🔑s. One of these 🔑s is: argv.

---

learnyounode run baby-steps.js will let us 'test run' our code. We'll use this to iteratively to test things and explore some concepts along the way.

---

In your file, enter: console.log(process.argv) - log is similar to info, but we use log for 'temporary' messages that we don't really care about Source.

When you learnyounode run baby-steps.js, you'll see something like:

[
  '/usr/local/Cellar/node/14.14.0/bin/node',
  '/Users/codefinity/Code/Lurn/nodeschool/learnyounode/baby-steps.js',
  '9',
  '95'
]

You probably recognize this as an array; we know that it's an array because of the enclosing [ ].

The first 2 elements (each element is separated by a ,), we don't really care about. As you C 👀, it's just info about node and the file that we are 🏃🏽‍♂️.

The next 2 elements appear to be the numbers supplied by learnyounode.

process.argv is how we read in any command-line arguments in a node.

At this point, we might be able to solve this by just doing: console.info(process.argv[2] + process.argv[3]) (recall that we access elements in an array via numerical indices starting at 0).

But...that's not very robust; we should be able to receive a variable number of arguments.

Array Destructuring argv

const [_, __, ...numbers] = process.argv;
console.log(numbers);

Test this code: learnyounode run baby-steps.js. You should see something like: [ '11', '95', '58' ]. What is happening 🤔?

Destructuring

const, of course, declares to JS that we want to create some variables. Next, we see: [_, __, ...numbers] = = process.argv. This is array destructuring. We are pulling out values from the process.argv array, index by index.

Recall that we don't care about the first 2 indices of process.argv 👆🏽. That's what the _ and __. You could put whatever names you want in there, but those underscore(s) are a convention to signify that we are discarding some variables. So, those would be argv[0] and argv[1] - again, the things we don't care about.

Spread Operator

Next, we see .... This means that whatever remaining values that exist in the argv array - whether there's only 2 or 1000 - we want to 'spread' them out and collect them into a new array under the name numbers. And, that's why we can do console.log and see 👀 in our terminal.

reduce The Numbers (and 'log' them)

Here's the rest of the code we'll need.

console.info(
  numbers.reduce((total, number) => {
    let t = total;
    t += Number(number);
    return t;
  }, 0)
);

We are using reduce as numbers is an array. Regardless of how many numbers are in numbers, we will iterate over numbers, look at each number (num). We will reduce numbers down to 1 number (total). This is how we will 'sum' all of our numbers.

reduce takes a callback function as it's first argument:

(total, number) => {
    let t = total;
    t += Number(number);
    return t;
  }

This is a callback function b/c it is being passed or 'called 📲 back' by another function/method, reduce. This callback function is written using arrow syntax. If you are not too familiar with functions yet, you can check here:

Intro to Functions In JS 💻

Lily Misra ・ Oct 15 '20 ・ 1 min read

#functional #codenewbie #javascript

.

Our callback function takes 2 parameters: (total, num). These represent our...the 🏃🏽‍♂️ total and whatever the current number is in our array.

let t = total;
    t += Number(number);
    return t;

Now, for each iteration, we will assign total to t: let t = total; to avoid mutating a parameter - no worries ;) if YDK what that means.

Next, we need to take that total, t, and add the current number to it. Along the way, we are explicitly converting the string number (command line arguments come in as strings) into a Number. This will prevent JS's stupid 'concatenation of strings' behavior 😠.

Finally, we return that newly updated total - t and the process continues, updating total and iterating over each number in numbers.

reduce 2nd Argument (Optional)

After that callback function, we see: }, 0). This 2nd argument initializes total at 0. Technically, we could have gotten away without this, but I have found that much reduce confusion 😕 can be avoided by simply including this optional argument to explicitly initialize our 'total.'

All Together Now 🧑‍🤝‍🧑

We just wrap that reduce in a console.info and we can run learnyounode verify baby-steps.js to pass this challenge! 🤓

---

const [_, __, ...args] = process.argv;

console.info(
  args.reduce((total, arg) => {
    let t = total;
    t += Number(arg);
    return t;
  }, 0)
);