#hpfamily | Explore Tumblr posts and blogs

freyayuki · 6 years ago

Text

freeCodeCamp Basic JavaScript Course Notes Part 3

As I mentioned before, now that there’s a new freeCodeCamp learning curriculum, I resolved to go through each of the lessons and finish all of them.

I was able to finish all the Responsive Web Design courses including all the projects. Check out this post for more info about these projects.

Check out the following articles for the notes I took while going through the course:

Flexbox Notes

CSS Grid Notes

Now that I’m done with the Responsive Web Design Certification course, the next course is the Javascript Algorithms And Data Structures Certification course.

The first part of that course is Basic JavaScript. This is part 3 of the notes I took while going through said course. Check out these articles for the first two parts:

Part 1

Part 2

You can find the Basic JavaScript course lessons here: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript.

Modifying and Updating Data in a Collection

Another Example:

Run the same code multiple times using loops.

While Loop

Runs "while" a specified condition is true and stops once that condition is no longer true.

var marauders = []; //the variable marauders is currently set to an empty array var i = 0; while(i < 4) { marauders.push(i); i++; } //while the value of the variable i is less than 4, push the values into the marauders array marauders (4) [0, 1, 2, 3]

For Loop

runs "for" a specific number of times

declared with three optional expressions separated by semicolons:

var aurors = []; for (var i = 0; i <= 10; i++) { aurors.push(i); } //initialize with i = 0. Iterate while the condition i is less than or equal to 10 is true. Increment i by 1 (i++) in each loop iteration as the final expression aurors (11) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

//Push the numbers 1-5 inside the werewolves array var werewolves = []; for (var i = 1; i < 6; i++) { werewolves.push(i); } console.log(werewolves); (5) [1, 2, 3, 4, 5]

For loops don't have to iterate one at a time. By changing our final-expression, we can count by even numbers.

//Push the odd numbers from 1 - 9 inside the goblins array var goblins = []; for (var i = 1; i < 10; i += 2) { goblins.push(i); } console.log(goblins); (5) [1, 3, 5, 7, 9]

You can also count backwards using a for loop.

//Count backwards by 2s from 9 to 1 var houseElves = []; for (var i = 9; i > 0; i -= 2) { houseElves.push(i); } console.log(houseElves); (5) [9, 7, 5, 3, 1]

Iterate Through an Array with a For Loop

//output each element of the array to the console var blackCousins = ["Sirius", "Regulus", "Bellatrix", "Andromeda", "Narcissa"]; for (var i = 0; i < blackCousins.length; i++) { console.log(blackCousins[i]); //returns each element of the array } Sirius Regulus Bellatrix Andromeda Narcissa

var hpBooks = [7, 6, 5, 4, 3, 2, 1]; for (var i = 0; i < hpBooks.length; i++) { console.log(hpBooks[i]); } 7 6 5 4 3 2 1

Arrays have zero-based numbering, which means the last index of the array is length - 1.

The condition for the above loop is i < hpBooks.length, which stops when i is at length - 1.

//add the value of each element of the array to total var thestrals = [2, 3, 4, 5, 6]; var total = 0; for (var i = 0; i < thestrals.length; i++) { total += thestrals[i]; } console.log(total); 20

Nesting For Loops

You can “loop through both the array and any sub-arrays”.

Modify function multiplyAll so that it multiplies the product variable by each number in the sub-arrays of arr

Do While Loop

First, "do" one pass of the code inside the loop no matter what, and then it runs "while" a specified condition is true and stops once that condition is no longer true.

var owls = []; var i = 0; do { owls.push(i); i++; } while (i < 5); owls (5) [0, 1, 2, 3, 4]

The above while loop will run as long as i is less than 5. But since the value of i has been set to 5, this while loop will never run because the condition (that i be less than 5) fails and so the codes inside the while loop never execute. So ourArray will still be equal to [].

Here, the value of i has also been initialized to 5. But the do while loop still runs because when we get to the beginning of the do while code, there is no check for the value of i. So the codes inside the curly braces will execute.

One element will be added to the array and i will be incremented before we reach the while part or the condition check. Since i is now equal to 6, the condition check fails.

So we exit the loop and are done. At the end of the above example, the value of ourArray is [5].

Essentially, a do...while loop ensures that the code inside the loop will run at least once.

Profile Lookup

hogwartsLookUp("Harry", "family"); (3) ["Vernon", "Petunia", "Dudley"]

The function runs starting with the for loop. The for loop will cycle through the entire studentInfo array. The first if statement will run. In this example, the name parameter is "Harry".

This matches the first name key in the first object, so the if statement returns true. Since the first if statement returned true, the second one will run. The prop parameter in this example is "family".

