javaScript-variables

<h1 id="javascript-variables">JavaScript Variables</h1> Summary: in this tutorial, you’ll learn about JavaScript variables and how to use variables to store values in the application. A variable is a label that references a value like a number or string. Before using a variable, you need to declare it. <a href="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-variables.svg"><img src="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-variables.svg" alt="img"></a> <h2 id="declare-a-variable">Declare a variable</h2> To declare a variable, you use the <code>var</code> keyword followed by the variable name as follows: <pre><code class="hljs language-js">var message;Code language: JavaScript (javascript) </code></pre> A variable name can be any valid identifier. By default, the <code>message</code> variable has a special value <a href="https://www.javascripttutorial.net/javascript-data-types/#undefined"><code>undefined</code></a> if you have not assigned a value to it. Variable names follow these rules: <ul> <li>Variable names are case-sensitive. This means that the <code>message</code> and <code>Message</code> are different variables.</li> <li>Variable names can only contain letters, numbers, underscores, or dollar signs and cannot contain spaces. Also, variable names must begin with a letter, an underscore (<code>_</code>) or a dollar sign (<code>$)</code>.</li> <li>Variable names cannot use the reserved words.</li> </ul> By convention, variable names use camelcase like <code>message</code>, <code>yourAge</code>, and <code>myName</code>. JavaScript is a dynamically typed language. This means that you don’t need to specify the variable’s <a href="https://www.javascripttutorial.net/javascript-data-types/">type</a> in the declaration like other static typed languages such as Java or <a href="https://www.csharptutorial.net/csharp-tutorial/csharp-variables/">C#</a>. Starting in ES6, you can use the <code>let</code> keyword to declare a variable like this: <pre><code class="hljs language-js">let message;Code language: JavaScript (javascript) </code></pre> It’s a good practice to use the <code>let</code> keyword to declare a variable. Later, you’ll learn the differences <a href="https://www.javascripttutorial.net/es6/difference-between-var-and-let/">between <code>var</code> and <code>let</code> keywords</a>. And you should not worry about it for now. <h2 id="initialize-a-variable">Initialize a variable</h2> Once you have declared a variable, you can initialize it with a value. To initialize a variable, you specify the variable name, followed by an equals sign (<code>=</code>) and a value. For example, The following declares the <code>message</code> variable and initializes it with a literal string <code>"Hello"</code>: <pre><code class="hljs language-js">let message; message = "Hello";Code language: JavaScript (javascript) </code></pre> To declare and initialize a variable at the same time, you use the following syntax: <pre><code class="hljs language-js">let variableName = value;Code language: JavaScript (javascript) </code></pre> For example, the following statement declares the <code>message</code> variable and initializes it with the literal string <code>"Hello"</code>: <pre><code class="hljs language-js">let message = "Hello";Code language: JavaScript (javascript) </code></pre> JavaScript allows you to declare two or more variables using a single statement. To separate two variable declarations, you use a comma (<code>,</code>) like this: <pre><code class="hljs language-js">let message = "Hello", counter = 100;Code language: JavaScript (javascript) </code></pre> Since JavaScript is a dynamically typed language, you can assign a value of a different type to a variable. Although, it is not recommended. For example: <pre><code class="hljs language-js">let message = 'Hello'; message = 100;Code language: JavaScript (javascript) </code></pre> <h2 id="change-a-variable">Change a variable</h2> Once you initialize a variable, you can change its value by assigning a different value. For example: <pre><code class="hljs language-js">let message = "Hello"; message = 'Bye';Code language: JavaScript (javascript) </code></pre> <h2 id="undefined-vs-undeclared-variables">Undefined vs. undeclared variables</h2> It’s important to distinguish between undefined and undeclared variables. An undefined variable is a variable that has been declared but has not been initialized with a value. For example: <pre><code class="hljs language-js">let message; console.log(message); // undefinedCode language: JavaScript (javascript) </code></pre> In this example, the <code>message</code> variable is declared but not initialized. Therefore, the <code>message</code> variable is undefined. In contrast, an undeclared variable is a variable that has not been declared. For example: <pre><code class="hljs language-js">console.log(counter);Code language: JavaScript (javascript) </code></pre> Output: <pre><code class="hljs language-js">console.log(counter); ^ ReferenceError: counter is not definedCode language: JavaScript (javascript) </code></pre> In this example, the <code>counter</code> variable has not been declared. Hence, accessing it causes a <code>ReferenceError</code>. <h2 id="constants">Constants</h2> A constant holds a value that doesn’t change. To declare a constant, you use the const keyword. When defining a constant, you need to initialize it with a value. For example: <pre><code class="hljs language-js">const workday = 5;Code language: JavaScript (javascript) </code></pre> Once defining a constant, you cannot change its value. The following example attempts to change the value of the workday constant to 4 and causes an error: <pre><code class="hljs language-js">workday = 2; </code></pre> Error: <pre><code class="hljs language-js">Uncaught TypeError: Assignment to constant variable.Code language: JavaScript (javascript) </code></pre> Later, you’ll learn that the <code>const</code> keyword actually defines a read-only reference to a value in the <a href="https://www.javascripttutorial.net/es6/javascript-const/">constants</a> tutorial. <h2 id="summary">Summary</h2> <ul> <li>A variable is a label that references a value.</li> <li>Use the <code>let</code> keyword to declare a variable.</li> <li>An undefined variable is a variable that has been declared but not initialized while an undeclared variable is variable that has not been declared.</li> <li>Use the <code>const</code> keyword to define a readonly reference to a value.</li> </ul>

About Me

Top References

Top Tutorials

NOTE: