<h1 id="javascript-if">JavaScript if</h1>
<p><strong>Summary</strong>: in this tutorial, you will learn how to use the JavaScript <code>if</code> statement to execute a block when a condition is <code>true</code>.</p>
<h2 id="introduction-to-the-javascript-if-statement">Introduction to the JavaScript if statement</h2>
<p>The <code>if</code> statement executes block if a condition is <code>true</code>. The following shows the syntax of the <code>if</code> statement:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">if</span>( condition )
statement;<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>The <code>condition</code> can be a value or an expression. Typically, the condition evaluates to a <a href="https://www.javascripttutorial.net/javascript-data-types/#boolean">Boolean</a> value, which is <code>true</code> or <code>false</code>.</p>
<p>If the <code>condition</code> evaluates to <code>true</code>, the <code>if</code> statement executes the <code>statement</code>. Otherwise, the <code>if</code> statement passes the control to the next statement after it.</p>
<p>The following flowchart illustrates how the <code>if</code> statement works:</p>
<p><a href="https://www.javascripttutorial.net/wp-content/uploads/2022/01/javascript-if.svg"><img src="https://www.javascripttutorial.net/wp-content/uploads/2022/01/javascript-if.svg" alt="JavaScript if"></a></p>
<p>If the <code>condition</code> evaluates to a non-Boolean value, JavaScript implicitly converts its result to a Boolean value by calling the <a href="https://www.javascripttutorial.net/javascript-boolean/"><code>Boolean()</code></a> function.</p>
<p>If you have more than one statement to execute, you need to use wrap them in a block using a pair of curly braces as follows:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">if</span> (condition) {
<span class="hljs-comment">// statements to execute</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>However, it’s a good practice to always use curly braces with the <code>if</code> statement. By doing this, you make your code easier to maintain and avoid possible mistakes.</p>
<h2 id="javascript-if-statement-examples">JavaScript if statement examples</h2>
<p>The following example uses the <code>if</code> statement to check if the age is equal to or greater than <code>18</code>:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> age = <span class="hljs-number">18</span>;
<span class="hljs-keyword">if</span> (age >= <span class="hljs-number">18</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'You can sign up'</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>Output:</p>
<pre><code class="hljs language-js"><span class="hljs-title class_">You</span> can sign upCode <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>How it works.</p>
<p>First, declare and initialize the <a href="https://www.javascripttutorial.net/javascript-variables/">variable</a> <code>age</code> to <code>18</code>: </p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> age = <span class="hljs-number">18</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>Second, check if the age is greater or equal to <code>18</code> using the <code>if</code> statement. Because the expression <code>age >= 18</code> is <code>true</code>, the code inside the <code>if</code> statement executes that outputs a message to the console:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">if</span> (age >= <span class="hljs-number">18</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'You can sign up'</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>The following example also uses the <code>if</code> statement. However, the <code>age</code> is <code>16</code> which causes the condition to evaluate to <code>false</code>. Therefore, you won’t see any message in the output:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> age = <span class="hljs-number">16</span>;
<span class="hljs-keyword">if</span> (age >= <span class="hljs-number">18</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'You can sign up'</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="nested-if-statement">Nested if statement</h2>
<p>It’s possible to use an <code>if</code> statement inside another <code>if</code> statement. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> age = <span class="hljs-number">16</span>;
<span class="hljs-keyword">let</span> state = <span class="hljs-string">'CA'</span>;
<span class="hljs-keyword">if</span> (state == <span class="hljs-string">'CA'</span>) {
<span class="hljs-keyword">if</span> (age >= <span class="hljs-number">16</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'You can drive.'</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>Output:</p>
<pre><code class="hljs language-js"><span class="hljs-title class_">You</span> can drive.<span class="hljs-property">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>How it works.</p>
<p>First, declare and initialize the <code>age</code> and <code>state</code> variables:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> age = <span class="hljs-number">16</span>;
<span class="hljs-keyword">let</span> state = <span class="hljs-string">'CA'</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>Second, check if the <code>state</code> is <code>'CA'</code> using an <code>if</code> statement. If yes, check if the <code>age</code> is greater than <code>16</code> using a nested <code>if</code> statement and output a message to the console:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">if</span> (state == <span class="hljs-string">'CA'</span>) {
<span class="hljs-keyword">if</span> (age == <span class="hljs-number">16</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'You can drive.'</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>In practice, you should avoid using nested <code>if</code> statements as much as possible. For example, you can use the <code>&&</code> operator to combine the conditions and use an <code>if</code> statements as follows:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> age = <span class="hljs-number">16</span>;
<span class="hljs-keyword">let</span> state = <span class="hljs-string">'CA'</span>;
<span class="hljs-keyword">if</span> (state == <span class="hljs-string">'CA'</span> && age == <span class="hljs-number">16</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'You can drive.'</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="summary">Summary</h2>
<ul>
<li>Use the JavaScript <code>if</code> statement to execute a statement if a condition is <code>true</code>.</li>
<li>Avoid using nested <code>if</code> statement as much as possible.</li>
</ul>