JavaScript Syntax: A Guide for Beginners

If you’re looking to learn how to write JavaScript, you’ve come to the right place.

Every programming language has its own set of rules, just like English. Think about it. When you were in elementary school, you learned the rules of grammar in order to structure sentences.

Just like English, programming languages follow rules to make sure everyone can understand what is being said. Imagine if we could all make up our own rules when using English. Nobody would be able to communicate. Similarly, programming languages are strict about rules so that the code you write is able to be executed.

In this guide, we’re going to discuss JavaScript syntax. Syntax refers to the set of rules that defines how code is written in JavaScript.

Why is Syntax Important?

In JavaScript, there are some syntax rules you need to follow. For instance, if you don’t close a bracket after you’ve opened one an error will be returned. The computer can’t continue running your program because it doesn’t understand what you are telling it to do.

This merits an important distinction between computers and humans: whereas humans may be able to identify the occasional error and skip past it, computers cannot do the same when running code in any programming language. That’s why it’s important you write code using the syntax of the programming language you are working with.

Syntax also makes your code more readable. When everyone is using the same syntax, it’s easy to interpret other people’s programs. Just like in English, once you know the basic rules, there’s no line of code you cannot read.

In this guide, we’re going to focus on the following features of syntax:

• Whitespace
• Naming Variables
• Indentation
• Comments
• Semicolons

Let’s begin!

Whitespace

Programmers debate whitespace over and over again. It’s a very controversial topic. Setting aside those debates for a minute, there’s one key rule you need to remember when it comes to syntax in JavaScript: you should have spaces between variables, and before and after parenthesis.

Let’s say you are writing a for loop:

for (var i = 0; i < 4; i++) {
	console.log(i);
}

This loop prints out all numbers between the range of 0 to 4 to the console. As you can see, there’s a space between our for key and the opening bracket of our for loop. There’s a space between our closing curly bracket (() and our opening curly brace ({). There’s also a space between all of the statements in these brackets:

• var i = 0;
• i < 4;

When you’re assigning a variable outside a for loop, you’d use the same approach:

var cookie = “Raspberry Chocolate Chip”;


Adding spaces between your variables makes it easy to read your code. 

Indentation

Unlike other programming languages, you can write a JavaScript program on one line. It’s not a good idea – think about how hard it would be to read your code – but you can still do it.

Every statement that’s within a code block – such as an if conditional statement or a class – should be indented. Indentation refers to adding either two spaces, four spaces or a tab at the start of your code. There’s a lot of debate among programmers about what is best, but as long as you maintain consistency across your code, you’ll have no trouble.

Here’s an indented for loop:

for (var i = 0; i < 4; i++) {
	console.log(i);
}

You can see the term console.log() was indented using a tab. That’s because it is contained within our curly braces. This helps distinguish the contents of our for loop with the rest of our code. If we had another code block in our code, such as an if statement, we’d indent its contents even more:

for (var i = 0; i < 4; i++) {
	if (i === 3) {
		console.log(i);
	}
}

This code prints out the value of i if it is equal to three. Otherwise, nothing happens. In this snippet, our if statement is indented by one tab because it’s on our for loop. Our console.log() statement is indented by two tabs because it is contained within our if statement, which itself is contained within our for statement.

Comments

Comments are statements written by developers, for developers. They are technically read by JavaScript, but they will not be executed.

The purpose of comments is to help developers keep track of their code. If you’re implementing a complex function, you may want to write a few comments so you know what each part of the function does. Comments are often used in collaborative projects as well so that every developer can understand a program, even if they’ve not written it themselves.

In JavaScript, comments are written using double slashes, followed by the comment:

// This is a comment that will be skipped over by JavaScript!

All subsequent characters after the double slashes are treated as a comment. To make a comment span multiple lines, you can use this syntax:

/* This is a comment
that spans multiple lines. */

Any text between /* and */ will be ignored by the JavaScript compiler.

Naming Variables

There’s a lot of different ways you can name a variable. The three most popular methods are using upper camel case, lower camel case and underscores.

In JavaScript, most developers prefer to use lower camel case to name variables:

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

firstName, surname, isAdmin


Declaring variables in JavaScript looks like this:

var firstName = “Tony”;


The type of variable you are using (in this case var) is followed by the name of the variable, then an equal sign, then the value you want to store in the variable.

The first word in a variable should begin with a lowercase letter, even if the variable only includes one word. The second word and all subsequent words should begin with an upper case letter, as you can see above.

While you can write variables using other methods (like “first_name” in underscores or “FirstName” in upper camel case), it’s not as common to do so in JavaScript.

Variables in JavaScript are case sensitive. This means that firstName and firstname, while containing the same basic characters, would be treated differently.

There are a few words called “reserved words” that you can’t use as variable names. These are words that have a special function in JavaScript. For instance, you can’t name a variable “class” or “for”, because these are already used in the language.

You can find a list of reserved JavaScript keywords on the Mozilla Developer Network.

Semicolons

In English, every sentence ends with a period; a full stop. This tells us when to stop reading one sentence and begin another. If you think back to your elementary school days, you were probably told that sentences were a place to pause and take a breath.

Computer programs don’t need to take a breath, but they do need to know how statements are split up in a program. In JavaScript, most statements end with a semicolon:

var cookie = “Chocolate Fudge”;


You don’t need to specify a semicolon after any block statement. These are statements like class, switch, do, if and for. These statements use curly brackets to store their code:

function addNumbers(one, two) {
	return one + two;
}

In this code, you can see that we ended our return statement with a semicolon. That’s because it is in our function. Our function does not end with a semicolon.

Conclusion

There are a lot of rules in the JavaScript programming language. Each of these rules ensures that you write code both you and the browser can read. If you’re working on a team, it’s especially important to adhere to the syntax rules of JavaScript.

Here’s a recap of the main rules we have covered:

• All statements in a variable declaration or after a keyword like “for” or “if” should be separated by a whitespace.
• Statements enclosed within a block of code (i.e. “if”, “else”) should be indented.
• Variable names should use lower camel case and should not be equal to any reserved keyword.
• Every statement, aside from block statements, should end in a semicolon.
• // can be used to write a single-line comment and /* */ can be used to write a comment that spans multiple lines.

Now you’re ready to start coding in JavaScript like a professional developer!