All programming languages have datatypes and variables. We need to be able to deal with numbers, strings of characters, lists of stuff, groups of things, dates and times.
JavaScript is a loosely typed language - the value of a variable determines what datatype it is. And variables can have, well, variable values.
There are 2 categories of data in JavaScript:
Primitive types are numbers, strings of text, and the Booleans (true, false).
Two special primitive types are null and undefined
They are special because they are neither numbers, strings, or booleans.
An important aspect of programming is confirming your data is the correct datatype for what you are trying to do. JavaScript has a way to do that:
let That="A string of characters";
Sprint('"That": '+typeof That+'<br/>');
let This=['MO','TU','WE'];
Sprint('"This": '+typeof This+'<br/>');
let S=new Set();
Sprint('"S": '+typeof S+'<br/>');
let M=new Map();
M=([["one",1],["two",2],["three",3]]);
Sprint ('"M": '+typeof M+'<br/>');
let Num=Math.PI;
Sprint('"Num":'+typeof Num+'<br/>');
let Boo=true; // NO quotes
Sprint('"Boo": '+typeof Boo+'<br/>');
let thisBigNum=456987123097987n; // need the appended 'n'
Sprint('"thisBigNum: '+typeof thisBigNum+<br/>');
let thisSymbol=Symbol("aSymbol");
Sprint('"thisSymbol": '+typeof thisSymbol+<br/>');
Note that 'This', 'S', and 'M' are considered objects, even though we defined them as an array, set, and map - which are technically objects.
A new one in there is Symbol. You will probably never need this as it is used as a language extension mechanism. But you knew that, right?
Depending on what you are doing with variables, you may need to convert them from one datatype to another.
Almost all variables are an object.
This is where it gets thicker. Objects are collections of properties, and each property is a name-value pair.
In JavaScript, it is considered 'Best Practice' to initialize a variable when it is declared, if possible. So how do we do that?
Initialization is the act of assigning a value to the variable.
A variable (identifier) in JavaScript is a name made up of letters and digits, with some rules:
Variables are simply names (like algebra) to represent values used in your scripts. JavaScript variables can be defined 3 ways:
scope is the block or region of code where a variable is accessible. A block can be the whole JavaScript file; a section of code delimited by curly braces { }; a class; a function, or global.
'while' loops and 'for' loops are enclosed in curly braces, and the variables are outside the braces, but they are still considered to be block-scoped.
Some examples:
Sprint('Age: '+Age+'<br/>');
{
let Age=44;
}
This produces no output, but does generate an error 'ReferenceError: Can't find variable: Age' when the source code is 'viewed'.
By defining the variable first, like this:
let Age = 44;
Sprint('Age: '+Age+'<br/>');
Sprint('Age is now: '+Age+'<br/>');
Age += Age;
Sprint('Wow. You\'re now '+Age+'!<br/>');
We now get this:
Putting a variable inside a block ...
Sprint('Now defining \'Var1\' inside block-code<br/>');
{
var Var1='JavaScript';
Sprint('Inside block \'Var1\' is: '+Var1+'<br/>');
}
Sprint('Outside block \'Var1\' is: '+Var1+'<br/>');
Sprint('<br/>Now using \'Var2\' inside block<br/>');
{
var Var2=Var1;
Sprint('Inside \'Var2\' is: '+Var2+'<br/>');
}
Sprint('Outside block \'Var2\' is: '+Var2+'<br/>');
More details of scope here.
Programmers are encouraged to add notes and comments in their code. This not only helps others discern what you are trying to do, or why you did something a particular way.
It also helps YOU if you need to look at your code months (or years) after you wrote it, but now have NO idea why you would code something like THAT.
Luckily there are a couple of ways to do that in JavaScript.
Within a <script> block, single-line comments are indicated with 2 back-slashes ( // ).
<script> // This is a 1-line comment showing how to do it </script>
Multi-line comments can be rendered with back-slashes as well, but the star-slash combination might be better:
<script> // This // is // a // mulit-line // comment // /* This is a BETTER multi-line comment showing how to do it None of the text in this block is considered 'executable' Note the block begins with '/*' but ends with '*/' (the reverse), similar to comments in CSS blocks */ </script>
Another interesting way to add documentation (if needed) can be done using a special argument to the 'script' command.
<script type="text/Incognito"> This text is not considered 'JavaScript' so again, will NOT be executed. It allows you to add instructions & documentation or other data in here </script>
This is because the 'type' of script is no longer required, but the terminology is still accepted. By setting the 'type' to something other than 'JavaScript'.
Below this paragraph is a script that won't get executed, but viewing the source code will reveal the content.
Note that any real JavaScript will NOT get executed in the block.
This is an odd feature of declaring variables using the var method of declaring a variable.
Normally, declaring variables has to be 'done' BEFORE they can be 'called' or used.
Hoisting 'lifts' or hoists that operation to the top of the enclosing function or block of code.
Note: only the declaration is hoisted, NOT the initialization.
Since this may cause confusion (it certainly did for me), it may be better to avoid this 'feature' and continue declaring and initializing BEORE you use variables.
Reserved Words