A Super quick guide to arrow functions

I added a video version of this blog. If you prefer video, check it out: https://youtu.be/HC2W75WMw6c

This is NOT a definitive guide to arrow functions. I’m writing a few other tutorials and blogs and want to have something to point people to so they can have a quick explanation and example of arrow functions since they are in so many of the modern frameworks. Just enough to be dangerous! To be clear, there are reasons where you should not use arrow functions, but they are not going to be discussed in this blog post. I just want you to be able to know how they work when you see them “in the wild”.

Let’s get started. I’m going to take you step by step converting a regular function into an arrow function.

Here’s a regular function using the function keyword

Let’s change that to an anonymous function expression

Should be nothing new here so far. No Arrows or ES6 yet, but here it comes…

First remove the function keyword and add the arrow

The only thing going on there is removing the function keyword and adding the arrow. And that’s it! You’ve gone and made an arrow function! Hurray! But wait, there’s more!

If there is only one argument, you can get rid of the parentheses around it.

Getting pretty lean but we can take it even further. If the body of the code is only one line, we can get rid of the curly braces.

Frequently, you’ll see these used as a callback in another function so there is no const and no function name. This is the case that we see quite a bit and the real reason I wrote this all up in the first place

This doesn’t do anything on its own, but as a callback it’s useful. Here we’re using as a callback for looping over an array with the forEach array method.

As a comparison, here’s a regular old for loop. Sure, we understand this as programmers, but the arrow function just reads like a sentence in normal language. So much easier to understand!

I think that covers the basics. Again this is not meant to be the definitive guide, just an intro to figure out what they mean because we see them ‘in the wild’ in all the modern frameworks.

How to prevent ejs from splitting a string in attribute-value pair in a form field

TL:DR – put quotes around your EJS value when it is being used as an HTML attribute

I was making a simple Express app with EJS templating and MongoDB for my REST API. I passed the response, which was a few strings and a date, to the view in the typical fashion, and I could verify that the data was being passed by outputting the object to the view like this:

<%=responseObject%>
//which displayed this:
{ 
  _id: 5d347b004b0c201108909a55, 
  name: 'hot dogs', 
  description: 'costco dogs', 
  dateOnBag: '3/4/19', __v: 0 
}

This displayed the entire object on the screen. Additionally, I could display one of the object’s values using dot notation with no problem.

<h1>Edit <%=responseObject.name%></h1>
// which displayed this

Edit hot dogs

However, when I tried to use the same syntax to prefill a form field like this:

<li>
  <input type="text" name="name" value=<%-responeseObject.name%>><br />
  <label for="name">Item Name </label>
<li>

It pre-filled only the first word, “hot” instead of both words “hot dog”


I finally figured out that I needed to put quotes around it. When Express renders the page it simply replaces the EJS syntax with a string of text so the resulting HTML looked more like this:

  <input type="text" name="name" value=hot dog><br />

I later learned that HTML attribute values do not always need quotes. (basically, when there are no spaces) https://mathiasbynens.be/notes/unquoted-attribute-values So in the example above,

value=hot dog
//is equivalent to 
value="hot" dog

which leaves dog just hanging out there, an attribute without any value which HTML just ignores in this case. Actually, if I’m interpreting the spec correctly, it is setting the value of dog to true which is any case is not used so again it is ignored. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes