# Basic syntax

JavaScript within an HTML page is always enclosed by a <script> ... </script> tag
- The code of inline scripts can be added directly between these tags
- Just like with CSS, you can also reuse JavaScript code over multiple pages
  - Save the script in a text file with the extension .js
  - The src attribute of the <script> tag should refer to this .js-file
If possible, place the script at the bottom of the HTML page, just before closing the body element
Separate words are separated by one or more spaces
Every JavaScript statement ends with a semicolon ;
- Browsers can also execute the command without the semicolon, but make a (good) habit of adding them anyway

<!DOCTYPE html>
<html lang="en">
    <head>
        ....
    </head>
    <body>
       ....
        <script>
            // Inline script
        </script>
        <script src="externalScript.js"></script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

# Comments

Use // ... for single line comments or /* ... */ for multi-line comments


<script>
    // This is a single line comment

    /* This comment section
    spans several
    lines */
</script>

1
2
3
4
5
6
7
8

TIP

In PhpStorm you can use the shortcuts CTRL + / (single line comment) or CTRL + SHIFT + / (multi-line comment)

# Variables and data types

NAMING CONVENTIONS

Variables starts with the keyword const or let
- Use const if the value never changes
- Use let if the value changes over time
Variable names start with a letter, an underscore _ or a dollar sign $ (never start a variable name with a number!) and contain only alpha-numeric characters (no spaces!)
Variable names are case-sensitive
JavaScript is weakly typed (the type of a variable can change over time)
We recommend using the camelCase notation for variable names (as most JavaScript programmers do)

(Primitive) data types	Example	`typeof` returns
number	`5`, `3.14`, `34e-2` (= `0.34`), `2_500` (= `2500`) ...	number
string	`"string 1"`, `'string 2'` or `string 3`	string
boolean	`true` or `false`	boolean
array	`['red, 'green', 'blue']`	object
object	`{firstName:'John', lastName:'Doe'}`	object
null	an empty or non-existent value	object
undefined	a variable has been declared, but not defined	undefined

You can check the data type of a variable with the typeof method

const nr = 17;
const str = 'John Doe';
const bool = true;
const arr = ['red', 'green', 'blue'];
const obj = {firstName: 'John', lastName: 'Doe'};
const noValue = null;
const undef = undefined;

console.log('typeof nr:', typeof nr);               // typeof nr: number
console.log('typeof str:', typeof str);             // typeof str: string
console.log('typeof bool:', typeof bool);           // typeof bool: boolean
console.log('typeof arr:', typeof arr);             // typeof arr: object
console.log('typeof obj:', typeof obj);             // typeof obj: object
console.log('typeof noValue:', typeof noValue);     // typeof noValue: object
console.log('typeof undef:', typeof undef);         // typeof undef: undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

REMARK: Data type of array/null

Note that an array (and null) does not have its own, primitive datatype
In JavaScript, an array (and null) is always an object

Open es6/syntax/dataTypes.html and es6/syntax/dataTypes.js in PhpStorm
- Open the Developer Tools (F12) and look at the output under the Console tab

Output in Chrome console

WARNING: Don't use var!

In the early days of JavaScript, all variables are declared with the var keyword
Nowadays we don't use var anymore because it causes a lot of problems!
var has a DIFFERENT scope than let!
- Open es6/syntax/var_let.html and es6/syntax/var_let.js and look at this example:
  - Line 1: create variable var i = 0
  - Line 3: create a loop with a new (???) variable i for the loop
  - Line 7: the output is not what you expected (at line 3, you didn't create a NEW variable, but you were still using the previous i)
  - Lines 9 and 11: this time we replaced var with let
  - Line 15: now the output is what we expected!

var i = 0;
console.log('👍🏻 i before loop', i);
for (var i = 0; i <= 3; i++) {
    console.log('       i inside loop:', i);
}
// 😈 I thought "i" was equal to 0???
console.log('😈 i after loop:', i);

let j = 0;
console.log('👍🏻 j before loop', j);
for (let j = 0; j <= 3; j++) {
    console.log('       j inside loop:', j);
}
// 😀 yes, "j" is equal to 0
console.log('😀 j after loop:', j);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var vs let

READING TIPS