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 returned 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:
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 🚀.
Top comments (2)
I think you forgot to add
jsat the start of your code block because the syntax highlighting is not workingNice tip. Made that edit.