DEV Community: Dan V

ES6 Arrow Function Syntax Explained Simply

Dan V — Sun, 18 Apr 2021 13:28:34 +0000

ES6 Arrow Function Syntax Explained Simply

Introduction

This is a JavaScript arrow function:

const getUserIds = users => users.map(user => user.id)

If your response to the above code is, "Wait, what?!", then read on! Even if you do understand what's going on, you may still pick up a thing or two along the way.

Some initial questions you may have:

What is it doing?!
What is it returning (if anything)?
What does the arrow mean?
What is users doing there?

In this article, I want to go over the basics of arrow functions to help new JavaScript developers understand what is actually going on here.

A quick bit of history

ES6 was the 6th Edition of JavaScript released in 2015. It is also known as "ECMAScript 6" or "EMCAScript2015". ES6 was a major revision of JavaScript, and introduced new syntax to help developers write complex code in a simpler form.

One of these new additions was arrow function syntax. Arrow function syntax (or just "arrow syntax") provides a different method of writing functions, in a way that is often shorter and mostly quicker to write and comprehend once you've grasped how the syntax works.

"Normal" functions vs arrow functions

Here is a simple function declaration in basic JavaScript:

function times10(number) {
  return number * 10;
}

Here is the same thing as an arrow function using ES6 arrow syntax:

const times10 = number => number * 10;

Let's pick out the main, visible differences in the arrow function:

There are no curly braces ({})
There are no parentheses (or "brackets") around the function parameter (i.e. = user =>)
Arguably, the syntax is a bit more streamlined.

Note that I use the word "streamlined", and not "better" or "simpler".

How is this useful?

Perhaps you're not convinced that the use of arrow syntax in the above example is providing anything much more useful than the "normal" way of writing functions. In this case, I'd tend to agree. However, arrow functions begin to show their use in more complex scenarios.

Take the below function, which gets ids from an array of user data:

