Javascript : Variables and Datatypes
Tags: javascript, beginners, programming, tutorial
Published: 2021-10-16 20:25:12

<p>&nbsp;</p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-lK1OKYFOHs8/YKVj2ENCprI/AAAAAAAAALE/PdZANMJSTfsXDa61pGg46tjV4B0x-aMfQCLcBGAsYHQ/s800/javascript%25232.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Javascript : #2 Variables and Data types" border="0" data-original-height="300" data-original-width="800" src="https://1.bp.blogspot.com/-lK1OKYFOHs8/YKVj2ENCprI/AAAAAAAAALE/PdZANMJSTfsXDa61pGg46tjV4B0x-aMfQCLcBGAsYHQ/s16000/javascript%25232.png" title="Javascript : #2 Variables and Data types" /></a></div><br /><p></p><h1 style="text-align: left;">What is a Variable?!</h1><div><span style="font-size: large;">A <b>variable</b> is a container with a label (name) where you store a certain value ( a piece of data ) to use it in your code.</span></div><h1 style="text-align: left;"><span style="font-size: x-large;"><br /></span></h1><h1 style="text-align: left;"><span style="font-size: x-large;">Declaring variables and assigning values to them</span></h1><h4 style="text-align: left;"><span style="font-size: large;">To declare a variable is to give it a name, you have to use one of these keywords:</span></h4><div><ul style="text-align: left;"><li><span style="font-size: large;"><b>var </b>: most common key to declare variables.</span></li><li><span style="font-size: large;"><b>let </b>: only visible within the block where it's declared.</span></li><li><span style="font-size: large;"><b>const</b> : used for constant values and cannot be changed , it will cause an error if you tried to do so.</span></li></ul></div><div><span style="font-size: large;"><b>&nbsp;To declare a variable, use one of the keywords followed by the variable name (which has to be meaningful)</b></div>
``` javascript 
var myVariable ;
let myName ;
const pi ;
```
<h1 style="text-align: left;"></br><span style="font-family: Ubuntu; font-size: x-large;">Variable naming conventions </span></h1><div><span style="font-family: Ubuntu; font-size: large;"><b>To name a variable in javascript , you should follow some rules:</b></span></div><div><ul style="text-align: left;"><li><span style="font-family: Ubuntu; font-size: large;">javascript is <b>case sensitive</b> which means that the letters' case matters (VARIABLE isn't the same as Variable and also not as variable).</span></li><li><span style="font-family: Ubuntu; font-size: large;">you have to use <b>camelCase</b> (example: myName, schoolYear, etc.)</span></li><li><span style="font-family: Ubuntu; font-size: large;">You can add <b>numbers</b> but not at the beginning (whatever , who will name a variable 2myVarName, this won't satisfy the rule n.o. 2)</span></li><li><span style="font-family: Ubuntu; font-size: large;">you cannot use <b>hyphens</b> " - " or <b>spaces</b> but you can use <b>underscores</b> " _ " instead (note : underscores can be used as the first character in a variable name).</span></li><li><span style="font-family: Ubuntu; font-size: large;">You cannot use any of the <b>reserved keywords</b> (like : var, let, const, if, while, for and so on) . don't worry if you don't know a lot of keywords , if you tried to use one it will be highlighted as a keyword and results in an error.</span></li></ul><h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;"><br /></span></h1><h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;">Assigning values to variables</span></h1><span style="font-family: Ubuntu; font-size: large;"><b>To assign a value to a variable, use the assignment operator&nbsp; " = " (equal sign).</b></span></div><br />
```javascript 
// Declaring variables
var myVariable ; 
let myName ;
const pi ;

// assigning values to variables
myVariable = 25; 
myName= "Rawan";
pi = 3.14;
```
</pre><span style="font-family: Ubuntu; font-size: large;"><b><div><span style="font-family: Ubuntu; font-size: large;"><b><br /></b></span></div>Note</b> : you can declare variables and assign values to them on the same line.</span>
```javascript 
// Declaring a variable and assigning a value to it on one line
var myAge = 15; 
```
</br></h1><h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;">Datatypes</span></h1></div><div><span style="font-family: Ubuntu; font-size: large;">In Javascript there are a lot of data types, we will discuss the most important and basic ones.</span></div><div><span style="font-family: Ubuntu; font-size: large;"><br /></span></div><h3 style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;">Main Datatypes :</span></h3><div><ul style="text-align: left;"><li><span style="font-family: Ubuntu; font-size: large;"><b>Numbers</b> : they can be integer numbers or floats( numbers with decimal points).</span></li><li><span style="font-family: Ubuntu; font-size: large;"><b>Strings </b>: any series of characters included between quotes (double quotes " " or single quotes ' ' ).</span></li><li><span style="font-family: Ubuntu; font-size: large;"><b>Boolean value&nbsp;</b>: has one of the two values <b>true</b> or <b>false</b> .</span></li><li><span style="font-family: Ubuntu; font-size: large;"><b>null </b>: means nothing.</span></li><li><span style="font-family: Ubuntu; font-size: large;"><b>undefined </b>: something that hasn't been defined.</span></li><li><span style="font-family: Ubuntu; font-size: large;"><b>Arrays </b>: can store more than one piece of data.</span></li><li><span style="font-family: Ubuntu; font-size: large;"><b>Objects </b>: used to store key-value pairs( each property associated with its own value).</span></li></ul><h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;"><br /></span></h1><h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;">Getting output in Javascript&nbsp;</span></h1></div><div><span style="font-family: Ubuntu; font-size: large;">You can output values to the console using <b>console.log()</b> , inside the parenthesis put a <b>variable name</b> or any piece of <b>data</b> to be shown in the console.</span></div><div><span style="font-family: Ubuntu; font-size: large;"><br /></span></div>
```javascript 
console.log("Hello World !"); // output : Hello World !
var myScore = 320 ;
console.log(myScore); // output : 320
```
<h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;"><br /></span></h1><h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;">Notes , Again...</span></h1><div style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;">1 . Everything greyed out (not highlighted) after " // " is called a <b>comment </b>, you write them to explain to yourself and others what your code does , you write them using :&nbsp;</span>&nbsp;<br /><ul style="text-align: left;"><li><span style="font-family: Ubuntu; font-size: large;"><b>//</b> : for inline comments</span></li><li><span style="font-family: Ubuntu; font-size: large;"><b>/*&nbsp; */</b> : for multi-line comments</span></li></ul></div><div style="text-align: left;"><br /></div>
```javascript 
// I am an inline comment

/* I am a 
multi-line
comment */
```
<span style="font-family: Ubuntu; font-size: large;"><div><span style="font-family: Ubuntu; font-size: large;"><br /></span></div>2 .  In Javascript we put a <b>semicolon </b>"<b>; </b>" after the end of each line, you don't have to do it all the time, but it's a good practice to do so.</span><span style="font-size: large;"><br /></span><div><span style="font-family: Ubuntu; font-size: large;"><br /></span></div><div><span style="font-family: Ubuntu; font-size: large;">3 . Variables that are declared but not assigned to store any values are called " <b>Uninitialized variables</b> " and have a default value of <b>undefined</b> .</span></div>

<h4> That was all for this tutorial , if you like it <b>leave a comment</b> , like the tutorial and <b>follow me</b> to receive notifications when I post new tutorials</h4>