DEV Community: Zakk

forEach: Learn JavaScript's Array Methods by Building Them

Zakk — Tue, 17 Nov 2020 18:38:39 +0000

Introduction

JavaScript's array methods are really powerful tools for writing code that is expressive and easy to read. But for beginners, they can be difficult to understand. Once you're comfortable with loops, forEach is a great first array method to learn because it is just a small abstraction over a single for loop.

This article is part of a series I'll be doing where I explain JavaScript's built-in array methods. I'll describe how and when to use them as well as how to implement them yourself. The goal of implementing the array methods yourself is to help you understand what's going on under the hood. So when you want to use map or see a code block that is using reduce, you'll be able to understand what's going on.

Developing a deeper understanding of JavaScript's array methods is a great way to improve the readability of your code. Every array method is an abstraction over a for loop, meaning anything you can do with an array method can be done with a for loop, and vice versa. The difference is that array methods make your code a lot more readable by making it more expressive.

I think of learning new programming language constructs as similar to learning new categories of vocabulary of a foreign language. If you learned Spanish or French in school, then you probably had lessons dedicated to asking for directions, ordering food at a restaurant, or interviewing for a job. In these lessons, you learned words and phrases that were more likely to come up in those specific settings so that you could better express yourself.

Sure, you can sit down at a restaurant and ask for "the plate with green stuff on it," ("el plato con cosas verdes") but the waiter will have an easier time understanding what you mean if you just say "a salad, please" ("una ensalada, por favor").

Learning this vocabulary helps you express yourself more clearly, just as learning programming language constructs helps you write more expressive code for particular kinds of problems. JavaScript's array methods will help you write more expressive code when working with arrays.

I'm going to go through every built-in array method and explain what it does and how to use it, as well as show you how it works by explaining how you could implement it yourself. If that sounds like something you're interesting in, follow along by signing up for my newsletter and following me on Twitter.

Let's get into it

How it Works

We're starting with forEach because it is the lightest abstraction over a standard for loop. A common task when working with arrays is to loop through and perform some action on each item in the array. For example, you might do something like this:

const numbers = [1, 2, 3, 4, 5, 6];

for (let i = 0; i < numbers.length; i++) {
  let number = numbers[i]
  console.log(number)
}

In the above snippet of code, we create an array of numbers (called numbers), then create a for loop to go through each item in the array. Within the for loop, we simply grab the current item and console.log it.

If we wanted to make the above snippet of code slightly more abstract, we could modify it to look like this:

const numbers = [1, 2, 3, 4, 5, 6];

function printNumber(number) {
  console.log(number)
}

for (let i = 0; i < numbers.length; i++) {
  let number = numbers[i]
  printNumber(number)
}

Here we've created a function called printNumber that takes a number and prints it to the console. The important point is that this function does whatever action we're performing on each item of the array. In this specific example, that just means print it. We'll come back to this function in a bit though.

Implementing Our Own

As the name suggests, the forEach method loops through an array and runs a function for each item in the array (just like our previous snippet of code). We're actually really close to the implementation of forEach already.

To implement our own forEach method, we need to define a function that takes an array and a function, loops through the array, and passes each item into the function.

Let's start by defining our function:

function forEach(arr, fn) {
  // more to come here ...
}

We've declared a function called forEach that takes two arguments: an array called arr and a function called fn.

Next, we want to loop through every item in the array:

function forEach(arr, fn) {
  for (let i = 0; i < arr.length; i++) {
    // more to come here ...
  }
}

We've added a for loop that goes through the passed in array. Note this is the exact same for loop that we had above.

Now all that's left to do is to get the current item and pass it into the function, fn:

function forEach(arr, fn) {
  for (let i = 0; i < arr.length; i++) {
    let item = arr[i]
    fn(item)
  }
}

And there you have it! Now you can see it all together:

const numbers = [1, 2, 3, 4, 5, 6];

function printNumber(number) {
  console.log(number)
}

function forEach(arr, fn) {
  for (let i = 0; i < arr.length; i++) {
    fn(arr[i])
  }
}

forEach(numbers, printNumber)

`forEach` in Action

Now that we have our forEach method defined, it's just a matter of modifying the function that we pass in to the items in numbers.

We could, for instance, double each number in numbers:

function doubleNumber(number) {
    console.log(number * 2)
}

forEach(numbers, doubleNumber)

Alternatively, we could use forEach to get uppercased versions of an array of strings:

