A Brief Overview of ES6 for React Native Developers

Spencer Carli
Jun 28, 2017 · 6 min read

If you’re coming to React Native and you’re

  1. New to JavaScript
  2. Already familiar with JavaScript but haven’t used ES6/ES2015+ features

then you may feel a bit lost at times. The syntax can seem weird, confusing, or sometimes you just don’t know what to look for. I’ve compiled a brief list of the most common ES6+ features that I see in React Native apps and tutorials. This is by no means comprehensive but it should at least get you started.

Variables

Since the advent of JavaScript we’ve had var. But now we have var, let, and const. They're all valid but what's the difference?

let: Very similar to var but the scoping is different. var is function scoped (available and can be modified anywhere within a function) whereas let is block scoped, meaning it's available only within that block of code. I pretty much always use let in place of var now (honestly I can't remember the last time I used var).

const: Same scoping (block) as let but you can't change the value of it, for example:

However (and this is something that I was confused about at first) you can modify it if it’s of a type object or array, for example:

Want more info?

Arrow Functions

Syntax

There’s now a new way to declare functions in JavaScript called arrow functions, and you’ll see these a lot when working with React or React Native. The primary difference between standard/old functions and arrow functions is what this is bound to, so sometimes you'll want/need to use function. Creating an arrow function is simple

Learn more about arrow function syntax

Formatting Arguments

With arrow functions you can format arrow functions in a few different ways, all of which are commonly used. These are the three rules I’ve commited to memory.

1. No arguments = parenthesis required

2. One argument = parenthesis optional

3. Two or more arguments = parenthesis required

Learn more about formatting arguments

Default Arguments

This is one of my favorites — an extremely simple way to set default arguments for your functions by simply assigning them to a value when naming the argument. If the argument is passed it will use the argument you pass, otherwise it will fall back to the default.

Learn more about default arguments

Implicit Return

Have a simple function and sick of writing curly braces and returns? Fret no more! You’re now able to implicitly return from a function, like so

Mmm saved keystrokes

It gets better though! Say you want to return an object from a function, you can do so like so (you’ll often see this when working with Redux)

(notice the parenthesis wrapping the object)

And finally you’re also able to return a component in a very similar way as the object, let me demonstrate

Again we’re wrapping the component with parenthesis and we don’t have to do any returns.

Learn more about implicit returns

Objects

We’ve now got a few very convenient tools (that previously would have required an external library) that make working with Objects in JavaScript easier.

Destructuring

Destructuring allows us to “destructure”, or break down, an object so that we can more easily access the information we care about. Let’s say we want to access some data on an object, in the past we would have had to do the following

That’s fine but now we’re able to save a bit of time defining the variables that access the info we care about. When you’re passing props around a React Native application it’s common to have some nested data and, as we see with city and state, we end up writing a lot of the same code. You’re able to destructure that object to more easily access data.

You’ll often see this when accessing information from props, like this:

Learn more about object destructuring

Spread

Object spreading allows us to copy information from one object to another. It’s a practice you’ll often see when using Redux because of the need for pure functions. Let’s say we have multiple people who work at Handlebar Labs and they’ve all got some of the same basic information. To save time we’ll copy that information from the “template” to an individual’s information.

Learn more about object spread

Strings

Template Literals

Another personal favorite of mine. Notice how earlier, or in any of your older code/tutorials, you see 'Hello, ' + name + '!' + 'How is ' + company + '?'? Those + signs can be a pain to write and I know personally I would always forget a space, thus causing the formatting to look off. Template literals make it easier for us because we can much more naturally write strings with dynamic content.

By using back ticks (``) to defined the string we can then pass variables in with ${}. Let me just show you...

So much better 😄

Learn more about template literals

Modules

For people first jumping over to React Native this one can be confusing. You’re probably used to seeing

and likewise to actually use that code:

We’ve now got access to a different module syntax that takes advantage of the keywords import and export. Let's convert that first export block.

Then to access that code we could use

What’s nice is that we can use both export and export default together. There's much more you can do with ES6 modules and I would definitely encourage you to check it out. require still has its place but I rarely use them now

Wrapping Up

There’s a lot of great stuff in ES6 and beyond, much of it I didn’t cover here. These are just the most common ones that I see in use. Did I forget something? Let me know!

Want more React Native related content? Sign up for my email list or take my intro to React Native course (it’s free!).

The React Native Log

All things React Native — tutorials, experiments, tips &…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store