String properties and methods, multiple if conditions and nested if statements

String properties and methods

Previously we used length to determine the number of characters in a string variable:

var firstName = "Humphrey";
var lengthOfName = firstName.length;
console.log(lengthOfName);
// 8

length is a property of firstName because firstName has a string value.

String values in JavaScript have both properties and methods. They are both called in a similar way, by using a . after the variable and then the name of the property or method, but methods are called using parenthesis (brackets) after their name.

According to the MDN docs, “a method is a function which is a property of an object”. - MDN Docs. Since a method is a function, you can use these to process the strings in some way, for example, converting the strings to all uppercase or lowercase.

Some string methods include toLowerCase() and toUpperCase().

toLowerCase() converts a string variable to all lowercase letters.

toUpperCase() converts a string variable to all upper case letters.

var firstName = "Humphrey";

var lower = firstName.toLowerCase();
console.log(lower);
// humphrey

var lower = firstName.toUpperCase();
console.log(lower);
// HUMPHREY

Watch on Vimeo

Code from the video

Letter case matters in JavaScript

JavaScript considers lowercase and uppercase versions of the same letter to be completely different.

H is not equal to h.

if ("H" === "h") {
  console.log("The letters are equal");
} else {
  console.log("The letters are not equal");
}

Or using the inequality operator (not equals operator):

if ("H" !== "h") {
  console.log("The letters are not equal");
} else {
  console.log("The letters are equal");
}

So it follows that longer strings that have the same letters but different cases are not equal either.

if ("Harry" === "harry") {
  console.log("The names match");
} else {
  console.log("The names do not match");
}

This video looks at using the toLowerCase() method to eliminate differences in the case between strings.

Watch on Vimeo

Code from the video

The logical AND (&&) operator

To check if more than one condition is true in an if statement, we can use the && operator.

There is no and keyword in JavaScript, so we use &&. This is called the logical AND operator.

The code below will check if two conditions are true, that the selectedNumber variable is both above or equal to 10 and below or equal to 50.

var selectedNumber = 30;

if (selectedNumber >= 10 && selectedNumber <= 50) {
  console.log("The selected number is within range");
}

Watch on Vimeo

Code from the video

Nested if statements

The video above contained if statements inside an else block. These are called nested if statements.

We can use nested if statements to check for more specific conditions.

if (someCondition === true && someOtherCondition === true) {
  if (someCondition === true) {
    // do something
  }

  if (someOtherCondition === true) {
    // do something
  }
}

The video below is another look at an if statement with multiple (three this time) conditions using the && operator. The else block in the code from the video again contains nested if statements.

Watch on Vimeo

Code from the video

The logical NOT (!) operator

The ! operator can be used to check for the opposite of a boolean value.

var orderShipped = false;

if (!orderShipped) {
  // the order did not ship
}

This is the equivalent of writing:

if (orderShipped === false) {
  // the order did not ship
}

or

if (orderShipped !== true) {
  // the order did not ship
}

Logical OR (||) operator

We’ve used the && operator to check if multiple conditions are true in an if statement. When using this operator, all the conditions must pass.

We can use the || operator to check if only one condition passes - only one condition needs to be met.

var dayOfTheWeek = "Saturday";

if (dayOfTheWeek === "Saturday" || dayOfTheWeek === "Sunday") {
  console.log("It's the weekend");
}

In the code above and in the video, only one of the conditions needs to be met in order for the code inside the if block to execute.

Watch on Vimeo

Code from the video

Lesson Task

There are practice questions in the master branch of this repo.

There are example answers in the answers branch.

Try the exercises before checking the solutions.