The hasOwnProperty method will check if this property exists in the current student's (in this example, studentInfo[i] is Harry) list of properties. Since the "family" property does exist, the return studentInfo[i][prop] will run. This will return the value of family. In this case, it will return ["Vernon", "Petunia", "Dudley"].

hogwartsLookUp("Voldemort", "hogwartsHouse"); "Sorry, the student you're looking for isn't in this list."

The function will run starting with the for loop, which will cycle through the entire studentInfo array. The first if statement will run. It will check if the function's name parameter matches any of the firstNames in the array.

"Voldemort" isn't in the array, so the if statement will return false. The for loop will end and the function will go straight to the return "Sorry, the student you're looking for isn't in this list."

hogwartsLookUp("Draco", "parents"); "The property you are looking for doesn't exist."

"Draco" matches a first name in the array, so the second if statement will run. This one will check if the given prop parameter exists in the array using the hasOwnProperty method.

"parents" isn't a property in the array where Draco is, so the second if statement will return as false. This means the codes inside that if statement will not run. Instead, the function goes straight to the else statement, which will return "The property you are looking for doesn't exist."

Math.random()

function that generates a random decimal number between 0 (inclusive) and not quite up to 1 (exclusive). Thus Math.random()can return a 0 but never quite return a 1

all function calls will be resolved before the return executes, so we can return the value of the Math.random()function.

function randomFraction() { return Math.random(); } randomFraction(); 0.6766764005156192

//Generate and return a random whole number between 0 and 9 function randomWholeNum() { var num = Math.floor(Math.random() * 10); return num; } randomWholeNum(); 1 randomWholeNum(); 6

To “generate a random number that falls within a range of two specific numbers”, “define a minimum number min and a maximum number max”

Formula:

Math.floor(Math.random() * (max - min + 1)) + min

Create a function called randomRange that takes a range myMin and myMax and returns a random number that's greater than or equal to myMin, and is less than or equal to myMax, inclusive.

function randomRange(myMin, myMax) { return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin; } randomRange(5, 15); 12 randomRange(3, 20); 4

The parseInt()function parses a string and returns an integer.

function convertToInteger(str) { return parseInt(str); } convertToInteger("56"); //returns 56 convertToInteger("77"); //returns 77 convertToInteger("Sirius Black"); //returns NaN

//Convert a binary number to an integer then return it function convertToInteger(str) { return parseInt(str, 2); } convertToInteger("10011"); //returns 19 convertToInteger("111001"); //returns 57 convertToInteger("Regulus Black"); //returns NaN

Conditional Operator / Ternary Operator

can be used as a one line if-else expression

findGreater(4, 6); "b is greater" findGreater(10, 2); "a is greater"

//Check if two numbers are equal or not. The function should return either true (meaning a is equal to b) or false (meaning a is not equal to b). function checkEqual(a, b) { return a === b ? true : false; } checkEqual(1, 2); //returns false checkEqual(1, 1); //returns true checkEqual(1, -1); //returns false

Use Multiple Conditional (Ternary) Operators

Chain multiple conditional operators to check for multiple conditions.

//check if a number is positive, negative, or zero function checkSign(num) { return (num === 0) ? "zero" : (num > 0) ? "positive" : "negative"; } checkSign(10); //returns positive checkSign(-12); //returns negative checkSign(0); //returns zero

Another example of using multiple conditional operators:

function hpWands(core, wood) { return (core === "phoenix feather" && wood === "holly") ? "Harry Potter's wand" : (core === "unicorn hair" && wood === "willow") ? "Ron Weasley's wand" : (core === "dragon heartstring" && wood === "vine") ? "Hermione Granger's wand" : "Unknown wand owner"; } hpWands("veela hair", "rosewood"); "Unknown wand owner" hpWands("phoenix feather", "holly"); "Harry Potter's wand" hpWands("unicorn hair", "willow"); "Ron Weasley's wand" hpWands("dragon heartstring", "vine"); "Hermione Granger's wand"

This:

function hogwartsGreeting(house) { return (house === "slytherin") ? "welcome to slytherin house" : (house === "hufflepuff") ? "welcome to hufflepuff house" : (house === "ravenclaw") ? "welcome to ravenclaw house" : "welcome to gryffindor"; } hogwartsGreeting("gryffindor"); "welcome to gryffindor" hogwartsGreeting("slytherin"); "welcome to slytherin house" hogwartsGreeting("ravenclaw"); "welcome to ravenclaw house" hogwartsGreeting("hufflepuff"); "welcome to hufflepuff house"

is the same as this:

#how to code #my notes #freecodecamp #programming #learning resources #learn how to code #learn to code #learn programming #learn basic javascript #basic javascript #learn js #js #coding #resources #javascript #learn javascript

0 notes