Forem: ab

Back to Basics: Operators, Operators, Operators

ab — Thu, 28 Jan 2021 00:14:09 +0000

This series discusses the building blocks of JavaScript. Whether you're new to the language, you're preparing for a technical interview, or you're hoping to brush up on some key JS concepts, this series is for you.

Today's post is about operators. In this post, I'll go over some of the most common operators you'll come across in JavaScript, but it's by no means an exhaustive list. At the bottom of this post, you can find a link to the MDN documentation, which has information on other kinds of JavaScript operators.

What is an operator?
Assignment operators
Comparison operators
Arithmetic operators
Logical operators
String operators
Ternary (conditional) operator

What is an operator?

In JavaScript, an operator is a way to compare or assign values, or perform operations. There are many different types of operators.

There are binary operators, unary operators, and a ternary operator in JavaScript. "Binary" means that there are two values, or operands, involved, with one coming before the operator, and one coming after the operator. An example of a binary operator is 1 + 2. In this example, 1 and 2 are the operands, and + is the operator.

A "unary" operator means that there is only one operand. The operand is either before the operator, or after the operator. An example of a unary operator is x++ (don't worry if you're unfamiliar with this syntax, we'll talk about below).

The "ternary" operator in JavaScript involves three operands. It's used as a shortened version of an if...else statement, and is therefore also known as a "conditional" operator. An example of a ternary operator is num >= 0 ? "Positive" : "Negative". In this example, the three operands are num >= 0, "Positive", and "Negative", and the operators that separate them are ? and :.

Assignment operators

An assignment operator is a binary operator. It assigns a value to the left operand based on the value of the right operand.

The most common assignment operator is =, as in a = b. In this example, a is the left operand, and it's assigned the value of b, which is the right operand.

There are also compound assignment operators. Compound assignment operators typically combine assignment and arithmetic operators in a shortened version. For example, a += b is a shortened version of a = a + b.

Below is a table of some of the most common assignment operators:

Operator name	Shortened operator	Longform version	Example
Assignment operator	a = b	a = b	`x = 4;`
Addition operator	a += b	a = a + b	`x += 4;`
Subtraction assignment	a -= b	a = a - b	`x -= 4;`
Multiplication assignment	a *= b	a = a * b	`x *= 4;`
Division assignment	a /= b	a = a / b	`x /= 4;`
Remainder assignment	a %= b	a = a % b	`x %= 4;`

Let's see some examples of the above operators:

let x = 10;
console.log((x += 3)); // x = 10 + 3 -> x = 13

let y = 8;
console.log((y -= 3)); // y = 8 - 3 -> y = 5

let z = 3;
console.log((z *= 3)); // z = 3 * 3 -> z = 9

let m = 6;
console.log((m /= 3)); // m = 6 / 3 -> m = 2

let n = 7;
console.log((n %= 3)); // n = 7 % 3 -> n = 1

Comparison operators

A comparison operator is a binary operator. It compares the two operands, and returns true or false depending on the comparison.

One comparison operator is less than, or <. For example, 1 < 2 would return true, because 1 is less than 2.

When comparing two values of different types, JavaScript does something called type conversion. This means that if you're comparing a string with an integer, for example, JavaScript will try to convert the string into a number so that the values can actually be compared. There are two comparison operators that don't do type conversion: strict equal, ===, and strict not equal, !==. Strict equal and strict not equal do not convert values of different types before performing the operation.

Below is a table of comparison operators in JavaScript:

Operator name	Operator symbol	Operator function	Example
Equal	`==`	Returns `true` if the operands are equal, and `false` if the operands are not equal.	`4 == "4"` (returns true)
Not equal	`!=`	Returns `true` if the operands are not equal, and `false` if the operands are equal.	`4 != "5"` (returns true)
Strict equal	`===`	Returns `true` if the operands are of the same type and are equal, and `false` if the operands are the same type and are not equal or are different types.	`4 === 4` (returns true)
Strict not equal	`!==`	Returns `true` if the operands are the same type but are not equal or are different types, and `false` if the operands are of the same type and are equal.	`4 !== "4"` (returns true)
Greater than	`>`	Returns `true` if the left operand is greater than the right operand, and `false` if the left operand is less than or equal to the right operand.	`4 > 3` (returns true)
Greater than or equal	`>=`	Returns `true` if the left operand is greater than or equal to the right operand, and `false` if the left operand is less than the right operand.	`4 >= "4"` (returns true)
Less than	`<`	Returns `true` if the left operand is less than the right operand, and `false` if the left operand is greater than or equal to the right operand.	`4 < "5"` (returns true)
Less than or equal	`<=`	Returns `true` if the left operand is less than or equal to the right operand, and `false` if the left operand is greater than the right operand.	`4 <= 7` (returns true)

Let's see some examples of the above operators:

let x = 5;
let y = 2;
let z = 7;
let m = "5";
let n = "6";

x == m; // 5 == "5" -> true
x != y; // 5 != 2 -> true
x === z; // 5 === 7 -> false
x !== m; // 5 !== "5" -> true
x > y; // 5 > 2 -> true
x >= z; // 5 >= 7 -> false
x < n; // 5 < "6" -> true
x <= m; // 5 <= "5" -> true

Arithmetic operators

An arithmetic operator can be a binary or unary operator. As a binary operator, it takes two numerical values as the operands, performs an arithmetic operation, and returns a numerical value. As a unary operator, it takes one numerical value, performs an operation, and returns a numerical value.

One arithmetic operator is the plus sign, +, which is used to add two numbers. For example, 4 + 6 would return 10. Below is a table of some of the arithmetic operators in JavaScript:

Operator name	Operator symbol	Operator function	Example
Addition	`+`	Binary operator. Returns the result of adding two operands.	`4 + 6` returns 10
Subtraction	`-`	Binary operator. Returns the result of subtracting one operand from another.	`5 - 2` returns 3
Multiplication	`*`	Binary operator. Returns the result of multiplying two operands.	`3 * 4` returns 12
Division	`/`	Binary operator. Returns the result of dividing one operand by another.	`9 / 3` returns 3
Remainder	`%`	Binary operator. Returns the integer remainder of dividing one operand by another.	`10 % 3` returns 1
Increment	`++`	Unary operator. Adds `1` to the operand. If it comes before the operand (`++z`), it returns the value of the operand after adding `1`. If it comes after the operand (`z++`), it returns the value of the operand before adding `1`.	If `z = 4`, `++z` returns `5`, and `z++` returns `4`.
Decrement	--	Unary operator. Subtracts `1` from the operand. If it comes before the operand (`--z`), it returns the value of the operand after subtracting `1`. If it comes after the operand (`z--`), it returns the value of the operand before subtracting `1`.	If `z = 4`, `--z` returns `3`, and `z--` returns `4`.
Exponentiation	`**`	Binary operator. Returns the result of raising one operand to the power of the other operand.	`5 ** 2` returns 25

Let's see some examples of the above operators:

let x = 3;
let y = 5;
let z = 6;
let a = 2;
let b = 7;

console.log(x + y); // 3 + 5 -> 8
console.log(y - x); // 5 - 3 -> 2
console.log(x * z); // 3 * 6 -> 18
console.log(z / x); // 6 / 3 -> 2
console.log(y % x); // 5 % 3 -> 2
console.log(a++); // 2
console.log(--b); // 6
console.log(y ** x); // 5 * 5 * 5 -> 125

Logical operators

A logical operator can be a binary operator or a unary operator. As a binary operator, it typically takes two Boolean values, evaluates them, and returns a Boolean value.

The unary logical operator in JavaScript is the logical NOT. It takes one operand and evaluates if it can be converted to the Boolean value true.

Below is a table of logical operators in JavaScript:

Operator name	Operator symbol	Operator function	Example
Logical AND	&&	Returns `true` if both operands are `true`, and returns `false` if at least one of the operands is `false`.	`true && true` (returns true) `true && false` (returns false)
Logical OR	\|\|	Returns `true` if at least one operand is `true`, and returns `false` if both operands are `false`.	`true` \|\| `false` (returns true) `false` \|\| `false` (returns false)
Logical NOT	!	Returns `false` if the operand can be converted to `true`, and returns `true` if the operand cannot be converted to `true`.	`!true` (returns false) `!false` (returns true)

Let's see some examples of the above operators:

true && true; // true
true && false; // false
false && false; // false

true || true; // true
true || false; // true
false || false; // false

!true; // false
!false; // true

String operators

A string operator is a binary operator. It takes two strings and combines them into a single string using +, which in this case is called the concatenation operator. String concatenation means combining two string values together.

An example of a string operator is console.log("Happy " + "birthday"), which console logs the string "Happy birthday".

There is also a shortened version of the string operator, which is +=. For example:

let string1 = "birth";
let string2 = "day";
console.log(string1 += string2) // "birthday"

Ternary (conditional) operator

A conditional operator, or ternary operator, is used with three operands. It's used to evaluate if a condition is true, and then returns one of two values depending on that.

The ternary operator is structured like the following:

condition ? expressionIfTrue : expressionIfFalse

Ternary operators are discussed at length in this post.

This post just went over some of the more common operators you'll use and come across in JavaScript. There are many more operators, including bitwise operators and relational operators, and I encourage you to learn more about them in the MDN documentation here.

Back to Basics: Functions, Hoisting, and Scope

ab — Thu, 21 Jan 2021 15:40:09 +0000

Today's post is about functions:

What is a function?
Function declarations
Function expressions
- Arrow functions
Calling functions
Hoisting
Scope and closures
Resources

What is a function?

A function in JavaScript is a set of statements that take some input, do a certain task, and return some output.

When working with functions, you first have to define the function, which involves naming it and saying what actions it does. Then, it actually get those actions to happen, you have to call the function.

There are two main ways to define a function: function declarations and function expressions. (Note: there also is something called the function constructor, though it's less commonly used.)

Function declarations

A function declaration, also known as a function definition or a function statement, is one way to define a function. It's structured like the following:

function name(input) {
  statements;
}

The name of the function is name. The input is the parameters for the function, and it's enclosed in parentheses. Inside of the curly brackets is statements, which do a certain task. statements often return a value, or an output. A function does not have to take in any parameters, so input is optional. The statements themselves are also optional (though that would just mean you'd have an empty function that didn't do anything).

For example, let's say we wanted to define a function using a function declaration that took in a number, and returned the given number times two:

function double(number) {
  return number * 2;
}

In this example, number is passed to the function by value alone; in other words, this function does not change number in the larger, global context. To illustrate what that means, let's insert a few console logs before and after the above function:

// declaring a variable called `count` and setting it equal to 3
let count = 3;
console.log(count); // 3

// declaring a function called `double` which returns an inputted number times 2
function double(number) {
  return number * 2;
}

// declaring a variable called `result` is set equal to calling the function `double` and passing the number `count` as the input
let result = double(count);
console.log(result); // 6

console.log(count); // 3

When we called the function double() and passed in count, we didn't change the value of count itself -- it still equaled 3.

However, this is only true of primitive parameters in JavaScript. If you pass a non-primitive parameter to a function (such as an array or object), and the function alters the object in some way, then the object is changed outside of the function as well. For example:

let fruits = ["apple", "banana", "orange"];

function removeLastElement(array) {
  array.pop();
  return array;
}

removeLastElement(fruits);

console.log(fruits); // ["apple", "banana"]

The above example uses the .pop() method, which removes the last element of an array. By passing in the fruits object as a parameter in removeLastElement(), the last element of fruits was removed, and the updated array was returned. When working with non-primitive values, it's important to keep in mind that passing them into functions may end up changing their value.

Function expressions

Another way to define functions is with a function expression. The main difference between a function expression and function declaration is that with function expressions, the function name is optional. If you don't include a function name, you have an anonymous function. A function expression is structured like the following:

function name(input) {
    statements;
}

Note that this is the exact same structure as function declaration. The following is an example of an anonymous function, meaning that it does not have a name. The function is set equal to a variable called triple:

const triple = function (number) {
  return number * 3;
};

Function expressions are often written as arrow functions. Arrow functions are considered to be compact versions of function expressions, and are often used to "clean up" code. Let's turn the above function into an arrow function:

// Standard function expression
function (number) {
  return number * 3;
};

// Arrow function
number => number * 3;

What changed with the arrow function? The words function and return were removed, there are no parentheses around the parameter number, the curly brackets were replaced by an arrow =>, and everything is on one line.

However, these rules vary depending on the arrow function. If the function has only one parameter, then you don't surround it in parentheses. If it has zero or 2+ parameters, then you do surround it in parentheses. If the function has only one statement, then you don't have the curly brackets or the word return. If the function has more than one statement, then you have both the brackets and the word return. Let's see an example of each of these:

// One parameter, one statement
number => number * 3; // AB

// Zero parameters, one statement (these are often used in callback functions)
() => x * 2;

// Two parameters, one statement
(a, b) => a - b;

// Two parameters, multiple statements:
(a, b) => {
  let tax = 0.05;
  return (a + b) * tax;
};

Arrow functions have a lot of changing syntax, depending on the function. However, it's less important to memorize exactly when to use parentheses around an input, than it is to recognize what an arrow function generally looks like, and where to find more resources about it. Over time and with practice, you'll end up not needing to refer back to the documentation. This is true of a lot of aspects of programming: rather than trying to memorize every little detail of how something is written and the specific ways to use it, it's much better to recognize something and know where to go for more information. Every programmer uses Google and refers to documentation, no matter how long they've been doing it.

Calling functions

Just because you defined a function, that doesn't mean the function has been executed. When you define a function, you say what it's called and what it's supposed to do. When you call a function, it actually gets performed.

To call a function, you refer to the function's name, and pass in arguments that correspond to the parameters. To call the function triple(), which we defined above, we need to refer to its name, and pass in one number as an argument:

triple(5);

Hoisting

Hoisting in JavaScript means that variable declarations and function declarations are brought to the top of the code.

This is tricky concept to grasp at first, so it can help to look at an example. Let's create a function using a function declaration, and call it numberSquared. numberSquared() will take an inputted number, and then console log that value squared. Then, after the function, we can call it, and we'll pass in the number 5.

function numberSquared(num) {
  console.log(num * num);
}

numberSquared(5);

The result of the above code is 25.

Now, what would happen if we called the function before we declared the function?

numberSquared(5);

function numberSquared(num) {
  console.log(num * num);
}

Again, the result of the above code is 25. This is because the function declaration was brought to the top when your code was compiled.

Keep in mind that only function declarations, not function expressions, are hoisted.

Scope and closures

A scope in JavaScript is what is currently "visible" or "accessible". According to MDN documentation, "If a variable or other expression is not 'in the current scope,' then it is unavailable for use."

In terms of functions, the variables that are declared in the function are only accessible within the function. This is called a closure.

To see examples of different scopes, let's look at the following:

const weather = "rainy";

function myNameAndTheWeather() {
  const name = "Alisa";

  console.log(name);
  console.log(weather);
}

myNameAndTheWeather();

console.log(weather);
console.log(name);

What would happen if we ran this program? The output would be the following:

Alisa
rainy
rainy
[ReferenceError: name is not defined]

To understand why these are the results, let's go over what the code says, and what happens when we run it. First, the variable weather is initialized and set equal to "rainy". Then, using a function declaration, the function myNameAndTheWeather() is defined. Inside of myNameAndTheWeather(), the variable name is initialized and set equal to "Alisa", name is console logged, and weather is console logged. Then, outside of the function, myNameAndTheWeather() is called. Then, weather is console logged. Finally, name is console logged.

When we run this program, the first thing that happens is that the function myNameAndTheWeather() is called. name is defined in the function, in the local scope, so the function is able to console log it. weather is defined outside of the function, in the global scope, so the function also has access to it. In other words, the function has access to variables declared in its own local scope (a closure) and in the global scope. Therefore, Alisa and rainy are logged to the console.

After myNameAndTheWeather() is executed, the program goes to the next line, which says to log weather to the console. weather is an accessible variable, so the program console logs its value. Finally, the program tries to console log the variable name. However, name is defined within the function myNameAndTheWeather(). It has a local scope, which means we don't have access to it from outside of the function. Therefore, a reference error is returned.

Let me know in the comments if you have any questions or other ways of thinking about functions, scope, and hoisting in JavaScript.

Resources

Back to Basics: Conditional Statements in JavaScript

ab — Thu, 14 Jan 2021 15:15:03 +0000

Today's post is about conditional statements:

What are conditional statements?
If...else statements
Switch statements
The ternary operator
Resources

What are conditional statements?

Conditional statements tell your program to do a certain set of commands if a certain condition is true. In JavaScript, there are if...else statements and switch statements.

Conditional statements are used all the time in the non-programming world. Let's say your friend asks you to pick them up some ice cream from the grocery store. They tell you, "If the store has mint chocolate chip ice cream, please get it. If the store doesn't have that, please get cookies and cream. If the store doesn't have that either, just get me chocolate ice cream." Written another way, your friend is saying:

If the store has mint chocolate chip ice cream: buy that.
Otherwise, if it has cookies and cream ice cream: buy that.
Otherwise: buy chocolate ice cream.

Each one of these statements has a condition ("the store has mint chocolate chip ice cream") and a statement to execute if that condition is true ("buy that"). It's also important to note that the order matters in these statements. Your friend doesn't want you to buy chocolate ice cream if cookies and cream is an option.

When working with conditional statements, it's important to keep in mind what you're checking, and what order things should be checked in.

If...else statements

An if...else statement is structured like the following:

if (condition) {
    statement_1;
} else {
    statement_2;
}

If condition is true, then statement_1 will execute. Otherwise, if the condition is false, then statement_2 will execute.

It's important to note that the else clause is optional. Also, you can test multiple conditions in sequential order using else if:

if (condition_1) {
    statement_1;
} else if (condition_2) {
    statement_2;
} else if (condition_3) {
    statement_3;
} else {
    statement_last;
}

When multiple conditions are being tested, only the first condition that evaluates to true is executed.

To execute multiple statements, group them in a block statement, like the following:

if (condition) {
    statement_1;
    statement_2;
} else {
    statement_3;
    statement_4;
}

For example, let's say we have an array that keeps track of the temperature on each day of the week. If it's the end of the week (as in, the array has 7 temperatures in it), we want to report back that it's been a whole week. Otherwise, we want to log that it's not the end of the week yet:

let arr = [55, 60, 58, 57, 54];
if (arr.length === 7) {
  console.log("It's been a whole week!");
} else {
  console.log("It's not the end of the week yet.");
}

Let's take that example a step further, and incorporate some of the loops we talked about in Back to Basics: Loops in JavaScript. Rather than just logging if it's the end of the week, we should return what the average temperate was that week.

There are multiple ways to find the average (or mean) of an array of numbers. One involves using a for loop to find the sum of every value of the array, and then dividing it by the length of the array (average is total sum divided by count). We'll start by initializing a variable which will equal the sum of every value in the array. Because we only want to find the average temperature of a full week, we will do this in the statement following the if condition.

let arr = [55, 60, 58, 57, 54, 52, 60];
if (arr.length === 7) {
  //initialize sum at 0 because we need to add values to it
  let sum = 0;
  //...
} else {
  console.log("It's not the end of the week yet.");
}

Then, we can use a for loop to go over each value of the array, and add it to sum. The for loop will start a counter at 0, because arrays are zero-indexed in JavaScript. It will go until the length of the array, or arr.length. And we want to check each element of the array, one at a time, so we will increment by 1 each time. Inside of the for loop, we want to add the current value of the array to sum. We can access the value of the array with arr[i].

let arr = [55, 60, 58, 57, 54, 52, 60];
if (arr.length === 7) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum = sum + arr[i]; // this could also be written as sum += arr[i]
  }
  //...
} else {
  console.log("It's not the end of the week yet.");
}

