{"id":7733,"date":"2018-10-10T08:31:51","date_gmt":"2018-10-10T13:31:51","guid":{"rendered":"https:\/\/www.carnaghan.com\/?p=7733"},"modified":"2021-03-06T15:47:38","modified_gmt":"2021-03-06T20:47:38","slug":"javascript-data-types-values-and-variables","status":"publish","type":"post","link":"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/","title":{"rendered":"JavaScript Data Types, Values, and Variables"},"content":{"rendered":"\n<p><span id=\"urn:enhancement-eb2edf29-20fd-02b2-9851-50c0b2c9d7f9\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span> is one of the three core technologies used to build websites and web applications. Alongside <span id=\"urn:enhancement-26b3a4ea-8c95-bc6b-7a27-14fe33b12922\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/html\">HTML<\/span> and <span id=\"urn:enhancement-4325d33f-d902-2942-a1b8-7d9fcbd3e028\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/cascading_style_sheets\">CSS<\/span>, <span id=\"urn:enhancement-353329f7-02e7-a751-1ffc-a2958c1f0d63\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span> provides the interactive functionality commonly used throughout the web. In this lesson you will be introduced to some of the core concepts of <span id=\"urn:enhancement-a12f319f-fc85-d6e9-99a6-f215252c9cea\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span>.<\/p>\n\n\n\n<p>To follow along, you will need a modern <span id=\"urn:enhancement-a7677a66-eb5d-7b6b-bdfe-67b521ad491d\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/web_browser\">web browser<\/span>, such as <span id=\"urn:enhancement-ae2b8dcf-9368-c3dd-6344-1e2dbb3e9133\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/google_chrome\">Google Chrome<\/span> or equivalent with <span id=\"urn:enhancement-13770372-465f-7ec5-0e87-942d33089189\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/software_developer\">developer<\/span> tools. You will also need a capable text editor. I highly recommend <a href=\"https:\/\/code.visualstudio.com\/\">Microsoft Visual Studio Code<\/a>. The first concept we are going to cover in this lesson is <span id=\"urn:enhancement-5038be7f-9433-4ed0-eb13-285524f9914e\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variables<\/span>. Variables are spaces of memory where you can store information of a certain type, that can be retrieved later in your code.<\/p>\n\n\n\n<p><span id=\"urn:enhancement-30088906-83e8-28f2-96e3-95798dd5ffae\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span> is capable of storing five different types of primitive data types within <span id=\"urn:enhancement-2ac1fcac-9dff-d158-bcc8-f2d9ebca9972\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variables<\/span>. These include:<\/p>\n\n\n\n<ul><li>Number (including whole, integer, float)<\/li><li>String (or text)<\/li><li>Boolean<\/li><li>Undefined (a variable that has not yet been assigned a value or type)<\/li><li>Null (an assignment representing no value)<\/li><\/ul>\n\n\n\n<p>The keyword <strong>let<\/strong> is used to <span id=\"urn:enhancement-764cebc5-d7b8-aff7-4c7e-6220e53fd12c\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/declaration_computer_programming\">declare<\/span> a <span id=\"urn:enhancement-b240bf6d-7343-eddb-8d24-ccfdba5aea81\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span>. A <span id=\"urn:enhancement-096123a6-c03d-0e09-0e27-ed02104c737e\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span> can either be <span id=\"urn:enhancement-41b26739-2c85-e45c-9885-330fdf254650\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/declaration_computer_programming\">declared<\/span> as undefined (without a <span id=\"urn:enhancement-fd35330b-4957-39cd-458a-3415675abfad\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/value_computer_science\">value<\/span> set) or defined with a <span id=\"urn:enhancement-b0a059a2-6c19-67bc-42d0-ce5696277ca9\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/value_computer_science\">value<\/span>. The following examples illustrate declaring <span id=\"urn:enhancement-2c344fae-e6d6-756a-e82b-f6dd02f5ba95\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variables<\/span> of different types.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">let studentName = 'Fred Jones'; \/\/ string. Strings are always stored in quotes\nlet gpa = 3.6; \/\/ number. Numbers are stored without quotes\nlet graduated = false; \/\/ boolean. Either true or false can be assigned\nlet quizResult; \/\/ undefined<\/code><\/pre>\n\n\n\n<p>Note each statement in <span id=\"urn:enhancement-f34e7143-11ce-42a1-ec31-312982b40e77\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span> ends with a semi-colon. The \/\/ is used to create an in-<span id=\"urn:enhancement-e817c292-3eb2-ec62-23b8-11e1ef76c247\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/comment_computer_programming\">line comment<\/span>, i.e. anything written after \/\/ will be ignored. You can also write multi-line <span id=\"urn:enhancement-1171c6dd-d0e3-88e8-09d0-544484815923\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/comment_computer_programming\">comments<\/span> by enclosing your <span id=\"urn:enhancement-bcd38185-a8b6-a12f-60f4-75e6573d457a\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/comment_computer_programming\">comments<\/span> in \/* and *\/.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Variable names have certain rules that we need to follow. All variable names must start with an underscore _ or letter. The rest of the name can contain any letter, any number, or the underscore. You can&#8217;t use any other characters. Variables are case-sensitive.<\/p><\/blockquote>\n\n\n\n<p>Now that you have learned the basics of <span id=\"urn:enhancement-f44100da-c9a7-786b-7322-73ae8f0617f7\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variables<\/span>, let&#8217;s try using some next.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u2192 Try it out in the <span id=\"urn:enhancement-f846e711-a767-7918-6f07-13121006282a\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/web_browser\">Browser<\/span> Console<\/strong><\/h2>\n\n\n\n<p>In <span id=\"urn:enhancement-63decefb-3e4c-72d8-836b-9235d3e20e59\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/google_chrome\">Chrome<\/span> (or an equivalent <span id=\"urn:enhancement-5779b33f-ba33-6dd5-95e7-df0cda6eca8e\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/web_browser\">browser<\/span>), open the development tools. Using <span id=\"urn:enhancement-738b96e5-e009-d152-8460-c9228dda2c15\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/google_chrome\">Chrome<\/span> you can access &#8216;developer&#8217; tools in the view menu (Mac) or tools menu (Windows). Alternatively, right-clicking an empty area in the <span id=\"urn:enhancement-6e87759c-3a43-5111-df1e-98b54f6e6b2a\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/web_browser\">browser<\/span> window and selecting &#8216;inspect&#8217; will also get you there. You can also open the console by pressing Ctrl+Shift+J (Windows \/ Linux) or Cmd+Opt+J (Mac).<\/p>\n\n\n\n<p>Next try declaring the studentName <span id=\"urn:enhancement-5d03e99e-d309-3053-fcc3-53f0510caf1e\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span> as above. Once you hit enter on the keyboard, enter the <span id=\"urn:enhancement-1f4879eb-d8b6-1688-18c6-3e93cd86cfb4\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/kill_command\">command<\/span>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">console.log(studentName)<\/code><\/pre>\n\n\n\n<p>You should now see the relevant output showing the value of studentName as shown in the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"\/lessons\/data-types-values-variables\/consolevar\/\" rel=\"attachment wp-att-7705\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"376\" src=\"\/wp-content\/uploads\/2018\/09\/consolevar-1024x376.jpg\" alt=\"console\" class=\"wp-image-7705\" srcset=\"https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/consolevar-1024x376.jpg 1024w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/consolevar-300x110.jpg 300w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/consolevar-768x282.jpg 768w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/consolevar-1080x396.jpg 1080w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/consolevar.jpg 1674w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>The console.log <span id=\"urn:enhancement-cfd1a798-5795-5399-61e8-0fd014068788\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/command_computing\">command<\/span> is a very handy way of quickly outputting results to the console. As shown above, we have successfully declared the studentName <span id=\"urn:enhancement-cb545bb1-5945-678f-ffc7-3f2262a117b4\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span> and assigned the <span id=\"urn:enhancement-71880082-4ca5-6852-111b-b8a68f5eb58c\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/value_computer_science\">value<\/span> &#8216;Fred Jones&#8217;. Strings are always <span id=\"urn:enhancement-32e16265-5091-1b42-0578-3619e95ea67f\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data_storage_device\">stored<\/span> using either single or double quotes. The console.log <span id=\"urn:enhancement-23b9d391-6d0a-f74b-d177-0f6d04aca7df\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/command_computing\">command<\/span> confirms our <span id=\"urn:enhancement-8aa8ab76-d324-6358-f14c-41603e26af72\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/value_computer_science\">value<\/span> is <span id=\"urn:enhancement-3a10fcd7-7ea7-586d-5207-90ca200b84aa\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data_storage_device\">stored<\/span> to the <span id=\"urn:enhancement-059ac4ae-bb00-25a7-89ca-2ed05933f220\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u2192&nbsp;Try it out in Code Files<\/strong><\/h2>\n\n\n\n<p>While the <span id=\"urn:enhancement-e393a2d5-b7d9-b35d-2479-212f8dd05ece\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/software_developer\">developer<\/span> tools are very handy for quick <span id=\"urn:enhancement-e6d8978b-1c85-a74e-5000-e8ce80aaacd3\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/debugging\">debugging<\/span>, you typically will write <span id=\"urn:enhancement-f9db50bb-6720-fbd9-b597-13f0cbfc08a0\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span> code within text files. As mentioned above, I highly recommend Visual Studio Code for <span id=\"urn:enhancement-216443a4-9925-316f-6fb2-e849b2c524ff\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/editing\">editing<\/span> purposes, and this is the <span id=\"urn:enhancement-d2c4c1de-d99f-a3f6-2cbf-88eb75309e85\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/editing\">editor<\/span> I use throughout this course. To get started, create a new project folder on your computer called bite-size-javascript and open VS Code (or an equivalent <span id=\"urn:enhancement-ff613e9b-ad4e-17fa-af47-8819d527d60f\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/editing\">editor<\/span>) and create two new files in this directory called <strong>index.html<\/strong> and <strong>script.js<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Learning JavaScript&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Learning JavaScript&lt;\/h1&gt;\n    &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/**\n* Variables and Types\n*\/\n\nlet studentName = 'Fred Jones'; \/\/ string. Strings are always stored in quotes \nconsole.log(studentName)\n\nlet gpa = 3.6; \/\/ number. Numbers are stored without quotes \nconsole.log(gpa)\n\nlet graduated = false; \/\/ boolean. Either true or false can be assigned \nconsole.log(graduated)\n\nlet quizResult; \/\/ undefined\nconsole.log(quizResult)\n\nlet emptyValue = null; \/\/ null\nconsole.log(emptyValue)<\/code><\/pre>\n\n\n\n<p>Earlier, you were introduced to single line comments. Note the top line beginning with \/* This is called a multi-<span id=\"urn:enhancement-42d39689-eb58-1f0d-99b1-a78da17ae516\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/comment_computer_programming\">line comment<\/span>. Multiline comments can appear anywhere between an opening \/* and closing *\/ In this case we are using a multi-<span id=\"urn:enhancement-ee384546-4f7f-1c26-3649-d01cff6e850c\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/comment_computer_programming\">line comment<\/span> to include a human-readable header for our code called \u2018<span id=\"urn:enhancement-7127f791-7ad6-2804-485d-3f468ec45a40\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">Variables<\/span> and Types\u2019. Comments make our code easier to read and will make more sense to you as you get practice using them.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Open index.html in your browser and open the console, Press Ctrl+Shift+J (Windows \/ Linux) or Cmd+Opt+J (Mac).<\/p><\/blockquote>\n\n\n\n<p>You should see results similar to the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"766\" src=\"\/wp-content\/uploads\/2018\/09\/learningjs-vscode-1024x766.jpeg\" alt=\"vscode\" class=\"wp-image-7494\" srcset=\"https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/learningjs-vscode-1024x766.jpeg 1024w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/learningjs-vscode-300x225.jpeg 300w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/learningjs-vscode-768x575.jpeg 768w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/learningjs-vscode-1080x808.jpeg 1080w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/learningjs-vscode.jpeg 1328w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Note each of the different <span id=\"urn:enhancement-745f0b8b-f24b-e70f-4f09-fa42916d5dcf\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variables<\/span> display their associated value in the console.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Coercion and Mutation<\/h2>\n\n\n\n<p>So far you have learned about <span id=\"urn:enhancement-27259159-c4b4-bd79-d4c3-fc53ed0b6df9\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variables<\/span> and the types of <span id=\"urn:enhancement-e8e3f5ea-7a91-3705-4a21-6bea97dadc87\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data\">data<\/span> that can be stored within them. The <span id=\"urn:enhancement-fe1f6058-4a26-297c-b71d-2c8efc944c2f\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data\">data<\/span> types (string, number, boolean, etc.) are tied to the <span id=\"urn:enhancement-818cb08b-1758-46a0-aabb-1c442be7424b\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/value_computer_science\">value<\/span> in <span id=\"urn:enhancement-70f2ef13-e996-89f7-71a7-94f9d3d12f35\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span>, and <strong>not the <span id=\"urn:enhancement-d1249ed7-1f62-5838-e53a-fd5b5dbfd4bf\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span> <span id=\"urn:enhancement-0314fbd1-4966-7eb1-478c-835ace37277c\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/container_abstract_data_type\">container<\/span> itself<\/strong>. For example, if I have a <span id=\"urn:enhancement-9976a0e9-c473-0e28-6122-37d4cd7d20f8\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span> called <strong>gpa<\/strong>&nbsp;and store 3.6 (number) as the <span id=\"urn:enhancement-61c79e13-f6f1-3aa3-6411-a2615b31038d\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/value_computer_science\">value<\/span>, I can later coerce this into a string by combining (or concatenating) it with other <span id=\"urn:enhancement-8c82d2ef-9344-cd72-853f-16ec425300a0\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variables<\/span>. If I combine studentName and gpa by using the + function in <span id=\"urn:enhancement-a05b40ed-113e-0891-ae97-57cb16183f6a\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span>, the resulting output will be provided in a string.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Other languages, such as Java and C# enforce strict typing, meaning the variable itself (in this case student) would be assigned a type of string. If I later tried to store the boolean true value, I would receive a compilation error.<\/p><\/blockquote>\n\n\n\n<p>Similarly, because <span id=\"urn:enhancement-21fc50d8-fa1b-5194-0aa3-84be0faac83d\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span> does not enforce the <span id=\"urn:enhancement-4bb70078-0e68-c346-3986-37b2ec463931\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data\">data<\/span> type at the <span id=\"urn:enhancement-9ff76f99-26f4-5812-f3fb-94aacdd656ad\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span>, different values of different <span id=\"urn:enhancement-39e35c11-0369-4b5d-97e3-c4e13a471b55\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data\">data<\/span> types can be <span id=\"urn:enhancement-8eef9383-b5f9-8289-1528-56ba0c6f706e\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data_storage_device\">stored<\/span> over time.&nbsp;Just like coercion, which happens when <span id=\"urn:enhancement-d154f8df-0e25-0d01-12b5-d4faa4e33004\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variables<\/span> are coerced into a different type, mutation can occur when a different <span id=\"urn:enhancement-4c123d5b-966c-fd7b-0166-60b3e1d4275c\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/value_computer_science\">value<\/span> of a different type is <span id=\"urn:enhancement-111d16a8-95e5-6574-51a4-5d30d9fba411\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data_storage_device\">stored<\/span> in the <span id=\"urn:enhancement-861c42ea-6a9d-d1ef-7906-0716e7c2dcdb\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span>. Take the gpa <span id=\"urn:enhancement-30b7d495-ed73-6b7b-e84e-9910e11a57a2\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span> from the example above. In the code it is a <span id=\"urn:enhancement-91171a84-1088-8240-59fe-97a82a314698\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/value_computer_science\">value<\/span> set to 3.6 (number). We can however update this <span id=\"urn:enhancement-71951f36-214c-230c-d00f-865b9633dd04\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span> and <span id=\"urn:enhancement-9be0ea68-1412-8e50-4915-0a6e5467bdb1\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data_storage_device\">store<\/span> a <span id=\"urn:enhancement-41e5674c-ee32-fe47-43d1-5288d7b07ce2\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/value_computer_science\">value<\/span> of &#8220;three point six&#8221; (string). Both coercion and mutation are made possible by using <span id=\"urn:enhancement-f1dd442d-b4b4-aea6-85e7-d51e49d57d60\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span>&#8216;s dynamic typing. To summarize, <span id=\"urn:enhancement-45b82b8b-c071-453f-47d4-8261957da387\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span> will allow you to <span id=\"urn:enhancement-03a1f98c-b28b-1bca-fb0d-1e76779a053b\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data_storage_device\">store<\/span> values of any type within a <span id=\"urn:enhancement-8767be13-f051-a1eb-63ab-dfee22145557\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variable<\/span> without enforcement. Let&#8217;s look at a couple of examples to better understand this process.<\/p>\n\n\n\n<p><strong>In your script.js <span id=\"urn:enhancement-8c3fc6bb-05c9-2d33-774b-1aa905374d55\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/computer_file\">file<\/span>, update the code, adding the new lines on the end starting with the <span id=\"urn:enhancement-e227072b-a7b3-c1b4-709d-fee8630c5cd3\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/comment_computer_programming\">comments<\/span> &#8216;Coercion and Mutation&#8217;:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/**\n* Variables and Types\n*\/\n\nlet studentName = 'Fred Jones'; \/\/ string. Strings are always stored in quotes \nconsole.log(studentName)\n\nlet gpa = 3.6; \/\/ number. Numbers are stored without quotes \nconsole.log(gpa)\n\nlet graduated = false; \/\/ boolean. Either true or false can be assigned \nconsole.log(graduated)\n\nlet quizResult; \/\/ undefined\nconsole.log(quizResult)\n\nlet emptyValue = null; \/\/ null\nconsole.log(emptyValue)\n\n\/**\n* Coercion and Mutation\n*\/\n\n\/\/ Type Coercion Example\nconsole.log(studentName + ' ' + gpa) \/\/ The + concatenates studentName with an empty space and gpa is coerced into a string\n \n\/\/ Variable Mutation Example\ngpa = \"three point six\"; \/\/ JavaScript changes the data type to string and updates the gpa variable\nconsole.log(gpa)<\/code><\/pre>\n\n\n\n<p>You should now feel comfortable with the <span id=\"urn:enhancement-ef310092-2cc4-7a5c-01a0-001a892c48ad\" class=\"textannotation wl-creative-work disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/javascript\">JavaScript<\/span> fundamental programming concept of <span id=\"urn:enhancement-9cd5cba6-f65f-362f-f8ee-91d39f3e3cf5\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/data\">data<\/span> types, <span id=\"urn:enhancement-116014b6-dc38-e1eb-614c-1cd24e10102f\" class=\"textannotation wl-thing disambiguated\" itemid=\"http:\/\/data.wordlift.io\/wl01166\/entity\/variable_computer_science\">variables<\/span>, and dynamic typing.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to JavaScript with an overview of data types, values and variables.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[11499,8212,7349],"post_series":[7348],"class_list":["post-7733","post","type-post","status-publish","format-standard","hentry","category-coding","tag-bitesize-javascript","tag-cmst-388","tag-javascript","post_series-bitesize-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Data Types, Values, and Variables - Ian Carnaghan<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Data Types, Values, and Variables - Ian Carnaghan\" \/>\n<meta property=\"og:description\" content=\"Introduction to JavaScript with an overview of data types, values and variables.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/\" \/>\n<meta property=\"og:site_name\" content=\"Ian Carnaghan\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-10T13:31:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-06T20:47:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/consolevar-1024x376.jpg\" \/>\n<meta name=\"author\" content=\"Ian Carnaghan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@icarnaghan\" \/>\n<meta name=\"twitter:site\" content=\"@icarnaghan\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Carnaghan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/\"},\"author\":{\"name\":\"Ian Carnaghan\",\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"headline\":\"JavaScript Data Types, Values, and Variables\",\"datePublished\":\"2018-10-10T13:31:51+00:00\",\"dateModified\":\"2021-03-06T20:47:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/\"},\"wordCount\":949,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"keywords\":[\"Bitesize JavaScript\",\"CMST 388\",\"JavaScript\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/\",\"url\":\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/\",\"name\":\"JavaScript Data Types, Values, and Variables - Ian Carnaghan\",\"isPartOf\":{\"@id\":\"https:\/\/www.carnaghan.com\/#website\"},\"datePublished\":\"2018-10-10T13:31:51+00:00\",\"dateModified\":\"2021-03-06T20:47:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.carnaghan.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Data Types, Values, and Variables\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.carnaghan.com\/#website\",\"url\":\"https:\/\/www.carnaghan.com\/\",\"name\":\"Ian Carnaghan\",\"description\":\"Software Developer, Blogger, Educator\",\"publisher\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.carnaghan.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\",\"name\":\"Ian Carnaghan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g\",\"caption\":\"Ian Carnaghan\"},\"logo\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/\"},\"description\":\"I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.\",\"sameAs\":[\"http:\/\/www.carnaghan.com\",\"https:\/\/x.com\/icarnaghan\"],\"url\":\"https:\/\/www.carnaghan.com\/author\/icarnaghan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Data Types, Values, and Variables - Ian Carnaghan","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Data Types, Values, and Variables - Ian Carnaghan","og_description":"Introduction to JavaScript with an overview of data types, values and variables.","og_url":"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/","og_site_name":"Ian Carnaghan","article_published_time":"2018-10-10T13:31:51+00:00","article_modified_time":"2021-03-06T20:47:38+00:00","og_image":[{"url":"https:\/\/www.carnaghan.com\/wp-content\/uploads\/2018\/09\/consolevar-1024x376.jpg"}],"author":"Ian Carnaghan","twitter_card":"summary_large_image","twitter_creator":"@icarnaghan","twitter_site":"@icarnaghan","twitter_misc":{"Written by":"Ian Carnaghan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/#article","isPartOf":{"@id":"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/"},"author":{"name":"Ian Carnaghan","@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"headline":"JavaScript Data Types, Values, and Variables","datePublished":"2018-10-10T13:31:51+00:00","dateModified":"2021-03-06T20:47:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/"},"wordCount":949,"commentCount":0,"publisher":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"keywords":["Bitesize JavaScript","CMST 388","JavaScript"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/","url":"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/","name":"JavaScript Data Types, Values, and Variables - Ian Carnaghan","isPartOf":{"@id":"https:\/\/www.carnaghan.com\/#website"},"datePublished":"2018-10-10T13:31:51+00:00","dateModified":"2021-03-06T20:47:38+00:00","breadcrumb":{"@id":"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.carnaghan.com\/javascript-data-types-values-and-variables\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.carnaghan.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript Data Types, Values, and Variables"}]},{"@type":"WebSite","@id":"https:\/\/www.carnaghan.com\/#website","url":"https:\/\/www.carnaghan.com\/","name":"Ian Carnaghan","description":"Software Developer, Blogger, Educator","publisher":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.carnaghan.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5","name":"Ian Carnaghan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g","caption":"Ian Carnaghan"},"logo":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/"},"description":"I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.","sameAs":["http:\/\/www.carnaghan.com","https:\/\/x.com\/icarnaghan"],"url":"https:\/\/www.carnaghan.com\/author\/icarnaghan\/"}]}},"views":408,"_links":{"self":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts\/7733"}],"collection":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/comments?post=7733"}],"version-history":[{"count":0,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts\/7733\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/media?parent=7733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/categories?post=7733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/tags?post=7733"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/post_series?post=7733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}