const names = ["Mercedes", "Antonio", "Sergio", "José", "Ana", "Carmen", "Dolores"]

function uppercaseName(name) {
    console.log(name.toUpperCase())
}

forEach(names, uppercaseName)

Why Array Methods

The goal of JavaScript's array methods is to provide built-in methods for common tasks and to help you write more readable code. Any for loop requires really looking at and reading the code in order to understand what it's doing. We can change the meaning of a for loop a lot by just changing a few characters:

for (let i = 0; i < numbers.length; i++) {
  let number = numbers[i]
  console.log(number)
}

for (let i = numbers.length; i > 0; i--) {
  let number = numbers[i]
  console.log(number)
}

Here we have two for loops that are nearly identical, but one loops through the array backwards (from last index to first). You can see the difference when you read through the code, but it's not immediately obvious at first glance. Also, the construct of the loop isn't the important part of this block of code, the body is, so we don't want to have to spend time reading and understanding it.

Think back to the Spanish restaurant and our plate with green stuff on it. The waiter is going to have to check if you mean the salad or the side order of asparagus, just like we have to check what this loop is doing. It's easier for everyone if we just learn how to ask for a salad.

When we say we want our code to be easy to read, we mean we want it to be easy to understand what it is doing at first glance and without taking the time to work through the syntax piece by piece. Using array methods, like forEach, makes this a lot easier:

const numbers = [1, 2, 3, 4, 5, 6];

function printNumber(number) {
  console.log(number)
}

forEach(numbers, printNumber)

Conclusion

That concludes my discussion of forEach. I hope that you found it helpful, but I also hope that you found the implementation of forEach fairly simple. I find a lot of JavaScript developers haven't thought about how these methods are implemented. When you do, you see that they're all pretty simple. Going through and thinking about how they're implemented made using them a lot easier, which is what I hope to share with you.

I'm going to go through and explain and implement every built-in array method, which will help you understand how they work and when and how to use them. To follow along, sign up for my newsletter and follow me on Twitter.

Landing My First Freelance Development Projects

Zakk — Fri, 18 Sep 2020 17:03:30 +0000

I recently took the plunge and left my job to freelance full-time as a web developer. It’s been an amazing transition and I honestly regret not doing it sooner.

There are so many reasons why more developers should consider freelancing full-time. For instance, you have the freedom to control your own schedule. I take advantage of this by carving out a few hours in the middle of the day to read or take my dog for a long walk. If demand is high enough, you can pick and choose the projects you take on. I feel fortunate, at the moment, to only be taking on clients who I really want to support. You can also often earn more freelancing than you can working for a single company. I’m on track to earn more than twice what I made at my previous full-time job.

All that said, getting to the point where you can make the jump takes time. I freelanced on the side for five years before I built up enough work to start doing it full-time. It doesn’t have to take you that long, but it will take a while to build up a steady stream of incoming projects.

Starting Your Search

Before you start, you need to realize that the economy is enormous, unfathomably so, and the market for people who can code is huge. If you’re flexible with the kinds of projects you take on and the technologies you use, there’s more demand out there than you can meet.

My freelance projects have ranged from things like:

HTML/CSS emails
Simple scripts that pull data from a website and store it in a database
WordPress sites with multiple page templates
Production applications with user authentication and complex relational data

The challenge is finding the demand for your skill-set.

When thinking about where to start finding freelance projects, many developers draw a blank. Others jump to networking, whether that’s literally hitting the streets, or messaging people on Twitter, Craigslist, and LinkedIn. Still other developers immediately sign up for sites like Fiverr and Upwork.

I tried both of these approaches. With mixed results.

I messaged people on LinkedIn and responded to ads on Craigslist; I also handed out business cards at meetups and other events. Networking can be a good approach. The challenge with networking is that you have to connect with a lot of people in order to get any work.

So what about Fiverr and Upwork?

I tried these and was able to get a project or two through these sites. A friend connected me with someone who worked full-time through Fiverr and, over coffee, this person validated the challenge I was experiencing with sites like this: the projects tend to be small and low-paying, so you have to complete a lot of them in order to make a sufficient living. This developer lived in Costa Rica, so he could earn less and comfortable. I lived in Washington, D.C where rent is… higher…

A Better Way.

When Willie Sutton, an infamous bank robber, was asked why he robbed banks, his response was, “Because that’s where the money is.” If you’re looking for work as a freelance developer, you have to take a step back and think, where are the projects?