Once the for loop is done executing, sum contains the total sum of every temperate that week. Since we want to return the average temperature, we can divide sum by 7 (the number of days in the week), and console log that value.

let arr = [55, 60, 58, 57, 54, 52, 60];
if (arr.length === 7) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum = sum + arr[i]; // this could also be written as sum += arr[i]
  }
  console.log(
    "It's been a whole week! This week's average temperature was " +
      sum / 7 +
      "degrees."
  );
} else {
  console.log("It's not the end of the week yet.");
}

Switch statements

The other kind of conditional statement supported in JavaScript is the switch statement. A switch statement evaluates an expression, and depending on that evaluation, tries to match it to a specified case. If a case matches, then that case's statement executes. A switch statement looks like the following:

switch (expression) {
    case label_1:
        statement_1;
        break;
    case label_2:
        statement_2;
        break;
    default:
        statement_default;
        break;
}

First, expression is evaluated. Then, your program will look for a case whose label matches the value of the expression, and then the associated statement is executed. If no matching label can be found, your program will look for the default clause (which is optional), and executes the associated statement. If there is no default clause, your program will simply exit the switch statement.

The break statements tell your program to break out of the switch once that case's statement is executed. break statements are optional. If you don't include them, your program will stay in the switch statement, and will execute the next statement in the switch statement.

