{"id":23,"date":"2019-03-22T20:33:56","date_gmt":"2019-03-22T20:33:56","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/javascript\/?p=23"},"modified":"2019-03-27T18:50:11","modified_gmt":"2019-03-27T18:50:11","slug":"04-javascript-data-types-variables","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/javascript\/04-javascript-data-types-variables\/","title":{"rendered":"JavaScript &#8211; Data Types &#038; Variables"},"content":{"rendered":"<p>In this chapter we would cover Data Types and Variables.<\/p>\n<p>We would cover the following:<\/p>\n<ol>\n<li><a href=\"#t1\">JavaScript Data Types<\/a><\/li>\n<li><a href=\"#t2\">Variables in JavaScript<\/a><\/li>\n<li><a href=\"#t3\">Variable Scope<\/a><\/li>\n<li><a href=\"#t4\">Variable Names<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t1\">1. JavaScript Data Types<\/strong><\/h4>\n<p>JavaScript supports three types of primitive data types: Numbers, Strings and Boolean<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Numbers<\/strong>: These are numeric values. For example 100, 34, 12,5. Note that JavaScript does not differentiate between integer and floating point data. All are represented as floating-points. The size is 64 bits<\/p>\n<p><strong>Strings<\/strong>: Used for text data. For example: &#8220;Learn JavaScript&#8221;, &#8220;My name is Kindson&#8221;<\/p>\n<p><strong>Boolean<\/strong>: This is data type for True or False values<\/p>\n<p>&nbsp;<\/p>\n<p>There is also two trivial data types: null and undefined. We would use these more in later sections.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Composite Data<\/strong><\/p>\n<p>JavaScript also supports composite data type. This is made up of combination of two or more primitive types. The composite data type is called object.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t2\">2. Variables in JavaScript<\/strong><\/h4>\n<p>You probably have heard of variables. All programming languages use variables. A variable is like a container to hold data. Hence you can assign values to variables. However before you can use a variable, you must declare it.<\/p>\n<p>To declare a variable, you use the <strong>var<\/strong> keyword. The code below declare three variables.<\/p>\n<p>&nbsp;<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #333333;\">&lt;<\/span>script type <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"text\/javascript\"<\/span><span style=\"color: #333333;\">&gt;<\/span>\r\n   <span style=\"color: #008800; font-weight: bold;\">var<\/span> score;\r\n   <span style=\"color: #008800; font-weight: bold;\">var<\/span> name;\r\n   <span style=\"color: #008800; font-weight: bold;\">var<\/span> address;\r\n<span style=\"color: #333333;\">&lt;<\/span>\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>After you declare a variable, then you can assign a value to the variable. This is called <strong>initialization<\/strong>. A variable can also be initialized the same time it it declared. For example, the code below declares the variables and assigns them at the same time.<\/p>\n<p>&nbsp;<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #333333;\">&lt;<\/span>script type <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"text\/javascript\"<\/span><span style=\"color: #333333;\">&gt;<\/span>\r\n   <span style=\"color: #008800; font-weight: bold;\">var<\/span> score <span style=\"color: #333333;\">=<\/span> <span style=\"color: #6600ee; font-weight: bold;\">58.7<\/span>;\r\n   <span style=\"color: #008800; font-weight: bold;\">var<\/span> name <span style=\"background-color: #fff0f0;\">\"Solace Okeke\"<\/span>;\r\n   <span style=\"color: #008800; font-weight: bold;\">var<\/span> address <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"No 34 King Will Avenue\"<\/span>;\r\n<span style=\"color: #333333;\">&lt;<\/span>\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Also note that JavaScript is an untyped language. This means that variables are not tied to any specific type. Therefore a particular variable can hold any type: be it a number, string or boolean. Again, a variable can start off with holding a String value and then later you can assign it a number.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t3\">3. Variable Scope in JavaScript<\/strong><\/h4>\n<p>The concept of variable scope actually applies across programming languages.<\/p>\n<p><strong>So, what is a variable scope?<\/strong><\/p>\n<p>A variable scope is\u00a0 the block of code where a variable is defined. There are two variable types of variable scopes in JavaScript: Local and Global.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Local Variable<\/strong>: A local variables is a variable that is only visible within the function where it is defined. Function parameters for example. Hence, local variables are not visible outside the block<\/p>\n<p><strong>Global Variable:<\/strong> A global variable is a variable that is available anywhere in the JavaScript program. Both inside and outside functions<\/p>\n<p>&nbsp;<\/p>\n<p>Inside the body of a function, local variables take precedence over global variables. These means that if there is a global variable with the same name, then the local variable is used. Let&#8217;s take an example:<\/p>\n<p>&nbsp;<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;html&gt;<\/span>\r\n<span style=\"color: #007700;\">&lt;head&gt;<\/span>\r\n<span style=\"color: #007700;\">&lt;title&gt;<\/span> Variable Scopes<span style=\"color: #007700;\">&lt;\/title&gt;<\/span>\r\n<span style=\"color: #007700;\">&lt;\/head&gt;<\/span>\r\n   <span style=\"color: #007700;\">&lt;body<\/span> <span style=\"color: #0000cc;\">onload =<\/span> <span style=\"background-color: #fff0f0;\">vascope();<\/span><span style=\"color: #007700;\">&gt;<\/span>   \r\n      <span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">type =<\/span> <span style=\"background-color: #fff0f0;\">\"text\/javascript\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n         <span style=\"color: #888888;\">&lt;!--<\/span>\r\n\t\t \r\n\t    <span style=\"color: #888888;\">\/\/ Global variable<\/span>\r\n            <span style=\"color: #008800; font-weight: bold;\">var<\/span> variable1 <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"global variable\"<\/span>;    \r\n\t\t\t\r\n            <span style=\"color: #008800; font-weight: bold;\">function<\/span> vascope( ) {\r\n\t\t\t\r\n\t       <span style=\"color: #888888;\">\/\/ Local variable<\/span>\r\n               <span style=\"color: #008800; font-weight: bold;\">var<\/span> variable1 <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"local variable\"<\/span>;\r\n               <span style=\"color: #007020;\">document<\/span>.write(variable1);\r\n            }\r\n         <span style=\"color: #888888;\">\/\/--&gt;<\/span>\r\n      <span style=\"color: #007700;\">&lt;\/script&gt;<\/span>     \r\n   <span style=\"color: #007700;\">&lt;\/body&gt;<\/span>\r\n<span style=\"color: #007700;\">&lt;\/html&gt;<\/span>\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>In the above code, when you run this page, then &#8220;local variable&#8221; is displayed. This is because, the write statement was done inside the function.<\/p>\n<h4><\/h4>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t4\">4. Variable Names in JavaScript<\/strong><\/h4>\n<p>You can choose names for variables in JavaScript. However, the following rules apply to naming variables:<\/p>\n<p>a. Any of the JavaScript reserved words cannot be used as a variable name. Reserved words are also known as keywords and a list of them is given below.<\/p>\n<p>b. Variable names must not start with a number eg 0-9. Variable names must begin with a letter or an underscore. For instance score32, _firstname, address.<\/p>\n<p>c. Variable names in JavaScript are case-sensitive. Therefore the variable Score is not the same as score.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>List of JavaScript Reserved Words<\/strong><\/p>\n<p>The table below provides a list of all JavaScript keywords.<\/p>\n<p>&nbsp;<\/p>\n<table class=\"table table-bordered\" width=\"100%\" align=\"center\">\n<tbody>\n<tr>\n<td>abstract<\/td>\n<td>else<\/td>\n<td>instanceof<\/td>\n<td>switch<\/td>\n<\/tr>\n<tr>\n<td>boolean<\/td>\n<td>enum<\/td>\n<td>int<\/td>\n<td>synchronized<\/td>\n<\/tr>\n<tr>\n<td>break<\/td>\n<td>export<\/td>\n<td>interface<\/td>\n<td>this<\/td>\n<\/tr>\n<tr>\n<td>byte<\/td>\n<td>extends<\/td>\n<td>long<\/td>\n<td>throw<\/td>\n<\/tr>\n<tr>\n<td>case<\/td>\n<td>false<\/td>\n<td>native<\/td>\n<td>throws<\/td>\n<\/tr>\n<tr>\n<td>catch<\/td>\n<td>final<\/td>\n<td>new<\/td>\n<td>transient<\/td>\n<\/tr>\n<tr>\n<td>char<\/td>\n<td>finally<\/td>\n<td>null<\/td>\n<td>true<\/td>\n<\/tr>\n<tr>\n<td>class<\/td>\n<td>float<\/td>\n<td>package<\/td>\n<td>try<\/td>\n<\/tr>\n<tr>\n<td>const<\/td>\n<td>for<\/td>\n<td>private<\/td>\n<td>typeof<\/td>\n<\/tr>\n<tr>\n<td>continue<\/td>\n<td>function<\/td>\n<td>protected<\/td>\n<td>var<\/td>\n<\/tr>\n<tr>\n<td>debugger<\/td>\n<td>goto<\/td>\n<td>public<\/td>\n<td>void<\/td>\n<\/tr>\n<tr>\n<td>default<\/td>\n<td>if<\/td>\n<td>return<\/td>\n<td>volatile<\/td>\n<\/tr>\n<tr>\n<td>delete<\/td>\n<td>implements<\/td>\n<td>short<\/td>\n<td>while<\/td>\n<\/tr>\n<tr>\n<td>do<\/td>\n<td>import<\/td>\n<td>static<\/td>\n<td>with<\/td>\n<\/tr>\n<tr>\n<td>double<\/td>\n<td>in<\/td>\n<td>super<\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>In this chapter we would cover Data Types and Variables. We would cover the following: JavaScript Data Types Variables in JavaScript Variable Scope Variable Names &hellip; <\/p>\n","protected":false},"author":395,"featured_media":27,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-23","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-tutorials"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/users\/395"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":3,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/23\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/23\/revisions\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media\/27"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/categories?post=23"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/tags?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}