JavaScript basics: syntax, semantics and best practices

JavaScript is the most powerful of the three front end technologies and is an essential component of every modern website.

If you are considering a career in digital media, web development, or online marketing or are just interested in learning something — learning JavaScript will change your life. Not only will you uncover how to leverage the power of computing to become more efficient, accurate, and useful at work, but along your coding journey, you’ll also unlock new ways of thinking that will help you solve problems, learn faster, meet new people and contribute to world-changing open-source projects.

But first, you’ll need to learn how to read JavaScript. This post will help you do just that. Specifically, it will focus on syntax, semantics, and best practices

If you are just getting started or if you’ve followed the traditional learning path for web development you’ve probably already familiarized yourself with HTML and CSS. If not, I’d strongly suggest doing that before you begin learning JavaScript. Here’s my beginner’s guide to HTML and the consecutive beginner’s guide to CSS. You should at the very least be familiar with the aforementioned guides before you read this guide.

Trust me, it’ll make your learning experience much easier.

Anywho, let’s get started.

Your web browser speaks JavaScript

Your web browser is a program and programs only understand certain languages. One of the languages your web browser understands is JavaScript.

Just like English, JavaScript has rules about how it must be written. Sentences for example, in English, start with a capital and usually end with punctuation. These rules are called the syntax of the language.

Below are the rules you must follow when writing instructions to your web browser in JavaScript.

Understand them and you’ll understand how to read JavaScript.

JavaScript syntax

A program is a series of written instructions written in a programming language. In JavaScript, every line of instruction is called a statement.

This is what a statement looks like in JavaScript:

alert("Hello World!");

Multiple statements create a program:

alert("Hello World!");
console.log("Hello Console!");

There are many statement types in JavaScript, each with its own nuanced usage and syntax. As an introduction, we’ll focus on a simple statement that creates, names, and assigns data to a variable. This is what that looks like:

var helloWorld = "Hello World!";

The statement above creates a variable, names the variable helloWorld and then assigns some text data "Hello World!" to the variable.

Let’s break down the component parts of this statement further.

The statement above is comprised of five parts:

the variable var
the variable name helloWorld
the variable assignment operator =
the data assigned to the variable "Hello, world!"
the closing semicolon ;

When you start a statement with the word var it tells JavaScript that you’d like to create a variable. A variable is used to store data.
helloWorld is the name you choose for the variable you just created. You cannot use var alone to create a variable, you must assign the variable a name. This name is what you’ll use to reference the variable.
The assignment operator = assigns data to the named variable you created in 1 and 2. The = tells JavaScript to assign the data on the right of the = to the named variable on the left. The = does not mean the content to the left of the = is equal to the content on the right.
This is the specific data assigned to the variable helloWorld. In this case the data is some text that says "Hello, world!". This data can now be accessed by typing helloWorld in the JavaScript console.
The closing semicolon ; denotes the end of the statement. It tells your browser that anything after the semicolon is no longer part of the same statement.

Let’s try to rework the example above to demonstrate the concepts.

If I wanted a different name for my variable I’d write this:

var learningJavaScript = "Hello World!";

If I wanted to assign different data to my variable I’d write this:

var learningJavaScript = "I'm learning JavaScript!";

Now that we’ve broken down the components of a statement, let’s explore the syntax rules used when constructing statements. Knowing these will allow you to read JavaScript and write it appropriately.

JavaScript rules

JavaScript is case sensitive

If you accidentally use a capital or a lowercase when the program is expecting the opposite, the program will not run.

var not Var
console.log not Console.Log

This also applies to variable names. If you name something helloWorld then HelloWorld will not work.

Explicitly named variables and camelCase

JavaScript developers have adopted two styles that have become standard best practices for the JavaScript programming language: explicit variable names and camelCase.

Explicitly named variables

When naming your variables, try to be as explicit as possible about what this variable is when choosing a name.

Do this:

var websiteWelcomeMessage = "Hello, welcome to my website!";

Not this:

var x = "Hello, welcome to my website!";

camelCase

Always write your variable names in camelCase.

Do this:

var helloWorld = "Hello World!";

Or this:

var helloWorldLongerExample = "Hello World!";

Don’t do this:

var helloworld = "Hello World!";

Or this

var Helloworld = "Hello World!";

Semicolons end statements

Just like in English, JavaScript uses a punctuation mark to denote the end of a statement. Always use a semicolon ; to end a JavaScript statement.

Do this:

var helloWorld = "Hello World!";

Not this:

var helloworld = "Hello World!"

Each statement should be on its own line

To keep your JavaScript easy to read and easy to maintain you should always write every statement on its own line.

Do this:

var helloworld = "Hello World!"; 
var websiteWelcomeMessage = "Hello, welcome to my website!";

Not this:

var helloworld = "Hello World!"; var websiteWelcomeMessage = "Hello, welcome to my website!";

JavaScript is the most powerful of the front-end technologies because it can understand extremely complex instructions, unlike HTML or CSS. Complex instructions require precise and accurate instructions. Just like a human language!

One of the best ways to become more familiar with JavaScript syntax is to learn how to declare variables and assign value to these variables

My guide to getting started with JavaScript variables is the perfect place to start.