For example, let's say you're trying to decide what jacket to wear, and it depends on the weather. If it's hot, warm, or cold out, different jackets are appropriate:

switch (weather) {
  case "Hot":
    console.log("No jacket needed.");
    break;
  case "Warm":
    console.log("Bring a light jacket.");
    break;
  case "Cold":
    console.log("Bring your heavy jacket.");
    break;
  default:
    console.log("You probably should bring a jacket anyway, just in case!");
    break;
}

You may be wondering, what exactly do the break statements do? Using the same example, let's say you didn't include any of the break statements, and that weather = "Hot":

let weather = "Hot";
switch (weather) {
  case "Hot":
    console.log("No jacket needed.");
  case "Warm":
    console.log("Bring a light jacket.");
  case "Cold":
    console.log("Bring your heavy jacket.");
  default:
    console.log("You probably should bring a jacket anyway, just in case!");
}

The output would be:
No jacket needed. Bring a light jacket. Bring your heavy jacket. You probably should bring a jacket anyway, just in case!

This is because the label for the first case, "Hot", matches weather, so that statement executes. Then, each subsequent statement executes, since there are no breaks telling your program to stop.

The ternary operator

The ternary operator is not a type of conditional statement. Instead, it's an operator that checks a condition. It's a single line of code, and because it's so condensed, it's often used as a shortened version of a simple if...else statement.

The ternary operator is structured like the following:

condition ? expressionIfTrue : expressionIfFalse

The condition is an expression that's evaluated. If condition is truthy (meaning that it is true, or its value can be converted to true), expressionIfTrue is executed. If condition is falsy (meaning that it is false, or its value can be converted to false, which includes null, NaN, 0, "", undefined), expressionIfFalse is executed.

For example, let's say the original if...else statement checks if a number is positive:

const num = 4;
if (num >= 0) {
  console.log("Positive");
} else {
  console.log("Negative");
}

The condition is num >=0, which means that's what we're checking. Using a ternary operator, that will go on the left side of the question mark ?. If it's truthy, we'll want to console log "Positive", so that's the first expression after the ?. If it's falsy, we'll want to console log "Negative", so that's the second expression, and it comes after the colon :.

We can store the result of the ternary operator into a variable called positiveCheck. Then, we can console log the value of that variable.

const num = 4;
const positiveCheck = num >= 0 ? "Positive" : "Negative";
console.log(positiveCheck);

Some people like ternary operators because they save space when working with simple conditional statements, but not everyone likes them or uses them. Whether or not you use ternary operators, it's important to know what they look like and how to read them in case you encounter them.

Please let me know in the comments if you have any questions or other ways of thinking about conditional statements in JavaScript.

Resources:

Back to Basics: Loops in JavaScript

ab — Wed, 13 Jan 2021 14:16:35 +0000

The first installment in this series is about loops:

What is a loop?
- Infinite loops
While loops
For loops
Do...while loops
For...in loops
For...of loops
Resources

What is a loop?

A loop tells your program to repeatedly do a certain action. The number of times your program should do that action depends on the conditions that you set.

In non-programming terms, let's say you're giving your friend directions to your house. They call you and say that they're on your street, but they don't know which house is yours. You tell them, "keep walking north until you reach the yellow house on the corner". In this statement, "until you reach the yellow house on the corner" is the condition you've set for your friend. They will continue to walk north until they get to that house, at which point they'll stop walking.

What would happen if you didn't give your friend the condition? In other words, what would happen if you just said to your friend, "keep walking north"? Your friend would never know when to stop. They would keep walking north way past your house. You can't blame your friend for not finding your house, since you never told them when to stop.

This non-programming example illustrates one of the most common issues people encounter when working with loops: the infinite loop. If you don't tell your loop when to stop, the loop will keep going forever. Importantly, if you tell your loop when to stop, but that stopping point could never actually be reached, that also is an infinite loop. Using the same example, let's say you told your friend "keep walking north until you reach the pink house on the corner". Your friend keeps walking north, but no matter how far they walk, they never find a pink house on the corner. Even though you gave your friend an ending point, they never could reach that ending point, so they would (theoretically) keep walking forever.

