Variables, Functions, Data types, OOP

Variables

A variable is a container for a value, like a number we might use in a sum, or a string that we might use as part of a sentence

• variable names consist of letters, digits, underscores, and dollar sign($)
• are case-sensitive, should be mnemonic (meaningful), must not start with a number, avoid using JavaScript reserved words
• safe convention - lower camel case (stick together multiple words using lower case for the first word and then capitalize subsequent words)
• var - the only way to declare variables when JavaScript was first created (confusing and error-prone, var hoisting)
• let - declares re-assignable, block-scoped local variables, optionally initializing each to a value
• const - declares block-scoped local variables (cannot be redeclared by any other declaration in the same scope)

Data types

• Numbers - you don't need to declare variable types in JavaScript, can store numbers in variables (whole numbers - integers or decimal numbers - floats)
• Strings - a string is a collection of characters
• to create a string, you put the value in quotes, double or single
• escaping - done using the backslash character
• JavaScript string concatenation uses "+", "."operator automatically converts non-string values to strings as needed
• if a string cannot be converted to a number, you end up with "Not a Number" or "NaN"
• properties and methods
• length - contains the length of the string in UTF-16 code units str.length;
• concat() - concatenates the string arguments to this string and returns a new string str1.concat(" ", str2);
• charAt() - returns a new string consisting of the single UTF-16 code unit at the given index sentence.charAt(4);
• endsWith() - determines whether a string ends with the characters of this string, returning true or false as appropriate str1.endsWith("best!");
• indexOf() - searches this string and returns the index of the first occurrence of the specified substring paragraph.indexOf("dog");
• lastIndexOf() - searches this string and returns the index of the last occurrence of the specified substring paragraph.lastIndexOf("dog");
• match() - retrieves the result of matching this string against a regular expression paragraph.match(/[A-Z]/g);
• replace() - returns a new string with one, some, or all matches of a pattern replaced by a replacement (pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match)
• replaceAll() - returns a new string with all matches of a pattern replaced by a replacement p.replaceAll("dog", "monkey");
• search() - executes a search for a match between a regular expression and this string, returning the index of the first match in the string
• slice() - extracts a section of this string and returns it as a new string, without modifying the original string str.slice(4, 19);
• split() - takes a pattern and divides this string into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array str.split(" ");
• startsWith() - determines whether this string begins with the characters of a specified string, returning true or false as appropriate str1.startsWith("Sat");
• substring() - returns the part of this string from the start index up to and excluding the end index, or to the end of the string if no end index is supplied str.substring(1, 3);
• toString() - returns this string value stringObj.toString();
• trim() - removes whitespace from both ends of this string and returns a new string, without modifying the original string (trimStart or trimEnd for just one end)
• Booleans - in programming, a boolean value is one that is either true or false (generally used to test a condition, after which code is run as appropriate)
• Arrays - is a single object that contains multiple values enclosed in square brackets and separated by commas
• store multiple value using a variable name, and an index for each element in the array
• each value is called an element, elements are referenced by index
• the elements in the array DON'T have to be all the same type
• have attributes and methods
• length - represents the number of elements in that array
• sort() - sorts the elements of an array in place and returns the reference to the same array, now sorted
• push() - adds the specified elements to the end of an array and returns the new length of the array
• pop() - removes the last element from an array and returns that element
• join() - creates and returns a new string by concatenating all of the elements in this array, separated by commas or a specified separator string
• toString() - returns a string representing the specified array and its elements
• values() - returns a new array iterator object that iterates the value of each item in the array
• forEach() - executes a provided function once for each array element
• map() - creates a new array populated with the results of calling a provided function on every element in the calling array
• reduce() - executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element
• splice() - changes the contents of an array by removing or replacing existing elements and/or adding new elements in place
• indexOf() - returns the first index at which a given element can be found in the array, or -1 if it is not present
• Array iteration - for (i = 0; i < array.length; i++){...}
• Objects - represents one of JavaScript's data types (used to store various keyed collections and more complex entities) const person = {name:["Bob","Smith"], age:32, intr(){console.log(`I'm ${this.name[0]}`);};
• the object person has 3 properties: name, age as data properties and intr() as method
• person.age; - access the object's properties and methods using dot notation
• person.["name"][0]; - or using use square brackets
• person.age = 45; - set (update) the value of object members
• const myDataName = "height"; const myDataValue = "1.75m"; person[myDataName] = myDataValue; - set the value of member names
• this keyword refers to the current object the code is being written inside (person)
• function Person(name){this.name = name; console.log(`I'm ${this.name}`);};} const joe = new Person("Joe"); - A constructor is just a function called using the new keyword

Expressions and operators

