- Strict mode
- Arrow functions
- forEach
- Map
- Filter
- Reduce
- Keep Going
- Practice
- Fork and clone
- Create a new branch,
training
, for your work and change into it. - Create a new
code
directory andcd
into it.
It’s time to take the training wheels off JavaScript and start using its strict mode to eliminate some of JavaScript’s silent errors by changing them to throw errors. And, as a nice side effect, we end up helping JavaScript engines to perform optimizations on our code to run it faster.
'use strict';
Examples of strict mode in action:
'use strict';
// Assuming a global variable mistypedVariable exists
mistypeVariable = 17; // this line throws a ReferenceError due to the
// misspelling of variable
'use strict';
// Assignment to a non-writable global
var undefined = 5; // throws a TypeError
var Infinity = 5; // throws a TypeError
var NaN = 5; // throws a TypeError
Read the resources below and experiment with what you know of JavaScript in the strict mode to see how it behaves differently.
TODO: Share your findings in the Slack Thread for the Lab with the rest of the class.
Resources:
ES6 introduces a new syntax for writing anonymous functions in JavaScript. It has a much more concise syntax and should be easier to pick up after using function expressions. Arrow functions gets its name from its syntax =>
, which in other languages, is knows as: the fat arrow, the rocket or the Lamda operator.
Example 1:
// Function Declaration
function sayHello() {
console.log('Hello World!'); // Block of statements
}
// Function Expression
const sayHello = function() {
console.log('Hello World!'); // Block of statements
}
// Arrow function expression
const sayHello = () => {
console.log('Hello World!'); // Block of statements
}
// Arrow function expression (compact)
const sayHello = () => console.log('Hello World!'); // Expression
// Arrow function expression (compact) with single param
const greetWorld = greeting => console.log(`${greeting} World!`); // Expression
// Arrow function expression (compact) with single param & return value
const greetWorld = greeting => `${greeting} World!`; // Expression
Example 2:
// Function Declaration
function add(x, y) {
return x + y;
}
// Function Expression
const add = function(x, y) {
return x + y;
}
// Arrow function expression
const add = (x, y) => {
return x + y;
}
// Arrow function expression with implicit return
const add = (x, y) => x + y;
function addFive(num) {
return 5 + num;
}
function divide(num1, num2) {
return num1 / num2;
}
function whoIsTheBestIA() {
let iaName = 'Alanoud';
console.log(iaName);
}
Your solution:
fullName
receives two parameters, first
and last
and returns the full name.
Steps:
- Use the function keyword to write a function expression
- Rewrite using an arrow function
- Rewrite and use implicit return
Your solution:
function sayHello(name = "World") {
console.log("Hello " + name);
}
sayHello();
Your solution:
Resources:
JavaScript has a lot of different types of loops available for you to use. But when dealing with Arrays or iterable objects, the forEach
method is one of the more easier and cleaner ones to use.
It executes a function callback for each array item it is iterating on. The function callback provides you the value and index for the current item being iterated on.
Though, one downside of using the forEach
method is that there is no way to break the loop other then by throwing an exception. If you need such behavior, the forEach()
method is the wrong tool for the job.
Lastly, the forEach
method always returns the value undefined
.
const instructors = ['Usman', 'Marc', 'Alanoud'];
// Print each instructor
instructors.forEach(function(element) {
console.log(element);
});
// Print each instructor along with their Array index
instructors.forEach(function(element, index) {
console.log(element, index);
});
const instructors = ['Usman', 'Marc', 'Alanoud'];
const instructorsCopy = [];
// For Loop
for (let i = 0; i < instructors.length; i++) {
instructorsCopy.push(instructors[i]);
}
// forEach Loop
instructors.forEach(function(item){
instructorsCopy.push(item);
});
- Say Hi
const friends = ["Mansour", "Munira", "Ahmed"]; // For each friend in friends, print "Hi friendName!" // Write your solution here
- Crazy Numbers
// Thats an array with crazy numbers we cant read 😯 const nums = [103440, 3799.2663, 3.14159265359, 859494, 59439]; let total = 0; // Sum all the numbers in nums and save the result in total // Write your solution here
- Crazy number again!!
// These crazy numbers now are strings 😯 😯 !! const stringNumbers = ["103440", "3799.2663", "3.14159265359", "859494", "59439"]; let totalNumbersUnder4000 = 0; // Convert numbers from strings to numbers and // sum all numbers under 4000 and store them // in totalNumbersUnder4000 // // Write your solution here
Resources:
The map()
method creates a new array with the results of calling a provided function on every element in the calling array.
Resources:
-
Multiply by 100
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let times100 = []; // Write your solution here
-
Capitalize Capitalize all the strings in the IA's array and store them in the array capitalizedIA.
const iAS = ['alanoud', 'khalid', 'shaima', 'hakami']; let capitalizedIAs = []; // Write your solution here
-
Abbreviations
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; let dayAbbreviations = []; // Find the abbreviation of all days and add them to dayAbbreviations array // Write your solution here
-
century20
const years = [1989, 2015, 2000, 1999, 2013, 1973, 2012]; let century20 = []; // century20 should be: [1989, 2000, 1999, 1973] // Write your solution here
The filter()
method creates a new array with all elements that pass the test implemented by the provided function.
Resources:
-
Only get the numbers that are divisible by 3
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Write your solution here console.log(result);
-
Create an array of names (maybe use 3 of your friends)
Requirements:
- Use filter to return the names with the letter "a" in them
- Use Arrow function
- Use implicit return
const names = ["Sara", "Abdulrahman", "Eman"]; // Write your solution here console.log(result);
-
century20
const years = [1989, 2015, 2000, 1999, 2013, 1973, 2012]; let century20 = []; // century20 should be: [1989, 2000, 1999, 1973] // Write your solution here
The reduce()
method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
Resources:
- Sum
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let sum; // Write your solution here console.log(sum);
- Crazy Numbers
// Thats an array with crazy numbers we cant read 😯 const nums = [103440, 3799.2663, 3.14159265359, 859494, 59439]; let total = 0; // Sum all the numbers in nums and save the result in total // Write your solution here
- Crazy number again!!
// These crazy numbers now are strings 😯 😯 !! const stringNumbers = ["103440", "3799.2663", "3.14159265359", "859494", "59439"]; let totalNumbersUnder4000 = 0; // Convert numbers from strings to numbers and // sum all numbers under 4000 and store them // in totalNumbersUnder4000 // // Write your solution here
There are a lot of features in ES6 that we have not covered:
There's a sale going on! Create a variable called discountProducts
that takes all the objects in products and cuts the price by 50%.
const products = [
{name: 'flower vase', price: 75},
{name: 'lamp', price: 85},
{name: 'jar of honey', price: 95},
{name: 'coil', price: 65},
{name: 'lumber', price: 55}
];
// Write your solution here
console.log(discountProducts);
Create a variable called cheapProducts
that contains an array of objects for all products that cost less than 70.
const products = [
{ name: 'flower vase', price: 75 },
{ name: 'lamp', price: 85 },
{ name: 'jar of honey', price: 95 },
{ name: 'seashell frame', price: 65 },
{ name: 'lumber', price: 55 }
];
// Write your solution here
console.log(cheapProducts);
Create a variable called totalPrice
, and use .reduce
to get the sum of all prices.
const products = [
{name: 'flower vase', price: 75},
{name: 'lamp', price: 85},
{name: 'jar of honey', price: 95},
{name: 'coil', price: 65},
{name: 'lumber', price: 55}
];
// Write your solution here
console.log(totalPrice);
const smallNums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 0]
const nums = [ 37, 826, 209, 419, 309, 48, 738, 709,728, 607, 9, 863, 976, 588, 611, 164, 383, 261, 14, 525, 479, 169, 755, 574, 330, 736, 541, 838, 577, 957, 179, 436, 333, 206, 295, 744, 926, 799, 691, 259, 401, 104, 630, 645, 722, 607, 587, 714, 446, 356, 18, 16, 14, 5, 13, 13, 17, 5, 5, 18, 12, 5, 18, 11, 2, 2, 9, 8, 4, 5, 18, 15, 18, 0, 6, 11, 18, 14, 2, 19, -14, 5, 18, 12, 3, 12, 7, 15, 5, 3, 12, 7, 6, 10, 3, 3, 3, 18, 12, 14 ]
const panagram = ['The', 'quick','brown','fox', 'jumps', 'over', 'the', 'lazy', 'dog']
const panagrams = [ 'The','job', 'requires', 'extra', 'pluck', 'and', 'zeal', 'from', 'every', 'young', 'wage', 'earner', 'Quick', 'zephyrs', 'blow,', 'vexing', 'daft', 'Jim', 'Two', 'driven', 'jocks', 'help', 'fax', 'my', 'big', 'quiz', 'Five', 'quacking', 'zephyrs', 'jolt', 'my', 'wax', 'bed', 'The', 'five', 'boxing', 'wizards', 'jump', 'quickly', 'Pack', 'my', 'box', 'with', 'five', 'dozen', 'liquor', 'jugs', 'We', 'promptly', 'judged', 'antique', 'ivory', 'buckles', 'for', 'the', 'next', 'prize', 'Jaded', 'zombies', 'acted', 'quaintly', 'but', 'kept','driving','their','oxen','forward' ]
- Determine if every number is greater than or equal to 0
- Determine if every word is shorter than 8 characters
- Filter the array for numbers less than 100
- Filter words that have an even length
- Find the first value divisible by 5
- Find the first word that is longer than 6 characters
- Find the index of the first number that is divisible by 3
- Find the index of the first word that is less than 2 characters long
console.log
each value of the nums array multiplied by 3console.log
each word with an exclamation point at the end of it
- Make a new array of each number multiplied by 100
- Make a new array of all the words in all uppercase
- Add all the numbers in the array together using the
reduce
method - Concatenate all the words using reduce
- Find out if some numbers are divisible by 7
- Find out if some words have the letter
a
in them
- Try to sort without any arguments, do you get what you'd expect with the numbers array?
- Sort the numbers in ascending order
- Sort the numbers in descending order
- Sort the words in ascending order
- Sort the words in descending order
- Filter for words that have at least two vowels in them
- Find each instance of the word zephyr - include case insensitve and plurals (Zephyr, zephyrs, and Zephyrs), and list the index positions