When working with loops, it's very important that you say when the loop should stop running, and that that ending point can actually be reached.

While loops

One of the most popular loops is a while loop. A while loop is structured like the following:

while (condition) {
    statement
}

Before the statement is executed, condition is tested. If it evaluates to true, then the statement is executed. As long as condition is true, the statement continues to execute. When condition becomes false, the statement stops executing.

For example, let's say you have a variable called e, which starts out by equaling 0. You want e to keep incrementing (or increasing by 1) as long as e is less than 4.

let e = 0;
while (e < 4) {
    e++;
}

Here is a table breaking down what's going on in the above loop:

`e`	`e < 4`	Loop executes?
0	true	yes
1	true	yes
2	true	yes
3	true	yes
4	false	no

As long as e < 4 is true, the loop executes. When it becomes false, it does not execute.

It's very easy to accidentally write an infinite loop when working with while loops. For example, if the condition from the above example was e >= 0, then the loop will infinitely execute. e starts at 0, which means the condition is true, and keeps getting bigger, which means the condition will always evaluate to true:

//Infinite loop
let e = 0;
while (e >= 0) {
    e++;
}

For loops

Another loop that's widely used is the for loop. A for loop is structured like the following:

for (initialExpression; conditionExpression; incrementExpression) {
    statement
}

The initialExpression is the first thing that runs. Any variable created in this expression is scoped to the loop (meaning that you cannot refer to this variable from outside of the loop). The initialExpression is usually where a counter is initialized.

The conditionExpression is then evaluated for being either true or false. If it's true, then the statement executes. If it's false, the statement does not execute, and the for loop terminates. If no conditionExpression is listed, then the condition is automatically true.

The incrementExpression runs after the statement executes. Just as the initialExpression usually initializes a counter in a for loop, the incrementExpression usually increments that counter. However, the expression also can decrement the counter (or decrease by 1). At this point, the conditionExpression is evaluated again, and if it's still true, then the for loop continues to execute.

For example, let's create a for loop that logs the phrase "I can count to X" to the console, where X is a number starting at 1, and going to 5. We start by initializing a variable in the initialExpression with let i = 1. Then, we set the conditionExpression to i <= 5. This means that the statement will continue to run as long as i is less than or equal to 5. Finally, we want to increase i by 1 each time the loop executes, so incrementExpression is i++. Note: it's important that each of the expressions is separated by a semicolon, ;.

for (let i = 1; i <= 5; i++) {
    console.log("I can count to " + i)
}

Here is a table breaking down what's going on in the above loop:

`i`	`i <= 5`	Statement logged
1	true	"I can count to 1"
2	true	"I can count to 2"
3	true	"I can count to 3"
4	true	"I can count to 4"
5	true	"I can count to 5"
6	false

Infinite loops also happen with for loops. One example of an infinite loop would be using the same example above, but changing the third expression to be i--. i-- means that i keeps decreasing, so i will start at 1, then become 0, then -1, and so on. All the while, i <=5 will continue to evaluate to true, because i will always be less than or equal to 5.

//Infinite loop
for (let i = 1; i <= 5; i--) {
    console.log("I can count to " + i)
}

Do...while loops

The do...while loop is very similar to the while loop. A do...while loop is structured like the following:

do {
    statement
} while (condition);

The first thing that happens in this loop is the statement is executed. Once that happens, condition is checked. If condition evaluates to true, the statement executes again. The statement keeps executing until condition evaluates to false. The major difference between the do...while loop and the while loop is that the statement will always be executed at least once.

For example, let's initialize a variable called booksRead to equal 10. We want to log "I read X books this year" to the console, where X is the value of booksRead. We'll then set the condition to be booksRead < 14. Note: in the below example, I use string interpolation when console logging the number of books read this year. String interpolation is done by using template literals in JavaScript.

let booksRead = 10;
do {
    console.log(`I read ${booksRead} books this year`);
    booksRead++;
} while (booksRead < 14);

Here is a table breaking down what's going on in the above loop:

`booksRead`	Statement logged	`booksRead < 14`
10	"I read 10 books this year"	true
11	"I read 11 books this year"	true
12	"I read 12 books this year"	true
13	"I read 13 books this year"	true
14		false

One way you can create an infinite loop when working with do...while loops is if you don't increment the variable that you're checking in the condition. Using the same example as above, if you never increment booksRead, then booksRead stays at 10 forever, which means the condition, booksRead < 14, will always be true.

//Infinite loop
let booksRead = 10;
do {
    console.log(`I read ${booksRead} books this year`);
} while (booksRead < 14);

For...in loops

A for...in loop is used with an object in JavaScript. It's structured like the following:

for (variable in object) {
    statement
}

A for...in loop iterates a variable over each property (or key) of an object. For each property, the statement is executed. The loop enables you to access each property of an object without knowing the name of the property. for...in loops iterate over the object's properties in an arbitrary order. Therefore, according to MDN documentation, "it is best not to add, modify, or remove properties from the object during iteration, other than the property currently being visited". You also should not use for...in loops with arrays.

For example, let's say you had an object that listed each meal you had that day, and you wanted to console log everything you ate. The object is called foodIAte. Using a for...in loop, you can list the name of each meal, as well as what you ate for that meal.

const foodIAte = {
    breakfast: 'eggs',
    lunch: 'salad',
    dinner: 'pizza'
};

for(const meal in foodIAte) {
  console.log(`For ${meal}, I ate ${foodIAte[meal]}.`);
};

Here is a table breaking down what's going on in the above loop:

`meal`	`foodIAte[meal]`	Statement logged
breakfast	eggs	For breakfast, I ate eggs.
lunch	salad	For lunch, I ate salad.
dinner	pizza	For dinner, I ate pizza.

For...of loops

The last loop is the for...of loop. The for...of loop can be used with iterable objects, which includes arrays, maps, sets, strings, and more. It's structured like the following:

for (variable of iterableObject) {
    statement
}

The for...of loop iterates over iterableObject, and a statement is executed for the value of each property in iterableObject. While for...in loops iterate over the property name, for...of loops iterate over the property value.

For example, let's say you have an array, and want to console log each value of the array:

const array = [5, 10, 15];
for (const value of array) {
    console.log(value);
}

The above loop would console log 5, 10, 15.

Let's say you have a string, and want to console log each value of the string:

const string = "cat";
for (const value of string) {
    console.log(value);
}

The above loop would console log c, a, t.

Please let me know in the comments if you have any questions or other ways of thinking about loops in JavaScript.

Resources:

The Container with the Most Water: Solving an Algorithm about Areas

ab — Fri, 28 Aug 2020 18:34:36 +0000

Today's algorithm is the Container with the Most Water:

Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). n vertical lines are drawn such that the two endpoints of line i is at (i, ai) and (i, 0). Find two lines, which together with x-axis forms a container, such that the container contains the most water. Note: You may not slant the container and n is at least 2.

This is one of the problems on Leetcode that is phrased in a very complicated way, and definitely requires an example to go along with it. Let's say you were given the array [1,8,6,2,5,4,8,3,7]. Placing each of these numbers on a bar chart, you'd get:

When the problem asks for the "container with the most water", it means that if you drew a horizontal line between any two of the vertical bars in this chart, which one would have the largest area. In other words, if these bars held rectangular containers of water, which container would be the largest? In the below graph, the container held by the two red bars would be largest:

In this post, I'll break down how to approach this problem, and then will solve it using JavaScript.

Approaching the problem

One way to approach this problem is to check every pair of heights in the given array, determine the area between them, and return the one with the largest area. While this "brute force" solution would give us the right answer, it's not optimized. We therefore should find a way to only check some of the lines, and the area between them.

According to the instructions, the container of water must be rectangular--that is, there can't be a slanted line on one of the sides. That means that the height of the largest container is determined by a line that's not necessarily the tallest.

Let's look at the first example again: the height of the container with the most water is determined by the line that's 7 units long, not by the line that's 8 units long.

This gives us a clue to how we're going to solve this problem. We want to always be checking two lines at the same time--we can call one the "left" line, and one the "right" line. We can find whichever one is smaller, left or right, and then find the area between those two lines. We will keep track of these two lines with two pointers, left, which points at the left line, and right, which points at the right line.

