Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

JavaScript Commands in a Nutshell: Learn How to Write JavaScript Code

Reading time 4 min
Published Jan 5, 2016
Updated Oct 1, 2019

HTML and CSS scripts are simply called code. However, as JavaScript mainly gives commands to the browser rather than creates a display, the code you write is called JavaScript commands or statements.

If you already know how to write HTML and CSS code, you should keep in mind that JavaScript syntax is very different from other front-end development languages. This tutorial will teach you all about writing JavaScript commands, their syntax and essential points to remember.

You should be aware of the usage of JavaScript semicolon. It can be used to separate commands, but it is optional if a line break follows them.

JavaScript Commands: Main Tips

  • JavaScript code gives instructions to the web browser.
  • JavaScript commands are usually called JavaScript code.
  • Each command should end with a semicolon. It helps your code be more readable to you and the browser, too.

Note: most programming languages give commands to the computer. However, JavaScript commands the web browser.

Programs

Usually, programs contain many statements, which give instructions to the browser. In JavaScript programs, every command is executed one by one in order from top to bottom.

The example below displays a simple program. At first, three variables are created, then the program displays the z value.

Example
var x = 6;
var y = 9;
var z = x + y;
document.getElementById("output").innerHTML = z;

Writing Clean Code

As in every language, there are some rules in JavaScript that could be called grammar. Some of them affect the way codes are executed (like JavaScript semicolon). Others offer no real functionality, but they help make the code easier to read. It is especially useful if your code is meant to be read by others.

Let's review these rules and see how they're implemented with code examples.

Semicolons

In JavaScript semicolons are used to separate commands:

Example
x = 6;
y = 9;  
z = x + y;

Technically, you could even write commands in the same line when the JavaScript semicolon separates them. However, you should keep your code tidy and practice writing different JavaScript commands in separate lines.

Example
x = 6; y = 9; z = x + y;

White Spaces

White spaces make no difference to the browser. It will ignore them when executing code. However, white spaces help make the code more readable to you and other programmers:

Example
var firstName = "John";
var lastName="Thompson";

It is good programming practice to surround operators (mathematical symbols, such as +, -, =, etc.) with white spaces so they're more noticeable:

Example
var x = y + z;

Line Length and Breaks

Among developers, it is accepted not to use lines exceeding 80 characters for better readability. Long lines of code are difficult to read as you have to scroll sideways. Therefore, you should avoid writing long lines: it's much better to divide the code, and place part of it on a new line:

Example
var text = "More text";
document.getElementById("test").innerHTML = "Hello there!" 
  + text;

Code Blocks

JavaScript commands can be grouped by using curly braces ({}). When grouped, they form code blocks. These are executed together like a single JavaScript command. A function is also a common occurrence of a code block is a function:

Example
function myFunction() {      
  document.getElementById("test1").innerHTML = "Hello stranger!";
  document.getElementById("test2").innerHTML = "Ready to learn?";  
}

Using Keywords

Usually, JavaScript commands start with a specific keyword which defines what the browser should do. These keywords define an action which will be performed.
Find a list of JavaScript keywords in the table below:

Keyword Description
break Ends a loop command
continue Stops the loop and starts from the beginning
debugger Stops JavaScript from running and, if possible, calls the debugging function
do ... while Executes a block of code and loops that block of code as long as a condition is true
for Loops a block of code as long as a specified condition is true
function Defines a function
if ... else Checks a specified condition and executes a block of code if the condition is true
return Returns a specified value and exits the current function
switch Sets multiple blocks of code to be executed depending on the case
try ... catch Defines an error handling for a block of code
var Used for variable declaration

Note: JavaScript keywords cannot be used as variable names.

JavaScript Commands: Summary

  • JavaScript commands have a distinctive syntax.
  • You should practice writing readable code.
  • JavaScript keywords are essential when writing commands.