Doubling Down — Arrow Functions & .map()

In each phase at Flatiron School you must pass a coding challenge. The first coding challenge is focused on JavaScript, and it is a hell week indeed. Coming from not understanding any programming language in general to passing a coding challenge took dedication, determination, disappointment, lost sleep, and a new way of looking at the world. I spent a lot of nights waking up from a dream about the material, only to go back to sleep and get right back to “work.” It was a lot of troubleshooting and it hard to leave problems I hadn’t yet solved.

My advice to those who have chosen the bootcamp route and are struggling with the idea of their first code challenge: As with whatever language you decide to learn, coding is no walk in the park. This isn’t a “get rich quick!” scheme. There aren’t any secret cheats or ways to learn what you need to learn fast. You can watch other people code and read material until you’re blue in the face. You will never learn to code unless you actually CODE.

Some Tips for Success

• You have to do the work.
• Imposter Syndrome is REAL, learn how to recognize when you’re feeling it and how to get around it.
• Get comfortable with failure.
• You need to expect that your code isn’t going to work.
• Learn how to take deep breaths, take breaks, and recommit.
• Try not to compare yourself to your peers! Everybody learns differently — find what works for you!
• Getting through a coding challenge is half about the code and half about emotional regulation. RELAX!
• Lastly, and arguably the most difficult bit of advice I have for you is to be gentle with yourself! It is really an important factor to not just succeeding, but sticking with it.

I stuck with it and not only did I learn how to write and comprehend JavaScript, but I also learned, and likely more importantly: how to think like a programmer. That revolutionized the way that I studied and the way that I worked through problems. I stopped waiting for an “AHA! EUREKA!” moment, and I focused on the weak points in my knowledge base. Also, staying calm REALLY helps.

After passing the code challenge, I decided it was time to start developing my signature style. I started to study my code and employ better methods to improve efficiency. In my haste to get my JavaScript workable and organized, I focused on the traditional method of drawing up functions and not the newer ES6 method.

Arrow Functions

Functions are a core tool in JavaScript. They are essentially the building (code) blocks of your entire code.

JavaScript functions are used to hold logic, making the code more reusable and easier to understand. The syntax is simple, functions are able to take in input in the form of parameters and return an output.

Here is an example of a basic function that takes in two inputs and returns an output:

//index.js
function addNumbers(a, b) {
  return a + b;
}

In the function above, “addNumbers”, we provide it with two parameters, a and b. In the second line, we ask the function to return the sum of a+b.

Simple enough, but there’s a more effective way to create a function in modern JavaScript. Below is the same function, rewritten as an arrow function.

//index.js
const addNumbers = (a, b) => a + b;

This performs the same job as the first function, but more efficiently. “addNumbers” takes in two parameters a and b. Then we use an arrow function instead of coding a return for the sum of a + b.

Another thing I did a deep dive on was iterators, specifically .map(). I wanted to be able to condense certain blocks of code and make it look more organized. .map() is a perfect answer to that.

.MAP()

This is a higher-order function that is commonly used in functional programming, and can be applied to all sorts of collections, including arrays and lists. It takes in an argument (as a function) and applies that to each element in the array. The function may take one or more argument, and then it runs one time for each element in the array.

.map() then returns a NEW array that is the same length as the original, but with values resulting from the application of the function to each element in the original array. This is all executed without modifying the values in the original array, with the order of the elements remaining the same.

To sum it up: .map() is that it takes an existing array and applies a function to each element of the array, returning a new array with the results of applying that function to each element. The function that is passed as an argument to .map() can take one or more arguments, and it is executed once for each element in the array.

Lets take a simple JavaScript array:

let arr = [3 , 4, 5, 6]

Imagine that we would like to multiply each element in the array by 3. You could solve this by using a for loop, right? Sure, let’s check out an example.

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]
Sebhastian, N. (2023) JavaScript map

So this works!! But its a lot of typing and doesn’t look very neat. That’s where .map() comes in to save the day.

You can do the same exact thing with .map(). Observe:

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]
Sebhastian, N. (2023) JavaScript map

Tada! We have successfully used a .map() and saved ourselves several lines of writing. Glad that worked, often restructuring your code can look like this:

In conclusion, coding is a massive undertaking. It requires a willingness to fail, and the strength to keep trying when you do. It also requires a focus on reusability and succinctness, but luckily there are tons of methods to achieve your goals!!

Sebhastian, N. (2023) JavaScript map — how to use the JS .map() function (array method), freeCodeCamp.org. Available at: https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/ (Accessed: 14 August 2023).