Learn more about my work surrounding Learning Technology and its implementation.

Association for Learning Technology (ALT) Portfolio

JavaScript (JS) is a versatile programming language utilized for developing dynamic interactions in webpages, games, applications, and servers. It originated as part of Netscape, a web browser developed in the 1990s, and has since gained immense popularity as one of the most widely-used programming languages.

Initially, JS was created to breathe life into webpages and was limited to running within browsers. However, it has now evolved to run on any device with JavaScript engine support.

JavaScript provides a range of standard objects such as Array, Date, and Math, as well as operators, control structures, and statements. Furthermore, there are extended versions of JavaScript known as Client-side JavaScript and Server-side JavaScript.

* Client-side JavaScript empowers developers to enhance and manipulate web pages within client browsers. It facilitates interactive responses to user events, including mouse clicks, form input, and page navigation.

* Server-side JavaScript enables seamless interaction with servers, databases, and file systems.

JavaScript is an interpreted language, where each line of code is interpreted and executed by an interpreter. Modern browsers leverage Just-In-Time (JIT) compilation technology to transform JavaScript into executable bytecode, optimizing its performance and efficiency.


Chapter 0 : Intro

Introduction

This is the initial lesson on first chapter, we're going to delve into the fundamentals of programming and acquaint ourselves with the JavaScript language.

Programming, in essence, involves crafting code. Much like how a book comprises chapters, paragraphs, sentences, and words, a program can be dissected into increasingly smaller components.

At this stage, one of the most pivotal components is a statement. Think of a statement as akin to a sentence in a book. While it holds its own structure and purpose, without the context of the surrounding statements, it may not convey much meaning.

A statement is more informally (and frequently) referred to as a line of code. This is because statements are typically written on separate lines. Consequently, programs are typically read from top to bottom, left to right. You might be curious about what code (also known as source code) entails. It's actually quite a broad term, encompassing both the entirety of the program and its smallest elements. Hence, a line of code is essentially one line of your program.

To illustrate, consider this straightforward example:

```
let hello = "Hello";
let world = "World";


// Message equals "Hello World"
let message = hello + " " + world;
```

This code can be executed by another program known as an interpreter. The interpreter reads the code and carries out all the statements in the correct sequence.


Chapter 1 : Basics

Hello World

Comments serve as non-executable statements that provide annotations or small descriptions of code in order to enhance code readability and understanding for other programmers. They are also useful for temporarily disabling code without impacting the program's flow.

In JavaScript, comments can be written in two different forms:

