Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.1 Conditionals

What happens when we need to do one thing if a condition is true, or something else if it isn’t? We use an if statement, that’s what, and in this lesson we’ll learn all about if statements and the ternary operator.

Syntax

  • if
  • else
  • () ? :

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


4.1 Conditionals

Hi folks, in this lesson we're going to start looking at how we can work with JavaScript to control the execution flow of our programs. In this lesson we'll focus on using the conditional if statement. Other lessons in this section will cover additional control structures. The if statement is known as a conditional statement, because it only executes certain statements based on the results of an expression. First of all let's look at how it is structured syntactically. In its most Its basic form, the statement begins with the reserved word, if followed by parentheses that contain the conditional expression. Followed by a block, which is denoted by opening and closing curly brackets. So if we run this in a browser now, we should see the console.log in the browser's console, because 1 + 1 is equal to 2. If we go back and change the condition, This time we shouldn't see the log statement in the browser. And we can see that we don't. So the condition to evaluate is within parentheses. Generally, we don't put entire expressions into the parenthesis. We would normally compare a single value, like a variable. Each if, or the corresponding else is known as a branch. And the statements within the curly braces are known as a block. We can add multiple branches by combining the if statement with an else statement. So we shouldn't see the first log, because true is not equal to false, but we will see the second. In this example, we can only really have two branches. But if we’re comparing different kinds of values, we can have as many else branches as we need. So we start out by comparing the color variable with the string blue. And if that expression resolves to true, we'll note this string blue to the console. We then combine the else and if keywords. This time we compare the color variable to the string green. And if that is true, we log the string greens to the console. We then have a final else branch, which basically means that if the first two conditions are not met, then do this branch instead. And I would just log the color variable to the console. So in this case we should see the string red in the console. So we can add as many else-if branches as we need to. But we should really only have one else, even if we have multiple else-if expression. It's not essential that we provide a plain else at the end of the if statement. But we probably will in many cases. One point to note is that any truthy value will cause a branch to execute, not just the boolean value of true. So in this case, the value one is a truthy value. And what truthy means is that in a conditional expression such as an if statement, the value resolves to true, even though it isn't actually the boolean true. This can be very useful. For example, if we want to check that an array contains at least one item before we try to use that array, we can check that it has a length property. So here we define an array that has a single value, which is the string yes. The value that the array contains is not important. It's just important that it contains a value. So when an array contains values, it has a positive value for it's length property. So in this case the length would be one because the array contains 1 value. 1 is a truthy value, so we should see the console log array has length. If change the arrays, so that it doesn't contain any items. The reason why we don't see the console log Is because the length of the array is now zero and zero is falsie not truthy. There is one more type of conditional in addition to the if statement, and that is the ternery statement. This type of condition though, is much more tallest than a standard if else statement. But it's basically, a short cut for a conditional that contains a single if, and a single else. The ternary operator is a special operator that takes three operands. Let's look at the syntax. So the different operands in a turnery are as follows. We have a conditional. That is usually surrounded by parentheses. Although these parenthesis are not mandatory, it does improve readability if you include them. We then use the ternary operator, which is the question mark symbol. This is followed by the truthy operand, in this case a console.log statement. And lastly we have the falsie operand. And that is separated from the truthy operand using a colon. So in this case, because true evaluates to true in the conditional parts of the turnery right at the start of the expression, we should see the first console log. But if we change the conditional so that it evaluates to false, or a false value by changing it to the value false in this example in this case we should see the third operand the falsie operand. So in this lesson we looked at the conditional control structure if along with its else and if else permutations. We learned that any truthy expression will cause the if block to execute. But falsey values will not cause the if block to execute. We also looked at a ternary operator, which is like a shorthand version of a standard two-branch if else statement. In the next lesson, we're going to look at the switch statement. Thanks for watching.

Back to the top
View on GitHub