👶🏽 Steps
Tags: node, beginners
Published: 2020-10-21 02:26:46

## `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](https://stackoverflow.com/questions/25532778/node-js-console-log-vs-console-info).

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

```bash
[
  '/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`

```javascript
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.

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

We are using [`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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:_ 

```javascript
(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: {% link https://dev.to/awesomecoder123/intro-to-functions-in-js-3l35 %}.

Our _callback function_ takes 2 _parameters:_ `(total, num)`. These represent our...the 🏃🏽‍♂️ total and whatever the current number is in our array.

 ```javascript
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! 🤓

---

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

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