1. Single-line comments: They begin with two forward slashes (//) and extend until the end of the line. Any text following the slashes is disregarded by the JavaScript interpreter. For instance:

```
// This is a comment, it will be ignored by the interpreter
let a = "this is a variable defined in a statement";
```

2. Multi-line comments, also known as block comments, are denoted by a forward slash and an asterisk (/) to start, and an asterisk and a forward slash (/) to end. The JavaScript interpreter disregards any content within these markers. This allows for commenting out multiple lines or writing longer explanations. Here's an example:

```
/*
This is a multi-line comment, it will be ignored by the interpreter
*/
let a = "this is a variable defined in a statement";
```

Comments play a crucial role in maintaining code quality, fostering collaboration, and facilitating the debugging process. By offering context and explanations for different sections of code, comments greatly enhance code comprehension in the long run. Including comments is widely recognized as a beneficial practice that contributes to overall code clarity and maintainability.


Comments

In ES6, there are three ways to declare variables: `var`, `const`, and `let`.

The var keyword is used to declare variables that have either global scope or function scope. Regardless of block scope, variables declared with var are accessible throughout the entire function. For example:

```
function varTest() {
    var x = 1;
    if (true) {
        var x = 2; // same variable
        console.log(x); // 2
    }
    console.log(x); // 2
}
```

The let keyword, introduced in ES6, allows you to declare variables that are scoped to the block, statement, or expression in which they are used. This means that variables declared with let are only accessible within the specific block. For example:

```
function letTest() {
    let x = 1;
    if (true) {
        let x = 2;
        console.log(x); // 2
    }
    console.log(x); // 1
}
```

On the other hand, variables declared with the const keyword are immutable, meaning they cannot be reassigned once they are defined. For instance:

```
const x = "hi!";
x = "bye"; //
```


Variables

Computers possess a remarkable ability to handle more than just simple numbers. This is where the concept of variable types becomes crucial. Variables can assume various types, and different programming languages support distinct sets.

Here are some of the most commonly used types:

* `Number`: These can be whole numbers (e.g., 1, -5, 100) or decimal values (e.g., 3.14, -2.5, 0.01). Notably, in JavaScript, there's no distinct separation between integers and decimal numbers; they are all treated as numbers.

* `String`: Strings represent sequences of characters, and they can be denoted by either single quotes (e.g., 'hello') or double quotes (e.g., "world").

* `Boolean`: Booleans stand for a true or false value, and they are typically represented as true or false, without the need for quotes.

* `Null`: This type signifies a null value, essentially meaning "no value at all." It is denoted as null, without quotes.

* `Undefined`: This type characterizes a value that hasn't been set yet. If a variable has been declared but hasn't been assigned a value, it falls under this category.

* `Object`: Objects are collections of properties, each having a name and a corresponding value. You can establish an object using curly braces ({}), assigning properties through name-value pairs.

* `Array`: An array is a unique form of an object that can contain a series of elements. To create an array, you use square brackets (\[]), populating it with a list of values.

* `Function`: Functions are blocks of code that can be defined and subsequently invoked by name. They can take arguments as inputs and return a value as output. You form a function using the function keyword.

JavaScript operates as a "loosely typed" language, meaning you're not required to explicitly declare the data type of variables. Simply using the var keyword to declare a variable is sufficient. The interpreter deduces the data type from the context and the use of quotes.


Types

The `typeof` operator is a powerful tool used to determine the data type of a variable.

For instance:

* `typeof "John"` will return "string".
* `typeof 3.14` will return "number".
* `typeof NaN` will also return "number".
* `typeof false` will return "boolean".
* `typeof [1,2,3,4]` will return "object".
* `typeof {name:'John', age:34}` will return "object".
* `typeof new Date()` will return "object".
* `typeof function () {}` will return "function".
* `typeof myCar` will return "undefined".
* `typeof null` will return "object".

JavaScript's data types can be divided into two main categories based on the values they hold:

**Data types that can contain values:**

* `string`
* `number`
* `boolean`
* `object`
* `function`

JavaScript provides several object types including `Object`, `Date`, `Array`, `String`, `Number`, and `Boolean`.

**Data types that cannot contain values:**

* `null`
* `undefined`

A primitive data value is a straightforward value with no extra properties or methods and is not an object. They are unchangeable, meaning they can't be modified. There are seven primitive data types:

* `string`
* `number`
* `bigint`
* `boolean`
* `undefined`
* `symbol`
* `null`


Type of

When we write programs, it's common to check if variables are equal to other variables. This is where the equality operator comes into play. The most basic equality operator is `==`. It goes to great lengths to establish if two variables are equal, even if they aren't the same type.

For instance, consider the following:

```
let foo = 50;
let bar = 50;
let baz = "50";
let qux = "learn";
```

```
foo == bar // Evaluates to true
baz == qux // Evaluates to false
foo == baz // Also evaluates to true, despite different types
```

Behind the scenes, the `==` equality operator attempts to make its operands the same type before determining their equality. This is different from the `===` equality operator.

The `===` equality operator insists that two variables are only equal if they are of the same type and hold the same value. Given our earlier assumptions, this means `foo === bar` still evaluates to `true`. However, `foo === baz` will now evaluate to `false`. Similarly, baz `===` qux will still evaluate to `false`.


Equality

In JavaScript, there's just **one type of number** – a 64-bit floating-point value. This aligns with Java's `double`. Unlike some other programming languages, **JavaScript doesn't have a separate integer type**. So, both 1 and 1.0 represent the same value.

Creating a number is straightforward, similar to any other variable type. Just use the `var`, `let` or `const` keyword.

You can define numbers using constant values:

```
// This is a float:
let a = 3.5;

// This is an integer:
let b = 20;
```

Alternatively, you can derive a number from the value of another variable:

```
let a = 4;
let b = a;
```

In JavaScript, integers maintain precision up to 15 digits, with the maximum number being 17.

```
let a = 123456789012345;   // m will be 123456789012345
let b = 12345678901234567;  // n will be 12345678901234567
```

Numeric constants are recognized as hexadecimal if they are preceded by 0x.

```
let a = 0xAA; // This evaluates to 170
```


Chapter 2 : Numbers

Numbers

Performing mathematical operations on numbers in JavaScript involves using fundamental operators such as:

* **Addition Operator (+):** This operator combines two numbers. For example:

```
console.log(3 + 4); // 7
console.log(1 + (-5)); // -4
```

* **Subtraction Operator (-):** This operator subtracts one number from another:

```
console.log(8 - 3); // 5
console.log(5 - (-2)); // 7
```

* **Multiplication Operator (\*):** This operator multiplies two numbers:

```
console.log(2 * 3); // 6
console.log(2 * (-4)); // -8
```

* **Division Operator (/):** This operator divides one number by another:

```
console.log(10 / 2); // 5
console.log(6 / (-3)); // -2
```

* **Remainder Operator (%):** This operator gives the remainder of a division:

```
console.log(11 % 3); // 2
console.log(15 % 4); // 3
console.log(20 % 5); // 0
```

The JavaScript interpreter reads expressions from left to right. You can use parentheses to group and prioritize operations, just like in math: `c = (a / b) + d`.

In JavaScript, the + operator is used for both addition and concatenation. When you use it with numbers, it adds them; with strings, it concatenates them.

The term NaN is a special value that indicates a result is "Not a Number". This happens when we try to do math with something that isn't a number, like a non-numeric string:

```
let x = 100 / "ten"; // x will be NaN
```

The `parseInt` method converts a value to a string and returns the first integer:

```
parseInt("15"); // 15
parseInt("15.25"); // 15
parseInt("15.75"); // 15
parseInt("22 33 44"); // 22
parseInt(" 80 "); // 80
parseInt("50 years"); // 50
parseInt("She is 30"); // NaN
```

In JavaScript, if a calculation results in a number larger than the maximum possible value, it returns Infinity:

```
let a = 1.7976931348623157E+10308; // a will be Infinity
```

And if a calculation results in a number smaller than the minimum possible value, it returns -Infinity:

```
let b = -1.7976931348623157E+10308; // b will be -Infinity
```


Basic Operator

JavaScript offers a powerful tool for performing mathematical operations through the `Math` object. It's static, meaning you don't need to create an instance of it. You can directly use its methods and properties with `Math.property`.

Some of the important properties include:

* `Math.E` // returns Euler's number
* `Math.PI` // returns PI
* `Math.SQRT2` // returns the square root of 2
* `Math.SQRT1_2` // returns the square root of 1/2
* `Math.LN2` // returns the natural logarithm of 2
* `Math.LN10` // returns the natural logarithm of 10
* `Math.LOG2E` // returns base 2 logarithm of E
* `Math.LOG10E` // returns base 10 logarithm of E

Here are some examples of math methods:

* `Math.pow(3, 2);` // 9
* `Math.round(5.4);` // 5
* `Math.ceil(5.1);` // 6
* `Math.floor(5.9);` // 5
* `Math.trunc(5.2);` // 5
* `Math.sign(-5);` // -1
* `Math.sqrt(25);` // 5
* `Math.abs(-7.2);` // 7.2
* `Math.sin(Math.PI / 2);` // 1 (the sine of 90 degrees)
* `Math.cos(0);` // 1 (the cosine of 0 degrees)
* `Math.min(10, 150, 30, 20, -8, -200);` // -200
* `Math.max(10, 150, 30, 20, -8, -200);` // 150
* `Math.random();` // A random number between 0 and 1
* `Math.log(Math.E);` // 1
* `Math.log2(8);` // 3
* `Math.log10(1000);` // 3

These methods are accessed directly, and you provide the necessary arguments. For example, `Math.pow(2, 3)` returns 8, as it calculates 2 raised to the power of 3.

Here's a quick reference for some common methods:

| Method            | Description                                                               |
| ----------------- | ------------------------------------------------------------------------- |
| `abs(x)`          | Returns absolute value of x                                               |
| `acos(x)`         | Returns arccosine of x, in radians                                        |
| `acosh(x)`        | Returns hyperbolic arccosine of x                                         |
| `asin(x) `        | Returns arcsine of x, in radians                                          |
| `asinh(x)`        | Returns hyperbolic arcsine of x                                           |
| `atan(x)`         | Returns arctangent of x as a numeric value between -PI/2 and PI/2 radians |
| `atan2(y,x)`      | Returns arctangent of the quotient of its arguments                       |
| `atanh(x)`        | Returns hyperbolic arctangent of x                                        |
| `cbrt(x)`         | Returns cubic root of x                                                   |
| `ceil(x)`         | Returns rounded upwards to the nearest integer of x                       |
| `cos(x)`          | Returns cosine of x, in radians                                           |
| `cosh(x)`         | Returns hyperbolic cosine of x                                            |
| `exp(x)`          | Returns exponential value of x                                            |
| `floor(x)`        | Returns round downwards to the nearest integer of x                       |
| `log(x)`          | Returns natural logarithmetic of x                                        |
| `max(x,y,z,...n)` | Returns number with the highest value                                     |
| `min(x,y,z,...n)` | Returns number with the lowest value                                      |
| `pow(x,y)`        | Returns value of x to the power of y                                      |
| `random()`        | Returns number between 0 and 1                                            |
| `round(x)`        | Rounds number to the nearest x                                            |
| `sign(x)`         | Returns if x is negative, null or positive (-1,0,1)                       |
| `sin(x)`          | Returns sine of x, in radians                                             |
| `sinh(x)`         | Returns hyperbolic sine of x                                              |
| `sqrt(x)`         | Returns square root of x                                                  |
| `tan(x)`          | Returns tangent of an angle                                               |
| `tanh(x)`         | Returns hyperbolic tangent of x                                           |
| `trunc(x)`        | Returns integer part of a number (x)                                      |

These methods are accessed directly, and you provide the necessary arguments. For example, `Math.pow(2, 3)` returns 8, as it calculates 2 raised to the power of 3.


Math

In JavaScript, the way operators are applied depends on their *precedence*. Multiplication `(*)` and division `(/)` take precedence over addition `(+)` and subtraction `(-)`.

```
let x = 100 + 50 * 3; // Multiplication is done first, followed by addition. Result: 250
let y = (100 + 50) * 3; // Operations inside parentheses are computed first. Result: 450
let z = 100 / 50 * 3; // Operations with the same precedence are computed from left to right.
```

Here are some advanced math operators that you can use while writing programs:

**Modulo operator (%):**
This operator returns the remainder of a division operation. For example:

```
console.log(10 % 3); // Result: 1
console.log(11 % 3); // Result: 2
console.log(12 % 3); // Result: 0
```

**Exponentiation operator (--):**
This operator raises a number to the power of another number. It's a newer operator and may not be supported in all browsers, so you may need to use the Math.pow function instead. For example:

```
console.log(2 ** 3); // Result: 8
console.log(3 ** 2); // Result: 9
console.log(4 ** 3); // Result: 64
```

**Increment operator (++):**
This operator increases a number by one. It can be used as a prefix (before the operand) or a postfix (after the operand). For example:

```
let x = 1;
x++; // x is now 2
++x; // x is now 3
```

**Decrement operator (--):**
This operator decreases a number by one. It can be used as a prefix (before the operand) or a postfix (after the operand). For example:

```
let y = 3;
y--; // y is now 2
--y; // y is now 1
```

**Math object:**
The Math object in JavaScript provides mathematical functions and constants. You can use its methods for advanced math operations like finding square roots, calculating sines, or generating random numbers. For example:

```
console.log(Math.sqrt(9)); // Result: 3
console.log(Math.sin(0)); // Result: 0
console.log(Math.random()); // A random number between 0 and 1
```

These are just a few examples of the advanced math operators and functions available in JavaScript. There are many more you can use for complex math operations in your programs.

### Understanding the Nullish Coalescing Operator '??'

The nullish coalescing operator returns the first argument if it's not null or undefined; otherwise, it returns the second one. It's written as two question marks `??.` The result of `x ?? y` is:

If `x` is defined, then `x`.
If `y` isn’t defined, then `y`.


Sam McNab

Sam McNab

Association for Learning Technology (ALT) Portfolio