When someone needs a new website, they research their options and then hire a designer to figure out what the site should look like. Then the designer and the client go out and find a developer who can build and launch the site.

The best thing you can do to start getting freelance work isn’t to network extensively or sign up for Fiverr, it’s to try and find designers who need a developer.

Partnering with designers has one huge advantage over networking and Fiverr: it’s where the need for developers is. If you go out and try to find work for yourself, the audience of people you have to network with is huge. And, once you finish building a website for a client, they probably won’t need another one for a couple of years, so every time you finish a project you have to go and find a new client. If you instead focus on finding designers, you only need to find and partner with two or three who can send you a relatively steady stream of work.

So now the challenge is to find a couple of designers who you can partner with.

Finding and Connecting with Designers

So how do you find and connect with designers? Well, the same way you’d find and connect with anyone: using and expanding your network.

The first designer I worked with was the edgy older brother of a close friend (a lot of designers try to be edgy). The second had completed the same coding bootcamp, but a previous cohort. The third was a friend-of-a-friend’s wife and the fourth was the husband of one of my wife’s coworkers.

You should definitely start by tapping your network, as it’s likely to quickly lead to some freelance work. But if you don’t know of many designers, there are still other options. In a pre-COVID world, I would suggest attending meetups, where you would find large rooms filled with designers, many of them full-time freelancers. Post-COVID, you can still try meetups, but connecting with individuals won’t be as easy because of the way events are structured now.

What you can do instead is reach out to people for “coffee” or a quick chat. I have found that people are far more willing to hop on a 30 minute phone call now (audio, not video) than they were before.

You will likely still have to connect with a few designers before you find someone willing to pass their work on to you. Once you have partnered with a designer though, they’re yours to lose.

Keeping the Designer as a Client

So you’ve partnered with a few designers. What now? How do you keep them happy so they’ll keep sending you work?

You want to keep two things in mind. First, the designer will always feel exposed, or like there’s some risk in delegating work to you. Second, you are taking on the entire technical side of the project, not just implementing the designs.

You have to understand the designer’s side of freelance work to see why they’ll always feel nervous about delegating work to you. The client paying both of you is actually the designer’s client, so their reputation is more at risk than yours. The designer is delegating the actual construction of their designs to you for their client.

This is really important for you to remember. You have a skill set the designer probably doesn’t have and you are doing something for them and their client. Add in the fact that this designer has almost certainly been burnt by developers in the past and you can start to see why they’re nervous.

Secondly, you’re responsible for the whole technical side of the project. I’ve had friends and former coworkers try to start taking on freelance projects thinking they would only be responsible for implementing the designs. That’s 80% of what you’ll need to do, but that last 20% is what’s going to make or break your relationship with the designer.

The designer hired you because they can’t build the website themselves. That means they also probably can’t set up hosting or administer the site. In the designer’s mind, that’s part of building the site, which you are expected to handle.

You’re not likely going to get out of hosting and administering the site. So the best solution is to have easy, standard options that you can use. It’s not sexy by any means, but I’ve set up hosting for clients on Bluehost. I know, it’s not AWS but it’s easy and cheap and I actually had to do very, very little to get the site live. Meanwhile, the designer, who you remember is really my client in this project, didn’t have to do anything and was able to give their client an easy and affordable hosting option.

Conclusion

I fell into this insight by accident. My friend and his older brother needed a website built for their startup and my friend knew I had just graduated from a coding bootcamp. The older brother said that he often had a hard time finishing projects for his clients because he couldn’t code and he didn’t know many reliable people who could.

So if there’s a formula for success in getting started as a freelance developer it’s this: find people who have work (i.e. designers) and be reliable.

With time, you can work up to doing this full-time, like I have, or you can just do it on the side, like I did for the last 5 years. The decision is up to you. I made the switch when I had enough current and incoming work that I felt comfortable giving it a shot. Whatever your end goal is, the best thing you can do right now is get started.

If you enjoyed this post, you should follow me on Twitter where I write post programming and freelancing.

DEV Community: Zakk

forEach: Learn JavaScript's Array Methods by Building Them

Introduction

How it Works

Implementing Our Own

forEach in Action

Why Array Methods

Conclusion

Landing My First Freelance Development Projects

Starting Your Search

A Better Way.

Finding and Connecting with Designers

Keeping the Designer as a Client

Conclusion

`forEach` in Action