getUserIds(users) {
  return users.map(function(user) {
    return user.id;
  }
}

Using arrow syntax, we can choose to write this function as follows:

const getUserIds = users => users.map(user => user.id);

In some ways, you may find the arrow function more readable and probably quicker write too. Try writing each function in a code editor and see how they compare.

Now, let's break down what is happening in the arrow function's single line of code:

We are declaring a variable named getUserIds.
The value of getUserIds is a function definition.
That function takes an argument named users.
The function uses a JavaScript array function called map() to iterate over each item in the users array and return a new array containing only the user ids.
The function returns the array that was returned by the map() function.

All on one line.

How did we get here?

Arrow function syntax is flexible, and we could have written this function in a few different ways, including being more verbose with our syntax.

For example, each of these functions when called would map over the users array and return an array of user ids:

// ✔️
const getUserIds1 = (users) => {
  return users.map((user) => {
    return user.id;
  });
}

// ✔️
const getUserIds2 = users => {
  return users.map(user => {
    return user.id;
  });
}

// ✔️
const getUserIds3 = users => users.map(user => {
  return user.id
})

// ✔️
const getUserIds4 = users => users.map(user => user.id)

In the second example, we were able to remove the parentheses from around the users and user parameters, and it works exactly the same.

Why do this? Arguably: for simplicity, though it is entirely optional. Note that this only works for functions with a single parameter.

In the third and fourth examples, we stripped the syntax down further, removing the braces ({}) and the return keywords from the getUserIds() function and then the map() function. This is called implicit return.

Multiple parameters

If your function has multiple parameters (takes multiple arguments), you must use parentheses:

❌ Will throw a syntax error:

const getUserIds = users, prefix => {
  return users.map(user => prefix + user.id);
};

✔️ This is fine:

const getUserIds = (users, prefix) => {
  return users.map(user => prefix + user.id);
};

Argument destructuring

You must however always use parentheses when using argument destructuring:

❌ Will throw a syntax error:

const user = { id: 1, name: "Daniel" }
const getName = { name } => name;
getName(user);

✔️ This is fine:

const user = { id: 1, name: "Daniel" }
const getName = ({ name }) => name;
getName(user)

Implicit return

Arrow functions return the last value returned within it's own scope by default. Note that you should not use the return keyword when writing an arrow function without braces.

Here are some examples of returning (or not) from arrow functions:

Here is our users data:

const users = [{id: 1, name: "Aaron"}, {id: 2, name: "Maya"}]

❌ Using return without braces:

const getUserIds = (users) => return users.map(user => user.id)
                                   ^^^^^^

Uncaught SyntaxError: Unexpected token 'return'

✔️ Implicit return:

const getUserIds = (users) => users.map(user => user.id)

getUserIds(users)

// [1, 2]

✔️ Explicit return:

const getUserIds = (users) => {
  return users.map(user => user.id);
}

getUserIds(users)

// [1, 2]

✔️ Explicitly returning nothing (or undefined, to be precise):

const getUserIds = (users) => {
  users.map(user => user.id);
}

getUserIds(users)

// undefined

You may have expected that last example to return [1, 2], as that is what map() returns. However, the lack of a return keyword means we are not returning the return value of map(). While map() returns a value, we have not set up getUserIds to explicitly or implicitly return that value. Hence, the return value of getUserIds is undefined.

Anonymous functions

We can also use arrow syntax to write anonymous functions. I won't go in-depth on anonymous functions here, but this is what they look like in regular and arrow syntax:

Anonymous function declaration:

function(x, y) { 
  return x + y;
}

Anonymous function expression (implicit return):

function(x, y) { x + y }

Anonymous arrow functions:

(x, y) => x + y;
// Returns x plus y

(x) => x * 100;
// Returns x times 100

x => x
// Returns x

x => {
  return x;
}
// Returns x

const z = 99;
() => z + 1;
// Returns 100;

Ok, but what does the arrow mean?!

The arrow is characters which form syntax which Node or the browser will recognise, just like === or . or +.

It says: "and now I'm going to tell you what this function does".

A nice way to think about it semantically is picturing the arrow as the conveyer belt which moves the arguments through the function.

const add = (a, b) => a + b;
// Take these things, (a,b), and move them through 
// in this direction => into the function, leaving 
// the result on the other side.

Some caveats

Arrow functions are not that different from regular functions. Most of time, you can use them interchangeably without fear of consequence.

However, there are a few technical points you should be aware of when using arrow functions.

No function hoisting

Functions written using the function keyword are "hoisted" at runtime. In simple terms, this means the engine running your code (i.e. Node) will take these functions and store them in memory before executing the rest of your code.

✔️ So you can do this:

multiply(5, 2)
// 10

function multiply(x, y) {
  return x * y;
}

We've written our code in a way where we're calling multiply() before defining what multiply() is.

But because we've used the function keyword, at runtime multiply() will hoisted; it will be read and stored in memory (defined) before the line multiply(5, 2) is executed.

❌ But you can't do this:

multiply(5, 2) // TypeError: multiply is not a function

const multiply = (x, y) => {
  return x * y;
}

Because we've used arrow syntax, multiply() has not been hoisted. So when the runtime engine gets to multiply(5, 2), it sees that multiply() is not defined at this point in the execution and throws an error.

No `this`

Arrow functions do not have their own this. This is perhaps best explained with examples.

✔️ Using a normal function to access this:

const myObject1 = {
  x: 10,
  getX: function () {
    return this.x;
  }
};

console.log(myObject1.getX());
// 10

❌ Using an arrow function to access this:

const myObject2 = {
  x: 10,
  getX: () => this.x
};

console.log(myObject2.getX());
// TypeError: Cannot read property 'x' of undefined

Other caveats

This article is to help you understand the basics of arrow syntax, but it's helpful to be aware (even if you don't understand in detail) that there are some other technical differences with arrow functions. MDN Web Docs has a good rundown of all the differences, if you are interested in further research.

Are arrow functions better?

Not necessarily. Arrow function syntax provides developers with a tool for writing code in a different way, often with the benefits of code that is easier to read and write.

When ES6 was still fancy and new, arrow functions were seen by some as the "new" way of writing JavaScript functions. Bootcamps and online tutorials would sometimes teach arrow functions by default, and often still do.

But these days, I'm seeing a trend towards bringing it back to the function keyword. Kent C. Dodds, a well-renowned React expert, posted an article about how he uses different function forms for different purposes, which makes for interesting reading.

In Conclusion

ES6 arrow function syntax provides a useful way to write more streamlined code which is often more readable. Code readability is important for helping others to understand your code. Likewise, it's important to be able to read others' code well yourself. So regardless of how you like to write functions, it is good to be able to understand different syntaxes when you encounter them.

I hope this article has been useful for those of you new to writing JavaScript code. If you have any questions, comments, suggestions, or indeed corrections, please let me know in the comments below. I would love to hear your thoughts, whether this article was helpful, and any constructive criticism.

