JavaScript Syntax Rules

A Beginner’s Guide

Photo by Ben Libby on Unsplash

Welcome to vicarious Flatiron School, Mod/Phase 3! In Mod 3 we take a big left turn from Ruby into JavaScript. In my experience, shifting to JS has been quite an exercise in learning and patience. Ruby is so simple, so straightforward. I do admit, it makes me happy.

Disclaimer to my friends: this is not a definitive list.

JavaScript, on the other hand, is pretty fun to write and kinda fancy, although it can certainly be confusing at first. So I thought I’d try to save others a little frustration by putting together a beginner’s guide for JS syntax. helloWorldYoureWelcome 😉

RULE # 1: (Note, this is not a rule.) Semicolons ; at the ends of lines are 100% optional. As per the delightful Mattias Petter Johansson, “If somebody tells you that it is a general best practice to use semicolons in JavaScript, that person is, uh, lying.” This is due to the fact that JavaScript has a policy of ASI, or Automatic Semicolon Insertion. They insert our semicolons for us, what a great service! As per this article in Wikibooks (wherein they opine that it IS universal best practice to use semicolons! Seriously, it is dealer’s choice when it comes to semicolons at the ends of lines. Don’t let anyone tell you otherwise. Unless that anyone is your boss — seriously, listen to your boss.):

“In JavaScript, a semicolon is automatically inserted when:
1. two statements are separated by a line terminator
2. two statements are separated by a closing brace (‘}’)
3. a line terminator follows a
break, continue, return, or throw.”

Yay! Enjoy your semicolon freedom because it’s about to get real here in JS-land. Javascript does have some other strict rules regarding aspects of the code. Which leads me to…

RULES # 2a & b: When writing conditional statements or loops in JS, you absolutely need to wrap your conditional (in the case of if statements or while loops) or your statements (in the case of a for loop) in parens (like this) then wrap the following “action-to-be-taken” in curly braces. The content of the function needs to wrap in curly braces as well. (Note that (array, event) on Line 3 below are the parameters being passed as arguments into the function, as opposed to the statements which are on Line 4.)

Above code is courtesy of an assignment in Mod 3 @ Flatiron

If you forget the parens in these cases, your code will throw an error:

Oops don’t forget your (parens)!

If you forget the interior curly braces you won’t throw an error but it is expected that they should be there. This kind of consistency is of value because a co-worker scanning your code will want to know exactly what you’re doing and to put it simply, you should follow JS conventions.

RULE # 2c: Semicolons ARE required to separate the three distinct statements within the for-loop as on line 4 of the above gist. If we write our code without them, we will see this error:

Using a semicolon after “0” and again after “.length” will resolve this error.

RULE # 3: Keep track of all those curly boys! This is one of the most annoying syntax errors to deal with because with so many of them, it can be tricky to find the offender. There is one extra curly brace in the code below, can you find it? (Hint: it’s not where you might expect!)

Thanks to Flatiron Bootcamp Prep for the above code.

Definitely look into VS Code extension helpers. Some great recommendations can be found via this blog post written by a cohort-mate at Flatiron.

This VS Code Extension has saved my eyes AND my sanity.

RULE # 4: You can use single quotes or double quotes when writing strings, but when string interpolating, you MUST use backticks instead of regular quotes. Like so: `This is an example of ${string interpolation} in JavaScript.`

RULE # 5: White space is fine, in fact it is recommended for readability. As per MDN Web Docs: “White space characters improve the readability of source text and separate tokens from each other. These characters are usually unnecessary for the functionality of the code.”

RULE (recommendation)# 6: Comments (code/notes that will not be executed) can be written like //this.
/* or longer comments
can be written
like this */

RULE #7: (also not a rule) Arrow Functions are awesome!
As we know, programming languages are continually being updated. Arrow functions were added to the JavaScript language with ECMAScript 2015. In writing an arrow function, you can set your function name to a variable and write it like so:

Geeking out over arrow functions!

You will almost always need to use const to set your function to a variable name*, setting its value to what comes after. Then remove the word function and add an arrow after your (argument/s), before the first curly brace. Arrow function transformation, complete! ✅

*The set-variable rule does not apply to functions such as .forEach. JavaScript already recognizes this named function, therefore it does not require a variable name.

You will have a couple of options with your arrow functions, such as removing the parens if you are only passing through one parameter. Go here for additional helpful tips.

Pro-tip: keep a careful eye on callback functions. Whether or not you write your function as an arrow function, you should wrap your:
(parameter => {and the action within a larger set of parens})

A non-arrow function also works perfectly well. But it’s not arrow-sexy.

Now go forth and enjoy your perfectly syntaxed JavaScript!

Official GIPHY page for The Fresh Prince of Bel-Air.

PS This is a terrific resource for perusing common JavaScript errors. I’m sure I’ve already committed many of these mistakes and more!

Everyone should watch this video, even if just to enjoy Mattias’ Christmas teddy bear sweater. It’s a super entertaining and educational experience.

--

--

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