We'll start by having left at the first line, and right at the last line, and will create a loop that keeps checking the lines as long as left is less than right. We'll find the area between those two lines, and then we can decide whether we want to move the left pointer toward the center, or the right pointer toward the center. If the left line is smaller than the right line, then there may be a line further on in the array that's taller and would produce a larger area; therefore, we'd want to increment the left pointer. If the right line is smaller than the left line, then there may be a line earlier on in the array that's taller and would produce a larger area; therefore, we'd want to decrement, or decrease by 1, the right pointer.

Solving the algorithm

To start, we'll initialize a few variables. max will store the maximum area, which we will return at the end. left is the left pointer, which will start at the index 0. right is the right pointer, which will start at the last element in the inputted array, height.

function maxArea(height) {
  let max = 0;
  let left = 0;
  let right = height.length - 1;

  //...
  return max;
}

Now, we'll create a while loop that will keep going as long as left is less than right. We can access the line that the left variable is pointing to with height[left], and the line that the right variable is pointing to with height[right]. We want to know which one is smaller, so inside the while loop, we'll create a variable called smallerLine. smallerLine will use the Math.min() method, which returns the smaller of two integers. We will pass in the left and right line.

function maxArea(height) {
  let max = 0;
  let left = 0;
  let right = height.length - 1;

  while (left < right) {
    let smallerLine = Math.min(height[left], height[right]);
    //...
  }
  return max;
}

Now, we want to see if the area between the two lines is larger than the current max area that we've found. To check this, we can use Math.max(), and pass in the current max, as well as smallerLine * (right - left). The area of a rectangle is calculated by multiplying height by width. The height is determined by smallerLine, and the width is the distance between the right and left pointers. We'll set max equal to whichever value is larger.

function maxArea(height) {
  let max = 0;
  let left = 0;
  let right = height.length - 1;

  while (left < right) {
    let smallerLine = Math.min(height[left], height[right]);
    max = Math.max(max, smallerLine * (right - left));
    //...
  }
  return max;
}

If the left line is smaller than the right line, then we'll want to increment the left variable. Otherwise, we'll want to decrement the right variable. At some point, left will no longer be smaller than right, and the while loop will finish running. When that happens, the function will return max, which contains the maximum area found.

function maxArea(height) {
  let max = 0;
  let left = 0;
  let right = height.length - 1;

  while (left < right) {
    let smallerLine = Math.min(height[left], height[right]);
    max = Math.max(max, smallerLine * (right - left));
    if (height[left] < height[right]) {
      left++;
    } else {
      right--;
    }
  }
  return max;
}

Please let me know if you have any questions or alternate ways of solving this problem!

Finding the Angle Between the Hands of a Clock

ab — Wed, 22 Jul 2020 20:04:45 +0000

Today's algorithm is the Angle Between the Hands of a Clock Problem:

Given two numbers, hour and minutes. Return the smaller angle (in degrees) formed between the hour and the minute hand.

Let's say you were given the time 3:00. By looking at a clock, you can see how the smaller angle between the hour and minute hand forms 90 degrees:

But if you were given a time like 8:15, you can't immediately tell that the angle is 157.5 degrees:

This problem is one of those that is less programming-based and more logic-based. Because of that, in this post I'll spend longer on the "approach" section, and then will go into an explanation for how to code the solution.

Approaching the Problem

Let's start by looking at a blank clock. A clock, which is a circle, is 360 degrees. Since there are 12 hours, each slice between the hour is is 360 / 12, or 30 degrees.

Since there are 60 minutes in an hour, each move of a minute hand is 360 / 60, or 6 degrees.

Calculating the angle of the minute hand, therefore, just means you multiply the number of minutes by 6. If we were given the time 11:20, we know the minute hand is at 6 * 20, or 120 degrees. By that, I mean that the angle between the 12 (which is 0/360 degrees), and the minute hand is 120 degrees.

Calculating the angle of the hour hand is a bit trickier. When it's 8:15, the hour hand is not directly on the 8. Instead, it's a bit after the 8. We need to know exactly how much that "bit" is. Since there are 60 minutes in an hour, and the hour hand moves 30 degrees every 60 minutes, that means that the hour hand moves 30 / 60, or 0.5 degrees every minute. Therefore, the angle of the hour hand can be calculated by multiplying the hour by 30, multiplying the minutes by 0.5, and adding those two results. If we were given the time 8:15, we'd know the hour hand is a bit past the 8. When it's at the 8, the hour hand is 8 * 30, or 240 degrees past the 12. The fifteen minutes are another 15 * 0.5, or 7.5 degrees, more. In total, therefore, at 8:15, the hour hand is at an angle of 247.5 degrees.

Now we know the angle of the minute hand, and the angle of the hour hand. So, we'll want to find the difference between these numbers. We don't know, however, which hand has the bigger angle. For example, if we were given the time 3:30, our clock would look like this:

The hour hand is at an angle of 105 degrees, whereas the minute hand is at an angle of 180 degrees. If we did hour hand minus minute hand, we'd get -75 degrees--whereas we actually want 75 degrees. Therefore, we can just do the absolute value of whatever the difference between the hour and minute hand are. "Absolute value" is the non-negative version of a number. If a number is already positive, it doesn't change with absolute value. If a number is negative, doing absolute value on that number essentially multiplies the number by -1. We can do absolute value in JavaScript with Math.abs(), which you can learn more about here.

The last thing we have to think about in terms of the approach is that we want the smaller angle between the hour and minute hand. For example, let's say the time given was 12:30. Because of the way we're calculating the angle of the hour hand, it would be at (hour * 30) + (minutes * 0.5), or (12 * 30) + (30 * 0.5), or 375 degrees. The minute hand would be at an angle of 15 degrees. The absolute value of the difference between hour hand and minute hand is Math.abs(375 - 180), or 195, but 195 degrees is the larger angle between the hands. What we want is the smaller angle between the hands, which we can find by doing 360 - 195, or 165.

Therefore, we want to return whichever number is smaller: the angle, or 360 minus the angle. To find which number is smaller, we can use Math.min(), passing in both numbers. You can learn more about Math.min() here.

Coding the Solution

We're ready to code the solution! Now that we've spent so long on the approach, the coding won't take long.

We'll start by initializing a few variables. minuteAngle can be calculated by multiplying minutes by 6. hourAngle can be calculated by multiplying hour by 30, minutes by 0.5, and summing those numbers.

function angleClock(hour, minutes) {
    const minuteAngle = minutes * 6;
    const hourAngle = (hour * 30) + (minutes * 0.5);
    //...
}

We want to find the angle between the hour and minute hands. We'll initialize a new variable called angle, which will be the difference between hourAngle and minuteAngle. We'll pass this difference into Math.abs(), so that we have the positive version of the answer.

function angleClock(hour, minutes) {
    const minuteAngle = minutes * 6;
    const hourAngle = (hour * 30) + (minutes * 0.5);
    const angle = Math.abs(hourAngle - minuteAngle);
    //...
}

Finally, we want to return either angle, or 360 - angle--whichever is smaller. We can pass these two values into Math.min().

function angleClock(hour, minutes) {
    const minuteAngle = minutes * 6;
    const hourAngle = (hour * 30) + (minutes * 0.5);
    const angle = Math.abs(hourAngle - minuteAngle);
    return Math.min(angle, 360 - angle);
}

Let me know in the comments if you have any questions or alternate ways of solving this problem!

Finding the Most Frequent Elements in an Array

ab — Fri, 17 Jul 2020 16:52:35 +0000

Today's algorithm is the Top K Frequent Elements problem:

Given a non-empty array of integers, return the k most frequent elements.

For example, if you were given the array [1, 1, 1, 2, 2, 3, 3, 3], and k = 2, you'd want to return the two most frequently found elements in the array, which is [1, 3].

This problem has a number of ways to solve it, and many solutions use complex algorithms or sorting techniques. In this post, I'll use commonly found methods to solve this problem. I'll start by discussing how I'll approach the algorithm, and then will code the solution in JavaScript.

Approaching the Problem

Many times, when algorithms are based on the frequency of an element, it's a good opportunity to use a hash. A hash is so convenient because it stores key-value pairs, where keys can be the element, and the value is its frequency.

