javaScript-data-types

<h1 id="javascript-data-types">JavaScript Data Types</h1> Summary: in this tutorial, you will learn about the JavaScript data types and their unique characteristics. JavaScript has the primitive data types: <ol> <li><a href="https://www.javascripttutorial.net/javascript-data-types/#null"><code>null</code></a></li> <li><a href="https://www.javascripttutorial.net/javascript-data-types/#undefined"><code>undefined</code></a></li> <li><a href="https://www.javascripttutorial.net/javascript-data-types/#boolean"><code>boolean</code></a></li> <li><a href="https://www.javascripttutorial.net/javascript-data-types/#number"><code>number</code></a></li> <li><a href="https://www.javascripttutorial.net/javascript-data-types/#string"><code>string</code></a></li> <li><a href="https://www.javascripttutorial.net/javascript-data-types/#symbol"><code>symbol</code></a> – available from ES2015</li> <li><code>bigint</code> – available from ES2020</li> </ol> and a complex data type <a href="https://www.javascripttutorial.net/javascript-data-types/#object"><code>object</code></a>. <a href="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-data-types.svg"><img src="https://www.javascripttutorial.net/wp-content/uploads/2022/01/JavaScript-data-types.svg" alt="JavaScript data types"></a> JavaScript is a dynamically typed language. It means that a <a href="https://www.javascripttutorial.net/javascript-variables/">variable</a> doesn’t associate with a type. In other words, a variable can hold a value of different types. For example: <pre><code class="hljs language-js">let counter = 120; // counter is a number counter = false; // counter is now a boolean counter = "foo"; // counter is now a stringCode language: JavaScript (javascript) </code></pre> To get the current type of the value that the variable stores, you use the <code>typeof</code> operator: <pre><code class="hljs language-js">let counter = 120; console.log(typeof(counter)); // "number" counter = false; console.log(typeof(counter)); // "boolean" counter = "Hi"; console.log(typeof(counter)); // "string"Code language: JavaScript (javascript) </code></pre> Output: <pre><code class="hljs language-js">"number" "boolean" "string"Code language: JSON / JSON with Comments (json) </code></pre> <h2 id="the-undefined-type">The undefined type</h2> The <code>undefined</code> type is a primitive type that has only one value <code>undefined</code>. By default, when a variable is declared but not initialized, it is assigned the value of <code>undefined</code>. Consider the following example: <pre><code class="hljs language-js">let counter; console.log(counter); // undefined console.log(typeof counter); // undefinedCode language: JavaScript (javascript) </code></pre> In this example, the <code>counter</code> is a variable. Since <code>counter</code> hasn’t been initialized, it is assigned the value <code>undefined</code>. The type of <code>counter</code> is also <code>undefined</code>. It’s important to note that the <code>typeof</code> operator also returns <code>undefined</code> when you call it on a variable that hasn’t been declared: <pre><code class="hljs language-js">console.log(typeof undeclaredVar); // undefinedCode language: JavaScript (javascript) </code></pre> <h2 id="the-null-type">The null type</h2> The <code>null</code> type is the second primitive data type that also has only one value <code>null</code>. For example: <pre><code class="hljs language-js">let obj = null; console.log(typeof obj); // objectCode language: JavaScript (javascript) </code></pre> JavaScript defines that <code>null</code> is equal to <code>undefined</code> as follows: <pre><code class="hljs language-js">console.log(null == undefined); // trueCode language: JavaScript (javascript) </code></pre> <h2 id="the-number-type">The number type</h2> JavaScript uses the <code>number</code> type to represent both integer and floating-point numbers. The following statement declares a variable and initializes its value with an integer: <pre><code class="hljs language-js">let num = 100;Code language: JavaScript (javascript) </code></pre> To represent a floating-point number, you include a decimal point followed by at least one number. For example: <pre><code class="hljs language-js">let price= 12.5; let discount = 0.05;Code language: JavaScript (javascript) </code></pre> Note that JavaScript automatically converts a floating-point number into an integer number if the number appears to be a whole number. The reason is that Javascript always wants to use less memory since a floating-point value uses twice as much memory as an integer value. For example: <pre><code class="hljs language-js">let price = 200.00; // interpreted as an integer 200Code language: JavaScript (javascript) </code></pre> To get the range of the number type, you use <code>Number.MIN_VALUE</code> and <code>Number.MAX_VALUE</code>. For example: <pre><code class="hljs language-js">console.log(Number.MAX_VALUE); // 1.7976931348623157e+308 console.log(Number.MIN_VALUE); // 5e-324Code language: JavaScript (javascript) </code></pre> Also, you can use <code>Infinity</code> and <code>-Infinity</code> to represent the infinite number. For example: <pre><code class="hljs language-js">console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity console.log(-Number.MAX_VALUE - Number.MAX_VALUE); // -InfinityCode language: JavaScript (javascript) </code></pre> <h3 id="nan">NaN</h3> <code>NaN</code> stands for Not a Number. It is a special numeric value that indicates an invalid number. For example, the division of a string by a number returns <code>NaN</code>:. <pre><code class="hljs language-js">console.log('a'/2); // NaN;Code language: JavaScript (javascript) </code></pre> The <code>NaN</code> has two special characteristics: <ul> <li>Any operation with <code>NaN</code> returns <code>NaN</code>.</li> <li>The <code>NaN</code> does not equal any value, including itself.</li> </ul> Here are some examples: <pre><code class="hljs language-js">console.log(NaN/2); // NaN console.log(NaN == NaN); // falseCode language: JavaScript (javascript) </code></pre> <h2 id="the-string-type">The string type</h2> In JavaScript, a string is a sequence of zero or more characters. A string literal begins and ends with either a single quote(<code>'</code>) or a double quote (<code>"</code>). A string that begins with a double quote must end with a double quote. Likewise, a string that begins with a single quote must also end with a single quote: <pre><code class="hljs language-js">let greeting = 'Hi'; let message = "Bye";Code language: JavaScript (javascript) </code></pre> If you want to single quote or double quotes in a literal string, you need to use the backslash to escape it. For example: <pre><code class="hljs language-js">let message = 'I\'m also a valid string'; // use \ to escape the single quote (')Code language: JavaScript (javascript) </code></pre> JavaScript strings are immutable. This means that it cannot be modified once created. However, you can create a new string from an existing string. For example: <pre><code class="hljs language-js">let str = 'JavaScript'; str = str + ' String';Code language: JavaScript (javascript) </code></pre> In this example: <ul> <li>First, declare the <code>str</code> variable and initialize it to a string of <code>'JavaScript'</code>.</li> <li>Second, use the <code>+</code> operator to combine <code>'JavaScript'</code> with <code>' String'</code> to make its value as <code>'Javascript String'</code>.</li> </ul> Behind the scene, the JavaScript engine creates a new string that holds the new string <code>'JavaScript String'</code> and destroys the original strings <code>'JavaScript'</code> and <code>' String'</code>. <h2 id="the-boolean-type">The boolean type</h2> The <code>boolean</code> type has two literal values: <code>true</code> and <code>false</code> in lowercase. The following example declares two variables that hold the boolean values. <pre><code class="hljs language-js">let inProgress = true; let completed = false; console.log(typeof completed); // booleanCode language: JavaScript (javascript) </code></pre> JavaScript allows values of other types to be converted into boolean values of <code>true</code> or <code>false</code>. To convert a value of another data type into a boolean value, you use the <a href="https://www.javascripttutorial.net/javascript-boolean/"><code>Boolean()</code></a> function. The following table shows the conversion rules: <table> <thead> <tr> <th align="left">Type</th> <th align="left">true</th> <th align="left">false</th> </tr> </thead> <tbody><tr> <td align="left">string</td> <td align="left">non-empty string</td> <td align="left">empty string</td> </tr> <tr> <td align="left">number</td> <td align="left">non-zero number and Infinity</td> <td align="left">0, NaN</td> </tr> <tr> <td align="left">object</td> <td align="left">non-null object</td> <td align="left">null</td> </tr> <tr> <td align="left">undefined</td> <td align="left"></td> <td align="left">undefined</td> </tr> </tbody></table> For example: <pre><code class="hljs language-js">console.log(Boolean('Hi'));// true console.log(Boolean('')); // false console.log(Boolean(20)); // true console.log(Boolean(Infinity)); // true console.log(Boolean(0)); // false console.log(Boolean({foo: 100})); // true on non-empty object console.log(Boolean(null));// falseCode language: JavaScript (javascript) </code></pre> <h2 id="the-symbol-type">The symbol type</h2> JavaScript added a primitive type in ES6: the <code>symbol</code>. Different from other primitive types, the <code>symbol</code> type does not have a literal form. To create a symbol, you call the <code>Symbol</code> function as follows: <pre><code class="hljs language-js">let s1 = Symbol();Code language: JavaScript (javascript) </code></pre> The <code>Symbol</code> function creates a new unique value every time you call it. <pre><code class="hljs language-js">console.log(Symbol() == Symbol()); // falseCode language: JavaScript (javascript) </code></pre> Note that you’ll learn more about symbols in the <a href="https://www.javascripttutorial.net/es6/symbol/">symbol tutorial</a>. <h2 id="the-bigint-type">The bigint type</h2> The <code>bigint</code> type represents the whole numbers that are larger than 253 – 1. To form a <code>bigint</code> literal number, you append the letter <code>n</code> at the end of the number: <pre><code class="hljs language-js">let pageView = 9007199254740991n; console.log(typeof(pageView)); // 'bigint'Code language: JavaScript (javascript) </code></pre> And you’ll learn more about the <a href="https://www.javascripttutorial.net/es-next/javascript-bigint/"><code>bigint</code> type here</a>. <h2 id="the-object-type">The object type</h2> In JavaScript, an <a href="https://www.javascripttutorial.net/home/javascript-objects/">object</a> is a collection of <a href="https://www.javascripttutorial.net/home/javascript-object-properties/">properties</a>, where each property is defined as a key-value pair. The following example defines an empty object using the object literal syntax: <pre><code class="hljs language-js">let emptyObject = {};Code language: JavaScript (javascript) </code></pre> The following example defines the <code>person</code> object with two properties: <code>firstName</code> and <code>lastName</code>. <pre><code class="hljs language-js">let person = { firstName: 'John', lastName: 'Doe' };Code language: JavaScript (javascript) </code></pre> A property name of an object can be any string. You can use quotes around the property name if it is not a valid identifier. For example, if the person object has a property <code>first-name</code>, you must place it in the quotes such as <code>"first-name"</code>. A property of an object can hold an object. For example: <pre><code class="hljs language-js">let contact = { firstName: 'John', lastName: 'Doe', email: 'john.doe@example.com', phone: '(408)-555-9999', address: { building: '4000', street: 'North 1st street', city: 'San Jose', state: 'CA', country: 'USA' } }Code language: JavaScript (javascript) </code></pre> The <code>contact</code> object has the <code>firstName</code>, <code>lastName</code>, <code>email</code>, <code>phone</code>, and <code>address</code> properties. The <code>address</code> property itself holds an object that has <code>building</code>, <code>street</code>, <code>city</code>, <code>state</code>, and <code>country</code> properties. To access a object’s property, you can use <ul> <li>The dot notation (<code>.</code>)</li> <li>The array-like notation (<code>[]</code>).</li> </ul> The following example uses the dot notation (<code>.</code>) to access the <code>firstName</code> and <code>lastName</code> properties of the <code>contact</code> object. <pre><code class="hljs language-js">console.log(contact.firstName); console.log(contact.lastName);Code language: CSS (css) </code></pre> If you reference a property that does not exist, you’ll get an <code>undefined</code> value. For example: <pre><code class="hljs language-js">console.log(contact.age); // undefinedCode language: JavaScript (javascript) </code></pre> The following example uses the array-like notation to access the <code>email</code> and <code>phone</code> properties of the <code>contact</code> object. <pre><code class="hljs language-js">console.log(contact['phone']); // '(408)-555-9999' console.log(contact['email']); // 'john.doe@example.com'Code language: JavaScript (javascript) </code></pre> <h2 id="summary">Summary</h2> <ul> <li>JavaScript has the primitive types: <code>number</code>, <code>string</code>, <code>boolean</code>, <code>null</code>, <code>undefined</code>, <code>symbol</code> and <code>bigint</code> and a complex type: <code>object</code>.</li> </ul>

About Me

Top References

Top Tutorials

NOTE: