Let's Review (or learn about) Declaring Variables, Arrays and Functions!
Tags: javascript, beginners
Published: 2020-02-22 23:18:32

Given an Array of numbers, generate a new Array with each of the previous numbers doubled.

As this is not an exhaustive JS lesson, I am assuming that you know how to run JS in your *browser console* or in a *terminal* with `node`, and that you are familiar with `console.log()`. I also assume that you know how to use `.` notation to access *properties* and *methods* in JS. I also assume that you have at least heard of the concepts described above, but I will go into a bit of review as we move along.

## Declaring and Initializing a Variable

For our purposes, we will look at the *keyword* `const`. This is one of 3 possible *keywords* that we could use to let JS know, "Please reserve some space in memory!" 📢

After this, JS will want us to make up a name for this space in memory, for example `nums`. So, `const nums`.

That took care of *declaring* a variable (a named space in memory), but with `const`, we are obligated to *initialize* a *value* at the same time. This just means that we must immediately *assign* a *value* that this newly created *variable* will *reference.* Some people like to think of this as a 'mailbox' 📫(the *variable)* with some 'mail' mail in in it (the *value*). This is not a wholly accurate visualization, but it's good enough!

Anyway, to wrap up the process here, we could create some data that is an *Array* (more on this later 👇🏽) and *assign* to this newly created named space in memory: `const nums =  [15, 20, 30, 40, 60];`. So, now JS has encapsulated a *collection* of *numbers* as an *Array* and placed it in memory 🧠. We can now *reference* that *value* using the  *variable* `nums`.  

## Arrays

As previously mentioned, `[15, 20, 30, 40, 60]` is a 'collection' or *composite data type* known as an *Array.* 

*Arrays* are denoted by `[]`s. The *elements* it contains can be of *any* *data type* (including other *Arrays*). Each element within is *delimited* (separated) by `,`.  This is an *Array* with 5 elements. It has a `length` of `5`.  We can do: `nums.length`.

The first element is at *index* `0`. We access this like so:  `nums[0]` 👈🏽What *value* is stored in the first *index* of the *Array*❓`15`. Take care to not confuse the *number* values with their *indices.* Remember that we happen to be using *numbers* inside of this *Array*, but we could use *any* data type.

To drive home the point, what *value* is at `nums[2]` ❓`30`.  

## Functions

In order to complete the task we mentioned previously, 👆🏽, it will be helpful to write a *function* that can take in a *number* and double it: `const doubler = num => num * 2;` `num` represents the *parameter* that our *function* expects. This is not surprising, as we can't expect our *function* to 'guess' what *number* we want to double, right?  **`num` does not have *anything* to do with `nums` 👆🏽*- it's just a name that could have been anything.***

`=>` is a shorthand notation for writing `function` that is part of the ES6 specification (released in 2015). As part of that notation, if we only have 1 *expression* (`num * 2`), then the resulting *value* that is created will be `return`ed *implicitly.* As an example, if we did `doubler(20)`, we would get `40` back. 

If *arrow functions* are new to you, kindly LMK and I can write up some more details in a separate post some time.

## `map()`

`map()` is a *function* AKA a *method* that is part of the *prototype* for all *Arrays.* Essentially, it means that all *Arrays* in JS are expected to be able to perform this *function -* it's  a behavior that is part of the 'model' for any *Array.* 

~~The~~ One of the interesting things about `map()` is that it's a *higher order function.* This means that as one of its *parameters* (information that it usually expects to receive in order to do its job), is a *function.* This is **part of** the concept of *callback functions.* JS has 'first class functions.' This means that anything we can do with any other *data type* we can also do with *functions.* So, if other *data types* can be passed into a *function,* then other *functions* could also get passed in. 🤓

Here's how that might look: `map(doubler)`. So, let's put it all together and now and solve our initial problem: *Given an Array of numbers, generate a new Array with each of the previous numbers doubled.*

`const doubled = nums.map(doubler);`

---

And, here's the entire program:

```js    
const doubler = num => num * 2;
const nums = [15, 20, 30, 40, 60];
const doubled = nums.map(doubler);
    
console.log(doubled);
```

As short as that is, this whole thing could have been written without any *variables*: `console.log([15, 20, 30, 40, 60].map(num => num * 2));`

---

There were a lot of *concepts* covered here - some very profound ones. And, each of these *concepts* touches upon many others. For example, what we just did is: *functional programming!* 🙀That's awesome stuff! 🤓.

Understanding the basics here opens up the 🚪to writing some *modular* and *extensible* code (for our purposes, this just means 'great code!). 

Combine this with *chaining* and the sky's the limit 🚀.