In this algorithm, we'll create a hash which will store the frequency of each element in the inputted array. We will then use the Object.entries() method, which will turn each key-value pair in the hash into an array of arrays. For example, if the given hash were { '1': 3, '2': 2, '3': 3 }, calling Object.entries() and passing in the hash would give us [ [ '1', 3 ], [ '2', 2 ], [ '3', 3 ] ]. You can read more about Object.entries() here.

With this array, we can then sort it by frequency, and ultimately return the first k numbers in the sorted array.

Coding the Solution

We'll start by initializing an empty object, called hash. We'll then want to go through each element in the nums array and add it to hash. If the element has already been seen in hash, then we can increment its value. Otherwise, we can initialize it to 0.

There are many ways to iterate through an array, and in this solution I'll use a for...of loop. You can read more about them here.

function topKFrequent(nums, k) {
    let hash = {}

    for (let num of nums) {
        if (!hash[num]) hash[num] = 0
        hash[num]++
    }

    //...
}

For problems like this, I think it's helpful to stop every so often and see what the variables equal at each point. If we were given nums = [1, 1, 1, 2, 2, 3, 3, 3], then at this point, hash = { '1': 3, '2': 2, '3': 3 }. You may notice that each key in the hash is a string--that'll be an important thing to correct in a later step.

For now, we want to turn hash into an array of arrays, using Object.entries(), as discussed above. We'll save the value to a variable called hashToArray.

function topKFrequent(nums, k) {
    let hash = {}

    for (let num of nums) {
        if (!hash[num]) hash[num] = 0
        hash[num]++
    }

    const hashToArray = Object.entries(hash)
    //...
}

Using the same example, where nums = [1, 1, 1, 2, 2, 3, 3, 3], at this point, hashToArray = [ [ '1', 3 ], [ '2', 2 ], [ '3', 3 ] ]. Now, we want to sort the elements in hashToArray. The first value (index 0) in each inner hash is the element in nums. The second value (index 1) in each inner hash is how many times that element was found in nums. Therefore, since we want to find the most frequent elements, we'll need to sort hashToArray, from most frequently found to least frequently found.

We can use .sort(), and sort each inner array by the value at index 1. In other words, we'll pass in the callback function (a,b) => b[1] - a[1]. We'll store this sorted array in a variable called sortedArray.

function topKFrequent(nums, k) {
    let hash = {}

    for (let num of nums) {
        if (!hash[num]) hash[num] = 0
        hash[num]++
    }

    const hashToArray = Object.entries(hash)
    const sortedArray = hashToArray.sort((a,b) => b[1] - a[1])
    //...
}

Continuing with the same example, where nums = [1, 1, 1, 2, 2, 3, 3, 3], at this point, sortedArray = [ [ '1', 3 ], [ '3', 3 ], [ '2', 2 ] ]. Now, for the solution, all we want to return are the most frequently found elements--we don't need to return how many times each element was found. Therefore, we only want the elements at index 0 in sortedArray.

As mentioned above, the elements at index 0 are all strings, and we need to return integers. Therefore, we'll use parseInt, which converts a string to an integer, and pass in the numbers at index 0 of each inner array in sortedArray.

We'll want to store these sorted elements in a new array, which we will call sortedElements. We'll call .map() on sortedArray, and tell it to return the integer version of the first element in each inner array of sortedArray.

function topKFrequent(nums, k) {
    let hash = {}

    for (let num of nums) {
        if (!hash[num]) hash[num] = 0
        hash[num]++
    }

    const hashToArray = Object.entries(hash)
    const sortedArray = hashToArray.sort((a,b) => b[1] - a[1])
    const sortedElements = sortedArray.map(num => parseInt(num[0]))
    //...
}

At this point, if nums = [1, 1, 1, 2, 2, 3, 3, 3], then sortedElements = [1, 3, 2]. We're so close! All that's left to do is to return the first k elements of this array. To do that, we'll use .slice(), passing in 0 and k. We will return this sliced off ported of sortedElements, giving us the final result.

function topKFrequent(nums, k) {
    let hash = {}

    for (let num of nums) {
        if (!hash[num]) hash[num] = 0
        hash[num]++
    }

    const hashToArray = Object.entries(hash)
    const sortedArray = hashToArray.sort((a,b) => b[1] - a[1])
    const sortedElements = sortedArray.map(num => parseInt(num[0]))
    return sortedElements.slice(0, k)
}

Let me know if you have any questions or other ways you'd solve this problem!

From "hello world" to "world hello": Reversing the Words in a String

ab — Wed, 15 Jul 2020 18:29:59 +0000

Today's algorithm is Reverse the Words in a String:

Given an input string, reverse the string word by word.

If the inputted string has whitespaces at the start or end, or extra spaces between words, the function should remove those spaces. For example, if you were given the string " hello world ", the function should output "world hello".

I like this algorithm because it combines a lot of different processes and tricks seen in many other problems. In this post, I'll discuss how I'll approach this problem, and then will code the solution in JavaScript.

Approaching the Problem

Strings themselves aren't very easy to work with in JavaScript. However, turning strings into arrays gives us a lot more to work with -- we can traverse arrays, delete elements, and reverse them, which is exactly what we'll need to do in this problem.

You can think of this problem as having a few distinct sections:

