JavaScript

Operators

`??` nullish coalescing operator	returns its right-hand side operand when its left-hand side operand is `undefined` or `null`, and otherwise returns its left-hand side operand
`?.` optional chaining	accesses an object’s property or calls a function, if the object accessed or function called using this operator is `undefined` or `null`, the expression short circuits and evaluates to `undefined`

Types

Number: Double precision 64-bit floating point values. It can be used to represent both, integers and fractions.
String: Represents a sequence of Unicode characters
Boolean: Represents logical values, true and false
Null: Represents an intentional absence of an object value
Undefined: Denotes value given to all uninitialized variables

Boolean

All the following lines of code create Boolean objects with an initial value of false:

var myBoolean=new Boolean();
                                    

                                      var myBoolean=new Boolean(0); 
                                    

                                      var myBoolean=new Boolean(null); 
                                    

                                      var myBoolean=new Boolean("");
                                    

                                      var myBoolean=new Boolean(false); 
                                    

                                      var myBoolean=new Boolean(NaN);

And all the following lines of code create Boolean objects with an initial value of true:

var myBoolean=new Boolean(true); 
                                    

                                      var myBoolean=new Boolean("true");
                                    

                                      var myBoolean=new Boolean("false");
                                    

                                      var myBoolean=new Boolean("Richard");

Arrays

Array Creation

regular array (add an optional integer argument to control array’s size)

var myCars=new Array();
                                            

                                                myCars[0]="Saab";
                                            

                                                myCars[1]="Volvo";
                                            

                                                myCars[2]="BMW";

condensed array

var myCars=new Array("Saab","Volvo","BMW");
literal array

var myCars=["Saab","Volvo","BMW"];

`Array.isArray()`	determines whether the passed value is an Array
`Array.prototype.at()`	takes an integer value and returns the item at that index, negative indexes can be used
`Array.prototype.fill()`	changes all elements within a range of indices in an array to a static value
`Array.prototype.push()`	adds the specified elements to the end of an array and returns the new length of the array
`Array.prototype.pop()`	removes the last element from an array and returns that element
`Array.prototype.unshift()`	adds the specified elements to the beginning of an array and returns the new length of the array
`Array.prototype.shift()`	removes the first element from an array and returns that removed element
`Array.prototype.with()`	copying version of using the bracket notation to change the value of a given index, negative indexes can be used
`Array.prototype.splice()`	changes the contents of an array by removing or replacing existing elements and/or adding new elements in place
`Array.prototype.toSpliced()`	copying counterpart of the `Array.prototype.spliced()` method
`Array.prototype.reverse()`	reverses an array in place and returns the reference to the same array
`Array.prototype.toReversed()`	copying counterpart of the `Array.prototype.reverse()` method
`Array.prototype.sort()`	sorts the elements of an array in place and returns the reference to the same array, now sorted
`Array.prototype.toSorted()`	copying counterpart of the `Array.prototype.sort()` method
`Array.prototype.filter()`	creates a shallow copy of a filtered portion of a given array
`Array.prototype.map()`	creates a new array populated with the results of calling a provided function on every element in the calling array
`Array.prototype.find()`	returns the first element in the provided array that satisfies the provided testing function
`Array.prototype.findIndex()`	returns the index of the first element in an array that satisfies the provided testing function
`Array.prototype.findLast()`	iterates the array in reverse order and returns the value of the first element that satisfies the provided testing function
`Array.prototype.findLastIndex()`	terates the array in reverse order and returns the index of the first element that satisfies the provided testing function
`Array.prototype.some()`	tests whether at least one element in the array passes the test implemented by the provided function
`Array.prototype.every()`	tests whether all elements in the array pass the test implemented by the provided function
`Array.prototype.includes()`	determines whether an array includes a certain value among its entries
`Array.prototype.forEach()`	executes a provided function once for each array element
`Array.prototype.reduce()`	executes a user-supplied "reducer" callback function on each element (from left to right) of the array
`Array.prototype.reduceRight()`	applies a function against an accumulator and each value of the array (from right to left) to reduce it to a single value
`Array.prototype.flatMap()`	creates a new array with all sub-array elements concatenated into it recursively up to the specified depth

Maps

Map.groupBy() groups the elements of a given iterable using the values returned by a provided callback function

Objects

The delete operator removes a property from an object.

Object.groupBy() groups the elements of a given iterable according to the string values returned by a provided callback function

Regular Expressions

Syntax

var txt=new RegExp(pattern,modifiers);

or

var txt=/pattern/modifiers;
Modifiers
i - case-insensitive matching
g - global match (find all matches rather than stopping after the first match)
m - multiline matching

Popup Boxes

Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.

alert("sometext");
Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

confirm("sometext");
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

prompt("sometext","defaultvalue");

Events

MouseEvent
- pageX / pageY: Relative to the top left of the fully rendered content area in the browser. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar.
- screenX / screenY: Relative to the top left of the physical screen, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution.
- clientX / clientY: Relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser.

Template literals (a.k.a. template strings)

console.log(`Current value is ${value}`)

nullish coalescing operator (??)
The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
This can be contrasted with the logical OR (||) operator, which returns the right-hand side operand if the left operand is any falsy value, not only null or undefined. In other words, if you use || to provide some default value to another variable foo, you may encounter unexpected behaviours if you consider some falsy values as usable (e.g., '' or 0).

optional chaining operator (?.)
The optional chaining operator (?.) functions similarly to the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.

myVar.myFunc?.()
                            

                            myVar.myArray?.[0]

Styling console output
You can use the %c directive to apply a CSS style to console output:

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

Declaring properties with a variable of the same name

const firstName = "John";
                            

                            const lastName = "Doe";
                            

                            const person = {
                            

                                firstName: firstName,
                            

                                lastName: lastName
                            

                            };

can be written

const person = {
                            

                                firstName,
                            

                                lastName
                            

                            };

script’s defer and async

<script src="sample.js" defer></script>

If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
If async is not present and defer is present: The script is executed when the page has finished parsing
If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page