Lesson in review

JavaScript Core I - 2

What we will learn today?

Please make sure you're working on the js-exercises repo Week 2 folder during this class.

Expressions

In JavaScript there are expressions and statements. We will use these words frequently to describe code.

Expression

An expression returns a value. Sometimes we will say that an expression evaluates to a value.

The following are all examples of expressions:

1 + 1; // returns 2
("hello"); // returns "hello"
2 * 4; // returns 8
"hello" + "world"; // returns "helloworld"

We can take the value produced by an expression and assign it to a variable. That line of code would be called a statement.

Statement

A statement is some code that performs an action. Here are some examples:

var sum = 1 + 1; // action: assigns result of `1 + 1` to variable `sum`
var greeting = "hello"; // action: assigns result of the expression "hello" to variable `greeting`
console.log(2 * 4); // action: logs the result of `2 * 4` to the console
sayGreeting(greeting); // action: calls the function `sayGreeting` with the parameter `greeting`

There are some other different types of statements that we will learn in the coming weeks.

Exercise

You quickly find out the result of an expression by running node in a terminal window.

  • Open a terminal window
  • Run the command node
  • You have now opened a node console (also called a REPL)
  • Type an expression and press enter
  • To exit the console type Ctrl+C or type the command .exit

Example from inside a terminal window:

$ node
> 1 + 2
3
> "hello"
'hello'
> var greeting = "hello"
undefined
> greeting
'hello'
> console.log(greeting)
hello
undefined
> .exit
$

Notice how when we execute an expression the value it produces is printed below it. When we execute a statement, we see undefined printed below. This is because statements don't produce values like expressions, they do something.

  • Write some more expressions in the node console
  • Assign some expressions to variables
  • Check the value of the variables

Further reading on using the node console: https://hackernoon.com/know-node-repl-better-dbd15bca0af6

Boolean Filters

There is a special data type in JavaScript known as a boolean value. A boolean is either true or false, and it should be written without quotes.

var codeYourFutureIsGreat = true;

Exercise

Head over to exercise.js and follow the instructions in the comments.

Comparison Operators

We can also write expressions that return boolean values.

Here's an expression that evaluates to a boolean.

1 > 2
  • Can you work out what value this expression evaluates to?

The > symbol in the expression is a comparison operator. Comparison operators compare two values. This operator checks to see if the number on the left is bigger than the number on the right.

1 is not bigger than 2 so this expression returns false.

More comparison operators

>   greater than
<   less than
<=  less than or equal
>=  greater than or equal
=== same value
!== not the same value

Exercise

  • Open exercise.js and follow the instructions.
  • Open a node console, and write some expressions that use comparison operators

Predicates

Predicate is a fancy word for a function that returns a boolean value.

These functions are very useful because they let you test if a value satisifies certain requirements.

function isNumber(value) {
  return typeof value === "number";
}

isNumber(10); // returns true
isNumber("hello"); // returns false

JavaScript programmers often give predicate functions a name that starts with a verb e.g. isBig, isNegative, isActive, shouldUpdate,

Calling a predicate function is like asking a question: "is this value a number". The return value is the answer to your question.

Conditionals

Like humans, computer programs make decisions based on information given to them. Conditionals are a way of representing these decisions in code.

For example:

  • In a game, if the player has 0 lives, then the game is over
  • In a weather app, if rain is forecast, a picture of rain clouds is shown

The most common type of conditional is the if statement.

An if statment runs some code if a condition is met. If the condition is not met, then the code will be skipped.

var isHappy = true;

if (isHappy) {
  console.log("I am happy");
}

The code in paratheses - e.g. (isHappy) - is the condition. The condition can be any expression. The following are all valid conditions:

// boolean value
if (true) {
  // do something
}

// variable assigned to boolean value
if (isHappy) {
  // do something
}

// equality operator returns a boolean value
if (1 + 1 === 2) {
  // do something
}

// comparison operator returns a boolean value
if (10 > 5) {
  // do something
}

// function call returns boolean value
if (greaterThan10(5)) {
  // do something
}

An if statement runs code when a condition is met. What if the condition is not met? Sometimes you want to run an alternative bit of code.

An if...else statement also runs code when the condition is not met.

var isHappy = true;

if (isHappy) {
  console.log("I am happy 😄");
} else {
  console.log("I am not happy 😢");
}

Logical Operators

There are three logical operators in JavaScript: || (OR), && (AND), ! (NOT).

They let you write expressions that evaluate to a boolean value.

Suppose you want to test if a number if bigger than 3 and smaller than 10. We can write this using logical operators.

var num = 10;

function satisfiesRequirements(num) {
  if (num > 3 && num < 10) {
    return true;
  }

  return false;
}

We can test expressions with logical operators in a node console too:

$ node
> var num = 10;
undefined
> num > 5 && num < 15
true
> num < 10 || num === 10
true
> false || true
true
> !true
false
> var greaterThan5 = num > 5
undefined
> !greaterThan5
false
> !(num === 10)
false

More Conditionals

A common use of if statements is inside of functions.

