Conditionals & Functions

Wilson Espina

What did we do last lesson?

Learning Objectives

At the end of this class, you will be able to:

Differentiate between true, false, 'truth-y', and 'false-y'
Use if/else conditionals to control program flow based on boolean conditions
Use comparison operators to evaluate and compare statements
Describe how parameters and arguments relate to functions
Create and call a function that accepts parameters to solve a problem
Return a value from a function using the return keyword

Agenda

Conditionals
Logical operators
Truthy & Falsy
Functions

Exit Ticket Suggestions

Code exercises were HARD, requiring a lot more understanding of concepts than is provided during explanation.
The pre-course Codecademy tutorials + all the EloquentJS reading homework = information overload.
The lesson was quite tough, lots of new concepts being introduced.

Classroom Resources

Pull changes from the wilson-espina/jsd-9-resources repo to your computer:

Open the Terminal
cd to the Documents/JSD/jsd-9-resources directory
Type git pull origin master and press return

In your editor, open the following folder: Documents/JSD/jsd-9-resources/04-conditionals-functions

Conditionals

Conditional Statements

Conditional statements are a way of essentially skipping over a block of code if it does not pass a boolean expression.
Known as control flow statements, because they let the program make decisions about which statement should be executed next, rather than just going in order.

Philosophical JavaScript

JavaScript always tries to look for truth

Block Statements

Statements meant to be executed after a control flow operation will be grouped into what is called a block statement.
These statements are wrapped into a pair of curly braces:


{
  console.log("hello");
  console.log("good bye");
}

If Statement

✅


if (expression) {
  code
}

❌


if (expression) { code }

Both versions will still be be interpreted as valid JavaScript.
The correct version is best practice for code readability.

Comparison Operators

`>`	greater than
`>=`	greater than or equal to
`<`	less than
`===`	strict equal, type and value
`==`	coercive equal (AVOID)
`!==`	strict not equal, type and value
`!=`	coercive not equal (AVOID)


-1 > 2
//=> false

123 < 6;
//=> false

0.12 >= 0.0023;
//=> true

Always returns a Boolean value

Type coercion


12 > '12';
//=> false

12 >= '12';
//=> true

'A' > 'a'
//=> false

'b' > 'a';
//=> true

'Glow' > 'Glee';
//=> true

JavaScript assumes you mean something else when data types don't match with non-strict comparison.
This can be the source of frustration for some developers, since most languages do not implicitly convert strings to numbers.
JavaScript uses the so-called dictionary or lexicographical order.

If statement


let weather = "sunny";

if (weather === "sunny") {
  console.log("Grab your sunglasses");
}

If / else statement


let weather = "sunny";

if (weather === "sunny") {
  console.log("Grab your sunglasses");
} else {
  console.log("Grab a coat");
}

Else if Statement


let weather = "sunny";

if (weather === "sunny") {
  console.log("Grab your sunglasses");
} else if (weather === "rainy") {
  console.log("Take an umbrella");
} else {
  console.log("Grab a coat");
}

Ternary Operator

You can think about the ternary operator as a concise "if-else in one line"


(expression) ? trueCode : falseCode;

Ternary Operator

Can produce one of two values, which can be assigned to a variable in the same statement


let drink = (expression) ? trueCode : falseCode;

let sunny = true;
let drink = sunny ? 'beer' : 'coffee';
console.log(drink) // beer

Switch Statement

The switch statement can be used for multiple branches based on a number or string:


const food = 'apple';

switch(food) {
	case 'pear':
	  console.log('I like pears');
	  break;
	case 'apple':
	  console.log('I like apples');
	  break;
	default:
	  console.log('No favourite');
}
//=> I like apples

Logical Operators

Operators that let you chain conditional expressions

`&&`	`AND`	Returns `true` when both left and right values are true
`\|\|`	`OR`	Returns `true` when at least one of the left or right values is `true`
`!`	`NOT`	Takes a single value and returns the opposite Boolean value

&& (AND)

The && operator requires both left and right values to be true in order to return true:


true && true
//=> true

Any other combination is false


true && false
//=> false

false && false
//=> false

|| (OR)

The || operator requires just one of the left or right values to be true in order to return true


true || false
//=> true

false || true
//=> true

false || false
//=> false

Strict Mode


								'use strict';

Goes at the top of the file.
Tells browsers to be unforgiving in interpreting our code
Helps us write good code by ensuring that even little mistakes trigger errors.

Open up: 1-conditionals-codealong

Truthy & Falsy

Falsy Values

All of the following become false when converted to a Boolean:


false
0
'' // (empty string)
NaN
null
undefined

These are known as falsy values because they are equivalent to false

Truthy Values

All values other than false, 0, "", NaN, null, and undefined become true when converted to a Boolean.
All values besides these six are known as truthy values because they are equivalent to true.


17193
true
'0'
'false'

Converting to Boolean

Adding ! before a value returns the inverse of the value as a Boolean
Adding !! before a value gives you the original value as a Boolean:


!!1
//=> true

!!0
//=> false

!![]
//=> true

!!{}
//=> true

!!null
//=> false

!!""
//=> false

Pairs

starter-code > 2-ages-lab

Write a program that outputs results based on users’ age. Use the list of conditions in the app.js file.
BONUS 1: Rewrite your code to allow a user to enter the exponent value, rather than hard-coding it into your program. (Hint: Read up on the window.prompt method).
BONUS 2: Rewrite your code to use a switch statement rather than if and else statements).

