Prep Course

String Methods

Replace

Replace is a type of method and function that needs two pieces of information to work properly. Example below.

Note that replace() works to replace one string, or a part of a string, with another. In the code seen here, the first string in the parentheses, brokenString, is the string you will be replacing. The second, newString, is the string you want to put in. Play around with the REPL below to get a better sense of how this method works.

// First, let's see a normal string:
let description = "The hottest dance craze is the backslide.";
console.log(description);

// replace() replaces part of a string with something else
console.log(description.replace("backslide", "chicken"));

Leaving the original intact

let word = "the word is not Capitalized CorrectlY.";
console.log(word);
word.toLowerCase();
console.log(word);
word.replace("the", "The");
console.log(word);
let lowerCased = word.toLowerCase();
let capitalized = lowerCased.replace("the", "The");
let corrected = capitalized.replace("not ", "");

// 'word' is still what it was at the start!
// the changed versions are stored in lowerCased, capitalized, and corrected
console.log(word);

Even with these methods applied, the original string " word " doesn't actually change. This might be surprising, so let's explore this further. Instead of changing the original string, the methods "turn into" a new value. These new values are being created and stored in the code, but they don't affect the original string. It's as if each piece of code is being swapped out for the result.

The example below, the comments next to each line explain what will be printed out to the console.

let loudText = "WHAT A GREAT DEVELOPER YOU CAN BE";
loudText.toLowerCase();
console.log(loudText); // WHAT A GREAT DEVELOPER YOU CAN BE
console.log(loudText.toLowerCase()); // what a great developer you can be
//Because there's no assignment operator = on the second line, the variable loudText is still holding onto "WHAT A GREAT DEVELOPER YOU CAN BE"
//which is entirely capitalized. To fix the code so that it logs the lowercase version
//the variable needs to be reassigned with a =, as seen below.

let loudText = "WHAT A GREAT DEVELOPER YOU CAN BE";
loudText = loudText.toLowerCase();
console.log(loudText); // what a great developer you can be

I, We, You Do

// Use the string methods you know to 
// 1. remove the extra whitespace at the beginning and end of the string, and
// 2. capitalize all the letters
// Make sure to assign your answer to the 'openAndPrep' variable
let openAndPrep = "   I like to use arrays!  ";
openAndPrep = openAndPrep.trim();
openAndPrep = openAndPrep.toUpperCase();
console.log(openAndPrep); // I LIKE TO USE ARRAYS!

Order of operations

You might remember learning about PEMDAS in math class. PEMDAS is a simple tool that outlines the correct order of operations. It serves as a reminder of which mathematical procedures you should complete first, second, third, etc., when you're performing an equation. Fortunately, JavaScript follows the same order for these operators. But it also has other operators, like === and >.

Operator precedence:
• Parentheses (())
• Exponents (**)
• Multiplication (*)
• Division (/)
• Addition (+)
• Subtraction (-)

Logical operators - The AND, OR, NOT

Often, you'll want your code to handle several conditions at once. You'll want it to consider a specific combination of conditions. For example, you might want to check that a user's password is long enough and that their chosen username is available.

That's where logical operators come in. They combine boolean values so that you can express more complex ideas in code, like this condition and that condition, this condition or that condition, and this condition but not that condition. The and, or, and not logical operators tell the code how to work with various pieces of information simultaneously.

In JavaScript, the three logical operators are written as follows: && (and), || (or), and ! (not). Take a look at these examples.

let youLoggedIn = true;
let youReturnedItem = false;

// test if both values are true
youLoggedIn && youReturnedItem; // => false

// test if either value is true
youLoggedIn || youReturnedItem; // => true

// invert the value of a variable
!youLoggedIn; // => false
!youReturnedItem; // => true

When you read the code above, you'll notice several things:

&& evaluates to true if the values on both sides are true.

|| evaluates to true if either one of the values is true.

! works on just one value, and gives the opposite of a value. Therefore, !true evaluates to false, and !false evaluates to true. And here is a summary in JavaScript.

// and (do both sides evaluate to true?)
true && true; // returns true
true && false; // returns false
false && true; // returns false

// or (does either side evaluate to true?)
true || true; // returns true
true || false; // returns true
false || false; // returns false

// not (return the inverse)
!true; // returns false
!false; // returns true

Relational operators

In addition to the operators discussed above, JavaScript has many other operators that allow you to test and assess the relationship between two items. Although you don't need to memorize all the relational operators, you should know that they exist as you build your JavaScript skills. That way, you can look them up when you need them! Remember, you can always refer to the documentation.

Check out this list of relational operators. What patterns do you see?

// Greater than - `>`
6 > 3; // true
1 > 11; // false
10 > 10; // false

// Less than - `<`
6 < 3; // false
1 < 9; // true
10 < 10; // false

// Greater than or equal to - `>=`
6 >= 3; // true
3 >= 11; // false
10 >= 10; // true

// Less than or equal to - `<=`
6 <= 3; // false
1 <= 9; // true
10 <= 10; // true

// Not equal - `!==` (opposite of ===)
6 !== 3; // true
1 !== 9; // true
10 !== 10; // false

Conditionals

If you have multiple conditions you want to check, you can use if ... else if ... else to check them one after the other.

Conditions and Decisions with Logical Operators

Logical operators can be used to form conditions in if..else statements.

I, You, We Do Exercise

let recentForecast = "rainy";
let recentWindSpeed = 30;
let holiday = true;
let currentDay = "Friday";
let message = "";

if (recentForecast === "rainy" || recentForecast === "snowing" && recentWindSpeed > 20) {
 message = "Very Scary outside! Stay indoors!";
} else {
 message = "It's not super scary and it might be nice";
}

console.log("Forecast for " + currentDay + " is: " + message);

if (recentForecast != "corona") {
 console.log("There is too much corona today");
}

if (!holiday) {
 console.log("You can't take today off!");
}

A Second Exercise

let loginCount = 3;
if (loginCount > 10) {
  console.log("That's a lot of logins today, champ! Maybe give it a rest.");
} else if (loginCount > 0) {
  console.log("Thanks for logging in!");
} else {
  console.log("Don't forget to log in today");
}

Negation operator

You've seen so far how if you can use an if...else statement to create conditional logic. Anything that goes into an if needs to evaluate to true/false. By using the ! operator you can negate the expression. It would look like so:

if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}

Instead of only providing an else block, you can make another decision. In this example, there are three branches to the condition. See how you can use relational operators to perform this.

I, You, We Do Exercise

1. Copy and paste above code into the repl below:

2. Where do Equality Check (===), Not (!), And (&&), and Comparison (>) fit in this list? Try to add all four to the list. Use the code below to experiment and find out.

Hint: Try adding parentheses, changing the operators, and logging different values!

if (!5 - 4 > 2 === 2 * 10 / 5 === 4) {
 console.log("the expression was truthy")
} else {
 console.log("it was falsy");
}

console.log(!5)
console.log(!5 - 4)
console.log(4 > 2)
console.log(5 - 4 > 2)
console.log(4 > 2 === 2)
console.log(2 * 10 / 5)
console.log(2 * 10 / 5 === 4)

I, You, We Do Exercise

Ternary expressions

if...else isn't the only way to express decision logic. You can also use something called a ternary operator. The syntax for it looks like this:

let variable = condition ?  : 
Below is a more tangible example:

let firstNumber = 20;
let secondNumber = 10
let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;

✅ Take a minute to read this code a few times. Do you understand how these operators are working?

The above states that

if firstNumber is larger than secondNumber
then assign firstNumber to biggestNumber
else assign secondNumber.
The ternary expression is just a compact way of writing the code below:

let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}