Please feel free to follow me here and on Twitter (@dan_j_v).

Use RSS feeds to automate your reading lists and keep up-to-date

Dan V — Fri, 09 Apr 2021 17:05:48 +0000

Introduction

I recently discovered the magical and somewhat retro world of RSS feeds. Remember that little orange "wifi" icon that used to live next to blog titles? Yes, that's what we're talking about. Very 00s.

I'm here to tell you why RSS is still useful today, particularly for a developer in the everchanging tech world.

What is RSS?

RSS stands for "Really Simple Syndication" (or "RDF Site Summary". Aren't acronyms fun?).

Put simply, it's a way for websites to allow users to subscribe to their content, most commonly used in blogs.

RSS has fallen out of vogue in the past 10 years with the rise of social media. but I believe it can still be a very useful tool, particularly in the dev world.

Why should I care?

As developers, particularly if you're a newbie, there is so much to learn and to keep on top of. How do we orchestrate the journey of those streams of information from disparate websites and into our brains?

That's where RSS feed apps come in. RSS feed apps can help you keep up to date with tech blogs, release notes, video tutorials series, and even email-only newsletters.

RSS feed apps

There are plenty of apps available out there, each with their pros and cons. I've been checking out two of the most popular, which are:

They look a bit like this:

Feedly:

Inoreader:

I have blocked any ads for posting here, but I usually allow them to help support the developers.

How it works

Search for a topic you want to read about and follow any feeds that look interesting.
Alternatively, enter a URL for a website you want to follow, or use your chosen app's browser extension (if available) to add sites to your feed when you visit them.
The feed will appear in your feeds list and you'll be able to start browsing through a list of previous posts from that website straight away.
Over time, you'll see new content from your feeds coming through, like an email inbox.

And that's it!

Well, that's not it it. There is plenty more you can do with these apps, such as setting up rules for highlighting specific content, sharing reading lists with teams, and much much more.

But to start with, just by following a few feeds, you can now easily stay up-to-date with React's release notes, or your favourite tech guru's blog, or a YouTube tutorial series you've been following. All in one place!

Which app should I use?

It's best to just go out and try a few and find out what you prefer. However, here are a few initial thoughts on the two RSS feed apps I've been trying out:

Feedly

Friendly, helpful UI with plenty of useful action buttons like "save for later" and "mark as read".
Pretty design. Looks like a magazine.
Intuitive search UI for finding new feeds.

Inoreader

Design is more functional and compact.
Has some really nice features, like "send to device".
Seems to be able to retrieve images for articles more easily than Feedly.
Can subscribe to email newsletter subscriptions, without all the inconvenience of them entering your actual email inbox!

There are plenty of other apps available, these are just the two I've spent most time with, and arguably the most popular. They're both great, and I am continuing to trial and compare them.

A great feature some of these apps have is that they are able to subscribe to web page content updates that don't actually have their own RSS feed. So you're not always relying on websites providing an RSS feed in the first place. (I know that Inoreader can do this; I'm not sure whether Feedly can yet.)

Now, often RSS feed apps won't be able to retrieve the website's full content, and will encourage you to visit the website itself instead. To me, that's fine. The app is serving the purpose of notifying me about new content, which is the prime purpose of using an RSS feed app.

But reading content without the usual guff and bulk that websites often come with can be really helpful. Furthermore, having a place outside of your browser tabs to safely store a list of reading materials for later is invaluable. This is why I use a reading app alongside an RSS feed app.

Reading (or "read later") apps

Browsers like Firefox and Opera come with a built-in reading mode. You can even turn on Chrome's experimental reading list feature (go to chrome://flags and search "reading list"). But for ease of use, I like to use Pocket.

Pocket looks a little like this:

Pocket is a really handy application for easily saving website content to read later. The reading view simplifies content, allowing you to focus on text and images. It's like reading an eBook on a Kindle.

A popular alternative to Pocket is Instapaper, although I haven't had the pleasure of trying it out yet. I'm sure there are plenty others too.

RSS feeder apps do generally come with their own reading mode features, but they don't always work perfectly. In any case, I find it helpful to separate out a few articles I actually want to read into my reading app, and let my RSS feed app just deal with offering new content to me.

Keep it simple

On that point, and going back to RSS, I would advise against following too many feeds to start with.

It may be tempting to click "follow" on as many feeds as possible. I did that at first, but this was instantly overwhelming and unhelpful. So many unread articles!

Instead, be selective. Think YAGNI ("You Aren't Gonna Need It"). Or perhaps YARNI ("You Aren't Gonna Read It").

I suggest following a few feeds you're genuinely interested in following, and building up gradually.

Similarly, don't add every single article you see to Pocket. Find some you're actually going to read, then make sure you read them before adding too many more. Remember: "the road to hell is paved with good intentions".

Conclusion

RSS feed apps are a useful tool for any developer. They're not the be all and end all, and you will likely want to utilise Twitter (bleugh!) if you're serious about staying up-to-date with all the goings-on in the tech world. But using these tools can certainly help automate your knowledge-absorbing process.

Do you use an RSS reader or a reading app? What are your favourite apps to use, and why? Are there any other methods of learning and keeping up-to-date that you find helpful? Comment below!

Disclaimer: I am in no way affiliated with any of the apps mentioned in this article, they're just a few I've been trying out or have heard of.

Also: this is my first proper blog post! Any constructive feedback is much appreciated.

Dependency cycle detected in React component index file

Dan V — Sat, 08 Feb 2020 12:56:33 +0000

Hi all. Wondering whether someone could help me understand and resolve a dependency cycle in my React project.

I decided to use an index.js file to handle my component exports. The file structure of my components folder looks ike this:

components
├── ComponentA
│ └── ComponentA.jsx
├── ComponentB
│ └── ComponentB.jsx
└── index.js

Here are the files involved in the dependency cycle:

// index.js
import ComponentA from "./ComponentA/ComponentA"; // <-- Eslint: 'Dependency cycle detected.eslint(import/no-cycle)'
import ComponentB from "./ComponentB/ComponentB";

export { ComponentA, ComponentB };

// ComponentA.jsx
import { ComponentB } from "../index";
// ... rest of component ...
export default ComponentA;

In 'index.js', eslint is detecting a dependency cycle for ComponentA. I've tried to work out why this is and how to fix it but no luck so far. I know it must be something to do with ComponentA importing ComponentB, and then them both being imported and exported in index.js.

The app still runs fine but I don't want to ignore this linting issue. I would be really grateful for any help in understanding and fixing this.

Thanks in advance

Daniel

Which CSS framework (if any) for my portfolio website?

Dan V — Sat, 01 Feb 2020 19:50:45 +0000

Hi all. First time posting on DEV so I hope I'm posting in the right place for this sort of question.

A little background about myself: I'm a junior dev, currently with 1 year of industry experience. In terms of frontend experience, I have worked with React, Vue.js, Bootstrap, Material-UI and CSS flexbox (not Grid yet).

I'm looking for a new job currently and have decided to make myself a portfolio website.

I'm building my website in React, because I don't get to use it at work and want to brush up on my skills (I did a lot of React at bootcamp but we use Vue.js where I work).

In terms of styling my website, I decided to use Material UI. I came to this decision for two reasons:

I already use Bootstrap a tonne at work and wanted to work on a different skill.
MUI is a bit more flashy than Bootstrap, which serves well for what is essentially a promotional website.

However, I'm not sure about my choice of CSS framework. I'm starting to worry that MUI will be too restrictive; that my site will look like a generic product website.

Ultimately, I want to build a website that:

looks good, with a personal touch
shows off some technical skills
won't take too long to build

Does anybody have any advice on what route I should go down?

Should I carry on with MUI so I can show employers that I know more than just Bootstrap?

Should I try using pure CSS to show that I understand CSS and help my site look more personal?

Maybe I should stick with Bootstrap for speed, with the addition that it's very 'plain' and it's styles can be overwritten easily?

Or should I do something completely different?

Thanks. And apologies if this was a bit long-winded!

DEV Community: Dan V

ES6 Arrow Function Syntax Explained Simply

ES6 Arrow Function Syntax Explained Simply

Introduction

A quick bit of history

"Normal" functions vs arrow functions

How is this useful?

How did we get here?

Multiple parameters

Argument destructuring

Implicit return

Anonymous functions

Ok, but what does the arrow mean?!

Some caveats

No function hoisting

No this

Other caveats

Are arrow functions better?

In Conclusion

Use RSS feeds to automate your reading lists and keep up-to-date

Introduction

What is RSS?

Why should I care?

RSS feed apps

How it works

Which app should I use?

Feedly

Inoreader

Reading (or "read later") apps

Keep it simple

Conclusion

Dependency cycle detected in React component index file

Which CSS framework (if any) for my portfolio website?

No `this`