<h1 id="javascript-syntax">JavaScript Syntax</h1>
<p><strong>Summary</strong>: in this tutorial, you will learn about JavaScript syntax, including whitespace, statements, identifiers, comments, expressions, and keywords.</p>
<h2 id="whitespace">Whitespace</h2>
<p>Whitespace refers to characters that provide the space between other characters. JavaScript has the following whitespace:</p>
<ul>
<li>Carriage return</li>
<li>Space</li>
<li>New Line</li>
<li>tab</li>
</ul>
<p>JavaScript engine ignores whitespace. However, you can use whitespace to format the code to make it easy to read and maintain.</p>
<p>The following JavaScript code doesn’t use whitespace:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> formatted = <span class="hljs-literal">true</span>; <span class="hljs-keyword">if</span> (formatted) {<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'The code is easy to read'</span>);}<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>It’s is equivalent to the following code that uses whitespace. Hence, this code is much easy to read:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> formatted = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">if</span> (formatted) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'The code is easy to read'</span>);
}<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Note that JavaScript bundlers remove all whitespace from JavaScript files and put them into a single file for deployment. By doing this, JavaScript bundlers make the JavaScript code lighter and faster to load in the web browsers.</p>
<h2 id="statements">Statements</h2>
<p>A statement is a code that declares a variable or instructs the JavaScript engine to do a task. A simple statement is terminated by a semicolon (<code>;</code>).</p>
<p>Although the semicolon (<code>;</code>) is optional; you should always use it to terminate a statement. For example, the following <a href="https://www.javascripttutorial.net/javascript-variables/">declares a variable</a> and shows it to the console:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> message = <span class="hljs-string">"Welcome to JavaScript"</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(message);<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<h3 id="blocks">Blocks</h3>
<p>A block is a sequence of zero or more simple statements. A block is delimited by a pair of curly brackets <code>{}</code>. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">if</span> (<span class="hljs-variable language_">window</span>.<span class="hljs-property">localStorage</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'The local storage is supported'</span>);
}<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<h2 id="identifiers">Identifiers</h2>
<p>An identifier is a name you choose for variables, parameters, <a href="https://www.javascripttutorial.net/javascript-function/">functions</a>, classes, etc. An identifier name starts with a letter (<code>a-z</code>, or <code>A-Z</code>), an underscore(<code>_</code>), or a dollar sign (<code>$</code>) and is followed by a sequence of characters including (<code>a-z</code>, <code>A-Z</code>), numbers (<code>0-9</code>), underscores (<code>_</code>), and dollar signs (<code>$</code>).</p>
<p>Note that the letter is not limited to the ASCII character and may include extended ASCII or Unicode though not recommended.</p>
<p>Identifiers are case-sensitive. For example, the <code>message</code> is different from the <code>Message</code>.</p>
<h2 id="comments">Comments</h2>
<p>Comments allow you to add notes or hints to JavaScript code. When executing the code, the JavaScript engine ignores the comments.</p>
<p>JavaScript supports single-line and block comments.</p>
<h3 id="single-line-comments">Single-line comments</h3>
<p>A single-line comment starts with two forward-slashes characters (<code>//</code>). A single-line comment makes all the text following the <code>//</code> on the same line into a comment. For example:</p>
<pre><code>// this is a single-line commentCode language: JSON / JSON with Comments (json)
</code></pre>
<h3 id="block-comments">Block comments</h3>
<p>A delimited comment begins with a forward slash and asterisk <code>/*</code> and ends with the opposite <code>*/</code> as in the following example:</p>
<pre><code>/* This is a block comment
that can span multiple lines */Code language: JSON / JSON with Comments (json)
</code></pre>
<h2 id="expressions">Expressions</h2>
<p>An expression is a piece of code that evaluates to a value. For example:</p>
<pre><code>2 + 1
</code></pre>
<p>The above expression returns three.</p>
<h2 id="keywords--reserved-words">Keywords & Reserved words</h2>
<p>JavaScript defines a list of reserved keywords that have specific uses. Therefore, you cannot use the reserved keywords as identifiers or property names by rules.</p>
<p>The following table shows the JavaScript reserved words defined in ECMA-262:</p>
<table>
<thead>
<tr>
<th><a href="https://www.javascripttutorial.net/javascript-break/"><code>break</code></a></th>
<th><code>case</code></th>
<th><code>catch</code></th>
</tr>
</thead>
<tbody><tr>
<td><a href="https://www.javascripttutorial.net/javascript-continue/"><code>continue</code></a></td>
<td><code>debugger</code></td>
<td><code>default</code></td>
</tr>
<tr>
<td><a href="https://www.javascripttutorial.net/javascript-if-else/"><code>else</code></a></td>
<td><code>export</code></td>
<td><code>extends</code></td>
</tr>
<tr>
<td><a href="https://www.javascripttutorial.net/javascript-function/"><code>function</code></a></td>
<td><code>if</code></td>
<td><code>import</code></td>
</tr>
<tr>
<td><code>new</code></td>
<td><code>return</code></td>
<td><code>super</code></td>
</tr>
<tr>
<td><code>throw</code></td>
<td><code>try</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td><code>void</code></td>
<td><code>while</code></td>
<td><code>with</code></td>
</tr>
<tr>
<td><a href="https://www.javascripttutorial.net/es6/javascript-class/"><code>class</code></a></td>
<td><code>delete</code></td>
<td><code>finally</code></td>
</tr>
<tr>
<td><code>in</code></td>
<td><code>switch</code></td>
<td><code>typeof</code></td>
</tr>
<tr>
<td><code>yield</code></td>
<td><code>const</code></td>
<td><a href="https://www.javascripttutorial.net/javascript-do-while/"><code>do</code></a></td>
</tr>
<tr>
<td><code>for</code></td>
<td><code>instanceof</code></td>
<td><code>this</code></td>
</tr>
<tr>
<td><code>var</code></td>
<td></td>
<td></td>
</tr>
</tbody></table>
<p>In addition to the reserved keywords, ECMA-252 also define a list of future reserved words that cannot be used as identifiers or property names:</p>
<table>
<thead>
<tr>
<th><code>enum</code></th>
<th><code>implements</code></th>
<th><code>let</code></th>
</tr>
</thead>
<tbody><tr>
<td><code>protected</code></td>
<td><code>private</code></td>
<td><code>public</code></td>
</tr>
<tr>
<td><code>await</code></td>
<td><code>interface</code></td>
<td><code>package</code></td>
</tr>
<tr>
<td><code>implements</code></td>
<td><code>public</code></td>
<td></td>
</tr>
</tbody></table>
<h2 id="summary">Summary</h2>
<ul>
<li>Use whitespace including cariage return, space, newline, and tab to format the code. The JavaScript engine ignores the whiespace.</li>
<li>Use a semicolon (<code>;</code>) to terminate a simple statement.</li>
<li>Use the curly braces (<code>{}</code>) to form a block that groups one or more simple statments.</li>
<li>A single-line comment start with <code>//</code> followed by a text. A block comment begins with <code>/*</code> and ends with <code>*/</code>. JavaScript engine also ignores the comments.</li>
<li>Identifers are names that you choose for variables, functions, classes, etc.</li>
<li>Do not use the reserved keywords and reserved words for identifers.</li>
</ul>