Functions

Developers should be lazy

Code should be written with DRY principals:

Don't
Repeat
Yourself

Functions

Allow us to group a series of statements together to perform a specific task

We can use the same function multiple times

Not always executed when a page loads. Provide us with a way to 'store' the steps needed to achieve a task

Function Declaration Syntax


function name(parameters) {
  // do something
}

Function Declaration example


function sayHello() {
  console.log(“Hello!”);
}

Function Expression syntax


let name = function(parameters) {
  // do something
}

Function Expression example


let sayHello = function(parameters) {
  console.log("Hello!");
}

Arrow Function syntax


let name = (parameters) => {
  // do something
}

Arrow Function syntax


let sayHello = (parameters) => {
  console.log("Hello!");
}

Invoking a Function

When we want to execute the function (make it run), we use the function name followed by parentheses ( )
We can say:

Call the function
Invoke the function
Execute the function


function sayGoodbye(){
  console.log('good bye');
}

sayGoodbye();
=> good bye

Open up: 3-functions-codealong

Practice defining and executing functions

Individual

starter-code > 4-functions-exercise (part 1)

Open up js > main.js
Follow the instructions under Part 1.

Parameters

Parameters make functions reusable


function newFunc(parameter1, parameter2, parameter3){
	console.log(parameter1 + parameter2 + parameter3);
}

The values in the parentheses are placeholders for the data that we pass to our functions and are known as parameters:

Parameters are variables listed as a part of the function definition.
When we invoke a function, the values we pass to the function are called arguments.

Using Parameters


function sayHello(name) {
  console.log('Hello! ' + name);
}

sayHello('Wilson'); // 'Wilson' is an argument
=> 'Hello Wilson'

Using Multiple Parameters


function sum(num1, num2) {
  console.log(num1 + num2);
}

sum(1, 2); // 1 and 2 are arguments
=> 3

Default Parameters


function multiply(num1, num2 = 2) {
  console.log(num1 * num2);
}

multiply(4,5);
=> 20

multiply(3);
=> 6 // (argument) * 2 (default value)

Individual

starter-code > 4-functions-exercise (part 2)
Add you answer to the Slack polls

Look at Part 2A and 2B. Predict what will happen when each function is called.

Individual / Pairs

starter-code > 4-functions-exercise (part 3)

See if you can write one function that takes some parameters and combines the functionality of the makeAPizza and makeAVeggiePizza functions
BONUS: Create your own function with parameters. This function could do anything!

Return Statements

Return Statement

Ends function’s execution.
Returns a value — the result of running the function.
console.log() is only useful for the developer.

Returning values


function subtract(num1, num2) {
  return num1 - num2;
}

subtract(10,5);
=> 5

Return stops a functions's execution


function speak(words) {
  return words;

  // The following code will not run:
  let x = 1;
  let y = 2;
  console.log(x + y)
}

speak('Hey!');
// "Hey!"

Create and call a function that accepts parameters to solve a problem

Individual / Pairs

starter-code > 5-price-calculator

Write code to to calculate a customer's total cost in pounds based on product price, tax rate, shipping cost, and the currency they're using for the purchase (pounds or euros).
BONUS 1: Convert your function to assume a currency of "pounds" by default.
BONUS 2: Convert your function to an arrow function.

Learning Objectives - Review

Differentiate between true, false, 'truth-y', and 'false-y'
Use if/else conditionals to control program flow based on boolean conditions
Use comparison operators to evaluate and compare statements
Describe how parameters and arguments relate to functions
Create and call a function that accepts parameters to solve a problem
Return a value from a function using the return keyword

Lookahead to Next Lesson (27/05/20)

Scope & Variables

Understand what is scope
Understand how scope works
Determine the scope of local and global variables
Describe what hoisting does

Q&A

Homework

Homework Repo

Head to https://git.generalassemb.ly/wilson-espina/jsd-9-homework
Click 'Fork' and following instruction on how to fork the repo.
Click 'Clone or Download' and copy git link (Make sure it says Clone with HTTPS).
cd to your Documents/JSD directory.
Type git clone and paste the URL and hit return.

Exit Ticket

(Lesson 04)

Conditionals & Functions

Wilson Espina

What did we do last lesson?

Learning Objectives

Agenda

Exit Ticket Suggestions

Classroom Resources

Conditionals

Conditional Statements

Philosophical JavaScript

Block Statements

If Statement

Comparison Operators

Type coercion

If statement

If / else statement

Else if Statement

Ternary Operator

Ternary Operator

Switch Statement

Logical Operators

&& (AND)

|| (OR)

Strict Mode

Truthy & Falsy

Falsy Values

Truthy Values

Converting to Boolean

15 mins

Functions

Developers should be lazy

Functions

Function Declaration Syntax

Function Declaration example

Function Expression syntax

Function Expression example

Arrow Function syntax

Arrow Function syntax

Invoking a Function

4 mins

Parameters

Parameters make functions reusable

Using Parameters

Using Multiple Parameters

Default Parameters

3 mins

8 mins

Return Statements

Return Statement

Returning values

Return stops a functions's execution

10 mins

Learning Objectives - Review

Lookahead to Next Lesson (27/05/20)

Scope & Variables

Q&A

Homework

Homework Repo

Exit Ticket