JavaScript Core I - 3
Contents
Learning Objectives
By the end of this class, you should be able to:
- List the falsy values
- Explain the difference between null and undefined
- Define an array
- Write code that interacts with an array
- Loop over an array
Truthy and falsy
In JavaScript, things can be set to or evaluated as true or false. We've already met this idea. The boolean data type has two possible values: true
or false
. But in JavaScript values may be truthy or falsy.
In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy. That is, all values are truthy except
false
,0
,-0
,0n
,""
,null
,undefined
, andNaN
. ~ MDN, 'Truthy'
So in other words, the value is treated as if it is true or false. The value is 'coerced' into true or false. Let's look at how this affects an if
statement.
function getFalsiness(value) {
if (value) {
return "Truthy";
} else {
return "Falsy";
}
}
You can think of falsy as a closed door. If the value passed into getFalsiness
is a falsy value, the door to the "Truthy" string will never be opened. getFalsiness(undefined)
will return "Falsy"
.
- Open your console and start
node
. Define the following function,getTruthiness
:
const getTruthiness = (value) => (value ? "Truthy!" : "Falsy");
- Call
getTruthiness(null)
- Try each of the falsy values.
- How will you get 'Truthy!' to return?
- What would happen if you tried
getTruthiness(getTruthiness(0))
? Make a prediction and then test your theory.
Last week, we learned about loose equals ==
and strict equals ===
and why we should always use strict equality. In your console, try comparing:
getTruthiness(null == undefined);
getTruthiness(null === undefined);
Now try doing the comparisons on their own:
null == undefined;
null === undefined;
Null and undefined
Both null
and undefined
are falsy values, but have some important differences.
let thisUndefinedVariable;
let thisNullVariable = null;
undefined
means the variable has been declared, but is undefined. No value, not even 0
or null
, has been assigned to this variable.
null
means the variable has been assigned the value null
.
If a variable has never been declared, and you try to call it, what will the console say?
Make a prediction, either by writing in chat or writing it on piece of paper and holding it up.
Try calling a nonexistent variable in your console now.
Discuss!
We're spending a little time on this now because the most common error you will encounter as a JavaScript programmer is Uncaught TypeError: Cannot read property of undefined
. In fact 9 of the top 10 most common errors are to do with null or undefined. (The other one is CORS, more about this in future modules.) As you progress through the course you will incrementally develop your understanding of these concepts, often through debugging!
You won't often assign null
to a variable. However, you will often encounter null
in DOM traversal, so we will come back to this in JS2 and JS3.
Arrays
If you ever find yourself writing code like this...
const mentor1 = "Daniel";
const mentor2 = "Irina";
const mentor3 = "Rares";
...then it's probably time to use an array!
Arrays are data structures that hold a list of values. We call these values the elements of the array.
const mentors = ["Daniel", "Irina", "Rares"];
Arrays can hold any type of value (although almost always you only have one data type per array).
const testScores = [16, 49, 85];
const grades = ["F", "D", "A"];
const greetings = ["Hello, how are you?", "Hi! Nice to meet you!"];
You can access elements in an array using the index of an element with bracket notation
🔔 Remember: All arrays start at position 0! To access the first element in an array, you need to access index 0
, the second element at 1
, the fifth at 4
and so forth. This is called zero-based indexed arrays. There are some very intense reasons for this, but most people just accept it and move on.
const trainees = ["Ahmed", "Maria", "Atanas", "Nahidul", "Jack"];
trainees[0]; // "Ahmed"
trainees[3]; // "Nahidul"
You can also assign new values to parts of an array:
const trainees = ["Ahmed", "Maria", "Atanas", "Nahidul", "Jack"];
trainees[2] = "Bianca";
console.log(trainees); // ["Ahmed", "Maria", "Bianca", "Nahidul", "Jack"]
Exercise (5 mins)
In Node, enter the following array:
> const fruits = ['banana', 'apple', 'strawberry', 'kiwi', 'fig', 'orange'];
Now, using the correct indexes, get the following values from the array:
- strawberry
- kiwi
- orange
- banana
Then, replace 'apple' with 'raspberry', and replace 'fig' with 'pineapple'.
Exercise (5 mins)
Complete this function so that, if the second element in the array contains the name "Amy", it returns "Second element matched!"
function secondMatchesAmy(array) {
if ( ) {
return "Second element matched!";
}
return "Second element not matched";
}
Using for loops with arrays
We can use the power of loops to run some code for each element in our array.
When we do this say we iterate over an array.
const daysOfWeek = [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
];
for (let i = 0; i < daysOfWeek.length; i++) {
const dayMessage = "day is: " + daysOfWeek[i];
const indexMessage = "index is: " + i;
console.log(indexMessage, dayMessage);
}
Exercise (10 mins)
Write a function which takes your trainees array as an input. In the function, use a for loop to iterate over the array and print the name of each trainee to the console.
Exercise - extra credit (20 mins)
In pairs, write a function which squares all numbers in an array and returns the array of squared numbers.
Write a second function which takes an input of arrays and only returns an array of even numbers.
How can you combine the two functions to return an array of even and squared numbers?
Extra exercises
Playing computer I
- Working in pairs or groups, you have to predict the output of this program without executing it.
- What is printed to the console?
- Have you learned anything new during this exercise?
const daysOfWeek = [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
];
function workingDay(day) {
return day + " is a working day";
}
function weekendDay(day) {
return day + " is at the weekend!";
}
for (let i = 0; i < daysOfWeek.length; i++) {
if (i < 5) {
let day = workingDay(daysOfWeek[i]);
console.log(day);
} else {
let day = weekendDay(daysOfWeek[i]);
console.log(day);
}
}
Playing computer II
- Working in pairs or groups, you have to predict the output of this program without executing it.
- What is printed to the console?
- Have you learned anything new during this exercise?
const a = 4;
const b = 8;
const multiplyNumbers = function (a, b) {
return a * b;
};
const addNumbers = function (a, b, c) {
return a + b + c;
};
for (let i = 0; i < 5; ++i) {
if (i < 3) {
const day = addNumbers(i, 2, a);
console.log(day);
} else {
const day = multiplyNumbers(i, 4);
console.log(day);
}
}
Playing computer III
- Again, working in pairs or groups, you have to predict the output of this program without executing it.
- What is printed to the console?
- What was difficult about this exercise?
- Have you learned anything new?
let x = 2;
let y = 4;
let a = 2;
let b = 20;
const f1 = function (a, b) {
return a * b;
};
const f2 = function (a, b, c) {
return a + b + c;
};
console.log(x);
x = 3;
y = f1(x, 2);
console.log(y);
for (let i = 0; i < 10; ++i) {
a = a + 1;
if (i % 2 === 0) {
const d = f2(i, y, a);
console.log(d);
} else {
const e = f1(i, 2);
console.log(e);
}
}
Glossary
- Assert: to determine whether something is
true
or nottrue
, more preciselyfalse
- Duplicate: exact copies of something (e.g. two or more files, numbers, directory can be exactly the same)
- Index: numbers that let you know an item's position inside an array
- Element: another name for an item in an array
- Iterate: to repeat some code multiple times, as we do when we use a loop
- REPL: (Read-Eval-Print-Loop) an interactive way to execute code you write inside the console
- Zero-based Index: an
array
starting at0
and not at1
For words like Terminal, Primitive Types please see Glossary: JavaScript Core I - 2
PD (Critical thinking)
Session objective: This session highlights the importance of critical thinking for developers, and provides methods to form good arguments.
Exercise objective: To identify arguments formed through critical thinking
Put the statements in the slides in the right order.
Exercise objective: To brainstorm as a group about critical thinking skills
In small groups, explore how and why developers need to develop critical thinking skills.
- How will you use critical thinking skills as a developer?
- Why is it important to use critical thinking skills when developing products for diverse audiences?
Exercise objective: To practice public speaking skills
Volunteer to share to the wider group one important reason to use critical thinking.
Feedback
Please spend two minutes reviewing this lesson to help us improve it for the future. This feedback will be shared with volunteers.