function getGrade(score) {
  if (score >= 80) {
    return "A";
  }
  if (score >= 60) {
    return "B";
  }
}

You can also write this using else if:

function getGrade(score) {
  if (score >= 80) {
    return "A";
  } else if (score >= 60) {
    return "B";
  }
}

Array Literals

If you ever find yourself writing code like this...

var mentor1 = "Daniel";
var mentor2 = "Irina";
var mentor3 = "Rares";

...then it's probably time to use an array!

Arrays are data structures that hold a list of values.

var mentors = ["Daniel", "Irina", "Rares"];

Arrays can hold any type of value (although almost always you only have one data type per array).

var testScores = [16, 49, 85];
var grades = ["F", "D", "A"];
var greetings = ["Hello, how are you?", "Hi! Nice to meet you!"];

Array properties

Arrays, like strings, have a length property.

You can check this by starting a node console in your terminal.

$ node
> var arr = [1, 2, 3];
undefined
> arr
[1, 2, 3]
> arr.length
3

Array Getters and Setters

You can get a single value out of an array using bracket notation.

$ node
> var ingredients = ["Flour", "Water", "Salt"];
undefined
> ingredients[0]
Flour
> ingredients[1]
Water
> ingredients.length
3

Did you notice how we use [0] to get the first value? In programming we count starting at zero.

The number inside of the brackets is called an index. Index just means the position of the item within the array.

You can also set a value using bracket notation and an assignment operator (=).

var scores = [80, 41, 47];

scores[2] = 29; // Change the last score
scores[3] = 51; // Add a new score

Array methods

Do you remember how strings have special functions called methods? Don't worry if not! Here's an example to jog your memory:

$ node
> var name = "Daniel"
undefined
> name.toLowerCase()
daniel

Arrays also have several methods that you can use.

.sort()

An array method that sorts the values in an array into ascending alphabetical or numerical order.

var unorderedLetters = ["z", "v", "b", "f", "g"];
var orderedLetters = unorderedLetters.sort();

var unorderedNumbers = [8, 5, 1, 4, 2];
var orderedNumbers = unorderedNumbers.sort();

console.log(orderedLetters); // logs [ 'b', 'f', 'g', 'v', 'z' ]
console.log(unorderedLetters); // logs [ 'b', 'f', 'g', 'v', 'z' ]

console.log(orderedNumbers); // logs [ 1, 2, 4, 5, 8 ]
console.log(unorderedNumbers); // logs [ 1, 2, 4, 5, 8 ]

When you call this array method it uses the array on the left side of the dot as an input, and it sorts that array also returning it. Note how both ordered and unordered arrays are sorted now!

.concat()

Adds (or concatenates) another value or array to the array.

$ node
> var arr = [1, 2, 3]
undefined
> arr.concat(4)
[1, 2, 3, 4]
> arr
[1, 2, 3]

Did you notice how calling the concat method did not change arr? This is because concat, like most array methods, returns a new array, it does not alter the one you called the method on.

If you wan to use the array returned by calling .concat() you should store it in a new variable.

var arr = [1, 2, 3];
var newArr = arr.concat(4);

console.log(newArr); // logs [1, 2, 3, 4]

More Array methods

Let's explore some more array methods.

.slice()

Returns a slice of the array.

You can tell .slice() where you want the slice to begin and end by passing it two parameters.

$ node
> var arr = [0, 1, 2, 3, 4]
undefined
> arr.slice(0, 2)
[0, 1]
> ["a", "b", "c", "d"].slice(1, 2)
['b']

.includes()

Returns true if a value is in the array.

var mentors = ["Daniel", "Irini", "Ashleigh", "Rob", "Etzali"];

function isAMentor(name) {
  return mentors.includes(name);
}

consooe.log("Is Rukmuni a mentor?");
console.log(isAMentor("Rukmini")); // logs false

.join()

Returns all the array values joined together in a string. By default, this method takes no parameters and then the elements are divided with a comma ,. If you provide it with a string parameter though, then it becomes the divider of the elements, like the example below:

$ node
> ["H", "e", "l", "l", "o"].join();
'H,e,l,l,o'
> ["H", "e", "l", "l", "o"].join("--");
'H--e--l--l--o'

There is a string method .split(). In an interactive console try using the string .split() method and the array .join(). How could they work together?

Array map

Imagine you have an array of names...

var mentors = ["Daniel ", "irina ", " Gordon", "ashleigh "];

You notice that he names are not formatted consistently. To fix the array you decide you need to trim whitespace and convert to lowercase. How do you do that for every value in the array?

We can write a function that changes one name:

function tidy(name) {
  return name.trim().toLowerCase();
}

All you need to run every name in the array through this function and update the array values. Thankfully there is an array method that does just this!

.map()

Runs every item in the array through a function and returns a new array with the values returned by the function.

var tidyMentors = mentors.map(tidy);

console.log(tidyMentors); // logs ["daniel", "irina", "gordon", "ashleigh"]

Homework

  1. The repo contains few challenges - solve all the pending exercises in week-2 and week-2-practise.

results matching ""

    No results matching ""