Whitespaces are spaces or tabs. Apart from spaces used to separate keywords and identifiers, JavaScript generally ignores it. Use whitespace to make your code easier to read. Prettier is a useful plugin that can help you find the industry standard way.
How Whitespace Affect Code Readability
Please take note of the variance in readability among these three examples.
Consider this code:
let sum=1+5+4;console.log(sum);
Which is, to the interpreter, identical to this:
let sum = 1 + 5 + 4;
console.log(sum);
Which is likewise the same as this:
let sum =
1
+
5 +
4;
console.log(
sum
)
;
How Can Different Syntaxes Produce Identical Outputs
All of these code snippets produce identical outputs in the interpreter due to JavaScript's handling of optional whitespace, where they are effectively ignored.
- The first example tries to do away with all possible whitespace and uses a semicolon
;in lieu of a new line, which generally means a new command - The second example is what most JavaScript looks like
- The third example shows exaggerated whitespace, that still works but hinders readability
Incidentally the first example is what a lot of the JavaScript that gets sent over the internet looks like, it is minified. The advantage of minified code is that each space deleted is another byte that doesn't need to get sent over a potentially unreliable internet connection. The disadvantage is that it becomes a mammoth effort for humans to read.
When Are Whitespace Needed
There are two situations in which whitespace will affect your code.
To Separate Keywords
Whitespace is only required between keywords and indentifiers. The following would not work as expected since both let and sum are keywords:
letsum = 1 + 5 + 4;
console.log(sum);
Instead of initializing a sum variable, by calling let and then sum, the code reads as someone trying to call the variable letsum.
// OUTPUT
Uncaught ReferenceError: sum is not defined
To Separate Elements Inside of a String
The only place where whitespace is interpreted literally is within a string.
let myString = "HELLO!";
console.log(myString)
let myString = " H E L L O ! ";
console.log(myString)
These two code snippets will give two different outputs:
- The first example will output:
'Hello!'
- The second example will output:
" H E L L O ! "
Strings and other data types will be covered shortly.
Summary: JavaScript Syntax - Whitespace
- JavaScript ignores optional whitespace
- Whitespace is needed to separate keywords and identifiers
- Whitespace is needed to separate elements inside of a string