turn the string into an array using .split()
traverse the array, and delete any white spaces using `.splice()
reverse the array using two pointers
turn the array into a string using .join(), and return it

In the next section, I'll break down each of these parts.

Coding the Solution

First, we need to turn the string into an array. For this, we can use .split(). If we pass in a single blank space as the argument in .split(), that means the string will be split on blank spaces. For example:
const string = "happy birthday" const arr = string.split(" ") // arr = ["happy", "birthday"]

We can store the split string into a variable called arr.

javascript function reverseWords(s) { const arr = s.split(" ") //... }

Now, the second thing we want to do is traverse the array arr and delete any white spaces. If there were leading or trailing whitespaces, or multiple spaces between words, then arr will have elements that are simply empty strings. Since our output shouldn't have these extra spaces, we'll need to delete them.

We can traverse arrays multiple ways, but for this I'll use a for loop. The for loop will go through each element in the array at index i. If the array at that index is an empty space, then we'll use .splice() to delete the element at that index. .splice() will take in two arguments: the index of the element to delete, which in this case is i, and the number of elements to delete, which in this case is 1.

The other important thing to do is to decrement, or decrease the count by 1, of i every time we delete an extra space from the array. This is an important step in case there are instances where there are two extra whitespaces in a row--if we don't decrement i, then we will skip over the second whitespace.

javascript function reverseWords(s) { const arr = s.split(" ") for (let i = 0; i < arr.length; i++) { if (arr[i] === "") { arr.splice(i, 1) i-- } } //... }

The third step in our solution is to reverse the array. You can reverse arrays with .reverse(), but I personally like using two pointers. The reason I do this is because I think it's good practice to know how to reverse an array in place without using built-in methods--this kind of question comes up in programming interviews all the time.

So, for this problem, we'll use two pointers: one called left, which starts at index 0, and one called right, which starts at arr.length - 1, which is the last index in the array. We'll set up a while loop that will keep running as long as left is less than or equal to right. In the while loop, we'll swap the elements at the left and right pointers, and then will move the pointers closer to each other: left will increment, and right will decrement.

An important thing to keep in mind when swapping is to have a variable that temporarily stores the values of one of the points that will be swapped. We'll do this by setting a variable called temp equal to the array at the left pointer.

javascript function reverseWords(s) { const arr = s.split(" ") for (let i = 0; i < arr.length; i++) { if (arr[i] === "") { arr.splice(i, 1) i-- } } let left = 0 let right = arr.length - 1 while (left <= right) { const temp = arr[left] arr[left] = arr[right] arr[right] = temp left++ right-- } //... }

We now have an array of words in reverse order, without any extraneous whitespaces. We're almost done! The only thing left to do is to turn the array into a string, and return the string. We can turn the array into a string using .join(), and pass in a string with a single space: .join(" "). This means that the elements of the array will join together in a string, and each element will be separated by a single space.

Please let me know in the comments if you have any questions or other ways of solving this problem!

Solving Binary Tree Algorithms Using Recursion and Queues

ab — Mon, 13 Jul 2020 18:27:21 +0000

Today's algorithm is the Same Tree Problem:

Given two binary trees, write a function to check if they are the same or not. Two binary trees are considered the same if they are structurally identical and the nodes have the same value.

For example, if you were given the trees

   1            1
 /   \        /   \
2     3      2     3

the function should return true, since these trees are structurally the same and the nodes have the same value. But if you were given the trees

   1            1
 /   \        /   \
2     3      4     8

the function should return false. Although the trees are structurally the same, they do not have the same values.

Before discussing how to approach and solve this problem, it's valuable to talk about what binary trees are. A binary tree is a data structure containing nodes. The topmost node is called the root. Each node has a value, as well as a right reference and a left reference. You can learn more about binary trees here.

In this problem, we want to check each node in both of the inputted binary trees and to see if their values are equal to one another, and if the structure is the same. In this post, I'll go over two ways to approach and solve this problem with JavaScript: using recursion and using a queue.

Approach #1: Recursion

To solve this problem using recursion, we want to check each node in both trees. If those nodes are not equal, or if one node is null (meaning it doesn't exist) and the other one is not null, then we know the trees are not identical. Otherwise, we'll check the left nodes and right nodes, and keep going down the trees until we reach null on both trees. If the trees are null at the same point, and at no point were the node's values unequal, then we can return true.

Coding the first approach

To start a recursive solution, we have to consider base cases. If the nodes of both trees are null at the same point, then we can return true. If the node of one tree is null, but the other tree is not null, then we know the trees are unequal, so we can return false.

function isSameTree1(p, q) {
    if (p === null && q === null) return true;
    if (p === null || q === null) return false;
    //...
}

If the values at the nodes are unequal, we know the trees are not identical, so we can return false. We can check the value of the nodes with .val because that was given in the Leetcode problem.

function isSameTree1(p, q) {
    if (p === null && q === null) return true;
    if (p === null || q === null) return false;
    if (p.val !== q.val) return false;
    //...
}

The last element of the recursive solution is to actually make the recursive calls. We want to check both the right and the left nodes of both trees. That means we'll want to make two recursive calls to the function, one for the nodes on the left, accessed using .left, and one for the nodes on the right, accessed using .right. We'll separate these calls with the and operator, &&, because the nodes have to be equal on both the right and the left for the trees to be equal.

function isSameTree1(p, q) {
    if (p === null && q === null) return true;
    if (p === null || q === null) return false;
    if (p.val !== q.val) return false;
    return isSameTree1(p.left, q.left) && isSameTree(p.right, q.right);
}

Approach #2: Queues

To solve this problem using queues, we want to create a queue for both of the inputted trees. A queue is a data structure that uses first in, first out logic: the first node to get added to the list is the first one to be removed from the list. This structure is useful when working with trees because we can add nodes in a systematic way, and check them systematically as well.

In this problem, we'll check the first node from both queues to see if their values are different. If so, we know the trees aren't identical, so we can return false. Otherwise, we'll add the left and right nodes of both trees to the respective queues. If one tree has a left node, and the other one doesn't, then we know the trees aren't identical, so we can return false (the same is true in the case of right nodes). If we check every left and right node in both trees, they were identical every time, then we know the trees are identical.

Coding the second approach

We'll start the second solution with the same base cases as above: if both tree's roots are null, then the trees are the same, and we can return true. If one tree's root is null, but the other isn't, then the trees are different, and we can return false.

function isSameTree2(p, q) {
    if (p === null && q === null) return true;
    if (p === null || q === null) return false;

    //...
}

We'll want to create two queues, one for each tree. In JavaScript, we can do that by creating an array, and placing the root node in it.

function isSameTree2(p, q) {
    if (p === null && q === null) return true;
    if (p === null || q === null) return false;

    let queueP = [p]
    let queueQ = [q]

   //...
}

Now, we'll set up a while loop -- as long as there are still values in both queues to check, we'll keep checking the values. Inside the while loop, we'll set up two variables -- the current node in queueP that we're checking, and the current node in queueQ that we're checking. We can access these variables using .shift(), which removes the first element from an array.

function isSameTree2(p, q) {
    if (p === null && q === null) return true;
    if (p === null || q === null) return false;

    let queueP = [p]
    let queueQ = [q]

    while (queueP.length && queueQ.length) {
        const currentP = queueP.shift();
        const currentQ = queueQ.shift();
        //...
    }
    //...
}

If currentP and currentQ have different values, we can return false.

We want to check if there are nodes to the left of the current nodes we're checking in both trees. If there are nodes to the left of both currentP and currentQ, then we'll push those left nodes to the respective queues. If one tree has a node to the left, but the other tree doesn't, that means their structures are not the same, so we can return false.

function isSameTree2(p, q) {
    if (p === null && q === null) return true;
    if (p === null || q === null) return false;

    let queueP = [p]
    let queueQ = [q]

    while (queueP.length && queueQ.length) {
        const currentP = queueP.shift();
        const currentQ = queueQ.shift();
        if (currentP.val !== currentQ.val) return false;

        if (currentP.left && currentQ.left) {
            queueP.push(currentP.left)
            queueQ.push(currentQ.left)
        } else if (currentP.left || currentQ.left) return false;

        //...
    }
    //...
}

We can do the same for the right nodes -- if both currentP and currentQ have right nodes, then we can push them to their respective queues. If one tree has a right node, and the other one does not, we can return false.

This while loop will keep checking the nodes as long as new nodes are in the queues. If every node has been added to the queues and checked in the loop, and false was never returned, then we know the trees are identical, so we can return true.

function isSameTree2(p, q) {
    if (p === null && q === null) return true;
    if (p === null || q === null) return false;

    let queueP = [p]
    let queueQ = [q]

    while (queueP.length && queueQ.length) {
        const currentP = queueP.shift();
        const currentQ = queueQ.shift();
        if (currentP.val !== currentQ.val) return false;

        if (currentP.left && currentQ.left) {
            queueP.push(currentP.left)
            queueQ.push(currentQ.left)
        } else if (currentP.left || currentQ.left) return false;

        if (currentP.right && currentQ.right) {
            queueP.push(currentP.right)
            queueQ.push(currentQ.right)
        } else if (currentP.right || currentP.right) return false;
    }
    return true;
}

Let me know in the comments if you have questions or other solutions to this problem!

The Maximum Number of Events Problem

ab — Fri, 10 Jul 2020 00:32:12 +0000

Today's algorithm is the Maximum Number of Events problem:

Given an array of events where events[i] = [startDayi, endDayi]. Every event i starts at startDayi and ends at endDayi. You can attend an event i at any day d where startTimei <= d <= endTimei. Notice that you can only attend one event at any time d. Return the maximum number of events you can attend.

Let's say we had a calendar for a four day week. The calendar is full of events, which each can span multiple days. Each color block represents an event:

You don't have to go to each event every day--you can go to one day of a three day event. If you wanted to maximize the number of events you go to, you'd break up your calendar like this, where you'd only go to the events on the darkly shaded days:

This way, you can go to all four events! This algorithm is asking you to write a function that computes that. If you were to turn the above calendar into an array of events, where the first elements is the start day and the second element is the end day, you'd get [[1, 3], [2, 4], [4, 5], [2, 3]]. The function's output should be 4, because that's the maximum number of events you can go to.

This problem is very tricky. There's a few ways to solve it, and if you write in a language like Java you can use Priority Queues. However, in this post I'll go over a solution to this that's written in JavaScript and uses sets.

Approaching the Problem

A set is useful in this problem because it keeps track of unique numbers. You can't have duplicates in a set, which means you can quickly look up to see if a value has already been seen.

To make use of sets, we'll want to order the inputted events, sorting them by end day: the events with the earlier end days will come first in the events array, and the events with the later end days will come last in the array. We'll then create nested for loops, which will initially just check the start day of each event. If that start day hasn't yet been seen in the set, we'll add that day to the set--in other words, we want to keep track of every unique starting day. If that start day has been seen in the set, we'll want to check the end day--if the end day hasn't been seen yet, and therefore isn't in the set, then we can add it to the set. By the end, we'll just return the size of the set.

I think this is the kind of problem that's harder to explain in words without also coding the solution, so I'll just jump into it.

Coding the Solution

We'll start by checking for base cases -- if the events array has 1 event in it, then the maximum number of events we can go to is 1. If the array has no events, then the maximum number is 0.

function maxEvents(events) {
    if (events.length < 2) return events.length
    //...
}

We'll then sort the array, using .sort(), passing in a callback function which will order the events by end day. Since the event arrays are [startDay, endDay], and arrays are 0 indexed, we know the end day is at index 1. To sort something in an increasing order using .sort(), we can pass in the function (a,b) => a - b -- but in the case, since we're interested in sorting by end time, we'll pass in (a,b) => a[1] - b[1].

We'll also want to initialize a set, which we'll call unique. At the very end of the function, we can return unique.size. .size is a method for sets which returns the number of elements in the set.

function maxEvents(events) {
    if (events.length < 2) return events.length
    events.sort((a,b) => a[1] - b[1])
    let unique = new Set()
    //...
    return unique.size;
}

We'll now want to create two nested for loops. The first, outer, for loop will check each event in the events array. The second, inner, for loop will check each day within each event.

The outer for loop will iterate from 0 to events.length, whereas the inner for loop will iterate from events[i][0] to events[i][1].

function maxEvents(events) {
    if (events.length < 2) return events.length
    events.sort((a,b) => a[1] - b[1])
    let unique = new Set()
    for (let i = 0; i < events.length; i++) {
        for (let j = events[i][0]; j <= events[i][1]; j++) {
            //...
        }
    }
    return unique.size;
}

Inside these nested loops, we want to check if unique has already seen the date. The date is accessed through the value of j. We can check if a value is in a set by calling .has() on unique, and passing in j. We can put the not operator ! in front of this, because we're only interested in instances where the value has NOT been seen in the set.

function maxEvents(events) {
    if (events.length < 2) return events.length
    events.sort((a,b) => a[1] - b[1])
    let unique = new Set()
    for (let i = 0; i < events.length; i++) {
        for (let j = events[i][0]; j <= events[i][1]; j++) {
            if (!unique.has(j)) {
                //...
            }
        }
    }
    return unique.size;
}

If that date hasn't been seen in the set unique, then we'll want to add it using .add, passing in j.

At this point, we're nearly done -- we're checking every date, seeing if it's already been found in another event, and adding it to the calendar if it hasn't. There's one last piece to this function that we should add: break.

When it's called, a break statement jumps out of a loop. That means that, by calling break inside the inner loop, the inner loop will stop executing, and the outer loop will increment. We want to call break once we add a value to unique because we don't want to add every event's end date: if a start date hasn't been seen before, we want to add it to unique, but we don't need to check the end date.

The reason for why we need a break statement can be seen with an example. Let's say the events array was [[1, 2], [2, 3]]. If we didn't have a break statement, then the function would add every unique date--both start date and end date--to a set. By the end of the function, the set would be {1, 2, 3}, which has a size of 3--but by looking at the array, we know there's no way we could go to three events. By only checking the end date if the start date isn't unique, we prevent errors like this one.

function maxEvents(events) {
    if (events.length < 2) return events.length
    events.sort((a,b) => a[1] - b[1])
    let unique = new Set()
    for (let i = 0; i < events.length; i++) {
        for (let j = events[i][0]; j <= events[i][1]; j++) {
            if (!unique.has(j)) {
                unique.add(j);
                break;
            }
        }
    }
    return unique.size;
}

Let me know in the comments if you have questions or alternate solutions!

Solving Pascal's Triangle in JavaScript

ab — Tue, 07 Jul 2020 22:58:42 +0000

Today's algorithm is to solve Pascal's Triangle:

Given a non-negative integer numRows, generate the first numRows of Pascal's triangle.

Pascal's Triangle is a triangle that starts with a 1 at the top, and has 1's on the left and right edges. Each element is the sum of the two numbers above it.

In this algorithm, if you're given the number 6, your function should output
[ [ 1 ], [ 1, 1 ], [ 1, 2, 1 ], [ 1, 3, 3, 1 ], [ 1, 4, 6, 4, 1 ], [ 1, 5, 10, 10, 5, 1 ] ], which would also be drawn out as

In this post, I'll discuss how to approach this problem, and then go over the solution using JavaScript.

Approaching the Pascal Triangle Problem

In Pascal's Triangle, the first and last item in each row is 1. Each of the inner numbers is the sum of two numbers in a row above: the value in the same column, and the value in the previous column.

One way to approach this problem is by having nested for loops: one which goes through each row, and one which goes through each column. If we're in the first column, we can add 1 to the row. For the subsequent columns, we can add the two values from the above row. If we're in the last column of the row, we can add 1 to the row. We know we're in the last column because the number of columns in each row is equal to the row that we're on--in other words, it's an equilateral triangle.

Coding the Solution

To start coding the solution, we can account for two test cases; if the number of rows in the triangle is 0, then we can automatically return an empty array, []. If the number of rows is 1, then we can return a two-dimensional array with one row and one column, [[1]].

function pascals(numRows) {
    if (numRows === 0) return [];
    if (numRows === 1) return [[1]];
    //...
}

We can initialize an array called result, which we'll return at the end of algorithm--so we can include that return statement now.

We also can set up the first for loop. The outer for loop will account for each row, so it'll increment from 1 until it equals numRows.

function pascals(numRows) {
    if (numRows === 0) return [];
    if (numRows === 1) return [[1]];
    let result = [];
    for (let row = 1; row <= numRows; row++) {
        //...
    }
    return result;
}

Inside the loop, we'll initialize an array called arr. arr will store the value of each row we're in, and will end up getting pushed to the result array.

function pascals(numRows) {
    if (numRows === 0) return [];
    if (numRows === 1) return [[1]];
    let result = [];
    for (let row = 1; row <= numRows; row++) {
        let arr = [];
        //...
        result.push(arr);
    }
    return result;
}

We also need to set up an inner for loop. The inner for loop will keep track of the column we're on, so it'll increment from 0 until it reaches the value of row. We know to increment to the value of row because we're building an equilateral triangle, which means the number row we're on equals the number of columns in that row.

Inside the inner for loop, we want to check if we're in the first or last column. So if col equals 0, or col equals row - 1, then we want to push 1 into arr.

function pascals(numRows) {
    if (numRows === 0) return [];
    if (numRows === 1) return [[1]];
    let result = [];
    for (let row = 1; row <= numRows; row++) {
        let arr = [];
        for (let col = 0; col < row; col++) {
            if (col === 0 || col === row - 1) {
                arr.push(1);
            }
            //...
        }
        result.push(arr);
    }
    return result;
}

Finally, for all of the other columns, we want to push the sum of two values to arr. The first value is the element in the array that's one column to the left, and two rows up. The second value is the element in the array that's in the same column, and two rows up.

The reason we're checking for the element that's two rows up is that we start incrementing the outer for loop at 1, but the result array is 0-indexed.

function pascals(numRows) {
    if (numRows === 0) return [];
    if (numRows === 1) return [[1]];
    let result = [];
    for (let row = 1; row <= numRows; row++) {
        let arr = [];
        for (let col = 0; col < row; col++) {
            if (col === 0 || col === row - 1) {
                arr.push(1);
            } else {
                arr.push((result[row-2][col-1] + result[row-2][col]));
            }
        }
        result.push(arr);
    }
    return result;
}

Let me know in the comments if you have other solutions or any questions!

Forem: ab

Back to Basics: Operators, Operators, Operators

What is an operator?

Assignment operators

Comparison operators

Arithmetic operators

Logical operators

String operators

Ternary (conditional) operator

Back to Basics: Functions, Hoisting, and Scope

What is a function?

Function declarations

Function expressions

Calling functions

Hoisting

Scope and closures

Resources

Back to Basics: Conditional Statements in JavaScript

What are conditional statements?

If...else statements

Switch statements

The ternary operator

Resources:

Back to Basics: Loops in JavaScript

What is a loop?

While loops

For loops

Do...while loops

For...in loops

For...of loops

Resources:

The Container with the Most Water: Solving an Algorithm about Areas

Approaching the problem

Solving the algorithm

Finding the Angle Between the Hands of a Clock

Approaching the Problem

Coding the Solution

Finding the Most Frequent Elements in an Array

Approaching the Problem

Coding the Solution

From "hello world" to "world hello": Reversing the Words in a String

Approaching the Problem

Coding the Solution

Solving Binary Tree Algorithms Using Recursion and Queues

Approach #1: Recursion

Coding the first approach

Approach #2: Queues

Coding the second approach

The Maximum Number of Events Problem

Approaching the Problem

Coding the Solution

Solving Pascal's Triangle in JavaScript

Approaching the Pascal Triangle Problem

Coding the Solution

Top Interview Question: Finding the First Unique Character in a String using Linear Time

Approaching the Problem

Coding the Solution