Why use parenthesis on JavaScript return statements?

A while back, I received a great question from a reader:

Just a note in your Learn React By Itself tutorial. In the “Components” section, where you say:

return (
  React.createElement('li', {className: 'Contact'},
    React.createElement('h2', {className: 'Contact-name'}, this.props.name)
  )
)

It’s not clear to me why you need the parens and can’t just do return React.createElement. I tried that and it fails but I can’t see why. Isn’t typeof x === typeof (x) in JavaScript?

And while it is true that typeof x === typeof (x), the same doesn’t always hold for return. Why?

There are two things about JavaScript’s return which are a little unintuitive:

  1. A return statement followed by unreachable code is perfectly valid

    function doSomething() {
        return
    
        // Valid, but will never be called
        doSomethingElse()
    }
    
  2. JavaScript will automatically insert a semicolon at the first possible opportunity on a line after a return statement

The second bit might be a little hard to grok, so let’s do a quiz. Can you tell me where the semicolon will be inserted on this block of code?

return
  React.createElement('li', {className: 'Contact'},
    React.createElement('h2', {className: 'Contact-name'}, this.props.name)
  )

Once you think you’ve got the answer, touch or hover your mouse over this box to check:

// JavaScript inserts a semicolon after the `return` statement! 
return; 

  React.createElement('li', {className: 'Contact'},
    React.createElement('h2', {className: 'Contact-name'}, this.props.name)
  )

Got it? If not, go over the two rules above until you convince yourself.

So, back to the original question: why use brackets on a return statement? Well, if you place your opening bracket on the same line as return:

return (

No semicolon can be automatically inserted until that bracket is closed.

return (
    ...
) // <-- JavaScript inserts semicolon here

Of course, we could just place the React.createElement on the same line as return, and avoid these superfluous brackets. But then it wouldn’t look as pretty.

tl;dr

If possible, JavaScript will automatically insert a semicolon at the end of the line which the return statement is on. Use brackets to make it impossible.

Want to see this in action? Check out my Learn Raw React series — and become a React pro while you’re at it.

Learn more about JavaScript

Need to know all the ins and outs of JavaScript? Just keep reading:

Need help remembering all this? My newsletter subscribers receive free cheatsheets on ES6, Promises and React, as well as news on my latest resources. Sign up here:

I will send you useful articles, cheatsheets and code.

I won't send you useless inbox filler. No spam, ever.
Unsubscribe at any time.

One more thing – I love hearing your questions, offers and opinions. If you have something to say, leave a comment or send me an e-mail at james@jamesknelson.com. I’m looking forward to hearing from you!

Share on Facebook0Tweet about this on TwitterShare on LinkedIn5Share on Reddit0

5 Comments Why use parenthesis on JavaScript return statements?

  1. Brian Capouch

    Curious whether there is any significance to your use of the term “bracket” in this post for what I would call a “parenthesis.”

    Reply
  2. Matt Fysh

    Nice article! Also helpful to use a linter, such as eslint, to detect unreachable code paths before pushing your code to git

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *