Forem: Angeline Wang

How Control Flow Works in JavaScript

Angeline Wang — Mon, 21 Nov 2022 18:43:13 +0000

Introduction: What is Control Flow?

A computer program is an algorithm that contains a sequence of events. And control flow is set up to execute those events in the correct order. Throughout this sequence of events, decisions are made based on inputs. In colloquial terms, it sounds like: “If this, then… If that, then that…”

Everything discussed below are control flow statements, which you can use to change and interfere with the normal execution of code in JavaScript.

These are all useful ways to write code that can be reused throughout a program, which will help you finish your app faster, make your codebase more concise and run more efficiently.

In this article, you will learn:

What are conditionals?
What are the different ways you can write conditionals in JavaScript?
When and why should you use each type of conditional
What are loops?
What kind of loops are available in JavaScript?
When and why should you use each type of loop

What are Conditionals?

Conditionals are used to decide which certain code blocks are executed, based on the evaluation of a condition. This makes a program more dynamic as it is able to react differently depending on the circumstances at runtime.

There are three different ways you can write conditionals in JavaScript…

Types of Conditional Statements

if else statements
Ternary operators
switch statements

`if else` Statements

The purpose of if else statements is to make binary decisions–either true or false–that tell a computer to do something. All decisions are technically binary, and a final decision can be delineated from a series of binary decisions.

Syntax of `if else` Statements

if(*condition*) {
*code block*
}

else if(*condition*) {
*code block*
}

else {
*code block*
}

Example Use Case

if (i % 2 === 0) {
    console.log(i);
}

A condition is a small equation evaluated into a Boolean result, and it is evaluated at the time the program teaches that block of code. When using if else statements, you can add as many conditions as you want.

Any string, and indeed anything that is not a falsy value, will be evaluated as true. And in order to turn any truthy value into a falsy value, simply use a bang operator like so:

if (!a)

To combine conditions, you can add multiple into one conditional statement by using the AND operator && or the OR operator ||.

Ternary Operators

Ternary operators are a shorthand way to write if else conditional statements. What’s special about them is that they are also right-associative, which means that they can be chained.

When to Use Ternary Operators

They are especially helpful for condensing code in cases where you only have one line of code to run after the evaluation of a condition. This may mean assigning a value or an increment.

Another case where they are helpful is in handling null values.

Syntax of Ternary Operators

The ternary operator is the only JavaScript operator that takes 3 operands:

Condition followed by a question mark ?
Expression to execute if Condition is truthy followed by a colon :
Expression to execute if Condition is falsey

Here’s what it looks like:

condition ? exprIfTrue : exprIfFalse;

Example Use Case

This code logs the result of the ternary operator evaluation:

var age = 26;
var beverage = (age >= 21) ? “Beer” : “Juice”;
console.log(beverage);

Handling `null` Values

Here’s a code example that allows an operation in the case of a null value by replacing the variable that is null:

let greeting = person => 
    let name = person ? person.name : `stranger`
    return `Howdy, ${name}`
}

Combining Conditions

To combine conditions while using a ternary operator, you must add parentheses around each additional condition, with an intervening AND operator && or an OR operator ||.

Combining Operations

Furthermore, while adding multiple operations, ternary operators can be chained like so:

return condition1 ? value 1  // If ___ then ___
    : condition2 ? value2 // else if ___ then ___
    : condition3 ? value3 // else if ___ then ___
    : value4; // else ___

The equivalent operations would need to be written in far more elaborate form using if else statements, and would look like this:

if (condition1) {return value1;}
else if (condition2) {return value2;}
else if (condition3) {return value3;}
else {return value4;}

Refactoring `if else` Statements

Here’s a situation where a ternary operator could reduce the code written:

let status; // Variable waiting to be assigned a value 
if(age > 18) {
status = ‘adult’;
} else {
status = ‘child’;
}

The above code would be translated as such with a ternary operator:

const status = age > 18 ? ‘adult’: ‘child’;

The first value after ? is returned if true, and the second value is returned if false. Placed between the = and the > is the condition.

Comparison Operators

Comparison operators always return a boolean value, and they are used in many languages, including JavaScript.

Types of Comparison Operators

> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
== Loosely equal to
- This operator converts values into the same type.
!= Loosely not equal to
=== Strictly equal to
- This operator checks for the same value and the same type.
!== Strictly not equal to

Logical Operators

Local operators are used to connect two or more expressions in order to create a compound expression whose value is derived solely from the meaning of the original expressions and the operator(s) used.

Types of Logical Operators

And operator
Or operator

`&&` AND Operator

The AND operator requires both values to be true in order to return true. And the order of the two values does not affect the outcome. The operator does not check the second condition if the first is false.

`||` OR Operator

The OR operator required either value to be true to return true. And it stops at the first condition evaluating as true.

Non-Boolean Values

Using logical operators in JavaScript involves different semantics compared to other C-like languages.

This is because logical operators can operate on expressions of any type in JavaScript, not just booleans. Following this, logical operators in JavaScript do not always return a boolean value. The value returned will always be the value of one of the two operand expressions.

Return from Logical Operators

&& and || return the value of only one of their operands. This means that A && B returns the value A if A can be coerced into false; otherwise, it returns B. A || B returns the value A if A can be coerced into true; otherwise, it returns B.

However, in practice, it is difficult to notice that && and || don’t consistently return boolean values. if statements and loops execute when a condition evaluates to a truthy value, which means it does not need to be an actual boolean.

Complications with Non-Boolean Values Returned

For example, in a web application where users can be signed out and the user object is null, or they can be signed in and the user object exists and has an isAdmin property.

To verify if the current user is an administrator, checking if the user is authenticated is necessary. This means checking if the user object is not null. And then, you would check the isAdmin property to see if it's truthy.

In the case that the user object is not null and the user is an administrator, the user object would be returned, rather than true. The benefit is that this saves you the hassle of needing to check its existence and grabbing the data in separate operations. And in the case that the user object is null, null will be returned, rather than false.

However, this may be a problem if you have an isAdministrator function which is meant to evaluate both conditions and return a boolean value because the prefix of the function is is, thus concluding its purpose of returning true or false.

Convert Truthy/Falsy Value into a Proper Boolean

Option 1: Implicit Coercion

You can coerce a value into a boolean by using the logical NOT operator, which is the bang operator, and apply it twice.

Use Case Example

function isAdministrator(user) {
    return !!(user && user.isAdmin);
}

Double Bang Operator
The first ! returns the value false if the value can be coerced into true. If the value cannot be coerced into true, it will return true. What is returned is always a proper boolean, however the truthiness of the value is reversed. And then the second ! undoes the reversal of the truthiness of the value.

Option 2: Explicit Coercion

You can explicitly coerce a value into a boolean by calling the Boolean Function.

Use Case Example

function isAdministrator(user) {
    return Boolean(user && user.isAdmin);
}

Switch Statements

Switch statements are another way to write a conditional, but it is less used. It takes in the variable and compares it to the value of each case.

It is a type of conditional statement that evaluates an expression against multiple possible cases and executes one or more blocks of code depending on which cases match. Using switch statements is like using a conditional statement with numerous else if blocks.

Related Keywords for Switch Statements

case
break
default

Syntax of `switch` Statements

A switch statement is always applied using switch () {}.

Inside the parentheses is the expression to be tested. And inside the curly braces are the cases along with the code blocks that may be run:

switch(*variable name*) {
case *value*:
console.log(“”);  // Code block executed on Truthy value
break;
case *value*:
console.log(“”);
break;
default:  // Equivalent to: “else”
console.log(“”);

Each case is evaluated by strict equality, and the cases are checked in chronological order. This example has 2 case statements and default is a fallback.

Here are the things that happen throughout the switch statement:

The expression is evaluated and the value is retrieved
The value of the first case is compared with the value of the expression. If there is a match, the code block within the case will run, and the break keyword will end the switch block.
If it is not matched with the first case, the code block within that case will be overlooked, and the value of the next case will be compared with the value of the expression.

If the value of that case matches the value of the expression, the code block will run and then exit out of the switch block due to the break statement.

If none of the values of the cases match the value of the expression, the code block after the default statement will run.

Use Case Example

The following code block shows the month of the event with the getEvent() method, which receives the id of the event as an argument and returns an object with all the event details. On this event object, there is a month property, which is called, retrieving the number representing the month.

With a switch statement, you can print the appropriate month name. The cases will be considered in chronological order and compared with the value of the expression.

When a matching case is discovered, the code block will run, and the break statement at the end of that code block will stop the program from evaluating the rest of the cases and exit the switch statement:

// Set the month of the event to a variable, with 1 as January and 12 as December
const numMonth = getEvent(239).month;

switch (numMonth) {
    case 1:
        setMonth(‘January’);
        break;
case 2:
        setMonth(‘February’);
        break;
case 3:
        setMonth(‘March’);
        break;
case 4:
        setMonth(‘April’);
        break;
case 5:
        setMonth(‘May’);
        break;
case 6:
        setMonth(‘June’);
        break;
case 7:
        setMonth(‘July’);
        break;
case 8:
        setMonth(‘August’);
        break;
case 9:
        setMonth(‘September’);
        break;
    case 10:
        setMonth(‘October’);
        break;
    case 11:
        setMonth(‘November’);
        break;
    case 12:
setMonth(‘December’);
        break;
    default:
        setMonth(getCurrentMonth());
}

If the month of the event is 3, then the month state will be set to the value of March. And depending on the Event id passed through the getEvent() function, the month will be set to different strings.

The default block is included at the end to be executed in case of an error where a number not corresponding 1-12 is passed.

Another use case could be to only set the value of month if the month is within the next three months in order to pull events happening soon in the future. This would mean that events would only be allowed to be in these months; and if the user input fell beyond these months, it would forcibly default to the current month.

If the break keyword was not added to the end of each case code block, then none of the other case statements would have evaluated to true, but it would have been wasted energy sifting through the extra cases.

To make your program faster and more efficient, include break statements.

Switch Ranges

If you want to evaluate a range of values in a switch statement, instead of just one, you can do so by setting the expression to true, and then doing an operation within each case statement specifying different conditions on each case.

Since the match is auto-set to evaluate to true, now the expression after case will act like the condition after if in if else statements, and each case will be evaluated chronologically until one condition is met or the switch statement defaults.

You need to evaluate each case to see if the expression evaluates to true, run the appropriate code, and then break out of the switch statement.

Use Case Example

// Set the time of the event 
const time = 1800;

switch (true) {
    case time >= 1800:
        setEventTime(‘Evening’);
        break;
    case time >= 1200:
        setEventTime(‘Afternoon’);
        break;
    case time >= 0:
        setEventTime(‘Morning’);
        break;
    default:
        setEventTime(‘Ambiguous’);
}

The expression in the parentheses to be evaluated is true, meaning that any case that evaluates to true will be a match. In the code above, the eventTime state will be set to ‘Evening’.

Multiple Cases

If you want to have the same output for multiple different cases, you can use more than one case for each block of code.

Use Case Example

For example, if you want to match the time after 1800 and the time before 700 to 'Evening', you can do so like this:

// Get number corresponding to the time of the event
const time = getEvent(431).getTime(); 

switch (true) {
    case time >= 1800:
    case time <= 700:
        setEventTime(‘Evening’);
        break;
    case time >= 1200:
        setEventTime(‘Afternoon’);
        break;
    case time >= 0:
        setEventTime(‘Morning’);
        break;
    default:
        setEventTime(‘Ambiguous’);
}

The above code will result in an output setting the eventTime state to the time of day depending on the conditions above.

Although 1800 would evaluate to true for the other 2 cases as well, the first match is for ‘Evening’, so that will be set to the EventTime variable.

The same can be applied to normal switch cases (not switch ranges).

`switch` vs `if else`

Some similarities between switch statements and if else statements include the fact that they are both evaluated from top to bottom and also that the first true returned is accepted.

switch statements are advantageous due to their high readability and ability to evaluate the same variable at different values.

What are Loops?

Loops loop over the same block of code until a certain condition is met. Different types of loops provide different methods of curating the beginning and end points of a loop.

Loops will be written a lot. In every programming language, there are loops, control flow, & conditionals. And learning about loops is a part of software literacy.

Types of Loops

do while loop
while loop
for loop
for in loop
for of loop
forEach loop

`do while` Loops

The do while loop runs a statement, and then repeats the statement(s) until a specified condition evaluates to false.

Syntax of `do while` Loops

do
    statement 
while (condition);

The statement is always run one time before the condition is evaluated. If you want to run many statements, use a block statement {} to group them. If the condition is evaluated to true, the statement runs again.

The condition is checked upon the conclusion of each execution. When the condition returns false, the execution stops, and the program moves onto the code after the do while loop.

Use Case Example

let i = 0;
do {
    i += 1;
    console.log(i);
} while (i < 20);

This do loop iterates at least once and reiterates until i is no longer less than 20.

`while` Loops

A while loop continues executing its statements given that a specified condition evaluates to true. It checks the condition at the start of each loop, and after code execution, it returns to check the condition. If the condition evaluates as true, it runs the code block again.

Syntax of `while` Loops

while (condition)
    statement

The evaluation of the condition is done before the statement in the loop is run. And if the condition returns true, then the statement is run, and the condition is evaluated again. If you want to run a series of statements, you can do so using a block statement {} to group them.

If the condition evaluates to false, then the statement(s) within the loop are not executed, and the program moves onto the next line of code after the loop.

Use Case Example

let a = 10;
while(a > 5) {
console.log (`a is now ${a}`);
a--;
}

This program goes back to the top of the loop with the new value, and then checks the condition in the () again. After the condition is met and the loop ends, the program moves onto the next line of code after the while loop.

Use Case Example #2

let n = 0;
let x = 0;
while (n < 50) {
    n++;
    x += n;
}

This while loop iterates as long as n is less than 50. And during each iteration, the loop increments n and adds that value to x.

During the first execution, n takes the value of 1 and x takes the value of 1. During the second execution, n takes the value of 2 and x takes the value of 3. And during the third execution, n takes the value of 3 and x takes the value of 6.

After the code has executed 50 times, the condition n < 50 returns false, and then the loop ends.

Infinite Loop

Infinite loops are possible in both while and do while loops, as long as the condition is always evaluated to true. This allows for the code block to run for an infinite number of times, which will lead to your application crashing.

It is important to ensure the condition in while and do while loops becomes false at some point. You must modify the variable after each loop, which can be done by providing an incrementer or decrementer.

`while` vs `do while`

The key difference between these two loops is the order of operations.

In a while loop, the program first checks that the condition evaluates to true, then runs the code block. In a do while loop, first, the code block is run, and then the condition is evaluated to determine whether to rerun the code.

This means that do while loops ensure the code block is run at least once; and it is possible for the code in a while loop to never run.

`while` vs `for`

The main advantage of using a while loop is that it is flexible. This means that it can be made dynamic to the user input. This is useful when you do not know the number of times the loop needs to be run, or when you do not know the specific intent of the loop.

However, using a for loop may be better for cases that are more specific. This means that it is useful for looping over arrays, looping over a specific number of lines, or when you know the specific number of times you want to run a code block.

`for` Loops

A for loop is similar to the while loop, but the syntax is different. Nonetheless, the concepts are quite straightforward.

An advantage of for loops is the fact that they are self-contained, which means that they cannot accidentally have an infinite loop the way that while loops can. This is useful when iterating overall, or through a subset of items.

Syntax of `for` Loops

for(*initial variable*; *condition*; *alteration*) {
*code block = directs logic of code: tells app how to make a decision*
}

Remember that semicolons are necessary within the parentheses () after for and while, but they are not necessary within the curly braces {} after the parentheses ().

`for` Loop Condition

There are 3 parts of a for loop condition. First, the initialisation of a variable to use as part of the condition. Second, the actual condition that’ll evaluate true or false. And third, the incrementer to bring you closer to the end of the condition.

The incrementing will continue until the condition evaluates to false, and at which point, the program moves onto the rest of the code.

Example Use Case

for(let a = 1; a < 5; a++) {
console.log(`a is now ${a}`);
}

The block of code will continue to run as long as the for loop condition returns true.

`for in` Loops

for in loop iterates a specified variable over all the keys inside an Object that are both user-defined and numeric indices.

For each distinct property, JavaScript runs the specified statements inside the for in loop.

Syntax of `for in` Loops

for (variable in object) 
    statement

Use Case Example

This function takes an argument of an object and the object’s name. Then, it iterates over all the parent object’s properties and returns a string that lists the property names and values:

function newProps(object, objectName) {
    let result = ‘’;
    for (const i in object) {
        result += `${objectName}.${i} = ${obj[i]}<br>`;
    }
    result += ‘<hr>’;
    return result;
}

For an Object named event with properties month and year, result returned would be:
event.month = September
event.year = 2022

Technically, user-defined properties (like custom properties or methods) can be assigned to arrays, so to ensure only numerically indexed array elements are accessed, rather than accessing both user-defined and numeric indices, use a for of loop instead.

for in loops can be used for both iterables and objects; nonetheless, using for in loops on iterables should be avoided.

`Object.keys()` vs `for in`

A for in loop has the same utility as Object.keys(). If you only want to return the keys of an object, Object.keys() may be the way to go.

However, if you wish also to perform an operation for each element iterated through, for in will be the faster way to do so, since using Object.keys() and then a forEach() requires passing a callback during every iteration.

`for` vs `for in`

Both for and for in loops give access to the index of each element in an array and not the actual element value. This means that you still need to use the array name, followed by the given index, in order to find the element value.

Use Case Example

const arr = [‘Angeline’, ‘Sarah’, ‘Laura’]

for (let i = 0; i < arr.length; ++i) {
    console.log(arr[i]);
}

for (let i in arr) {
    console.log(arr[i]);
}

`for of` Loops

for of statements create a loop that iterates over iterable objects. It will invoke a custom iteration hook with statements to be executed for the value of each distinct property.

The difference between a for of loop and a for in loop is that a for of loop iterates over property values, instead of names.

for of loops (without additional aid) cannot be used to iterate over an object, it can only be used to iterate over iterable objects.

When to use `for of` loops

for of loops are the best way to iterate over an array in JavaScript because they are more concise than the conventional for loop and also does not have as many edge cases as for in and forEach() loops.

However, for of loops do take extra work to access element indices, and you cannot chain them like you can do with forEach() loops.

Syntax of `for of` Loops

for (const element of array) {
    console.log(element)

// Each array element is being assigned to the variable named “element” during each iteration until all the elements have been iterated upon 
}

The first part within the parentheses before of is a variable declaration (with anything before the = operator), which can be done with let var or const.

const can be used so long as the variable is not reassigned within the code block. Between iterations, the function context is considered new, so it is okay to use const.

If the elements within the iterable are objects, you can also destructure the object property like so: for (event.date of events).

`for of` vs `for in`

There are two important factors that differ in terms of for of and for in loops:

First is what part of each element they iterate over and return. for in loops iterate over the keys of each element, while for of loops iterate over the values of each element.

Second is what kind of elements they include in their operations. for of loops only iterate through elements with numeric array index keys, so they only work for array-type objects.

for in loops do not discriminate based on the origins of keys, and include all elements, with either numeric array indices as keys and user-generated elements with string keys.

Comparison Example

const arr = [1, 2, 3];
arr.greeting = ‘good afternoon’;

// for of 
for (const i of arr) {
    console.log(i);
}
// Prints: “1” “2” “3” 

// for in
for (const i in arr) {
    console.log(i);
}
// Prints: “0” “1” “2” “greeting”

If you wish to return the values of elements including those with user-generated string keys, you can do so by using a for in loop with bracket notation. All keys, including user-generated ones, can be passed inside the brackets after the object name, like so:

const arr = [1, 2, 3];

arr.greeting = “good afternoon”;

for (const i in arr) {
    console.log(arr[i])
} // Prints: “1” “2” “3” “good afternoon”

It seems there is no premeditated way to return only the keys that are numeric array index keys.

`Object.entries()`

Both for of and for in loops can also be used with destructuring. For example, they can both simultaneously loop over keys and values of an object with Object.entries().

With the use of Object.entries(), an array (with numeric indices as keys) is created from an object (previously array or non-array). This means that by replacing the arr with Object.entries(arr), even an object with user-generated string keys can be used with for of, like so:

// for of 
const obj = { angeline: 10, laura: 20 };

for (const [key, val] of Object.entries(obj)) {
    console.log(key, val);
}
// Prints: 
// “angeline” 10
// “laura” 20

`forEach` Loops

forEach loops are useful for iterating through all the items in a collection. It is read-only, meaning it cannot modify items as they are being iterated through.

When to Use `forEach` Loops

A good rule of thumb is to use forEach sparingly because it comes with many edge cases. However, there are still many cases where it can be used to make code more concise.

Syntax of `forEach` Loops

const guests = [‘Angeline’, ‘Laura’, ‘Sarah’];

guests.forEach(guest => console.log(guest));

The forEach loop takes a callback function that is used on each element within the array. The callback function takes a mandatory current value parameter, and optionally, the index and the array object.

`forEach` vs `for of`

One similarity between forEach and for of is the fact that they both access the array element value itself. One difference is that the forEach loop can access both the value and the index, which can be passed in as the second parameter.

Comparison Example

arr.forEach((v, i) => console.log(v));

for (const v of arr) {
    console.log(v);
}

One case where you would choose to use for of instead of forEach is if you want to ensure prevention of “holes” in your user data, which can result from empty array elements.

Labeled Statements

You can add a label to a statement to act as an identifier you can reference elsewhere in your program.

When to Use Labeled Statements

A label is useful for identifying a loop, and then to use break or continue statements to show if the program should interrupt the loop or continue its execution.

Syntax of Labeled Statements

label: // This can be any JS identifier, excluding reserved words
    statement // Can be any statement

Use Case Example

angelineLoop:
while (isAngeline) {
    doSomething();
}

Non-Numeric Properties

Since JavaScript arrays are objects, it is possible to also add string properties to an array, not just the number indices.

for of, for and forEach loops all ignore non-numeric properties and print out only numeric properties; however, for in loops will print out both numeric and non-numeric properties.

This means that by default, it is best to use for of loops on arrays with only numeric properties.

Empty Elements

You are allowed to have empty elements in a JavaScript array, but the 4 looping constructs will handle empty elements differently. for in and forEach loops will skip the empty element; while for and for of loops do not skip the empty element, and instead prints out undefinedin its place.

Use Case Example

const arr = [‘Angeline’, , ‘Laura’];

arr.length; // 3

for (let i = 0; i < arr.length; ++i) {
    console.log(arr[i]); // Prints “Angeline, undefined, Laura”
}

arr.forEach(v => console.log(v)); // Prints “Angeline, Laura”

for (let i in arr) {
    console.log(arr[i]); // Prints “Angeline, Laura”
}

for (const v of arr) {
    console.log(v); // Prints “Angeline, undefined, Laura”
}

This behaviour only occurs when there is literally an empty array element. If the array element has a value of undefined, the 4 looping constructs will universally print “Angeline, undefined, Laura”.

Add Empty Array Element

If an element at a larger index than the logical subsequent is added, the intermediary indices in the array will be filled with empty elements.

Use Case Example

const arr = [“Angeline”, “Sarah”, “Laura”];
arr[5] = “Maya”;

// Equivalent to [“Angeline”, “Sarah”, “Laura”, , “Maya”]

forEach() and for in loops skip empty elements in the array. for and for of loops do not.

Interaction with JSON

However, empty elements are not supported in JSON, and will be marked as a SyntaxError: Unexpected token. Thus, it is rare that empty elements will be used.

Likely, null will be used in place of any empty elements. This means that the behaviour of forEach() and for in loops when treating empty elements will rarely cause a practical issue.

When for…in and forEach() loops skip empty elements in an array, this behaviour is called “holes”. Any “holes” should likely be treated as having a value of undefined.

It is possible to disallow using forEach() in order to prevent cases of holes. You can write a .eslintrc.yml file with the following content:

parserOptions:
    ecmaVersion: 2018
rules:
    no-restricted-syntax:
        - error
        - selector: CallExpression[callee.property.name="forEach"]
          message: Do not use `forEach()`, use `for/of` instead

Function Context

for, for in and for of loops retain the outside scope’s value of this. And the forEach() callback will have a different this unless you use an array function.

If you want to ensure that all 4 types of loops access the same value for this, you need to enforce a rule to only allow forEach() loops to be used with arrow functions. This can be done through the no-arrow-callback ESLint rule to require arrow functions for all callbacks that don’t use this.

Async/Await Generators

forEach() loops do not precisely work with async/await or generators. Inside an async function that has a forEach() callback function, you cannot use an await, nor can you use a yield.

Syntax errors will be thrown if code like below is written:

async function run() {
    const arr = [ ‘Angeline’, ‘Sarah’, ‘Laura’];
    arr.forEach(el => {
        // SyntaxError
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log(el);
    });
}

function* run() {
    const arr = [‘Angeline’, ‘Sarah’, ‘Laura’];
    arr.forEach(el => {
        yield new Promise(resolve => setTimeout(resolve, 1000));
        console.log(el);
    });
}

However, the 2 code examples do work with for of loops, like this:

async function asyncFn() {
    const arr = [‘Angeline’, ‘Sarah’, ‘Laura’’];
    for (const el of arr) {
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log(el);
    }
}

function* generatorFn() {
    const arr = [‘Angeline’, ‘Sarah’, ‘Laura’];
    for (const el of arr) {
        yield new Promise(resolve => setTimeout(resolve, 1000));
        console.log(el);
    }
}

When using async/await or generators, forEach() is syntactic sugar, so it should be used sparingly and not for everything.

How to Control Loops

There are 2 control flow statements that can be used as operators to further manipulate the execution of code within loops:

break statements
continue statements

These can be applied to switch statements or any of the loops (excluding forEach) to alter the normal control flow of the loop. Where a statement is exited prematurely, clean-up will be performed with the return() method of the iterator.

`break` Statements

The purpose of break statements is to terminate a loop, a switch statement, or it can be used with a labeled statement.

Syntax of `break` Statement

break;
break label;

Example Use Case

for (let i = 0; i < events.length; i++) {
    if (events[i] === ‘party’) {
        break;
    }
}

This iterates through the elements in an array until the program finds the index of an element whose value is ‘party’.

Using `break` without a Label

If you use a break statement without a label, you will immediately stop the innermost enclosing while, do while, for or switch and move onto the next line of code after the while, do while, for or switch statement.

Using `break` with a Label

If you use a break statement with a label, you will stop the specified labeled statement and move onto the line of case after the break statement.

Break to a Label

let x = 0;
let z = 0;
labelCancelLoops: while (true) {
    console.log(‘Outer loops: ’, x);
    x += 1;
    z = 1;
    while (true) {
        console.log(‘Inner loops: ’, z);
        z += 1;
        if (z === 10 && x === 10) {
            break labelCancelLoops;
        } else if (z === 10) {
            break;
        }
    }
}

`continue` Statements

A continue statement can be applied to restart a while, do while, for loop or label statement.

Syntax of `continue` Statement

continue;
continue label;

continue will end the current iteration (leaving remaining code in the block untouched), but it will go back to the start of the loop at the condition and run the loop again. It will not completely break out of the loop as a whole onto the next line of code, it just breaks out of the current iteration of the loop.

Use Case Example

Here is a while loop with a continue statement that runs when the value of i is 5. n takes on the values 1, 3, 6, 10, 16, 23, 31, 40, 50:

let i = 0;
let n = 0;
while (i < 10) {
    i++;
    if (i === 5) {
        continue;
    }
    n += i;
    console.log(n);
}

//1,3,6,10,16,23,21,3,0,40

If continue is removed, the loop would instead print: 1,3,6,10,15,21,28,36,45,55.

Use Case Example #2

Here is a while loop labeled checkxandy includes another while loop labeled checky. If continue is encountered, the program ends the current iteration of checky and starts the next iteration:

let x = 0;
let y = 10;
checkxandy: while (x < 4) {
    console.log(x);
    x += 1;
    checky: while (y > 4) {
        console.log(y);
        y -= 1;
        if ((y % 2) === 0) {
        continue checky;
} 
console.log(y, ‘ is odd.’);
    }
    console.log(‘x = ‘, x);
    console.log(‘y = ’, y);
}

Every time continue is encountered, checky reiterates until its condition returns false. When false is returned, the remainder of checkxandy is run and checkxandy reiterates until its condition returns false. When false is returned from checkxandy, the program continues onto next line of code after checkxandy.

If continue had a label of checkxandy, the program would continue at top of checkxandy loop.

`continue` without Label

Using continue without a label will end the current iteration of the innermost enclosing while, do while, or for statement and continue the execution of the loop with the next iteration.

`continue` with Label

Using continue with a label will apply it to the looping statement identified with that label.

`continue` vs `break`

continue does not end the loop entirely. In a while loop, continue will lead the program to jump back to the while loop’s condition. And in a for loop, continue will lead the program to jump to the “increment-expression”.

Conclusion

In this article, we when over what control flow is and different ways we can manipulate control flow in JavaScript through conditionals and loops.

A wide range of use cases were covered with the functionality of if else, ternary operators, and switch statements, in order to alter code blocks executed during runtime conditionally. We also discussed the varying flexibility of using while loops and for loops.

To explore these topics in more detail, I've added some useful links below.

Happy learning!

Resources for Further Exploration

Conditionals - Learn: JavaScript.com
Conditional (ternary) operator: MDN Web Docs
Expressions and operators: MDN Web Docs
The && and
|| Operators in JavaScript: Marius Schulz
JavaScript for… of Loop: Programix
function*: MDN Web Docs
this: MDN Web Docs
Learn ES6 The Dope Way Part II: Arrow functions and the ‘this’ keyword
For vs forEach() vs for/in vs for/of in JavaScript
Loops and iteration: MDN Web Docs
How To Use the Switch Statement in JavaScript: DigitalOcean

Primitive Data Types - JavaScript Core Concepts

Angeline Wang — Wed, 26 Oct 2022 17:24:43 +0000

"JavaScript Core Concepts" is a 5-Section Series consisting of:

Section 1 Data Types & Variables
Part 1 Variables
Part 2 Primitive Data Types
Part 3 Complex/Composite Data Types

Section 2 Functions & Methods
Section 3 Control Flow & Conditional Statements
Section 4 Past, Present & Future
Section 5 Data Structures & Algorithms

...

JavaScript Primitive Data Types

What is the purpose of primitive data types?

Primitive data types are used to define immutable values, ones that cannot be changed.

How can you use primitive data types?

Booleans, strings and numbers can be wrapped by their object counterparts

`typeof` Operator

This returns a string indicating a value/operand’s data type. In ES6, the variable must be initialized before the usage of this operator.

This operator can be used with or without parentheses. For example: typeof(x) or typeof x. And the best use case is when you need to identify the type of the value in order to process them accordingly,

However, this operator may produce unexpected results in some cases. For example: NaN returns number, '' returns string, '12' returns string, Null returns object, [1, 2, 4] returns object, function(){}; returns function.

`.length` Method

In action, this method means that a string value is coerced into an object using .returnMe() in order to access property length.

However, the created string object is only used for a fraction of a second, and then disposed of. Even though primitives do not have properties, Javascript coerces between primitives and objects.

List of Primitive Data Types

#1 Boolean

What are possible boolean values?

There are only 2 boolean values: true and false.

How do you use booleans?

All JavaScript values can be converted into booleans, and all will become true, expect these falsy values: false, 0, NaN, '', null and undefined.

To convert a value into a boolean and flip it, you can use the bang operator: !. This will make any truthy value false, and any falsy value true.

Here’s an example:

!false // => true 
!20 // => false

To convert a value into a boolean, you can use the double bang: !!. The first bang converts the value into a boolean and flips it, and the second bang flips it back.

Here’s an example:

!!false // => false
!!20 // => true

#2 Null

The null data type only has one value: null.

#3 Undefined

undefined is a variable without an assigned value.

#4 Number

A number is the first of 2 JavaScript numeric primitive data types.

What does a number store?

A number stores positive floating-point numbers between 2^-1074 to 2^1024, negative floating-point numbers between 2^1074 to 2^1024, and integers between 2^53 to 1 and 2^53 to 1. Values outside these ranges and are positive above the maximum are represented as +Infinity, positive values below the minimum are represented as +0, negative values below the maximum are represented as -Infinity, and negative values above the minimum as represented as -0.

What are the special number values?

1. Infinity

You can test for infinity using isFinite.

Here’s an example:

console.log(1 / 0) // => Infinity
console.log(-1 / 0) // => -Infinity
console.log(isFinite(1 / 0)) // => false

2. NaN

NaN means not a number, and this is the result of an arithmetic operation that cannot be expressed as a number. For example, it’ll be the value shown after multiplying a number with a string. This is the only value in JavaScript that is not equal to itself.

You can test for NaN using isNan.

Here’s an example:

console.log(12 * 'b') // => NaN
console.log(isNaN(12 * 'b')) // => true

When are numbers used?

Numbers can be used with all standard arithmetic operators. They can also be used with Math object objects, and for advanced functionality including square root, rounding, and the random generator.

#5 BigInt

BigInt is the second of the 2 numeric JavaScript primitive data types. Its purpose is to represent integers with arbitrary precision.

What does a BigInt store?

A BigInt stores large integers that are beyond the safe integer limit for numbers.

How do you create a BigInt?

To create a BigInt, you need to append n to the end of an integer, or call the constructor.

How does a BigInt behave?

A BigInt behaves like a number when converted to a boolean with conditional statements, or operators, and operators, & bang operators.

#6 String

What is a string?

A string is a sequence of characters defined by wrapping text in single or double quotes.

What are string methods?

Strings have in-built properties and functions which allow us to access information about the string or modify it in some way.

Common string methods

.length()

This outputs the number of characters in a string.
Here’s an example:

'Angeline'.length

.replace()

This replaces a substring with a string.
Here’s an example:

'good morning'.replace('morning', 'night')

.charAt()

This finds the character at the given index.
Here’s an example:

'tutorial'.charAt(e)

.toUpperCase()

This makes all the characters in the string uppercase.
Here’s an example:

'error message'.toUpperCase()

.toLowerCase()

This makes all the characters in the string lowercase.
Here’s an example:

'WHO\'S HEADLINING THIS CONCERT?'.toLowerCase()

Concatenation

Concatenation is the process of joining two strings together through an + operator, backticks, or String.concat().
Here’s an example:

console.log(a + ' ' + b + '!') // => hello world!
console.log(`${a} ${b}!`) // => hello world!

Get a substring of the original string

To get the substring of the original string, pick individual letters, and then use String.substr().

Convert a string into a number

To convert a string into a number, you can use parseInt or parseFloat.

parseInt takes a numeric string and converts it to an integer, providing a base as the 2nd argument.

Here’s an example:

console.log(parseInt('45', 10)) // => 45 (base 10 is decimal)
console.log(parseInt('1011', 2)) // => 11 (base 2 is binary)
console.log(parseInt('a4', 16)) // => 164 (base 16 is hexadecimal)

parseFloat converts a string into a float/decimal number and does not need a base.

Here’s an example:

console.log(parseFloat('67.4894')) // => 67.4894
console.log(parseFloat('32')) // => 32

Another way to convert a string into a number is using a unary operator

Here’s an example:

+'23' // => 23

Finally, you can also convert a string into a number using a Number constructor.

Here’s an example:

Number('445') // => 445

Concatenate Strings & Numbers

This means adding a number to a string, or vice versa, and the result is always a string.

Here’s an example:

console.log('32' + 32) // => "3232"
console.log(2 + 12 + '9') // => "149"

Convert Numbers into Strings

This can represent textual data. For example, a set of elements of 16-bit unsigned integer values where each element in the string occupies a position/index. This can also create another string based on an operation on the original string.

There are 3 different ways to convert numbers into strings.

Here are code examples:

(220).toString() // => "220"
'' + 220 // => "220"
String(121) // => "121"

#7 Symbol

Symbols are unique and can also be used as a key of an object property.

...

Resources for Further Exploration:

MDN Web Docs: JavaScript Data Types and Data Structures

ECMAScript Specification: Data Types and Values

The Secret Life of JavaScript Primitives by Angus Croll

Complex Data Types - JavaScript Core Concepts

Angeline Wang — Wed, 26 Oct 2022 17:18:58 +0000

"JavaScript Core Concepts" is a 5-Section Series consisting of:

Section 1 Data Types & Variables

Part 1 Variables
Part 2 Primitive Data Types
Part 3 Complex/Composite Data Types

Section 2 Functions & Methods
Section 3 Control Flow & Conditional Statements
Section 4 Past, Present & Future
Section 5 Data Structures & Algorithms

...

JavaScript Complex/Composite Data Types

What is a Complex/Composite Data Type?

A complex/composite data type represents a number of similar or different data under a single declaration of a variable. It is a data type that allows multiple values to be grouped together.

JS Complex/Composite Data Types

JavaScript has 1 complex data type: objects. And other data types like arrays and functions described below are just different types of objects.

#1 Objects

Definition

An object is a collection of properties, also known as a mapping between keys and values.

Here’s an example:

let event = {
location: "123 Event Street",
date: "12-03-2022",
host: "Angeline"
};

Purpose

Objects are useful for storing more than one value for a single variable. In the example above, I stored location, date, and host of an event in one variable named event. This means that objects are valuable to store collections of data, and creates a value in memory that could be referenced by an identifier.

Objects contain properties, which are defined as key-value pairs. The key is always a string/symbol, and the value is any data type (primitive or complex).

Use Case

Objects are useful for processing large amounts of data. For example, to store the data of a group of people.

Application

Create an empty Object

To create an empty object and add properties later, use the new keyword.

Here’s an example:

let event = new Object();
event.location = "123 Event Street";
event.date = "12-03-2022";
event.host = "Angeline";

Adding Properties

Naming Properties

Quotes are optional when naming a property if it is a valid JavaScript names (ie firstname), and quotes are mandatory for non-valid JavaScript names (ie "first-name").

Using Properties

Objects are a collection of properties, and the object literal syntax is where a limited set of properties are initialized. Properties can be added and removed.

Property Values

Property values can be any data type (primitive or composite), including other objects. Thus enabling building of complex data structures.

Identification of Properties

Properties are identified using key values which are either strings or symbols. And each property has its own corresponding attributes. Each attribute is accessed internally by the JavaScript engine, which can be set through Object.defineProperty() and read through Object.getOwnPropertyDescriptor().

Types of Object Properties

There are 2 types of object properties: The data property and the accessor property.

A data property associates a key with a value, and has these attributes:

value
This is retrieved by a get access of the property, and can be any JavaScript value.
writable
This is a boolean value indicating whether the property can be changed with an assignment.
enumerable
This is a boolean value that indicates whether the property can be enumerated by a for…in loop.
configurable
This is a boolean value that indicates if the property can be deleted, changed to an accessor property, and have its attributes changed.

Accessing Object Value

Each individual value within an object can be fetched for later use through the following 2 ways:

1. Dot Operator

console.log(event.host);

Creates this output:

"Angeline"

2. Square Bracket

console.log(event["host"]);

Creates this output:

"Angeline"

More Objects

More objects can be found through the JavaScript standard library of built-in objects.

#2 Arrays

What are arrays?

Arrays are a type of regular object. What makes an array special is the particular relationships between integer-keyed properties and the length property. And the purpose of an array is to store multiple values in one variable in order to represent lists or sets.

How to create an array

To create an array, you need to specify the array elements as a comma-separated list that is then surrounded by square brackets.

Here’s an example:

let users = ["Angeline", "Bob", "Sarah", "George"];

console.log(users[0]); //Output: "Angeline"

What do arrays contain?

Each value/element in an array has a numeric position called its index, which starts from 0 and may contain data of any data type (primitive or complex).

What are array methods?

Array methods are inherited from Array.prototype, and they are methods to manipulate arrays. For example: indexOf() searches a value in the array and push() adds an element to the array.

Typed Arrays

Typed arrays are an array-like view of the underlying binary data buffer, which offers methods with similar semantics to array counterparts. Typed arrays is the umbrella term for a range of data structures, for example: Int8Array and Float32Array.

#3 Functions

What are functions?

Functions are regular objects with the additional capability of being callable, which means that it executes a block of code.

How do you create a function?

Because functions are objects, you can assign them to variables. Furthermore, functions can be used in any other place where other values can be used–meaning that they can be stored in objects and arrays as well.

Here’s an example:

const greeting = function() {
return "Hi!";
}

console.log(typeof greeting) //Output: function
console.log(greeting()); //Output: "Hi!"

Functions can also be passed as arguments to other functions and functions can be returned from other functions.

Here’s an example:

function greeting(name) {
return "Hi, " + name;
}
function displayGreeting(greetingFunction, userName) {
return greetingFunction(userName);
}

let result = displayGreeting(createGreeting, "Angeline");
console.log(result); //Output: "Hi, Angeline"

#4 Dates

The best choice to represent data is using the built-in date utility in JavaScript.

...

How do primitives and complex data types differ in action?

Coercion in JavaScript

Coercing Objects in Values

Objects are wrappers, which means that the value of an object is the primitive they are wrapped around. And then the object is coerced down to this value as necessary.

Boolean objects are a tricky case where the value will always be coerced into a true primitive boolean, even if the initial value of the object is falsey. The only two cases where a boolean object is coerced into a false primitive boolean is when the initial value is undefined or null.

This means that when working with a boolean object, in order to use the value within the boolean object, the value needs to be explicitly asked for.

Coercing Primitives

Primitive data types cannot be coerced for the assignment of a property value. An attempt to assign a property to a primitive will lead to JavaScript coercing the primitive into an object; however, this new object has no reference, so it will be immediately disposed of.

What is the advantage of using an object?

Objects are handy as they allow you to assign properties, but this is its only arguable practical benefit.

What is the advantage of using primitives?

Primitives have specific and well-defined purposes, which also means that redefining them as state holders is a confusing act that should be avoided. These variables are immutable, which means that they cannot be modified by tweaking the properties of an object wrapper.

...

Resources for Further Exploration:

What is a composite data type i.e. object in JavaScript?

TutorialRepublic: JavaScript Data Types

Hoisting - JavaScript Core Concepts

Angeline Wang — Wed, 26 Oct 2022 17:03:46 +0000

The Section 2: Functions & Methods of my JavaScript Core Concepts Series is divided into 6 Parts:

Part 1 Functions
Part 2 Classes
Part 3 Methods
Part 4 Callback Functions
Part 5 Scope
Part 6 Hoisting

Hoisting: Variables vs Functions & Classes

Part 1 What is Hoisting?

= Here are a few different definitions of Hoisting:

One of many operations a JS interpreter performs in the background
Variable/Function Declarations are hoisted to top of the Scope
= Hoisting only moves the Declaration
→ Any Assignments are left in place
Mental image to help us illustrate why we can access Functions & Variables before they are defined
Picture how code is reorganized before Execution

During Execution

= When Engine is actually executing our code
→ Our Function & Variable Declarations: No longer there at all
→ They have already been declared in a previous run

Impact of Hoisting

= Hoisting Functions & Variables is reason why we can use some of them before they are actually declared
→ Function & Variable Declarations are pulled to top of their scope
Try to access them: They’ve already been declared

…

Part 2 Hoisting Variables

JS Variables’ Behaviour

= 2 Parts

A Declaration
An Initialisation/Assignment

= Even when you declare and assign a Variable in one line like this: var name = 'Angeline'
→ The JS engine still treats this line of code as 2 separate statements
→ It treats it as if you wrote this:

var name;
name = 'Angeline';

What are the impacts of Block Scope?

ES6 gives 2 new Variable Declaration keywords: let and const
= Difference between let and const
→ Variables declared with ES6 Keywords are block-scoped
They are accessible only in code block they are defined in
= A code block
→ Separated by curly braces
Variables created with let or const are not hoisted
= Their definition is not pulled to the top like Variables declared with var

`var` Variable Declarations

= var Variable Declarations are hoisted AND fully initialized
→ With a Value Assignment of undefined by default

Variable Declared w/in a Scope

= Belongs to that Scope

Regardless of Location of Variable Declaration w/in a Scope

= All Variable Declarations are moved to top of their Scope (Global or Local)
→ This is called Hoisting

`let` Variables Declarations

= let Variable Declarations cannot be read/written until they are fully initialized
→ When are they fully initialized? Where they are actually declared in the code
→ let Variable Declaration is hoisted, but not initialized with undefined value (which is done by default with var variables)
→ let Declarations are not hoisted like var Declarations

`const` Variable Declarations

= Same behaviour as let variables

Hoisting In Action

= Variable/Function is not physically moved
→ Hosting is just a model describing what the JS engine does behind the scenes

What is Hoisted?

= (var) Variable & Function Declarations are hoisted
→ But Variable & Function Assignments are left in their place
→ Even if the Declaration and Assignment happen in the same line of code as in: var name = 'Angeline'

Reference before Declaration

= If you reference a Variable/Function before its Declaration
→ Expect a ReferenceError to be thrown

Referenced before Assignment

= Except a Default Value of undefined to be the Output
→ If var is used

Temporal Dead Zone

= Section from beginning of Block to actual Variable Declaration

Purpose

= Mechanism that ensures better coding practice
→ Forces you to declare a Variable before you use it

Compilation

Definition

= Internals of JS & how it actually works
→ V8 Engine increases performance by compiling JS to machine code before executing it

Application

= Engine makes multiple runs through our code
→ 1 of the early runs: It will declare all Functions & Variables
→ So when the code is executed: They will already be defined

Reference Error Prevention

= Make sure you are using only let and const for Variable Declaration

…

Part 3 Hoisting Functions

= Hoisting also affects Function Declarations

Function vs Variable Hoisting

= Only Declaration of the Variable is pulled to the top
→ Value Assignment: Stays where it is
→ Cannot access Value of a Variable the same way we can call Functions

Function Declaration vs Expression

= Difference: Check position of word function in the statement
→ If function is very 1st thing in the statement: It is a Function Declaration
→ Not function is not the first thing: It is a Function Expression

Hoisting of Declarations vs Expressions

Declarations

Hoisted completely
= Entire Function’s body is moved to the top
→ Allows you to call a Function before it has been declared
JS Engine
= Moves Declaration & its contents
→ To beginning of the Scope

Expressions

= Are not hoisted
→ When a Function is assigned to a Variable
Rules are the same as Variable Hoisting

= Only the Declaration is moved
→ While the Assignment is left in place

Caution w/ Function Expressions

= Variable Declaration will be hoisted
→ But Function assigned to Value not hoisted
→ Function will not be Hoisted

= Cannot be used before it is read
→ Actual Assignment of the Function as a Value stays where it is
→ So if we try to call the Function, we will get an Error

…

Part 5 Hoisting Priority

Function Declaration
Variable Declaration = Assignments: Variable or Function, are not hoisted, so are read later, and will overwrite Function and Variable Declaration Values

Create Function w/ Variable Assignment 1st

= Will still be read after Function Declaration

Code Example

var showState = function() {
    console.log(“Idle”);
};

function showState() {
    console.log(“Ready”);
}

showState();

= This above code is interpreted by the JS Engine like this:

function showState() {
    console.log(“Ready”);
}

var showState;

showState = function(){
    console.log(“Idle”);
};

showState();

Arrow Functions

= Interpreted the same way Function Expressions are in terms of hosting?

…

Part 4 Hoisting Classes

= Class Declarations
→ Hoisted similarly as Variables declared with let statement

Code Example

var user = new Person(‘Angeline’, 20);

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

= Person Class being used before Declaration
→ Produces a Reference Error: Similar to that in let Variables

Solution

= Must use the Person Class after the Declaration like this:

class Person {
    constructor(name, age) {#
        this.name = name;
        this.age = age;
    }
}

var user = new Person(‘Angeline’, 20);
console.log(user);

Alternative Way to Create Classes

= Using a Class Expression
→ Using var, let, or const Variable Declaration Statements

Code Example

console.log(typeof Person);

var user = new Person(‘Angeline’, 20);

var Person = class {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
};

= Person Class is hoisted as a Function Expression
→ But it cannot be used because its value is undefined

Solution

= Use Person Class after Declaration:

console.log(typeof Person);

var Person = class {
    constructor(name. age) {
        this.name = name;
        this.age = age;
    }
};

var user = new Person(‘Angeline’, 20);
console.log(user);

Scope - JavaScript Core Concepts

Angeline Wang — Wed, 26 Oct 2022 16:58:23 +0000

The Section 2: Functions & Methods of my JavaScript Core Concepts Series is divided into 6 Parts:

Part 1 Functions
Part 2 Classes
Part 3 Methods
Part 4 Callback Functions
Part 5 Scope
Part 6 Hoisting

JavaScript Scope

Part 1 What is Scope?

= Visibility of Functions & Variables in different parts of your code during Runtime
→ Part of the code where it is available

= Determines Variables’ accessibility (differs depending on programming language)
Variables defined inside a Function
→ Not accessible from outside Function

But can be used as many times
→ As their Function is used throughout Program

What does Scope look like in action?

= Working w/ Variables & Scope comes intuitively to most developers
→ Mental models help developers understand when something can be off limits

What determines a Variable's Scope?

= Location of Variable Declaration

…

Part 2 JavaScript Scope Types

1. Global Scope

What is Global Scope?

= Outermost scope
→ Any variables declared in thai scope become global variables
→ And are accessible from anywhere in the program

Code Example

const name = “Angeline”;

function sayHi() {
    console.log(`Hi ${name}`);
}

sayHi();

= Variable name is Global
→ Defined in Global Scope
→ Accessible throughout the Program

Use Case of Global Scope

= Discouraged in JavaScript
→ Can potentially be overwritten by other Scripts
→ Or from elsewhere in the Program

Global Variable Assignment w/in a Function

= Global Variable assigned a different Value inside a Function
→ Value only retained in boundaries of same Function

Outside the function

= The variable has as different value
→ One declared in the global scope
→ Will not get an error for using the same Variable Name

Undeclared Variables

= JS will not stop use of undeclared variables
→ Any point: You can assign a value to a variable without using const let or var
→ When this is done: Engine tries to look for the variable bubbling up to the global scope

If does not find it there:
= Creates a Global Variable for you

2. Local Scope

= Local scope has 2 variations:

#1 (Old) Function scope

= Variables can be accessed in boundaries of the function in which they are defined

var Variables
= Have the Old Function Scope
= Are either Globally Scoped, or Locally Scoped to Function defined in
→ Thus, it is not affected by Block Scope, so you cannot declare a new Locally Scoped Variable with the same name as one declared in the Global Scope

#2 (New) Block Scope – introduced w/ ES6

= Function scope is a special type of a block scope
= Variables can be accessed in the block in which they are defined
→ A block is separated by { and }

let & const Variables have Block Scope
= Creates a new, local scope for any block they’re declared in
→ Can also define standalone code blocks in JS
→ They similarly delimit a scope

New Block Scope Rules

Variables w/ Same Name
= Can be specified at multiple layers of nested Scope
Local Variables
= Gain priority over Global Variables
Local & Global Variable declared w/ Same Name
Local Variable takes precedence
= Declare a Local Variable & a Global Variable with same name

Local variable takes precedence
= When you use it inside a Function or Block
→ This behaviour is called Shadowing

Variables declared inside a Block = Belong to that particular Block → And become Local Variables

3. Lexical (Static) Scope

What is Lexical Scope?

= Created when a new Function is created
→ A new Lexical Scope is created

What is the purpose of Lexical Scope?

= Allows inner functions to access the scope of outer functions

= To find a Variable, the JS interpreter uses Lexical Scope:

Works starting from the currently Executing Scope
Works its way out until it finds the Variable in question
If Variable is not found in any Scope
= An exception is thrown

Lexical Scope of Variables

= Static/Lexical Structure of a Program
→ Determines Variable Scope

Lexical Scope of Functions

= No matter where a Function is called from
→ No matter how it’s called: Its Lexical Scope depends only on where the function was declared

What is Shadowing?

= Inner Variable shadows the outer
→ This is the mechanism used
→ For JS interpreter to find a particular Variable

How does Shadowing work?

Starts at innermost scope being executed at the time
Continues until 1st match is found
= No matter if there are other variables with same name in outer levels or not
Even with same name
= Local variable does not overwrite the global one after execution of function
→ And means that 2 different variables are created
→ BUT not always the case
If the local variable is assigned a value without the var keyword, it becomes a global variable
= Simply as a value assignment
→ This will overwrite the global variable with the same name
→ And the global variable will be officially reassigned

Nesting

= Function & Block scopes can be nested
→ Where there are multiple nested scoped:
Variable is accessible within its own scope (parent function)
Or from inner scope
→ Outside of its scope:
Variable is inaccessible

Need Variable inside a Function

Engine looks for it in Scope of current Function
Goes 1 level up in Function containing it
If not found, continues to go up
= Until it reaches the Global Scope
If Variable not found there
= Will get a ReferenceError

Assignment w/o Declaration

Prevent Overwriting Global Variables

= Always declare your local variables
→ Before you used them

Example
= Any variable declared with var keyword inside a function
→ Is a Local Variable: It is best practice to declare your variables

Strict Mode

= In strict mode, it is an error if you assign a value to a variable without first declaring the variable

…

Part 4 Best Practice

= Do not pollute the global scope

If a Variable is meant to be globally used:
= Declare it in the global scope
→ So intentions can be clear

If it is not meant to be globally used:
= Keep it inside the scope it is used in

How to master JS?

= Must look to build on top of those existing mental models
→ AND go into the specifics

= Though it is possible to write fine code without deep understanding of scope
→ Only those that have put in the time to read the small print
→ Can avoid pitfalls in trickieset of situations

…

Part 5 Hoisting Priority

= Hoisting happens in this order:

Function Declarations
Variable Declarations
→ Class Declarations are hoisted as Variables

Variable (& Class) Assignments
= Are not Hoisted
→ Will instead overwrite Declarations after code is read in cascading order

…

Resources for Further Exploration:

Sitepoint: Demystifying JavaScript Variable Scope and Hoisting By Ivaylo Gerchev

Hackernoon – Understanding JavaScript: Scope – By Alexander Kondov

Callback Functions - JavaScript Core Concepts

Angeline Wang — Wed, 26 Oct 2022 16:38:36 +0000

The Section 2: Functions & Methods of my JavaScript Core Concepts Series is divided into 6 Parts:

Part 1 Functions
Part 2 Classes
Part 3 Methods
Part 4 Callback Functions
Part 5 Scope
Part 6 Hoisting

Callback Functions

Part 1 What is a Callback Function?

= Callback: Name of a JS Function Convention
→ Not a tool w/ unique functionality

Here are a few definitions:

Function executed
= At end of execution of another function
Function passed into another Function as an Argument
= To be executed later
Function that runs asynchronously

Functions = Objects in JS
= They can take Functions as Arguments
→ & Can be returned by other Functions

Difference between Callbacks & most Functions
= Callbacks do not immediately return some result
→ They take time to product a result

Higher-Order Function

= Function that takes other functions as arguments
→ Function being passed in: Called a Callback Function

Code Example

const button = document.querySelector(‘button’)
button.addEventListener(‘click’, function(e) {
    this.classList.add(‘clicked’)
})

= JS listening for click event on button
→ Only calls the function in 2nd argument if event is detected

…

Part 2 What is the purpose of a Callback Function?

Store things to do at later time
= Order in which events occur: Does not work top-to-bottom
→ Skips around depending on when things complete
Dealing with tasks that get dispatched
= Go off and do something in the background
→ Then, complete successfully or abort due to failure

Callbacks are used in 2 different ways:

1st Way: Synchronous Functions

= Code is synchronous
→ If executes top-to-bottom, left-to-right, sequentially
→ Waiting until 1 line of code finishes
Before next line begins
→ Process continues until last line of code is executed

Callbacks in Synchronous Functions

= When want a part of code to be easily swapped w/ something else

Code Example

const numbers = [10, 11, 19, 40]
const getLessThanFifteen = num => num < 15
const getMoreThanTwenty = num => num > 20 

const lessThanFifteen = numbers.filter(getLessThanFifteen)

const moreThanTwenty = numbers.filter(getMoreThaTwenty)

Normal vs Async Functions

Normal Functions
= Allow you to use its return value

Async Functions that use callbacks
= Don’t return anything straight away

Waiting for Response
= Don’t want program to pause
→ So you store the code that should run afterwards
Inside a Function: Called a Callback Function

2nd Way: Asynchronous Functions

= Takes some time, happens in the future, not right now
→ JS needs to wait for something to complete
→ Will run rest of tasks given to it: While waiting

Code Example

= Asynchronous Function that takes a Callback to execute at later time

const twentySecondsLater = () => console.log(‘20 seconds passed!’)


setTimeout(twentySecondsLater, 20000)
console.log(‘Start!’)

= JS executes setTimeout
→ Then it waits for 20 seconds
→ And then logs ‘20 seconds passed!’

= Same time as waiting for setTimeout to complete in 20 seconds
→ JS executes `console.log(“Start!”)

…

Part 3 How do you create a Callback?

= There are 2 ways to create Callbacks:

1st Way: Anonymous Functions

Pass Callback Function Definition as an Argument
Define it in the Function Call
To do this, you pass in callback as the last Parameter of the Function
Then the Callback Function itself is defined in the 2nd Argument during the Function Call

Code Example

function createEvent(date, callback) { console.log(The event on ${date} has been created.`);
callback();
}

createEvent(“September 22nd, 2022”, function() {
console.log(The event is being displayed.)
})
`

2nd Way: Named Functions

Pass reference to Callback as an Argument
Or you can define the Callback Function elsewhere
= & Pass its reference as the 2nd Argument during the Function Call
You can also pass in any amount of arguments that the callback may need
= & Arguments passed into Callbacks
→ Make their way through to the Callback

Code Example

function createEvent(date, callback) { console.log(The event on ${date} has been created.`);
callback();
}

function displayEvent(){
console.log(The event is being displayed.);
}

createEvent(‘September 22nd, 2022’, displayEvent);
`

…

Part 4 What do Callbacks look like in-action?

= Asynchronous Callbacks are useful as a Solution to Blocking Behavior

= Usually used when there is a transfer of data when doing I/O
→ ie Downloading things, reading files, talking to database, etc.

Callback Queue

= Everything in the Stack is ran before moving onto the Callback Queue
→ Anything in a setTimeout() is ran with the Callback Queue
→ This means that even if something in the Callback Queue is never completed, the code keeps running

Is the Callback Queue for all Callbacks or only Async Callbacks?

Common Use Cases

When an event fires
= Event listeners
ie addEventListener
After AJAX Calls
= jQuery’s ajax method
ie jQuery.ajax
After reading or writing to files
= Node, ExpressJS
ie fs.readFile

Purpose of Callbacks

= Ensure response of Function is received/finished executing
→ Before executing other code

Example Use Case

= Make Requests to an API
→ Need to wait to receive a Response from Server
To act based on Response
→ Do not know if API Request is going to be successful

Code Example

T.get(’search/tweets’, params, function(err, data, response) { if(!err){ // What to do if API request successfully executes } else { console.log(err); } })
= After Response received
→ Callback is invoked
→ Twitter will either send an err Object
Or a response Object back to us

= Conditional w/in Callback
→ Uses Information
To determine if Request was successful or not
Then act accordingly

…

Part 5 What are the problems with Callbacks?

The biggest problem with Callbacks is Callback Hell

What is Callback Hell?

= Multiple Callbacks nested after each other
→ ie Doing an asynchronous activity
That depends on previous asynchronous activity

Example Scenario

= Usually, Callback Hell is found in the Backend
→ While using Node
→ Rare to see Callback Hell in Frontend JavaScript

= Pyramid shape with numerous })s at the end
→ Result of attempts to write JS so execution occurs chronologically
→ In JS, what occurs on 1st line will not necessarily finish before code in next line starts running
ie Async functions, setTimeout()s (which get ran after the call stack)

Why are Nested Callbacks bad?

= Code much more difficult to read

What is the solution to Callback Hell?

= To prevent Callback Hell, you can do these things:

1. Write Shallow Code

#1 Do not nest Anonymous Functions
= Name all Functions
→ Use Functions through reference to Names
→ Rather than writing out elaborate logic of anonymous function

→ Code will be easier to understand → B/c descriptive Names

If exceptions occur
= Have Stack Traces w/ Function Names
→ Bugs are easier to investigate

#2 Place all Functions at top-level program (‘below the fold’)
= Take advantage of Function Hoisting
→ Move all Functions to bottom of File
→ Then, move into another File: When & If the load demands

2. Modularize

#1 Write small Modules
= That each do 1 thing
→ Compile them into other Modules that do a bigger thing
→ ie Split code into couple of Files

#2 Isolated Files
= Used by loading them through a relative require()
→ Then, can move Functions into standalone Module

Code Example
= Create a new File for a series of Functions
→ Performing related functionality

ie Module named useruploader.js

`
module.exports.create = userCreate

function userSubmit (submitEvent) {
var name = document.querySelector(‘input’).value
request({
uri: “http://example.com/upload”,
body: name,
method: “POST”
}, postResponse)
}

function postResponse (err, response, body) {
var statusMessage = document.querySelector(‘.status’)
if (err) return statusMessage.value = err
statusMessage.value = body
}
`

`module.exports`

= Example of Node.js Module System
→ Works in Node, Electron & Browser

Benefit of `module.exports`

= This style of Modules is good because it works everywhere
→ Easy to understand
→ Does not require complicated config files or scripts

Using `module.exports` Modules

= After File is created
→ You need to require it
→ & Use it in your application specific code

Code Example

var userUploader = require(‘useruploader’) document.querySelector(‘form’).onsubmit = userUploader.submit

Benefits of Modularising

1. Comprehensibility

= Code required in app is only 2 lines
→ Allows new devs to more easily understand you code
→ Won’t need read through details of all Functions w/in Module: When trying to grasp what Program is trying to do

2. Error-handling, test-writing, creating a stable and documented public API

3. Refactoring

4. Reuse

= W/o duplicating code
→ Can easily be shared on Github or npm

How do you create good Modules?

1. Move repeatedly used code into a Function

2. When Function/group of Functions gets large enough

= Move them into another File
→ Expose them using module.exports
→ Which can be loaded w/ a relative require

3. Code that can be used across multiple projects

= Give it a Read.me, tests, and package.json
→ Public it to Github & npm

4. A Good Module

= Small & focuses on 1 problem

5. Module Should Not

= Have > 1 level of nested Folders full of JS Files
→ If it does: It is likely doing too many things

6. Reference Examples of Good Modules

= Get a good idea of what they look like

7. If Module takes > a few minutes to understand

= Not Good

…

Part 6 How should Callbacks be used?

= Write Stable Code
= Handle Every Error
→ You should handle every single error
→ In Every One of your Callbacks

How can you handle every error?

a. Plan on errors always happening

= Can never know when Errors happens
→ Must make code stable

b. Node.js Style

= 1st Argument to Callback
→ Always reserved for an Error
→ Use error as 1st Argument Convention
→ Instead of adding it as the 2nd Argument

= Reminds you to handle your errors

c. Code Linters

= Help remind you to handle Callback Errors
→ Show you every Callback in your code
→ With an Unhandled Error

Types of Errors

#1 Syntax Errors

= Caused by Programmers
→ Usually caught when trying to 1st run program

#2 Runtime Errors

= Caused by Programmer
→ Code ran, but had a bug that caused something to mess up

#3 Platform Errors

= Caused by
→ ie Invalid File Permissions, Hard Drive Failures, no Network Connection etc.

...

Resources for Further Exploration:

JavaScript: What the heck is a Callback? By Brandon Morelli

Callback Hell: A guide to writing asynchronous JavaScript programs

What the heck is the event loop anyway? | Philip Roberts | JSConf EU

Methods - JavaScript Core Concepts

Angeline Wang — Wed, 26 Oct 2022 16:17:08 +0000

The Section 2: Functions & Methods of my JavaScript Core Concepts Series is divided into 6 Parts:

Part 1 Functions
Part 2 Classes
Part 3 Methods
Part 4 Callback Methods
Part 5 Scope
Part 6 Hoisting

JavaScript Custom Methods

Part 1 What are Methods in JavaScript?

= Functions connected to an Object (becoming part of the Object)
→ Behaviors of the Object

= The fact that methods are usually inside an Object
→ Is what makes it different to a function

Part 2 How do you create Methods?

= Assign a created Function to an Object

Here are 3 ways to do it:

1st Way: Using a constructor

Code Example

function Event(date) {
    this.date = date    
    this.displayEvent = function(){
        return ‘The event is on ‘ + this.date
    }
}

2nd Way: Without a Constructor

Code Example

var flat8 = {date: ‘September 27th, 2022’}
flat8.displayEvent = function(){
    return ‘This event is on ‘ + this.date
}

3rd Way: Using one big Object

Code Example

var flat8 = {
    date: ‘September 28th, 2022’
    displayEvent: function(){
        return ‘This event is on ‘ + this.date
}
}

...

JavaScript Built-in Methods

Below, I'll be going over a couple useful String Methods, Math Methods, Array Methods, and Object Methods.

These should provide a brief overview of functionality offered...

Part 1 String Methods

Where can you find Built-in Methods?

MDN Web Docs
= Core document for the web, Javascript, CSS
= Maintained by Mozilla for a while
→ Look for: "String" → "Instance Methods" → "Code Examples"

View String Methods in VSCode

= Type “myName.”

String Methods vs Properties

Example: myName.length = Popular
= .length is a Property
→ Returns number of characters w/in string

Example: myName.toUpperCase()
= .toUpperCase is a Method

Concatenating Strings

= Adding them together

Example: const myName = firstName + secondName;
= Adds them tightly together

If you want space between strings
= Add them within a string

`.toUpperCase()`

= Logs all characters of string in uppercase
Does not change original variable value

First Character Uppercase & All Else Lowercase

= Options to complete:

a. language.replace(“j”, “J”)

b. language.charAt().toUpperCase() + language.slice(i)
= charAt: Finding the character at that position
= slice: Takes a beginning index & an optional ending index
→ Including & excluding the number is different for the two
${langugae.charAt().toUpperCase()}${language.slice()}

Character Codes

= Where the character is on this table: www.AsciiTable.com

Part 2 Math Methods

Display in VSCode Color

= Orange

Math.floor

Takes a Floating Point Number
Eliminates Decimals
Rounds down to nearest Whole Number less than it

Math.ceil

Takes Floating Point Number
Eliminates Decimals
Rounds to nearest Whole Number more than it

Math.round

= Rounds to nearest Whole Number
→ Depending on Decimal Amount

Math.random

= Generates a Random Number between 0 & 1
→ Numbers generated are not truly random
→ Have scenes to create pseudo-random numbers

View Math Methods

= To apply Math methods to Math objects
→ You can type “Math.” into VSCode
→ And you can find what you need in the list

Practical Uses

Docs & Autocomplete
Memorizing Objects & Methods

...

Part 3 Array Methods

How do you access Array Methods?

= Arrays are tied to Array.prototype
→ Array methods work on Arrays & any Array-like Objects

Here are a few useful Array Methods…

`Array.prototype.indexOf()`

Syntax

array.indexOf(searchElement, *from index of*)

Purpose

= Searches Array for an Element including a specific value

Application

Option: Provide a starting Index to Function
No Provided Start Index: Search will begin from Index 0

Returns

= Lowest Index greater than or equal to start of Array
→ Where Element is equal to given value
→ AKA the Index of the 1st Element equal to the given value

What happens if no match is found?

= Function returns: -1

Examples:

var events = [‘Party’, ‘Dinner’, ‘Show’, ‘Movie’, ‘Dance’];

console.log(events.indexOf(‘Dinner’)); // Logs: 1
console.log(events.indexOf(‘Show’, 1)); // Starts searching at element at index 1, and Logs: 2

Array of events, and there might be multiple of a given event

→ indexOf() can be used to find all Instances of ‘Party’ in the array of events
→ Executing the code displays that ‘Party’ is found at Index 0 and 4 of the Array

Example

var events = [‘Party’, ‘Dinner’, ‘Show’, ‘Movie’, ‘Dance’, ‘Party’];
var event = ‘Party’;
var eventLocation = events.indexOf(event);
while (eventLocation != -1) { // While there exists an event called ‘Party’ within the events array
    locatedat.push(eventLocation);
    eventLocation = events.indexOf(event, eventLocation + 1); // Starts searching for other instances of ‘Party’ AFTER the index of where the first instance of ‘Party’ was found
}
console.log(locatedat); // Logs: 0, 4

Using a Custom Function to ensure that each Event is within the array of events, and if they do not exist, we add them to the array:

Example

function existingEvents(events, event) {
    if (events.indexOf(event) ===  -1) { // If the event does not exist within the array of events 
        events.push(event);
        console.log(‘The new events are ’ + events);
} else if (events.indexOf(event) > -1) {
    console.log(event + ‘ is already part of the events.’)
}
}

var events = [‘Party’, ‘Dinner’, ‘Show’];

existingEvents(events, ‘Party’); // Party is already part of the events.
existingEvents(events, ‘Movie’); // The new events are Party,Dinner,Show,Movie 
existingEvents(events, Dance); // The new events are Party,Dinner,Show,Movie,Dance
existingEvents(events, ‘Parade’); // The new events are Party,Dinner,Show,Movie,Dance,Parade
existingEvents(events, ‘Dinner’); // Dinner is already part of the events.

`Array.prototype.slice()`

Syntax

array.slice([beginning index], [ending index])

Purpose

Accepts a start and end Argument
Only looks into the Array from start (inclusive) to end (non-inclusive) Index
Eliminates a specific amount of Elements

No End Value Provided
= Returns rest of Array
→ Beginning from provided start point

Mutates Original?

= No

Returns

= Returns a new Array including all Elements of original Array
→ From Element specified by starting point provided
→ And up to but not including Element specified by ending point provided

Example

var events = [‘Party’, ‘Dinner’, ‘Show’, ‘Movie’, ‘Dance’, ‘Party’];
var choppedEvents = events.slice(2,3);

console.log(choppedEvents); // Show

= Slice Method needs to be assigned to a Variable upon invocation in order for the Result to be recorded
→ The elements being sliced will be picked out and recorded
→ In order to return only one element, the element’s index, along with the index after it, needs to be provided

`Array.prototype.toString()`

Syntax

array.toString()

Purpose

Converts all Elements in Array to Strings
Outputs 1 big String
= As a comma separated list of items

`Array.prototype.filter()`

Syntax

array.filter(*callback function*, *arguments*)

Purpose

= Filters down a collection of Elements
→ Based on a given test

In order to call filter()
= Need to pass a Callback
→ Callback is executed against every Element in Array

If Callback results in true value
= That particular Element is added to a NEW Array
→ Leaving original Array unchanged

Mutate Original?

= No

Returns

= New Array
→ Containing only Elements of original Array that returned true when provided Callback ran

`Array.prototype.join()`

Syntax

string = array.join([separator = ‘,’])

Purpose

Converts each Element of Array to a String
Then concatenates those Strings together

Application

If separator string provided
= Gets inserted between all Elements in final String

Returns

String that results from converting each Element of original Array to a String
Then joins them together
= With separator String between Elements

`Array.prototype.splice()`

Syntax

array.splice(*starting index*, *number of elements to delete*, *element to insert in place of deleted*)

Purpose

Delete 0 or more Elements
Beginning from provided start location
Replaces those Elements with 0 or more new values provided
Existing items in Array are shifted
= As needed to make room for any added or deleted Elements

Mutates Original?

= Yes, it modifies the original Array directly

Returns

= Returns an Array containing any Elements that may have been deleted from Array

`Array.prototype.forEach()`

Syntax

array.forEach(*callback function*, *arguments*)

Purpose

= Executes a provided Function
→ On each Element of Array

Returns

= No return value
→ Does not return the original Array

Application

= Related to .map(), filter(), every(), and some()
→ Because they share some related details

All expect a Callback Function as 1st argument
All check length of array before looping

Optional 2nd Argument
= Way to specify the this value for Callback Function

If Callback Provided
= Adds Elements to Array during execution
→ Elements are not included for looping by forEach()

If Callback changes original Array values
= Before they are looped over
→ Those changed values will be passed during Callback execution

Mutates Original?

= Yes

`Array.prototype.concat()`

Syntax

var newArray = oldArray.concat(value1, value2, value3)

Purpose

Creates new Array which is result of adding supplied Arguments to original Array
Original Array left intact
New Array is original plus any added Elements

Mutates Original?

= No

Application

Any Arguments in concat() Function are Arrays
Elements of the supplied Array are added
= Rather than entire Array itself
→ So you are adding all those Elements
→ Rather than adding an Array as one Element within an Array

Returns

= A new Array
→ Which is created by adding each of the supplied Arguments to original Array

`Array.prototype.shift()`

Syntax

array.shift()

Purpose

Removes & Returns 1st Element of original Array
All remaining Elements in Array get shifted 1 slot to the left = To fill hole created by removing 1st Element

Mutates Original?

= Yes

Application

If apply function to empty Array
= Does nothing
→ Simply returns undefined
= Does not create a new Array
→ Modifies original array directly

Returns

= Returns 1st Element from original Array

`Array.prototype.unshift()`

Syntax

array.unshift(*element1*, *element2*)

Purpose

Direct opposite of shift()
Inserts any Arguments passed into beginning of Array
All existing Elements need to shift to right to accommodate new Elements
Each Argument passed to unshift() gets added
= In order starting from Index 0
Modifies original Array directly

Mutates Original?

= Yes

Returns

= New length of the Array

`Array.prototype.map()`

Syntax

array.map(*callback function*, *arguments*)

Purpose

Loops over every Element in Array
Executes a Callback Function on each item
After map() has completed looping through Array
Takes results from each Callback applied to each Element
Then returns all those results as an Array
Left with: New Array w/ updated Values & Old Array w/ original Values
The 2 Arrays are equal in length

When Callback Invoked
= Done so with 3 arguments:

Value of element
Index of element
Array object being traversed

Optional 2nd Parameter Provided
= Used at the this value for each execution of the Callback

Application

map() vs forEach()
= Seem like same
→ But different

forEach()
= Iterates over Array
= & Applies some operation with side effects to each array member
ie Saving each one to the database or Some other side effect

map()
= Iterates over Array
= & Updates each member of Array
→ Returns: Another array of same size → With transformed members
ie Converting array of strings to all lowercase

Returns

= Returns a new Array
→ With Elements computed by provided Callback Function

Use Cases

= A lot in professional software

`Array.prototype.sort()`

Syntax

array.sort([compareFunction])

Purpose

Applies the sort directly on original Array
No copy is made
Optionally provide a Callback Function
= To create custom behavior for tne sort

Mutuates Original?

= Yes

Returns

= Reference to original Array

Application

No Callback Function Provided
= Function will 1st convert all elements to strings
→ Then sort based on something called Unicode code point value
→ Alphabetical
→ But with some special rules
ie Capital letters coming before lowercase

Example

Without Callback

var names = [‘Angeline Wang’, ‘Paul Smith’, ‘Judy Palmer’, ‘Tracey Chan’];
names.sort(); // Sorts the elements into alphabetical order

var nums = [1, 10, 2, 21, 33, 04, 12, 09, 300];
nums.sort(); // Sorts numbers by unicode code point value, so not directly by chronological order: For example, 10 comes before 2 in Unicode code point order

var usernames = [‘223angeline’, ‘angelinewang’, ‘4paulsmith’] ;
usernames.soft();
// In Unicode, numbers come before uppercase letters, which come before lowercase letters 

console.log(names);
// [“Angeline Wang", "Judy Palmer", "Paul Smith", "Tracey Chan"]

console.log(nums);
// [1, 10, 12, 2, 21, 300, 33, 4, 9]

console.log(usernames);
// [‘223angeline’, ‘4paulsmith’, ‘angelinewang’]

If Callback not provided to sort method
= Ordering may not be what you expect: B/c unicode code point order
→ Rules for ordering in Unicode are a bit unique
→ ie Numbers come before uppercase letters, uppercase letters come before lowercase letters
→ Array of numbers is converted to Strings, before sorting: So this is why 33 comes before 4 & 9 in above example

With Callback

= And now sorts in the order for numbers you’d expect

var nums = [1, 10, 2, 21, 33, 04, 12, 09, 300];
nums.sort(numsasexpected);

function numsasexpected(one, two) {
    return one - two;
}

console.log(nums);
// [1, 2, 4, 9, 10, 12, 21, 33, 300]

`Array.prototype.pop()`

Syntax

array.pop()

Purpose

Opposite of push()
Removes last Element from an Array
Decrements length of Array
Returns value removed from Array

Application

= If you apply pop() to an empty array
→ Will return undefined

Returns

= Last Element of Array it is called on

`Array.prototype.reduce()`

Syntax

array.reduce(*callback function*, *initial value*)

Purpose

Accepts a function as 1st parameter
Acts like a binary operator
Callback Function takes 2 values
Operates on them
Returns a value
Number of times Callback Function runs
= Always 1 less than total length of original Array

Application

Example: If original Array has length of 10
= Callback will run 9 times
→ Final result: 1 combined Value

Returns

Reduced value of Array
This is the return value of the last time the Callback Function is executed

Example

= Execute .reduce() over values inside a simple array of objects

var users = [
    {   
        name: ‘Stacey’,
        university: ‘King’s College London’,
        course: ‘Law’,
        degreeLevel: ‘BA’,
        age: 21,
        partiesHosted: 2
    },
    {   
        name: ‘Tom’,
        university: ‘King’s College London’,
        course: ‘Business’,
        degreeLevel: ‘BA’,
        age: 21,
partiesHosted: 4
    },
    {   
        name: ‘Drake’,
        university: ‘King’s College London’,
        course: ‘Business’,
        degreeLevel: ‘BA’,
        age: 22,
        partiesHosted: 2
    },
    {   
        name: ‘Emily’,
        university: ‘King’s College London’,
        course: ‘Social Sciences’,
        degreeLevel: ‘MA’,
        age: 19,
        partiesHosted: 2
    }
];

var totalParties = users.reduce(function (prev, current) {
    return prev + current.partiesHosted;
}, 0);

console.log(‘Users have a cumulative of: ’ + totalParties + ‘parties hosted!’);
// Users have a cumulative of: 10 parties hosted! 

var degreeLevelTotals = users.reduce(function (groupedByDegreeLevel, user) {
    var degreeLevel = user.degreeLevel;
    if (!groupedByDegreeLevel[degreeLevel]) {
        groupedByDegreeLevel[degreeLevel] = 0;
    }
    groupedByDegreeLevel[degreeLevel] += user.partiesHosted;
    return groupedByDegreeLevel;
}, {});

console.log(‘Our users have ’ + degreeLevelTotals[‘MA’] + ‘ parties hosted by masters students and ‘ + degreeLevelTotals[‘BA’] + ‘ parties hosted by bachelors students!’);

// Our users have 2 parties hosted by masters students and 8 parties hosted by bachelors students!

var usersByDegreeLevel = users.reduce(function (groupedByDegreeLevel, user) {
    if (!groupedByDegreeLevel[user.degreeLevel]) {
        groupedByDegreeLevel[user.degreeLevel] = 0;
    }
    groupedByUsers[user.degreeLevel]++;
    return groupedByUsers;
}, {}); 

console.log(‘We have ’ + usersByDegreeLevel[‘MA’] + ‘ user(s) completing a masters degree, and ’ + usersByDegreeLevel[‘BA’] + ‘ users completing a bachelor's degree!’);

// We have 1 user(s) completing a masters degree, and 3 users completing a bachelor’s degree!

`Array.prototype.some()`

Syntax

array.some(*callback function*, *arguments*)

Purpose

Runs provided Callback on each Element in the Array
If Callback returns true even once
= Function stops straight away
→ And returns true
If ALL Callback Iterations return false
= Function returns false

Application

Takes a Callback as 1st Argument
Takes an Optional 2nd Argument
If 2nd Argument Provided
= Specifies this value for invocations of supplied Callback

Returns

= Returns either true or false
→ At least 1 item in array must return true
→ For Function to return true

Example

function containsParty(element, index, array) {
    return element === ‘Party’;
} 

var eventsThisWeek =  [‘Party’, ‘Show’, ‘Dinner’, ‘Show’, ‘Movie’, ‘Dance’, ‘Party’];
var eventsNextWeek =  [‘Show’, ‘Dinner’, ‘Show’, ‘Movie’, ‘Dance’];

console.log(eventsThisWeek.some(containsParty)); // true 
console.log(eventsNextWeek.some(containsParty)); // false

Array.prototype.lastIndexOf()

Syntax

array.lastIndexOf(*searchElement*, [*fromIndex = arr.length-1*])

Purpose

Tests for Strict Equality
Searches through an array backwards for the value provided in the first argument
After the function locates the value
Returns the index position of where it exists in the array

Optional 2nd Argument not provided
= Search will begin from that point
→ And goes backwards

2nd Argument is Provided
= Search starts at end of Array
→ If no match is found
→ -1 is returned

Returns

Highest index position (first found, counting from end)
= That is less than or equal to the start of the array
Element needs to match strictly equal to value provided
If no match, then returns -1

Example

Find One

var events = [‘Party’, ‘Show’, ‘Dinner’, ‘Show’, ‘Movie’, ‘Dance’, ‘Party’];

console.log(events.lastIndexOf(‘Show’)) // Finds the last instance of ‘Show’ and logs: 3
console.log(events.lastIndexOf(‘Party’)) // Starts looking from end of array and logs: 6
console.log(events.lastIndexOf(‘Dance’, 3)); // Starts looking at index position 3, and looks backwards, and logs: -1 because there are no instances of ‘Dance’ at or before the index position 3 
console.log(events.lastIndexOf(‘Show’, -4)); // Starts looking at index position 3, and finds the element there so logs: 3

Find All

var locatedat = [];
var events = [‘Party’, ‘Show’, ‘Dinner’, ‘Show’, ‘Movie’, ‘Dance’, ‘Party’];
var event = ‘Show’;
var eventLocation = enemies.lastIndexOf(event);
while (enemyLocation != -1) {
    locatedat.push(enemyLocation);
    eventLocation = events.lastIndexOf(event, eventLocation -1);
}
console.log(locatedat); // 3, 1

`Array.prototype.reduceRight()`

Syntax

array.reduceRight(*callback function*, *initial Value*)

Purpose

Works same as reduce() = But w/ 1 difference: reduceRight() counts array elements from right to left → Counts from highest index to the lowest index number → Rather than left to right, lowest to highest index number

Example

var sum = [0, 1, 1, 2, 3, 5, 8].reduceRight(function (a, b) {
    return a + b;
});

console.log(sum); // 20

var flat = [[0, 10], [20, 30, [1, 2, 3, 4]], [40, 50]].reduceRight(function (a, b) {
    return a.concat(b);
}, []);

console.log(flat); // [40, 50, 20, 30, [1, 2, 3, 4], 0, 10]

Array.prototype.every()

Syntax

array.every(*callback function*, *arguments*)

Purpose

Test if a condition is true for ALL Elements in Array
Expected to provide a Callback Function
Callback Function runs on each Element in Array
= From lowest to highest index
If all Iterations return true when Callback runs
= every() function itself will return true
If even one iteration of Callback returns false
= every() stops right away & returns false

Example

function greaterThan10(element, index, array) {
    return element > 10;
}

arr1 = [11, 12, 13, 14];
arr2 = [20, 21, 12, 9];

console.log(arr1.every(greaterThan10)); // true
console.log(arr2.every(greaterThan10)); // false

`Array.prototype.reverse()`

Syntax

array.reverse()

Purpose

Reverses order of Elements in Array
Mutates original Array
No new Array created or returned

Mutates original?

= Yes

Application

Many references to particular Array in the Program
And you reverse the array
= All references now also see an array which has been reversed
→ Leaving dependent operations affected

Example

var events = [‘Party’, ‘Dinner’, ‘Show’, ‘Movie’, ‘Dance’, ‘Party’];
events.reverse();

console.log(events);
// [‘Party’, ‘Dinner’, ‘Show’, ‘Movie’, ‘Dance’, ‘Party’]

= Note how this method invocation does not need to be attached to a variable since it directly works on the original

...

Part 4 Object Methods

How do you access values in an Object?

= Since values in an Object are not indexed
→ They are accessed through their Keys

`.forEach()`

= Array Iterator Method that CANNOT be used to iterate over the keys on an Object
→ Instead, a for in Loop should be used instead…

`for in` Loop

= This is similar to a forEach Loop
→ Purpose: Iterate over an Object

Parameters

1. Key

= All Keys in that Object

2. Object

= Name of the Object

Syntax

for (let key in car) {
    console.log(car[key])
}

Purpose

= Iterates over each key/value pair

During Each Iteration
The Key = Whatever is incrementing
ie car.type = (let type in car), car.color = (let color in car)

Log Value of a Key of an Object

Syntax

console.log(car[key])

`Object.keys`

= Returns all the keys within the Object = An Array

`Object.values`

= Returns all the values within the Object = An Array

`Object.entries`

= Returns all the key/value pairs = An Array of Arrays

Resources for Further Exploration:

Most Useful JavaScript Array Functions

Classes - JavaScript Core Concepts

Angeline Wang — Wed, 26 Oct 2022 15:01:15 +0000

The Section 2: Functions & Methods of my JavaScript Core Concepts Series is divided into 6 Parts:

Part 1 Functions
Part 2 Classes
Part 3 Methods
Part 4 Callback Methods
Part 5 Scope
Part 6 Hoisting

Classes

Part 1 What are Classes?

= Template for creating Objects
→ Record data using logic that works through the data

How are JavaScript classes created?

= They are created on Prototypes
→ And include some syntax & semantics that are not shared with ES5 class-like semantics

What is the purpose of Classes?

= Class declaration introduced in ES2015
→ Just syntactic sugar: On top of existing prototype-based inheritance
→ Does not add anything new to JavaScript

= Classes can add Properties, Methods & Functions
→ Methods created can be ran later: After the Constructor/Object is created
2 Types of Methods:
1. Instance Methods
= Can be called by Instances

2. Static Methods
= Can be called by the Class

How do you define a `Class`?

= 2 Ways to define a Class:

1st Way: Class Expressions

#1 Can be Named or Unnamed

= Name given: Is local to Class’ body
→ But can be accessed through the name property of the Class

#2 Need to be declared

= Before they can be used
→ Due to hoisting restrictions

Body of a Class
= W/in curly braces
→ Where Class members
ie Methods & Constructor are defined

Execution in Strict Mode
= Stricter syntax for optimal performance
→ Normally silent errors thrown
→ Particular keywords reserved for ECMAScript future versions

2nd Way: Class Declarations

= Using Class keyword
→ Followed by the name of the Class

Code Example

class Event {
    constructor(date, time) {
        this.date = date;
        this.time = time;
    }
}

Function Declarations vs Class Declarations

Function Declarations
= Can be called in code before they are defined

Class Declarations
= Need to be defined before they can be constructed
→ Because the Class is hoisted: But its values are not initialized

Class Re-definition

= Re-defining a Class is not possible
→ An Attempt to redefine a Class will result in: SyntaxError
Alerting you that you are trying to declare a variable that has already been declared

...

Part 2 Constructor Methods

Purpose of Constructors & Prototypes

Act as JavaScript’s main method of defining similar & related Objects
Bring similar functionality facilitated through Classes in other languages
= Does not add extra functionality
→ Thus Class Declaration made available through ES2015: Just syntactic sugar for existing prototype-based inheritance
Rapidly accumulate many different Objects
= By calling a Constructor different times w/ different arguments
→ Reflective of pattern used in built-in constructors

What are Constructor Methods?

= Here are a few definitions:

Mold for creating multiple Objects w/ same Properties & Methods
Special Method for creating & initializing an Object created w/ a Class
= Can only be 1 special method w/ name constructor in a Class
Any Function that can be used as a Constructor
= No specific distinction within the language
→ Function can be written to be used as a Constructor, to be called as a Normal Function, or it can be used either way
ie JS functions: Are also Object Constructors

Example

function Event(date, time) {
    this.date = date;
    this.time = time;
}

Types of Constructors

Type #1: Built-in constructors

= Accessible directly in execution environment at runtime

#1 Object()

#2 Array()

#3 String()

#4 Number()

#5 Boolean()

#6 Date()

#7 Function()

#8 Error()

#9 RegExp()

Creation of Values

= There are 2 ways to create values:

Object Literals
Constructors

Object literals vs Constructors

1 Barely any difference

= Can call Methods on Literals
→ Which means JavaScript will turn the Literal into a temporary Object
→ Helping the Method perform the operation
→ Temporary Object is then trashed when it is no longer useful

2 Why are Object Literals better?

a. Easier to read

b. Faster to run
= Can be optimised at parse time
Simple Objects

Example:
Instead of using this...

var obj = new Object(5);
obj.toFixed(2);

You should use this...

var num = 5;
num.toFixed(2);

Type #2: Custom Constructors

= Define Properties & Methods for your own type of Object

Custom Constructor Creation

= Just like creating a Function
→ Capitalize their name: As convention & for identifiability

= A Constructor can also use the super keyword
→ To call the Constructor of a superclass

Scope-safe Constructors

What are scope-safe constructors?

= Made to return same result
→ No matter if it’s called with or without new
→ Protects against mistake of omitting new

What is the purpose of scope-safe constructors?

= New programmers can accidentally call a Constructor
→ W/o new keyword
Resulting in bugs

Which constructors are scope-safe?

= Majority of Built-in Constructors
→ ie Object, Regex and Array

= They use a unique pattern to call the Constructor
→ So that in the case new is not used

= Returns a proper Instance of the Object
→ Through calling Constructor again w/ new

Make a Custom Constructor scope-safe

Code Example

function Event(date, time) {
    if (!(this instanceof Event)) {
        return new Event(date, time);
    }
    this.date = date;
    this.time = time;
}

var event1 = new Event(“September 24th, 2022”, “12:20PM”);
var event2 = Event(“September 24th, 2022”, “12:20PM”);

= Now both these variable definitions (with and without new), will return an instance of Event

`Object.defineProperty()` Method

= Can be used w/in a Constructor
→ To execute the Property setup needed

Here’s a Use Case…

User Input Manipulation

= Before assignment to an Object
→ Manipulate Value given through date Parameter into a String
Consisting of Date: followed by the Value
→ & Assign it to the date property of Object created

Purpose

= Need to manipulate user-given Values
→ Into a suitable/consistent format
Before saving it to an Object

Code Example

function Event(date) {
    Object.defineProperty(this, ‘date’, {
        get: function() {
            return ‘Event: ‘ + date;
        },
        set: function(newDate) {
            date = newDate;
        },
        configurable: false
});
}

Accessor Properties

= Do not contain any Properties or Methods
→ Create a Getter to call when Property is read
Expected to return a Value
→ Create a Setter to call when Property is written to
Receives Value assigned at Getter as an Argument

= Entire Constructors: Containing Object.defineProperty() Method
→ Returns an Instance whose date property can be set or changed in Object.defineProperty() Method
→ But cannot be deleted

Above Example

After receiving the value of date
Getter adds Date: to beginning of the Value
Returns that
Object.defineProperty creates these accessor properties

Purpose of Calling Constructor

= So that JavaScript can perform these 4 Tasks:

Create a new Object
Set constructor Property of the Object that is the Variable the Constructor is assigned to
= This Property is different from Standard Properties
→ Because it will not be listed
→ And it cannot be overwritten
Underlying constructor property
= Something that cannot be set manually
→ Can only be set up by JavaScript when new keyword is used
Object is created to delete Event.prototype in the above example
JavaScript calls Event()
= In the Context of the new Object
→ Result of new Event: Is the new Object

How to Call a Constructor

Create an Instance of it
= Using the new keyword
→ And assigning it to a Variable
Constructor assigns given Arguments to Parameters indicated in Initial Definition
Then Constructor assigns given Arguments to the relevant Properties

Code Example

function Event() {

}

var myEvent = new Event();

When to use a Constructor

= Creating various similar Objects
→ With same Properties & Methods

Example Use Case

= Creating an Event

If Function exists
= All need to do is use a new statement

If the new Keyword is not used
= Alteration of Global Object will occur
→ Instead of the newly created one

W/o new
= Calling a Function w/o a Return Statement
→ this in the Constructor points to Window
→ Instead of flat8

Thus, 2 Global Variables are created
W/ new
= Context is switched from Global (Window)
→ To Instance correctly pointing to flat8

Code Example

var flat8  = new Event(‘September 18th, 2022’)

`new` not used & in Strict Mode

= Code would throw an Error
→ B/c Strict Mode designed to protect from accidental calls of a Constructor w/o the new keyword

Check if Object is Instance

= There are 2 ways to see if an Object is an Instance of another:

1st Way: `instanceof` Operator

= Right side of the operator must be a function
→ Even if the prototype.constructor is reassigned, and the constructor is lost
→ instanceof operator will still have the accurate information

Code Example

Check a new Event has been created:

flat-8 instanceof Event

= This will return true

2nd Way: `constructor` Property

= constructor property of any object
→ Will point to the constructor function that created it
→ This property is inherited from its prototype

Code Example

myEvent.constructor === Event;

= Returns true if myEvent is an instance of Event

Warning

= Using the constructor property to check the type of an instance
→ It can be overwritten: So it is bad practice

Constructor vs Function Creation

= When writing a Constructor
→ You should use it like a Constructor

= When writing a Function
→ You should use it like a Function

Call as Function w/o `new`

Code Example

= Call Event as a Function w/o using new

Event(‘September 18th, 2022’)

= Returns undefined
→ Creates a date global variable
Overriding existing date variable
→ Not what we want

Call Function as Function w/o `new`

= this is set to the Global Object
→ Which is the Window object
→ Which is the Browser

Polluting Namespace

= You should prevent pollution of the namespace
→ This is done by not creating Global Variables

= Confirm if this is an Event
→ And if it is not, use new to create an Event
→ And return it

Code Example

function Event(date) {
    if(!(this instanceof Person))
        return new Event(date)
    this.date = date
}

Benefit of Constructor Usage

= To create Methods (instead of creating one big object)

→ Inheritance

Inheritance in JavaScript

= Inheritance in JS is different to inheritance in traditional Object-oriented languages
→ Bc it uses Prototype Inheritance

...

Part 3 Prototype

What is the `prototype`?

Here are a few definitions:

A Property
= That all Functions automatically get
An Empty Object
= Receives some special treatment

Object created through Constructor

Creates its own prototype Object
Own prototype Object inherits all Properties of its Constructor’s prototype
= Constructor’s prototype Object is the Parent of its own prototype Object
Any Properties set on own prototype Object
= Can override inherited Properties from Constructor’s prototype

New Property

= Setting a New Property to prototype Object on the Constructor
→ Will be passed down to any Objects created by Constructor

Code Example

Event.prototype.totalLength = 4;
flat8.totalLength; //This will output 4

Properties created on `prototype`

= Passed down to Instances
→ But can always be overridden on the Instance itself

Code Example

flat8.totalLength = 10;
flat8.totalLength; //Now this will output 10

Prototype Inheritance

= In place of Classes, JS uses the prototype
→ Allows Inheritance to happen

If Object has many of Properties
= And a Special Parent Property called the prototype of the Object
→ JS Objects inherit all Properties of its Parent
→ These Properties can be overridden by setting the Property on itself

Define Methods on Objects

Most Memory Efficient

Declare methods on the prototype
Ensuring only 1 displayEvent is ever created
And it is shared between all the Events created
= Done by making Event.prototype their parent

Code Example

function Event(date){
    this.date = date
}
Event.prototype.displayEvent = function(){
    return ‘This event is on ‘ + this.date
}

Define Instance Methods

= Defining Methods that can be used from all Instances of a Constructor
→ Done on Constructor’s Prototype Property

Code Example

Event.prototype = {
    display: function display() {
        return “This is the event!”;
    }
}

`apply` Method

= Belongs to Function.prototype
→ Can be used to call a Function while binding it to an Object
→ Works even if the Function is not connected to the Object, and if the Object is a different type

Can you bind a Function to an Object yourself?
= Yes
→ Can also include Parameters by passing them as an Array as the 2nd parameter of the apply() Method

Code Example

function displayEvent(other){
    return ‘This event is on ‘ + this.date + ‘and on’ + other.date
}

displayEvent.apply(flat8, [flat9])

`apply` Use Cases

1. Calling a Function w/ a List of Arguments

= That is a Dynamic List
ie Math.max(4, 1, 8, 9, 2)
→ Use Math.max on an arbitrary array (instead of a statically set one)
Use Math.max.apply(Math, myarray)

2. Calling it as a Constructor

= Rather than calling it as a function
→ Create a new Method of Function.prototype

Code Example

Function.prototype.new = function() {
    var args = arguments
    var constructor = this
    function Fake(){
        constructor.apply(this, args)
}
Fake.prototype = constructor.prototype
return new Fake
}

= new method inside Function.prototype
→ Can call constructors with the new method
→ Will have feel of calling a constructor
Without actually using a constructor

Example Usage

var nextWeek = [new Event(‘September 24th, 2022’), new Event(‘September 29th, 2022’)]
var args = [‘September 20th, 2022’].concat(nextWeek)
var allEvents = Event.new.apply(Event, args)

= Simplify even further, create a Helper Method

Example Helper Method

Function.prototype.applyNew = function(){
    return this.new.apply(this, arguments)
}

var allEvents = Event.applyNew(args)

`call` Function

= Another Method of Function.prototype
→ Works like apply()
→ Passes parameters differently
Instead of as an array in the 2nd parameter
They are added to the end

Code Example

displayEvent.call(flat8, flat9)

Subclass Creation: 1st Way

= Set prototype of subclass to an Instance of superclass
→ ‘subclass’ only called once
→ Cannot customize ‘subclass’ on different calls of ‘superclass’

Code Example

var Event = function Event() {};
Event.prototype = new Venue(“Shoreditch”);
Event.prototype.displayVenue = function displayVenue() { return “Venue Submitted” };
var flat8 = new Event();
flat8 instanceof Event; // Outputs true
flat8 instanceof Venue; // Outputs true

Inheritance w/o Power to Override

= In most prototype-based languages
→ There is inheritance without power to override
→ However, JavaScript does not work like this

Here’s a way to do it:

Code Example

function create(parent) {
    var F = function() {};
    F.prototype = parent;
    return new F();
}

Static Methods & Properties

= static keyword
→ Defines a static method or property for a class

= Called w/o creating an instance of the class
→ Cannot be called through a class instance

Static methods

= Used to create utility functions for an application

Static Properties

= Used for caches, fixed-configuration
→ Or any other data you do not need to be replicated across instances
Unlike prototype methods and properties which will appear on individual instances

Code Example

class Event {
    constructor(date, time) {
        this.date = date;
        this.time = time;
}

    static displayName = “September Events”;
    static timeframe(a, b) {
        const tdate = a.date - b.date;
        const ttime = a.time - b.time;

return Math.hypot(tdate, ttime); 
    }
}

const flat8 = new Event(123, 2);
const flat9 = new Event(432, 5);

flat8.displayName; //Outputs undefined
flat9.displayName; //Outputs undefined

flat8.timeframe; //Outputs undefined 
flat9.timeframe; //Outputs undefined

console.log(Event.displayName); //Outputs “September Events”;
console.log(Event.timeframe); //Outputs …

Bind `this` w/ Prototype & Static Methods

Value for this
= Must be included when calling a static or prototype method
→ Or else the this value will be undefined inside the method
Body is always executed in strict mode
= So this will occur regardless of whether or not the “use strict” directive is present

Calling Static & Property Methods

= Static & Property Methods cannot be called on their own
→ Must be called as a Property of another Object

Instance Properties

= Must be defined inside Class Methods

Code Example

class Event {
    constructor(date, time) {
        this.date = date;
        this.time = time;
    }
}

Field Declarations

= 2 Different Types of Field Declarations:

1. Public

= Do not need to be made w/ Keyword like let, const or var
→ Allow Class Definitions to become more self-documenting
→ Fields will always be there
= Can be declared w/ or w/o a Default Value

Code Example

class Event {
    date = “”;
    time = “”;
    constructor (date, time) {
        this.date = date;
        this.time = time;
}
}

2. Private

= Cannot be referenced from outside of the Class
→ Can only be read or written w/in Class body

Benefit of Private Field Declarations

Use of Field Declarations not visible outside of Class
= Ensures Classes’ users cannot depend on
Intervals (which may change version to version)
Can only be declared upfront in a Field Declaration
= Cannot be created later through assigning them the way normal properties can

Code Example

class Event {
    #date = “”;
    #time;
    constructor(date, time) {
        this.#date = date;
        this.
    }
}

Subclass Creation: 2nd Way

= extends is used in Class Declarations or Class Expressions
→ For sake of creating a Class as a child of another Class

Constructor in Subclass
= Constructor must first call super() before using this

Traditional Function-based “Classes”
= Can also be extended

Subclass & Superclass both have same method
= Subclass’ method overrides Superclass’

Code Example

class Event {
    constructor(date) {
        this.date = date;
    }

    display() {
        console.log(`${this.date} is the date of the event.`);  
    }
}

class smallEvent extends Event {
    constructor(date) {
        super(date);
    }

    speak() {
        console.log(`${this.date} is the date of a small event.`);
    }
}

const houseWarming = new smallEvent(‘September 22nd, 2022’);
houseWarming.display(); // Output: September 22nd, 2022 is the date of a small event.

Inappropriate Use Case

= Classes cannot extend regular (non-constructible) Objects
→ They must extend another Class

Regular Object Inheritance

= For a Class to inherit Methods & Properties from a Regular Object
→ Instead of another Class
Use Object.setPrototypeOf

Code Example

const Event = {
    display() {
        console.log(`${this.date} is the date of the event.`);
    }
};

class smallEvent = {
    constructor(date) {
        this.date = date;
}
}

Object.setPrototypeOf(smallEvent.prototype, Event);

const houseWarming = new smallEvent(‘September 22nd, 2022’);
houseWarming.display(); //Output: September 22nd, 2022 is the date of the event.

Species Pattern

Allows creation of Objects which are Instances of Superclass that a Subclass extends
= Instead of creating Objects that are Instances of the Subclass
Constructor of Objects created by the Subclass
= Overridden & Set to the Superclass
Can create Instances of Superclass that contain more Methods & Properties
= On top of ones defined in original Class Creation

Code Example

class MyArray extends Array {
static get [Symbol.species] () {
    return Array; // This overwrites the Object Constructor and sets it to Array instead of MyArray
}
}
const a = new MyArray(1, 2, 3);
//This allows a to access the default Constructors set at Array

const mapped = a.map((x) => x * x);

//Because a.map() uses a method defined in Array rather than MyArray, the variable called mapped will be an instance of Array rather than MyArray

console.log(mapped instanceof MyArray); //Output: false
console.log(mapped instanceof Array); //Output: true

`super` vs Prototype-based Inheritance

Advantage of `super`

= Ability to call Superclass Methods w/in Subclass

Make Superclass calls w/ `super`

= Call Methods of Superclass w/in a Method being defined in a Subclass
→ Using super keyword

Code Example

class Event {
    constructor(date) {
        this.date = date;
    }

    display() {
        console.log(`${date} is the date of the event.`);
}
}

class smallEvent extends Event {
    display() {
        super.display();
        console.log(`${this.date} is a good time for a small event.`);
    }
    //Since a method with the same name in the subclass overrides the one defined in the superclass, object created with the subclass will have a method called display() which has additional utility to the objects created with the superclass
}

const houseWarming = new smallEvent(‘September 22nd, 2022’);
houseWarming.display();
//September 22, 2022 is the date of the event.
//September 22, 22 is a good time for a small event.

What are Mixins?

Here are a few definitions:

A Class that includes Methods
= That can be used by other Classes
→ W/o need to be Parent Class of those Classes using its Methods
Abstract Subclasses
= Which are Templates for Classes

Rule for Mixins
= Each Subclass can only have 1 Superclass
→ Multiple inheritance from Tooling Classes is not possible
→ Functionality that needs to be inherited must be provided by 1 Superclass

Using Mix-ins

Create a Function w/ a Superclass as Input
= & a Subclass extending that Superclass as Output
One Class must accept another Class as an Argument
= This Class must also be accepted as an Argument of another Class

Examples of Mix-ins

const calculatorMixin = (Base) => class extends Base {
    calc() {}
};

const randomizerMixin = (Base) => class extends Base {
    randomize() {}
};

Example Class using Mix-in

class Foo {}
class Bar extends calculatorMixin(randomizerMixin(Foo)) {}
// Base is in the end set as Base { randomize() {} }

Resources for Further Exploration:

Javascript Constructors and Prototypes By Toby Ho

Understanding JavaScript Constructors By Faraz Kelhini

MDN Web Docs: Classes

MDN Web Docs: Object.prototype.constructor

VMWare: JavaScript constructors, prototypes, and the new keyword

Functions - JavaScript Core Concepts

Angeline Wang — Wed, 26 Oct 2022 13:56:20 +0000

The Functions & Methods Section of my JavaScript Core Concepts Series is divided into 6 Parts:

Part 1 Functions
Part 2 Classes
Part 3 Methods
Part 4 Callback Methods
Part 5 Scope
Part 6 Hoisting

Functions

Part 1 What is a Function?

Here are a few definitions:

Block of code
= Performs an action or returns a value
Custom code
= Defined by programmers and are reusable
→ Can make programs more modular & efficient

...

Part 2 Function Definition

Option 1: `function` keyword

Code Example

function newEvent() {
    console.log(‘New event created!’)
}

Application

Begins with function keyword
Followed by name of function
Function names follow same rules as variables
= Can contain letters, numbers, underscores and dollar signs
→ Frequently written in camel case
→ Name is followed by a set of parentheses: Which can be used for optional parameters
Code of function
= Contained in curly brackets
→ Like a for statement or an if statement
Nothing will happen
= No code will execute
→ Until the function is invoked/called

Option 2: Function Expressions

Creation

= Assign a Function to a Variable

Code Example

= Using add example above
→ Directly apply returned value to a variable (sum)

const sum = function add(x, y) {
    return x + y;
}

// Invoked function to find the sum
sum(20, 5);

= Output: 25
→ sum Constant Variable is a Function

Adding Concision

= Turn it into an Anonymous Function (aka Unnamed Function)
→ Currently, function name is add
→ But with Function Expressions, it is not needed to name the Function

So the Name is usually omitted like below:

Code Example

const sum = function(x, y) {
    return x + y;
}

//Invoke function to find the sum
sum(100, 3);

= Name of function: add is removed
→ Turned it into an anonymous function

Preserving Function Name

= Could be used to help debugging
→ However, the Name is usually omitted

Option 3: Arrow Functions

Purpose

= Newer, more concise method to define a function as of ECMAScript 6
→ Represented by an Equals Sign, followed by a greater than sign: =>
= Always anonymous functions
→ They are a type of function expression

Basic Example

= Find product of 2 numbers:

const multiply = (x, y) => {
    return x * y;
}

// Invoke function to find product
multiply(30, 4);

= Instead of writing out the keyword function
→ Used => arrow: Indicate a function
= Otherwise, it works similarly to a regular function expression
→ With some advanced differences

Benefits

Concise Syntax
Implicit Returns
= Allows us to write one-liners
No rebinding the value of this when you use an Arrow Function inside another Function
= Helpful for doing things like click handlers etc.

Application

Transformation to Arrow Function

= Turn into an Arrow Function

Delete keyword function
Add a fat arrow: =>
= Which does the same thing as function
→ And when console.logged, you get the same thing
Remove parentheses if you only have 1 parameter
= Though you can keep the parenthesis as a stylistic choice
→ Example: In callback functions ie map function it’s nice to leave them out for clean syntax

1 Parameter

= Parentheses can be excluded
Example: Squaring x, which only requires 1 number to be passed as an argument

= Parentheses have been omitted:

Code Example

const square = x => {
    return x * x;
}   

square(8);

= Output: 64
→ These example only contain a return statement
→ Thus: Arrow functions allow syntax to be reduced even further

Single-line `return`

If function is only a single line return:
= Both curly brackets and return statement can be omitted

Code Example

const square = x => x * x;

square(10);

= Output: 100

No Parameter/Argument

= An empty set of parentheses is still required in the arrow functions
→ Could also use an underscore _ in the place of ()
→ Underscore = Throwaway variable: B/c we’re actually creating a variable called _ but not using it
→ _ does not have any significance at all

= Any variable name can be used
→ Just thrown away (because there’s no parenthese around it)

Code Example

names.map(_ => `Angeline Wang`);
names.map(x => `Angeline Wang`);
names.map(boo_yaa => `Angeline Wang`);

= You can do this however you want

Return

Implicit vs Explicit

Implicit Return

Many callback functions written in JS are just one liners
= Where we just return something immediately in one line
→ Don’t need a whole bunch of lines
Only purpose of arrow function is to return something
= No need for return keyword

Implicit Return in Arrow Functions

Delete the return
Put it up on all of one line
Delete the curly brackets
= Going to be an implicit return
→ Means we do not need to specify what we are returning
→ Will be assumed that we are doing so
→ console.log will see the same thing again

Explicit Return
= Explicitly write return for what you want to return

Named vs Anonymous Function

Named Function

= Function has a Name attached to it

Named Example
This is what a Named Function looks like:

function sayMyName(name) {
    alert(`Hello ${name}`);
}

Benefits of Naming Functions
= In the case of a Stack trace: When you have an Error
→ To figure out where something has gone wrong

= Line num may not be very helpful
→ Need to know actually the name of the function it got called in

Arrow Function Anonymity

But, if an Arrow Function is used
= You cannot name them
→ None of arrow functions have a name
→ Arrow Functions are always Anonymous Functions

Solution
= Can put an arrow function inside a variable
→ This means that you would be passing the arrow function a name and creating a function declaration that way

Example

const sayMyName = (name) => {alert(`Hello ${name}!`)}

sayMyName(‘Angeline Wang’);

= This is still an anonymous function & it will not give us very good stack traces
→ But if you’re not concerned about stack traces: you can do this

Which Option to Choose

= The 3 different types of syntax result in the same output
→ Which to use depends on preference/Company coding standards to decide how you’ll structure own functions

...

Part 3 Function Invocation

How to Call a Function

= Write name of function followed by parentheses
→ And can be reused as many times as you want

Code Example

newEvent();

...

Part 4 Function Parameters

Definition

= Input that gets passed into functions as names and behave as local variables

Purpose

Make code more dynamic by creating dynamic functions
Add additional functionality
Make code more flexible

Code Example

Example: Add date of event

function newEvent(date) {
    console.log(`New event on ${date}!`);
}

= Name of function is newEvents
→ Now have single parameter inside the parentheses
→ Name of parameter follows same rules as naming a Variable

Use Parameter inside Function

Example

= To use parameters inside a string:
→ Instead of a Static String: Add a Template Literal String
Contains Parameter
Not behaving as a Local Variable

Parameter Value Assignment

If the parameter is not defined anywhere
= A value can be assigned to it when invoking the function
→ Value is placed w/in Parentheses of Function Call
→ It is used as the Argument
Every time the parameter is used within the Function
= The value passed during Function Call is used

Real World Use Case

= For example, the function would pull the username from a database instead of directly supplying the name as an argument value

...

Part 5 Declarations inside Functions

= Variables can be declared inside functions
→ Known as Local Variables
They will only exist inside the scope of their own Function Block

Variable Scope

= Determines variables’ accessibility
→ ie Variables defined inside a Function: Not accessible outside function
But can be used at the same time as the Function is used throughout the program

...

Part 6 Return Values

Amount of Parameters Allowed

= > 1 Parameter can be used in a Function
→ You can pass multiple values into a Function and Return a value

Code Example

= Create function to find sum of 2 values
→ Represented by x and y

// Initialize add function
function add(x, y) {
    return x + y;
}

// Invoke function to find the sum
add(9, 7);

= Defined function with parameters x and y
→ Then passed the values 9 and 7 to the function
→ When we run the program, we’ll received sum of those numbers as the output

`return` Keyword

= When the return keyword is used
→ The function stops executing:
Value of the Expression is returned
Output will be where the Function was invoked
Value can be used straight away
Or placed into a Variable

...

Part 7 Pure Functions

Definition

It needs to pass 2 requirements:

1. Always returns same result

= If same arguments are passed it
→ Does not depend on any state, or data change during program execution
= Must only depend on input arguments

2. Does not produce any observable side effects

= ie Network requests, input and output devices, or data mutation

Observable Side Effects

= Any interaction with outside world
→ From within a function
= Could be anything from changing a variable that exists outside the function
→ To calling another method from within a function

Pure Function calling a Pure Function

= Not a side effect
→ And the calling function is still pure

Examples of side effects:

Making a HTTP request
Mutating data
Printing to a screen or console
DOM Query/Manipulation
Math.random()
Getting the current time

Characteristics of Side effects:

Not bad in and of themselves
They are often required
But for a function to be called pure, it must not contain any
Not all functions need to be, or should be, pure

Example of Pure Function

= Calculating price of a product including tax

function priceAfterTax(productPrice) {
    return (productPrice * 0.20) + productPrice;
}

= Passes 1 and 2 of the requirements for function to be pure:
→ Does not depend on any external input
→ Does not mutate any data
→ Does not have any side effects

= If you run this function with same input 100 million times
→ It will always produce the same result

Example of Impure Function

var tax = 20;

function calculateTax(productPrice) {
    return (producePrice * (tax/100)) + productPrice;
}

= This is impure because it depends on an external tax variable
→ Pure functions cannot depend on outside variables
→ This function fails one of the requirements, so it is impure

Use Cases

Heavily used in Functional Programming
= And libraries like ReactJS and Redux require use of pure functions
Regular JS that does not depend on single programming paradigm
= Can mix pure and impure functions
Not all functions need to be or should be pure
→ Example: Event handler for a button press that manipulates the DOM should not be pure
→ Example: Event handler can call other pure functions which will reduce the number of impure functions in your app
Testing & Refactoring
= Benefit of using pure functions: Immediately testable
→ Always product same result if pass same arguments
Make maintaining & refactoring code easier
= Can change pure function & not worry about unintended side effects altering the entire app & making debugging very difficult
→ Better quality code, cleaner way of working
Pure functions are not limited to JavaScript

Resources for Further Exploration:

How To Define Functions in JavaScript

JavaScript: What Are Pure Functions And Why Use Them? By James Jeffery

Wes Bos: JavaScript Arrow Functions Introduction

Variables - JavaScript Core Concepts

Angeline Wang — Tue, 27 Sep 2022 14:41:54 +0000

"JavaScript Core Concepts" is a 5-Section Series consisting of:

Section 1 Data Types & Variables
Part 1 Variables
Part 2 Primitive Data Types
Part 3 Complex/Composite Data Types

Section 2 Functions & Methods
Section 3 Control Flow & Conditional Statements
Section 4 Past, Present & Future
Section 5 Data Structures & Algorithms

The most important thing to learn about any new programming language is its Data Types & Variables. And that is what we are starting off with.

...

JavaScript Variables

What is the purpose of variables?

JavaScript variables are used to hold data in memory, so that you can access and manipulate it later on.

How can you define variables?

There are 3 ways of defining a JavaScript variable:

var
This may or may not be reassigned, and may or may not be used for an entire function, or just for the purpose of a block or loop. This is the weakest method, which should not be used, but is still valid.
let
Used when you need to re-assign the variable later on, and is particularly useful in loops. It signals that the variable will only be used within the block that it’s defined in, and this may not always be the entire containing function.
const
Used when the variable does not need to be re-assigned later on, and means that the variable remains constant throughout the script/code block. This does not mean that it has immutable values, as an object can still have its properties mutated.

Which should you use?

When in doubt, use const, as this allows the usage to be as clear as possible. If later on, you realise that you need to modify the variable, you can always go back and change the definition to let.

let tends to be used for loops or mathematical algorithms to take the place of one thing. This means that it is possible to deallocate the value by unsetting it. For example, it can be used for a counter in a loop or a value swap in an algorithm.

How does block scope interact with variables in JS?

All code within curly braces {} is a code block. If a variable is created with let or const inside a code block, it will not be available outside of the block. However, variables outside the block will be available inside the block.

If a variable with the same name as one pre-existing in the global scope is created inside a code block and the variable is defined with let or const, then it will be completely separate. If it is defined with var, then it will override the global variable.

When should you define a new variable?

One variable should be used to represent a single concept. It is important to be careful not store multiple values within one identifier. For example, to parse a query string parameter value, it is best to create one identifier for the URL, one for the query string, and another for the parameter value.

...

Resources for Further Exploration:

JavaScript ES6+: var, let, or const?

Mastering CSS Grid

Angeline Wang — Thu, 04 Aug 2022 11:55:00 +0000

Only created in 2011, CSS Grid is the new kid on the block who has enabled new layouts, and simplified old ones!

(Cheeky updated version of this article now includes a few sidebars :))

At its core, CSS Grid is used to divide a page into major regions by defining the relationship between elements in terms of size, position, and layer.

This one I learned through Grid Garden, & later updated this article with content from Grid Critters...

...

Part 1 CSS Grid vs Other Options

1.1 CSS Grid vs Flexbox

Grid Advantage
= Can easily position elements in 2 dimensions:

Columns
Rows

1.2 CSS Grid vs Tables

Similarities
= Allows you to align elements into columns & rows

Differences
= More layouts are possible & easier w/ CSS Grid

Example
= Grid container's child elements could position themselves so they overlap & layer (like CSS positioned elements)

...

Part 2 Definitions

2.1 Grid

= Always starts w/ a line & ends w/ a line
→ Always has 1 more line than track

2.2 Tracks

= General term for either Columns or Rows
= A vertical/horizontal slice of the Gird
→ Can be sized & filled w/ Elements

...

Part 3 On the Container

3.1 Grid Layout

Default

Elements in Grid are equal heighted rows
Grid always has at least 1 row and 1 column 3.grid-template-rows: 1fr; && grid-template-columns: 1fr;

Example Application

grid-template-columns: 1fr 1fr 1fr 1fr;

= 4 Column Tracks, but 5 Column Lines
→ line 1 1fr line 2 1fr line 3 1fr line 4 1fr line 5

Setup

To begin using CSS Grid, we must select the <div> that is the container for all our elements, and apply the following CSS properties:

display: grid;
grid-template-columns: ____;
grid-template-rows: ____;

Column/Row Sizing

Syntax

grid-template-columns/rows

Purpose

Set number of columns/rows
Set size of each column/row = Control how Grid element are sized & positioned

Units of Measurement

Application
= The following units of measurement for values can be used in combination

Example
grid-template-columns: 100px 3em 40%;

1. px
2. em
3. %
Purpose
= Relative to height/width of Grid
→ % of Grid Size

Example Use Case

#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}

= Sets up a grid w/ 5 columns, each 20% of full width, & 5 rows, each 20% of full height

4. fr
= The Fractional/A Fraction of the Free Space

Purpose
= Allocate 1 share of available space
→ Divides up left over space after px, em, % allocated spaces are filled

Application
= Tell tracks how much of available space to take up
→ After any fixed-unit tracks get their dibs

Example Use Case: 2 elements set to 1fr & 3fr
= Available space is divided into 4 equal shares
→ 1st element occupies 1/4 & 2nd element occupies 3/4 of leftover space

Example Application
grid-template-columns: 50px 1fr 1fr 1fr 50px;

5. vh
= Viewport Height
→ Can be used with grid-template-rows to determine the height of a row

6. vw
= Viewport Width
→ Can be used with grid-template-columns to determine the width of a column

fr vs %
Similarities
= Equal sized tracks: fr & % look the same

Differences
fr
= A Fraction of the Free Space
→ Takes gaps into account

%
= A Percentage of the Grid Size
→ Does not take gaps into account: Does not make space for them
→ Rows/Columns will take of the specified % of space no matter what: Tracks will get pushed outside bounds of the Grid

Conclusion
= fr > %
→ When using gaps

Flexible Values

Purpose
= Sets a range of possible Element-Size Values

Application
= Working with changing size of Content within a Cell

1. auto
= Working with text content
= Equal to size of content placed
→ An empty track with auto size = Having size of 0px

2. minmax()
Purpose
= Defines track size as a Range
→ Rather than taking a single value for track size

Application
= Takes 2 Values as Arguments:

Minimum Size of Track
Maximum Size of Track

= If max is lower than min
→ min overrides max
→ Even if max is set to auto & Track is empty

= Range is always between a smaller value & a larger one
→ No matter ascending or descending placement

Interactions
= Takes priority over regular fr tracks

Syntax
minmax(*min*,*max*)

3. min/max-content
min-content
= Size of smallest content in track

max-content
= Size of largest content in track

4. repeat()
Purpose
= Remove need to specify so many identical widths
→ Shorthand

Syntax
repeat(*num tracks*, *size of tracks*)

Example Use Case
Without repeat
= grid-template-columns: 20% 20% 20% 20% 20%;

With repeat
= grid-template-columns: repeat(5, 20%);
→ Creates 5 columns, each with 20% width

1st Parameter Keyword Values
--auto-fill--
= Fills Grid w/ as many Tracks of the specified size as possible
→ Dynamic

Example
grid-template-columns: repeat(auto-fill, 150px)
= Fill the grid with as many 150px columns as possible

--auto-fit--
Similar to auto-fill
= Grid will create as many of given sized tracks as will fit

Difference to auto-fill
= auto-fit: Any empty tracks get collapsed to 0px
→ If columns are created, but there are no elements inside them, they will exist, but you won't see them

--auto-fit & auto-fill Similarities--
= Takes gaps into account
→ If you have large gaps: grid will have less room to create new tracks

= Both make tracks 0pc if they don't have any grid items inside them
→ Regardless of whether or not those grid items contain content themselves

3.2 Gaps

Purpose

= grid-column-gap takes away from the available space that justify-content gets to split between the columns

Syntax

grid-row/column-gap
= Measures size of gaps between the tracks

Implications

= Starting & Ending Line of the gap: Has the same Line Number
→ The gap is 1 thick line, stretched
→ Line now officially starts after the gap

Units of Measurement

1. vw

2. vh

3. %

4. px

5. rem

Application

= Most template-columns/rows' Units of Measurement can be used
→ Except: fr

Example Use Case

planet {
 display: grid;
 grid-template-rows: 1fr 1fr;
 grid-template-columns: 1fr 1fr;
 grid-row-gap: 200px;
 grid-column-gap: 50px;
}

3.3 Flow

Syntax

grid-auto-flow

Purpose

= Change the flow of the Grid itself

= Configures 2 things:

Direction (row or column)
Packing (sparse or dense)

= Can configure Direction & Packing at once
→ grid-auto-flow: row dense;

What is Packing?

= Whether the Grid goes back to previous empty cells or not

Example Use Case

Insert Elements into Grid as Columns, instead of Rows

grid-auto-flow: column;

= Elements flow into Grid: Filling up Columns before Rows
→ Starts from left

Implications

= Now grid-column placement gets priority
→ Instead of grid-row placement

Values

1. Default

= grid-auto-flow: sparse row;
→ Elements flow into the Grid filling up rows before columns: Starting from top
→ Leaves cells empty if Element size does not fit into it: Moves onto next cell to try and fit it

2. `row`

= Elements fill up Rows before Columns
→ Starting from top

3. `column`

= Elements fill up Columns before Rows
→ Starting from left

4. `sparse`

= Grid keeps moving forward
→ As it looks for an appropriate cell to place the element
→ Even if that means leaving empty cells behind

5. `dense`

= Instructs the Grid to go back & fill empty cells previously skipped
→ Functionally equivalent to nowrap in Flexbox

3.4 Content Characteristics

Wrapping

Application

= Text can wrap to multiple lines when they need
→ When size is larger than max value of minmax

`auto`

= auto is the size of the content
→ Including wrapping when needed
→ auto is a somewhat flexible value
→ Text will take up as much space as it can before it hits the max limit & starts wrapping

Implications

= max value of minmax is respected
→ If contents are able to wrap

3.5 `content` Spacing/Positioning

Purpose

= Controlling the whole Grid
→ Position tracks(columns/rows) themselves

= Columns'/Rows' Positioning & Spacing
→ When they do not take up the full Width/Height of Grid Cells

Syntax

justify/align-content

Values

1. Default: `stretch`

= Changes the size of any auto-sized column
→ Until grid is completely filled

= Stretches out auto columns
→ But not fixed width columns

= Takes up all available space
→ && Adds it equally to each of the auto columns
→ Size of column depends on the size of its content

= Splits up the free space evenly
→ Adds it to the auto sized columns
→ On top of their initial size (size of content)

2. `center`

= Groups all the columns/rows up into center of available space in the Grid

3. `end`

= Columns/rows flush to the right/bottom

4. `start`

= Columns/rows flush to the left/top

5. `space-between`

= Spaces columns/rows out
→ No space on the outside of the outer 2 columns/rows

6. `space-evenly`

= Space around outside 2 columns/rows
→ Even amounts of space everywhere
→ Amount of space is exactly the same
→ On all sides of every column: Including the outer 2 columns

7. `space-around`

= Space outside the 2 columns 1/2 the size of space between the columns
→ Same amount of space around every column
→ Including the outer ones
→ Middle columns look like they're getting double the space: only bc their space is adjacent to another column's space

3.6 `item`s Spacing/Positioning

Purpose

= Horizontal/Vertical positioning of Grid elements within their Grid cells
→ When they do not take up the full space of the Grid Cell

Syntax

justify/align-items

Values

1. Default: `stretch`

= w/o specifying justify-items
→ Only works for items that don't already specify their size
→ If elements have a width/height set, stretch is overridden

2. `start`

= To the Left

3. `end`

= To the Right

3.7 Interaction between Spacing & `gap`s

Application

= Adding a column gap
→ Widens the distance between the columns
→ && spacing on outside of columns shrink

Implications

= gaps are calculated before spaces

3.8 Implicit Tracks

Creation

= Tracks created beyond template on the Container
→ Created by adding individual elements to a column/row line number larger than those existing

Definition

= Collapsed tracks from auto-fit are not implicit tracks

Purpose

= Grid adaptability to content inside
→ Automatically adding as many tracks as it needs to fit all its elements

= Positioning an element into a column that does not exist
→ Creates a column even if that column was not defined before in the Grid template

Implications

= gaps are still included between implicit tracks
→ Implicit tracks are identical to regular tracks
→ They just don't show up unless needed

Example Use Case

= Grid only had 4 cells: 2 rows & 2 columns
→ But 6 elements to fit in

= Thus, it makes a brand new implicit row
→ Makes room for those 2 extra elements

Sizing

Purpose

= Controlling size of any implicit columns the Grid adds automatically

Syntax

grid-auto-columns

Values

1. Default: auto
grid-auto-columns/rows: auto;

= As tall/wide as content of element
→ Collapses down to 0px if there is no content

Example Application
= If there are only 5 Columns, but you try to place an element in Column Line 7
→ There will be 2 Implicit Tracks created:
One to place the element in
& One before that

2. Any template Values

3.9 Naming

Lines

Purpose

= To be used instead of Line Numbers
→ Can assign a Name to any Line

Step 1: Setup - Add Names to Lines

Location
= In Values for grid-template-columns/row

Syntax
= "Line, Track, Line Pattern"
→ Brackets [] are used to name Lines

Example

grid-template-columns: [start] 1fr 1fr [center] 1fr 1fr [end];
grid-template-rows: [top] 1fr 1fr [bottom];

Default Line Names
= Order of line
→ ie Code Written...

grid-template-columns: 1fr 1fr 1fr 1fr 1fr

→ ... Implied Line Names

grid-template-columns: [1] 1fr [2] 1fr [3] 1fr [4] 1fr [5];

Rules
1. Do not need to name _all the Lines_
= Can just name some that will be used

2. Number of Names per Lines
= No Limit
→ Different Names: Separated by a space

grid-template-columns: 1fr [middle center] 1fr;
grid-template-rows: 1fr [neat-line awesome-line] 1fr;

Shortcut
Purpose
= Assign the same name to many lines
→ ie To Position those lines at the same time

Application
= Used w/ repeat()
→ Only affects Lines created w/in repeat()

Syntax

repeat(*num tracks/lines*, [*lines' name*] *track size*)

Example Use Case

grid-template-columns: 1fr repeat(5, [grass] 50px) 1fr;

Step 2: Applications of Line Names

1. Capture Line after Tracks created by repeat()
= Add Line Name again after repeat()

2. Target Multiple Lines w/ Same Name
Syntax
= Use the Name Number Syntax
→ Use Name w/ Order Position w/in all those of the same name

Example Value: grass 3

3. Grouping Line Names
Purpose
= Creating a Line Group

Example Use Case
Naming line 3 bottom-start & line 5 bottom-end
= Giving both bottom prefix
→ Grouped the 2 lines

Application
= Lines that are grouped can be referenced through their group name insolation, without the suffixes
ie grid-row: bottom;

5. Use Names as Values
Location
= In Values for grid-column/row-start/end / grid-column/row

Example

grid-row: top / bottom;
grid-column: start / center;

6. Line Name & Number Values Combined
= Isolated Line Name && Number Values as part of grid-column/row Shorthand Values

Example

grid-row: 2 / bottom;

Areas

Syntax

grid-template-areas: ". . ." ". . ." ". . ."

= Number of ""s = Number of Columns
→ Each pair of quotes separated by a space

= Number of space-separated values inside each "" = Number of Rows
→ Num of space-separated values inside each “” need to be the same

Example

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

= Each line in grid-template-areas setting: Represents a row in the Grid
→ Each row/line must contain the same number of cell names

Recommended Uses

1. Create Group for 4 side column lines
= Name side using -start and -end suffixes
Example

grid-template-columns: 1fr [side-start] 100px 100px 100px [side-end];
grid-template-rows: 1fr [bottom-start] 100px 100px 100px [bottom-end];

grid-area: bottom / side;

= Is identical to:

grid-row-start: bottom;
grid-column-start: side;
grid-row-end: bottom;
grid-column-end: side;

2. Give column line group same name as row line group
= All 4 lines working together to form a single area
→ Ideal b/c can position items by area name
Example

grid-area: center;

Purpose

= Gives Names to Grid Areas
→ Establishes Cells in the Grid & Assigns them Names

Warning

= Areas are not associated with any particular grid item
→ But can be referenced from the grid-placement properties: grid-row-start grid-row-end grid-column-start grid-column-end & their shorthands grid-row grid-column && grid-area

Example Use Case

planet {
  display: grid;
  grid-gap: 50px;

  grid-template-areas: "grass grass dunes" "rocky rocky dunes";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

rocky {

  grid-area: rocky;

}

grass {

  grid-area: grass;

}

dunes {

  grid-area: dunes;

}

Applications

1. Only Creating 1 Area
Application
= Do still need to name all the cells in the grid
→ But to indicate the cells where you do not want to create an area: Use a period (.) in place of a name

grid-template-areas: ". . ." ". center ." ". . .";

= "." makes for cells with no name
→ But items can still flow into those cells on their own
→ It does not prevent the filling of a cell
→ It just leaves its name blank

Disadvantages
= Periods mess up how grid-template-areas can visually represent the Grid
--> No longer resembles the Grid itself
= To keep the Grid look of this definition
--> Can use ore periods

Example Use Case

grid-template-areas: ". ...... ." ". center ." ". ...... .";

= Only names all Grid lines bordering each area
→ Does not create Grid lines

  grid-template-areas: "left . . right";

= Defines an area named left
→ Names all lines bordering that area
→ Column line 1 & Row line 1 named left-start
→ Column line 2 & Row line 2 names left-end
= Can position elements using those line names
→ Even though you did not manually name them

ie Make an element start at the line name left-end(line 2)

grid-column-start: left-end;

Advantages

1. Not needing to name all lines manually
= Also do not need to give every cell a name
→ Use a period (.) for non-named cells

2. Most convenient way to name lines: grid-template-areas
= After naming the lines, you can position elements to those lines using any of the item placement settings or their shorthands

Example

grid-area: center;

= A shorthand for:

grid-area: center-start / center-end / center-start / center-end;

Recommended Use Case

= Better than naming a ton of lines
→ Areas can be as small or large as you want
→ As long as the cells are adjacent and form a rectangle

As an Alternative
= Naming lines through areas instead of manually naming lines through template-columns/rows

Setup

1. Start by defining the areas using empty cells
= Make sure to get the correct number of rows & columns

grid-template-areas: ". . ." ". . ." ". . .";

= For 3 rows/columns

2. Name the cells you need to
= Create 3 area names using grid-template-areas
--> The top 3 cells & the middle left cell will remain empty

When naming grid-areas
= Need to name all of them in order to work
→ Add ""s and .s

Types of Values

1. Default: none

2. Keyword Values
Example
none
= Grid container does not define any names grid areas

3. String Values
= 1 Row is created by each separate string listed
→ 1 Column is created for each cell in the string

4. Grid Area
= Multiple cell tokens w/ same name w/in & between rows
→ Creates a single names grid area: Spanning corresponding grid cells
→ Unless those cells form a rectangle, the declaration is invalid

Example

grid-template-areas: "a b b" "a c d";

5. Global Values
= inherit, initial, revert, revert-layer, unset

...

Part 4 On Individual Elements

4.1 Sizing

= % sizing for each element is relative to the grid cell, rather than the whole grid container

4.2 Cell Spacing/Positioning

Values

1. `span`

Purpose
= Span a few row/column lines from wherever it is naturally placed
→ Make Elements take up the space you want: Wherever they are placed in the Grid

Applications
1. Used w/ both start & end
Purpose
= Sets element width relative to end (when used w/ start) position, or start (when used w/ end) position

Example Use Case

grid-column-start: 1;
grid-column-end: span 2;

2. Use w/ start OR end for _both column & row_
Purpose
= Size Element w/o Positioning it
→ Size it regardless of where it lies on the Grid
= Make the UI dynamic

Implications
= Essentially sets the Height (column span amount) & Width (row span amount) of the Element
= Starts spanning along Grid flow, from 1st lines, by default

Example Use Case

rocky {
grid-column-start*or -end*: span 2;
grid-row-end*or -start*: span 4;
}

Or simplified...

rocky {
grid-column: span 2;
grid-row: span 4;
}

3. Used Alone: start OR end for column OR row_
Purpose
= Set Element's Starting/Ending Column/Row Line
→ Instead of a fixed Line Number

= No longer need to hard code a specific line
→ Code becomes more dynamic

Example Use Cases

grid-row-start: span 3;

= Element will span 3 lines (counting from 1st line)

grid-row-end: span 3;

= Element will span 3 lines (counting from 1st line also)

I found it quite unexpected that end and start would both count from the same direction

Values
= Written after span & space
→ Only positive numbers

4.3 Item Positioning vs Grid Container

Grid Container

= Think of Rows and Columns as Tracks

Item Positioning

= Think of Rows and Columns by Lines
→ ie grid-row-start: 3 moves an Element down into the 3rd row, but done by making it start at the 3rd Line

4.4 Column/Row Positioning

Syntax

grid-column/row-start/end

Purpose

= Tell Element which line to start/end on
= Position an item by Line Number
→ Choose Line Number on which to place the element

`start` and `end` both used

= Extend Element across multiple columns/rows

`start` or `end` used alone

= Element spans 1 column or row
= Ends on the line of column or row identified && Takes up a single cell by default
→ Thus, starting on the line directly prior to the one identified

Example Use Case

grass {
  grid-column-end: 3;
  grid-row-end: 4;
}

Element starts at 3rd row line & ends at 4th row line → Taking up a single row (track 3)
Starts at 2nd column line & ends at 3rd column line → Taking up a single column (track 2)
The single cell at the intersection of row track 3 & column track 2 → Is now occupied by the Element

Application

= Positioning individual elements w/in a Grid container
→ Target each Element by selecting itself

Values

Example Value

grid-column/row-start: 3;
= Place element starting at the 3rd vertical/horizontal grid line/3rd vertical/horizontal border from left in the grid

Example Use Case

grid-row-start: 3;

= Start Element at 3rd Horizontal Line

grid-column-start: 3;

= Start Element at 3rd Vertical Line

Units of Measurement

1. Positive Numbers
Example

grid-column-start: 1;
grid-column-end: 4;

= Element starts at 1st vertical grid line & Ends at 4th vertical grid line

2. Negative Numbers
= Counts from opposite direction
Examples

grid-column-start: -1

= Starts at 1st Line from right

grid-row-end: -2

= Ends at 2nd line from bottom

Purpose
= grid-column-end does not need to be greater than grid-column-start
= Count Grid Lines from right instead of left

Example Use Case

grid-column-start: 5;
grid-column-end: 2;

= Same effect as:

grid-column-start: 2;
grid-column-end: 5;

= grid-column-start & grid-column-end can be reversed

4.5 Combinations

1. `end` Line Position (Num/Name) used with `start` `span`

Purpose

= Space in reverse direction
→ Element spans in opposite direction of Grid flow

I thought this could be more straight-forwardly done through (the currently redundant) end with span. This seems like a very convoluted and verbose way of doing it if you just want to start counting from the natural final line.

Application

= Works for both grid-row & grid-column

Example
= If used with row
→ Changes to bottom-up
= If used with column
→ Changes to right-to-left

Comparison

= Essentially same as Flexbox's flex-direction: column-reverse & flex-direction: row-reverse

Example Use Case

rocky {
grid-row-end: 5;
grid-row-start: span 3;
}

= Starts counting from the end line number identified, and counts the full amount of proceeding lines specified after span of start

2. `grid-column/row-start` or `grid-column/row-end` used alone

Purpose

= Only Positioning of Element
→ Defining Start & End Positions of Grid Lines

3. `grid-column/row-start` & `grid-column/row-end` used together

Purpose

= Sizing on top of Positioning

`span` for `start` vs `span` for `end`

Similarities

= Exact Same Effect
→ Both count in the direction of Grid flow

Differences

= If both are set: start takes precedence over end
→ end will have no effect

4.6 Element Spacing/Positioning

Grid Container

Syntax

align/justify-items

Application

= Used on Grid Container
= If align/justify-items is set to anything but stretch
→ Elements w/o explicit size specifications: Will Collapse

Individual Elements

Purpose

= Horizontal/vertical positioning
= Used on individual Elements
→ Overrides Grid's align/justify-items for the one Element

Syntax

align/justify-self

Values

= Same values as justify/align-items (which were used on Grid container)

Defaults
= Not explicitly placed w/ grid-area, grid-column, grid-row

1. start
2. end
3. center
4. stretch

Application

= If justify-self is set to start or end
→ Must specify width if there is no content in the cell

Example

water {
grid-column: span 2;
}

= Equivalent to:

water {
justify-self: start;
grid-column: span 2;
width: 100%;
}

= Element starts from left of the grid cell, and also spans 100% of the cell
→ B/c justify-self is no longer the default stretch, this explicit width needs to be set

4.7 Order

Purpose

= Use to alter the positioning an element
→ 0-based: Has a default of 0

Application

= Can be used on any element

With Row-Positioned Items

= Row-positioned items are still given 1st placement priority
→ Regardless of the order

= grid-row trumps order

Values

Default

= order: 0
→ Automatically places all elements according to order in source code

Types of Values

1. Positive or Negative
= Similar to z-index
→ When specified, overrides the default order value of 0

2. Any order higher than 0
= Moves it to get positioned last

3. Less than 0
= Moves it to the front of the line
→ Gets places first

Example Use Case

= Overlapping elements

.water {
order: 0;
}

#poison {
order: 5;
}

4.8 Row Positioning

Purpose

= Does not move the Grid's tacking position forward
→ Row-positioned items are handled first
→ Grid starts again from the top
= Positioning an element by grid area is row positioning

Application

= To position elements in rows, use the same properties for columns, replacing the word column w/ row

Example Use Case

grid-row-start: 3;

grid-row: 3 / 6;

4.9 Column Positioning

Columns & Rows Example

grid-column: 2;
grid-row: 5;

grid-column: 2 / span 4;
grid-row: span 5;

= Sets position of both dimensions at once

4.10 Area Positioning

Syntax

grid-area
= 4 values separated by a /

Purpose

= Combines grid-row-start, grid-column-start, grid-row-end, and grid-column-end

= Specifies a grid element's Size & Location: W/in a Grid
→ By contributing a line, a span, or nothing (automatic) to its grid placement

= Specifying the edges of its grid area

Application

= Grid Elements & absolutely-positioned boxes whose containing block is a grid container

= Used w/ multiple elements: We can overlap them
= Starts at top line, works its way counter-clockwise
→ Top line, left line, bottom line, right line

Rules

= Does not require specifying all 4 positioning slots

Values

= grid-row-start / grid-column-start / grid-row-end / grid-column-end

= Any of the values you use in the longhand positioning settings
→ Line Numbers, Line Names, Negative Numbers, span, etc.

1. Default: `auto`

= All 4 values set to auto

2. Keyword Values

auto
→ Property contributes nothing to grid element's placement
→ Auto-placement or a default span of 1

Use Case
= Used to skip positioning slots
→ Won't assign a position
→ Lets item fill Grid using default behaviour

Example

grid-area: span 5 / span 2 / auto / auto;

= Identical to:

grid-area: auto / auto / span 5 / span 2;

= Everything left off will be set to auto:

grid-area: span 5 / span 2;

3. Values

= String Names
→ ie Names Lines with names <custom-ident>-start/<custom-ident>-end
= Contributes 1st such line to grid item's placement

Named grid areas auto-generate implicit suffixes for the names of the lines formed

Example

grid-area: foo;

= Chooses the start/end edge of that named grid area
&& sets it to foo-start and foo-end
→ Unless another line named foo-start or foo-end was explicitly specified beforehand

4. && Values

= Contributes the nth grid line to the grid item's placement
→ If negative integer: Counts in reverse
= Starting from end edge of explicit grid

→ If name given as a
= Only lines w/ that name are counted

→ If not enough lines w/ that name exists
= All implicit grid lines are assumed to have that name for the purpose of finding this position

→ Invalid value: 0

Example

grid-area: 4 some-grid-area / 2 another-grid-area;

5. span && [ || ] values

Examples
= Uses a grid span for grid item's placement
→ Corresponding edge of grid item's grid area is n lines from opposite edge

Use Cases
If name is given as a
= Only lines w/ that name are counted

If not enough lines with that name exist
= All implicit grid lines on the side of the explicit grid corresponding to search direction: Assumed to have that name for purpose of counting this span

If is omitted
= Defaults to 1
→ Invalid values: Negative integers or 0

grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

6. Global Values

= inherit, initial, revert, revert-layer. unset

Syntax Options

a. Four Values Specified

= grid-row-start set to 1st Value

Separated with a /

= grid-column-start set to 2nd Value

Separated with a /

= grid-row-end set to 3rd Value

Separated with a /

= grid-column-end set to 4th Value

b. Three Values Specified

= grid-column-end omitted
→ If grid-column-start is set, the grid-column-end set to the same
→ If not, grid-column-end is set to auto

c. Two Values Specified

= grid-row-end && grid-column-end omitted
→ grid-row-end && grid-column-end set to grid-row-start

d. One Value Specified

= grid-column-start is omitted
→ grid-row-start = grid-column-start

Example Syntax


#item1 {
grid-area: 2 / 2 / auto / span 3;
}

Positioning Elements at Grid Lines

Purpose

= More convenient than grid-row and grid-column positioning shorthands

Application

Identify top line/counter-clockwise pattern
= Dynamic retrieval of lines in the relevant position

grid-area: <top line> / <left line> / <bottom line> / <right line>

Use Case Example

planet {
  display: grid;
  grid-template-columns: [left] 190px 190px [right];
  grid-template-rows: [top] 1fr 1fr 1fr 1fr [bottom];
}

dunes {
  grid-area: top / left / bottom / right;
}

Functionally equivalent to:

grid-row-start: top;
grid-column-start: left;
grid-row-end: bottom;
grid-column-end: right;

...

Part 5 Shorthands

5.1 On Grid Container

Grid Template

Syntax

grid-template

grid-template: [top-line] 1fr
               20% [bottom-line]
               / [left-line] 1fr 1fr 1fr 1fr [right-line];

= Syntax layout resembles layout of Grid itself

Values

= Combines grid-template-rows & grid-template-columns & grid-template-areas
→ Accepts rows, then a slash, then the columns

Defaults
= auto : Takes up the next available cell in the Grid when it's their turn

Application

= Left to right, top to bottom
→ Elements flow into the Grid one at a time
→ Taking a turn based on their natural order

Capacity
= Can do most things
→ ie Naming lines

Warning

= Cannot add BOTH template-areas naming & repeat() at the same time
→ B/c setting would not be able to visually mimic the Grid

Add `template-areas` naming

= Define Tracks ** w/o** using repeat() in grid-template

Example

grid-template: ". rocky rocky ." 200px
               ". rocky rocky ." 1fr
               / 1fr 1fr 1fr 1fr;

= Same as:

grid-template-areas: ". rocky rocky ."
                     ". rocky rocky .";

Example Use Case

grid-template: 50% 50% / 200px;
= Creates a grid w/ 2 rows that are 50% each & 1 column that is 200px wide

Grid

Syntax

grid

Purpose

= Row properties, than /, then column properties

Application

= Exact same as grid-template
→ Define rows and columns

Values

Row properties
Column properties
grid-auto-flow

Gaps between Columns/Rows

Syntax

grid-gap

Purpose

= Sets both column and row gaps

Values

= *row gap* *column gap*
→ With a Space between

Example

grid-gap: 30% 10%;

5.2 Individual Elements

Column/Row

Syntax

grid-row/column: *start line* / *end line*
= *end line* value - optional
→ If no *end line* value: Will by default only set the *start line* value

Purpose

= Set both start & end values at once

Values

= grid-column/row-start & grid-column/row-end values
→ Separated by a slash

= Accepts all values accepted normally by start &end`

Example Use Case

grid-column: 2 / 4;
= Sets grid element to start on 2nd vertical grid line & end on 4th grid line
→ Functionally identical to...
grid-column-start: 2; grid-column-end: 4;

Area

...

Part 6 Workflow

1. Define Grid Tracks & Gaps

2. Flow Elements into Grid

3. Adjust Size/Positions of Elements

= If needed

4. Double check `grid-auto-flow` setting

= Make sure Grid is flowing correctly
→ Comment out explicit sizes temporarily if needed

5. Make sure elements are in their correct cells

6. Align and justify items

= If needed

...

Part 7 Tips for Next Article

1. Do not write so many notes

= If something has already been written: Do not repeat it

= Keep notes DRY
→ Or else you will waste far too much time cutting & organizing afterwards

2. Cut Details

= Make article more digestible
→ Keep one copy for personal & Another for uploading

...

And that's it for my expanded and revised CSS Grid notes! I may return if I encounter anything unexpected in practice.

For my next article, I am considering 3 options: Going into the process I used to create a Texas Hold'em Game, Analysing TailwindCSS, or JavaScript Basics.

Right now, I am leaning towards JavaScript Basics, as I think it is a good way to continue refreshing core concepts.

Nonetheless, I think it is certainly advantageous to get to the other two topics at some point.

With love,
Angeline

P.S You're welcome to join my journey by checking out my blogs on founding a startup 🤍

Flexbox Basics

Angeline Wang — Tue, 26 Jul 2022 16:48:00 +0000

Today I'm back with the second building block in CSS: Flexbox! Handily created in 2009 to facilitate dynamic layouts.

I was first introduced to these concepts by my General Assembly Software Engineering Immersive a few weeks back. Since then, I've completed a few labs and projects with them. 👩‍💻

But what was most impactful was having played and replayed Flexbox Froggy & Flexbox Zombies many times. Each time I replayed these games, I discovered a new insight I previously overlooked, and the concepts were further cemented.

I know these games look silly, but truthfully, they are game (no pun intended) changers to your learning experience 🪄

Part 1 Setting up Flexbox

In order to begin using the magic of Flexbox, we must set up the relevant containers by adding extra <div>s in our HTML.

In our CSS file, we select the <div> by the class we've assigned to it, and apply display: flex.

Then, we can begin using the following properties to target the elements nested directly within the container...

Part 2 Alignment Properties

Location Applied
= These properties & their corresponding values are applied at the container-level
Purpose
= They will affect the spacing & positioning of elements w/in the container

2.1 `flex-direction`

Purpose

= Defines direction elements are placed w/in container

Default Value

= row (Much like the effect of display: inline)
--> Elements nested directly w/ container: Populated along x-axis

Values

row = (Refer to description above)
row-reverse = Elements populated in reverse order of text direction
column = Elements populated in order along y-axis
column-reverse = Elements populated in reverse order along y-axis

2.2 `justify-content`

Purpose

--> row
= Spacing along x-axis
--> column
= Spacing along y-axis

Default Value

= flex-start

Values

flex-start
--> If flex-direction: row
= Elements placed flush against left of container
--> If flex-direction: column
= Elements placed flush against top of container
flex-end
--> If flex-direction: row
= Elements placed flush against right of container
--> If flex-direction: column
= Elements placed flush against bottom of container
center
--> If flex-direction: row
= Elements packed flush together & placed in middle of container y-axis
--> If flex-direction: column
= Elements packed flush together & placed in middle of container x-axis
space-between
--> If flex-direction: row
= Divides up remaining container x-axis space, adds equal amount between elements
--> If flex-direction: column
= Divides up remaining container y-axis space, adds equal amount between elements
space-around
--> If flex-direction: row
= Divides up remaining container x-axis space, adds equal amount around both sides of each element
--> If flex-direction: column
= Divides up remaining container y-axis space, adds equal amount around both sides of each element

2.3 `align-items`

Purpose

--> row = Spacing along y-axis
--> column= Spacing along x-axis

Default Value

= flex-start

Values

flex-start
--> If flex-direction: row
= Elements flush to top of container
--> If flex-direction: column
= Elements flush to left of container
baseline
1/ Targets tallest element
2/ Aligns tallest element's top-most/left-most (row/column) edge with the top-most/left-most (row/column) edge of container
3/ Aligns rest of elements' baseline w/ baseline of tallest element

What is the baseline?

= Where letters 'sit'
--> Descenders of letters extends below baseline

Use Case

= Content size varies among elements
--> If content size is the same, baseline: Same effect as flex-start

flex-end
--> row
= Align Elements flush to right of container
--> column
= Align Elements flush to bottom of container
center
--> row
= Elements packed flush together & placed in middle of container x-axis
--> column
= Elements packed flush together & placed in middle of container y-axis
stretch
--> row
= Aligns top & bottom of element flush with top & bottom of container by stretching entire element
--> column
= Aligns left & right of element flush with left & right of container by stretching entire element

2.4 `order`

Purpose

= Swap the position of an element w/in its group of elements

Application

= To individual element

Default Value

= 0

Values

= Can be Positive or Negative
Effects of Values

Since Default Value for any Element: 0
Element w/ Positive order Value = Immediately moved to back
Element w/ Negative order Value = Immediately moved to front Reason = order Values set to Elements --> Place the Elements in chronological order (From negative to positive values)

2.5 `align-self`

Purpose

--> row
= Align an individual element on container's y-axis
--> column
= Align an individual element on container's x-axis

Application

= To a specific element

Values

= Same as `align-items

2.6 `flex-wrap`

Purpose

= Create more space for Elements
--> By providing them w/ space beyond their present line
--> Allowing Elements to maintain size

Default Value

= nowrap
--> Will shrink Elements to fit into line

Values

1 . nowrap
= Fit all elements into 1 line
--> Even if this means shrinking them

wrap = Add additional lines to populate elements
wrap-reverse = Add additional lines to populate elements --> In reverse order

2.7 `align-content`

Purpose

= Spacing & Positioning of 'lines'/'groups' of elements
--> Takes in & manipulates each 'line' the way align-items take in each 'element'

Application

= Applied with flex-wrap: wrap
--> W/o flex-wrap: wrap, align-content has no effect

Values

flex-start
--> If flex-direction: row
= Lines flush to top of container
--> If flex-direction: column
= Lines flush to left of container
flex-end
--> If flex-direction: row
= Elements flush to bottom of container
--> If flex-direction: column
= Elements flush to right of container
center
--> row
= Lines packed flush together & placed in middle of container x-axis
--> column
= Lines packed flush together & placed in middle of container y-axis
space-between
--> If flex-direction: row
= Divides up remaining container y-axis space, adds equal amount between lines
--> If flex-direction: column
= Divides up remaining container x-axis space, adds equal amount between lines
space-around
--> If flex-direction: row
= Divides up remaining container y-axis space, adds equal amount around both sides of each line
--> If flex-direction: column
= Divides up remaining container x-axis space, adds equal amount around both sides of each line
stretch
--> row
= Aligns top & bottom of line flush with top & bottom of container by stretching each entire line
--> column
= Aligns left & right of line flush with left & right of container by stretching each entire line

`align-content` vs `align-items`

= align-content: Spacing & Positioning of lines of elements
= align-items: Spacing & Positioning of individual elements

Part 3 Speed of Resizing Properties

3.1 Alignment vs Resizing Properties

= In all cases, the Flexbox is created on the container
But...
--> Alignment Properties: Applied by selecting Container in CSS
--> Resizing Properties: Applied by selecting Elements themselves in CSS

3.2 `flex-grow`

Interactions w/ other properties

= Nullifies any effect of justify-content
--> Unless there are new lines

Purpose

= Enlarge Element(s) to fill ALL available space
--> Works the same for horizontal (flex-direction: row) & vertical (flex-direction: column) space

Application

= Directly to Elements
--> Not on Elements' container

Apply flex-grow: 1 to class w/ all similar elements
Override growing for specific elements that do not grow = flex-grow: 0
Adjust ratios for specific elements growing faster = ie flex-grow: 3 --> Grows 3X as fast as any other element w/ flex-grow: 1

Default Value

= 0
--> Will not grow unless told to

Values

= Ratios
--> Set 2 elements flex-grow: 1 = Both grow to fill available space at same rate

Example

--> Set 1 element to grow at 2X the speed of another element
= flex-grow: 2, flex-grow: 1
= 2X the SPEED, NOT 2X the SIZE: Both growing to fill available space

3.2 `flex-shrink`

Purpose

= React when there is not enough space for elements

Default Value

= 1
--> Shrinks without explicitly setting values

Values

= Ratios
--> Used to control how quickly each element shrinks (Speed)

Application

= Elements shrink at a rate relative to each other

All Elements shrinking at same speed = Do not set flex-shrink: This is covered by default value
Certain Elements shrinking 2X as fast = flex-shrink: 2 --> Shrinking twice the SPEED, not SIZE --> For every 1 pixel, these shrink 2 pixels each
Refuse to shrink = flex-shrink: 0 --> Specified on individual element

Shrinking & Growing

= Can be used in combination
--> By Default: Applying flex-grow = Used w/ flex-shrink: 1
= Will Grow & Shrink depending on existence of extra space || lack of space
--> If want elements to Shrink at same speed && Grow
= Only set flex-grow: B/c flex-shrink is set to 1 by Default already

3.3 `flex-basis`

Purpose

= Starting point/Ideal world (before any growing or shrinking)
--> Enough space to fit flex-basis defined: Element takes on size defined by flex-basis
--> Not enough space to fit flex-basis defined: Element takes on only the amount of size permitted by space

Default Value

= auto
--> Same as width value

Values

Units of Measurement:

Pixels
Percentages Example: flex-basis: 50% = Takes up 50% of width of container

Application

--> flex-direction: row
= flex-basis targets the width
--> flex-direction: column
= flex-basis targets the height

Final `flex-basis` Contributors

width/height
= If flex-basis specified
--> width: Overridden & Ignored
min-width/min-height
= Lower Limit for flex-basis
Example: min-width: 300px/min-height: 300px && flex-basis: 100px
--> Final flex-basis = 300px (min-width)

Example: min-width/min-height > flex-basis set
--> Final flex-basis = min-width/min-height

max-width/max-height = Upper Limit for flex-basis Example: flex-basis > max-width/max-height --> Final flex-basis = max-width/max-height

Order of Overriding

min/max-width/height > flex-basis > width/height

Interactions w/ Other Properties

flex-basis: 0
= Will not show the Element, unless flex-grow is set
--> Size set to 0 until growing begins
flex-shrink: 0
= Does not allow Element to shrink past flex-basis size
flex-grow need not be specified
= If flex-basis > Current width/height
&& Element does not need to grow beyond flex-basis size
--> flex-basis can sometimes be mistaken for flex-grow
Available space does not allow for flex-basis size
= Element shrinks according to flex-shrink/default shrinking
Available space increases && Element has specified flex-grow
= Element grows beyond flex-basis size
Example: flex-basis: 200px && flex-grow: 1

Part 4 Shorthand Properties

4.1 `flex-flow`

Purpose

= Combines flex-direction & flex-wrap

Values

= Values of flex-direction & flex-wrap
--> Separated by a space

Example

flex-flow: row wrap
= Sets rows & wraps them into additional lines

4.2 `flex`

Purpose

= Combines 2 Settings: flex-grow, flex-shrink, & flex-basis

Default Values

Leave off 3rd Value: flex-basis = flex-basis set to 0px by default --> (unlike how flex-basis is set to auto as a default without flex property)**

Example: flex: 1 0 auto = Grow at speed of 1, not shrink, and use width as flex-basis

Leave off 2nd Value: flex-shrink = flex-shrink set to 1 --> Same as regular flex-shrink default

Example: flex: 0 300px = No growing && flex-basis: 300px

Leave off both 2nd & 3rd Values: flex-shrink & flex-basis = Default: flex-basis: 0px && flex-shrink: 1

Example: flex: 1; = Only sets flex-grow: 1

Values: Keyword Shortcuts

flex: auto
= flex-grow: 1, flex-shrink: 1, flex-basis: auto
--> Grows & Shrinks & Keeps initial size = width
flex: none
= flex-grow: 0, flex-shrink: 0, flex-basis: auto
--> No Growing & No Shrinking & Initial size = width

Example

= flex: 1 1 300px
--> flex: grow shrink basis

Caution

= Setting a flex without specifying the 3rd value
--> Sets your flex-basis from auto to 0px

...And that's it for CSS Flexbox! I'll be returning here to add additional notes and use cases after further personal usage. Super excited to continue sharing my experiences with you <3

Next week, we'll be moving onto CSS Grid to wrap up CSS Essentials! 🤳

With love,
Angeline

Forem: Angeline Wang

How Control Flow Works in JavaScript

Introduction: What is Control Flow?

What are Conditionals?

Types of Conditional Statements

if else Statements

Syntax of if else Statements

Example Use Case

Ternary Operators

When to Use Ternary Operators

Syntax of Ternary Operators

Example Use Case

Handling null Values

Combining Conditions

Combining Operations

Refactoring if else Statements

Comparison Operators

Types of Comparison Operators

Logical Operators

Types of Logical Operators

&& AND Operator

|| OR Operator

Non-Boolean Values

Return from Logical Operators

Complications with Non-Boolean Values Returned

Convert Truthy/Falsy Value into a Proper Boolean

Option 1: Implicit Coercion

Option 2: Explicit Coercion

Switch Statements

Related Keywords for Switch Statements

Syntax of switch Statements

Use Case Example

Switch Ranges

Use Case Example

Multiple Cases

Use Case Example

switch vs if else

What are Loops?

Types of Loops

do while Loops

Syntax of do while Loops

Use Case Example

while Loops

Syntax of while Loops

Use Case Example

Use Case Example #2

Infinite Loop

while vs do while

while vs for

for Loops

Syntax of for Loops

for Loop Condition

Example Use Case

for in Loops

Syntax of for in Loops

Use Case Example

Object.keys() vs for in

for vs for in

Use Case Example

for of Loops

When to use for of loops

Syntax of for of Loops

for of vs for in

Comparison Example

Object.entries()

forEach Loops

When to Use forEach Loops

Syntax of forEach Loops

forEach vs for of

Comparison Example

Labeled Statements

When to Use Labeled Statements

Syntax of Labeled Statements

Use Case Example

Non-Numeric Properties

Empty Elements

Use Case Example

Add Empty Array Element

Use Case Example

Interaction with JSON

`if else` Statements

Syntax of `if else` Statements

Handling `null` Values

Refactoring `if else` Statements

`&&` AND Operator

`||` OR Operator

Syntax of `switch` Statements

`switch` vs `if else`

`do while` Loops

Syntax of `do while` Loops

`while` Loops

Syntax of `while` Loops

`while` vs `do while`

`while` vs `for`

`for` Loops

Syntax of `for` Loops

`for` Loop Condition

`for in` Loops

Syntax of `for in` Loops

`Object.keys()` vs `for in`

`for` vs `for in`

`for of` Loops

When to use `for of` loops

Syntax of `for of` Loops

`for of` vs `for in`

`Object.entries()`

`forEach` Loops

When to Use `forEach` Loops

Syntax of `forEach` Loops

`forEach` vs `for of`

`break` Statements

Syntax of `break` Statement

Using `break` without a Label

Using `break` with a Label

`continue` Statements

Syntax of `continue` Statement

`continue` without Label

`continue` with Label

`continue` vs `break`

`typeof` Operator

`.length` Method