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:

• ES6 – The bits you’ll actually use
• An Introduction to Promises
• Understanding JavaScript ‘this’

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:

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!