• Primary expressions - basic keywords and general expressions (highest precedence) - this, [], {}, function, class, function*
• Left-hand-side expressions - left values are the destination of an assignment - new, super
• Increment and decrement - postfix/prefix increment and postfix/prefix decrement operators - i++ postfix increment, i-- postfix decrement, ++iprefix increment, --iprefix decrement
• Unary operators - an operation with only one operand - delete, void, typeof, ~ bitwise not, ! logical not
• Arithmetic operators - take numerical values as their operands and return a single numerical value - ** exponentiation, * multiplication, / division, % remainder, + addition, - subtraction
• Relational operators - compares its operands and returns a boolean value based on whether the comparison is true - < less then, > greater then, <= less then or equal, >= greater then or equal, istanceof, in
• Equality operators - the result is always of type boolean based on whether the comparison is true - == equality, != inequality, === strict equality, !== strict inequality
• Bitwise shift operators - operations to shift all bits of the operand - <<bitwise left shift, >> bitwise right shift, >>> bitwise unsigned right shift
• Binary bitwise operators - treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values - &AND, | OR, ^ XOR
• Binary logical operators - implement boolean (logical) values and have short-circuiting behavior - && logical AND, || logical OR, ?? nullish coalescing
• Conditional (ternary) operator - returns one of two values based on the logical value of the condition (condition ? ifTrue : ifFalse)
• Assignment operators - assigns a value to its left operand based on the value of its right operand - = assignment, *= multiplication assignment, /= division, %= remainder, += addition, -= subtraction
• Yield operators - pause and resume a generator function
• Comma operator - allows multiple expressions to be evaluated in a single statement and returns the result of the last expression - x = (2, 3); console.log(x); //3

Statements and declarations

• for - creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement for (let i = 0; i < 9; i++){str = str + i;}
• for...in - iterates over all enumerable string properties of an object including inherited enumerable properties for (const property in object) {console.log(`${property}: ${object[property]}`);}
• for...of - executes a loop that operates on a sequence of values sourced from an iterable object (Array, String, TypedArray, Map, Set, NodeList) for (const element of array1){console.log(element);}
• if...else - executes a statement if a specified condition is truthy if (x > 50){...} else if (x > 5){...} else{...}
• while - creates a loop that executes a specified statement as long as the test condition evaluates to true while (n < 3){n++;}
• switch - evaluates an expression, matching the expression's value against a series of case clauses, and executes statements after the first case clause with a matching value, until a break statement is encountered
• break - terminates the current loop or switch statement and transfers program control to the statement following the terminated statement
• continue - terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration

Functions

Functions are bits of codes that you can reuse (block of code designed to perform a particular task)

• function name(parameter){...} - defined with the function keyword, followed by a name, followed by parentheses ( )
• Function parameters are listed inside the parentheses ( ) in the function definition
• Function arguments are the values received by the function when it is invoked
• The function keyword can be used to define a function inside an expression const x = function(y){return y * y;};
• An arrow function expression is a compact alternative to a traditional function expression (more compact and can make code easier to read)
• function makeUpperCase(aString){return aString.toUpperCase();} - function declaration
• const makeUpperCase = (aString) => {return aString.toUpperCase()}; - make function expression, remove the word "function" and add an "arrow"
• const makeUpperCase = aString => {return aString.toUpperCase();} - remove the parentheses if there is only one parameter
• const makeUpperCase = aString => aString.toUpperCase(); - remove the curly braces and the return keyword if you have just one statement and it is a return statement
• if you have more than one parameter, you need to put the parentheses back in, so that the code is not ambiguous
• if you have no parameters, and more than one line in the function, or it’s not returning a variable, you need to include the parentheses and the curly braces
• arrow functions can not be used as constructor functions because the scope of the keyword this is different in arrow functions than it is in the more traditional function expression syntax
• Immediately Invoked Function Expression IIFE is a JavaScript function that runs as soon as it is defined (Self-Executing Anonymous Function)
• (function(){})();
• (() => {})();
• A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action
• Helper functions:
• function random(min, max){return Math.floor(Math.random() * (max - min + 1)) + min;} - returns a random number in the range between the two numbers
• function randomRGB(){return `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`;} - generates a random color represented as an rgb() string

Classes

• class Person {name; constructor(name){this.name = name;} intr(){console.log(`I'm ${this.name}`);}}
• declares a class called Person, a name property, a constructor that takes a name parameter that is used to initialize the new object's name property, an intr() method that can refer to the object's properties using this

this is a keyword that allows an element to reference itself (allows to access an element's info, is also used outside functions)

menuLinks.addEventListener("click", function(){console.log(this.innerHTML);});

Prototypes & Inheritance

JS only has one construct: objects, each object has a private property which holds a link to another object called its prototype

function iPhone(){}; - constructor

iPhone.prototype.faceID = function(){...}; - a method for recognizing faces

let myPhone = new iPhone(); myPhone.faceId();

myPhone.faceID = undefined; - deleting a feature

• __proto__ is an object in every class instance that points to the prototype it was created from. Only true difference between prototype and __proto__ is that the former is a property of a class constructor, while the latter is a property of a class instance.

Object methods

• Object.assign() - copies all enumerable own properties from one or more source objects to a target object
• Object.create() - creates a new object, using an existing object as the prototype of the newly created object
• Object.keys() - returns an array of a given object's own enumerable string-keyed property names
• Object.values() - returns an array of a given object's own enumerable string-keyed property values
• Object.hasOwn() - returns true if the specified object has the indicated property as its own property

Regular expressions

are patterns used to match character combinations in strings (in JS regular expressions are also objects)

• const re = /ab+c/; - construct a regular expression using a regular expression literal (pattern enclosed between slashes)
• const re = new RegExp("ab+c"); - calling the constructor function of the RegExp object (when you know the pattern will be changing or you don't know the pattern - getting it from another source)
• simple patterns are constructed of characters for which you want to find a direct match
• you can include special characters in the pattern when the search for a match requires something more than a direct match

The RegExp object is used for matching text with a pattern

• exec() - executes a search with this regular expression for a match in a specified string and returns a result array, or null
• test() - executes a search with this regular expression for a match between a regular expression and a specified string