#scrimba

Variables

use let instead of var to store values that will be overwritten

let example = 'sample'; console.log(example);

Console.log(example) will print the current value of example.  

const - cannot be used to overwrite values

const example = "example" example = "another example"

If you try to change the value associated with example, this won’t work if you use const. You will get an error in the above example.

use let and const to store data or values.

Strings

let name = "Loki"; console.log(typeof name);

typeof will print the type of data (data type). In the example above, it’s string.

You can use either “” or ‘’ . Just make sure the quotes match on both sides.

let firstName = "Loki";let lastName = "Laufeyson"; console.log(`${firstName} ${lastName}`);

Use ` ` and ${} (string interpolation) to print out variables instead of using the + (firstName + lastName) to concatenate or add strings together. In the example above, the console.log will print out the values of the first and last name (Loki Laufeyson).

let firstName = "Harry"; let lastName = "Potter"; console.log(`${firstName} ${lastName} is a wizard.`);

This example will print out “Harry Potter is a wizard.” 

Another example:

let school = "Hogwarts School of Witchcraft and Wizardry"; let friends = "Ron and Hermione"; let wizard = "Harry Potter"; console.log(`${wizard} goes to ${school} with his friends ${friends}.`); Harry Potter goes to Hogwarts School of Witchcraft and Wizardry with his friends Ron and Hermione.

let fullName = `${firstName} ${lastName}`; console.log(fullName);

This will print out “Harry Potter”.

A method is a function. A function is a set of instructions, essentially how we’re going to store our code.

use .length to find out the length of the string being printed.

use .trim() to remove empty spaces.

let firstName = "Hermione"; let lastName = "Granger"; console.log(`             ${firstName} ${lastName}                     `.length); console.log(`             ${firstName} ${lastName}                     `.trim().length); 50 16

In the example above, using .length will print out 50 because of all the empty spaces. After using .trim(), the empty spaces will be removed, so the length becomes 16.

.toUpperCase() - capitalize all the letters

.toLowerCase() - lowercase all the letters

let firstName = "Ron"; let lastName = "Weasley"; console.log(`${firstName} ${lastName}`.toUpperCase()); console.log(`${firstName} ${lastName}`.toLowerCase()); RON WEASLEY ron weasley

.split() - need a parameter (needs a value that goes inside the parenthesis)

console.log(`${firstName} ${lastName}`.split(' ')); (2) ["Ron", "Weasley"]

.split will take the string and break up the string based on all the empty spaces. Since we only have one space, an array will be formed. 

console.log(`${firstName} ${lastName}`.split('')); (11) ["R", "o", "n", " ", "W", "e", "a", "s", "l", "e", "y"]

If there’s no space in the split(''), then the above example will happen.

Numbers

floating point number - number that has a decimal point (example: 4.4)

parseInt - use to only get the integer or whole number, doesn’t round off the number

let sampleNumber = 2.4; console.log(parseInt(sampleNumber)); 2

Using parseInt, only 2 will be printed out in the example above.

parseFloat - use if you want to get the decimal or floating point number

sampleNumber = 9.9 console.log(parseInt(sampleNumber)) 9 console.log(parseFloat(sampleNumber)) 9.9

.toFixed() - use if you want to return a certain amount of decimal places 

console.log(sampleNumber.toFixed()) 10 console.log(sampleNumber.toFixed(5)) 9.90000

let example1 = parseInt("Hello 33 World 22"); let example2 = parseFloat('44 Harry 33'); let example3 = 55.3333.toFixed(0); let example4 = 200.0.toFixed(2); console.log(example1); //33 22 --> returns null console.log(example2); //44 33 --> returns only 44 console.log(example3); //55 console.log(example4); //200.00

If you parse a string and the string starts with a number as in the case of example2, the number will be outputted or returned. 

console.log(typeof example1); //number console.log(typeof example2); //number console.log(typeof example3); //string console.log(typeof example4); //string

The typeof of the first 2 are numbers because we’re pulling numbers from them. The typeof of toFixed is a string because it converts the numbers when you round it off or adds or drops values.

Booleans

Either true or false values. There are also truthy or falsy values.

let sampleBoolean1 = true; let sampleBoolean2 = false; console.log(Boolean(sampleBoolean1)); //prints true console.log(Boolean(sampleBoolean2)); //prints false

let sampleNumber = 12345; console.log(Boolean(sampleNumber)); //prints true

In the second example, true is printed because the number is a truthy value.  

let example1 = false; let example2 = true; let example3 = null; let example4 = undefined; let example5 = ''; let example6 = NaN; let example7 = -5; let example8 = 0; console.log(Boolean(example1)); //prints false console.log(Boolean(example2)); //prints true console.log(Boolean(example3)); //prints false console.log(Boolean(example4)); //prints false console.log(Boolean(example5)); //prints false console.log(Boolean(example6)); //prints false console.log(Boolean(example7)); //prints true console.log(Boolean(example8)); //prints false

null - value that we are referencing, value will be set later on, used as a placeholder, as an empty falsy value

undefined - falsy value, a variable that wasn’t defined, variable or property that doesn’t exist that you’re trying to reference, there’s usually a bug in your code if you see this

Empty strings like in example5 are falsy values. But if you add a space there, it will return as true. 

example5 = " " console.log(Boolean(example5)) true

NaN - means not a number, you’ll get this if you try to parse a string

Negative and positive numbers are truthy values. When it comes to numbers, the only falsy value is 0.

Arrays

[] - arrays are list of items

Use .length to check the length of an array.

let marauders = ["James Potter", "Sirius Black", "Remus Lupin", "Peter Pettigrew"] console.log(marauders.length) 4

Counting arrays starts from 0. The length is always going to be 1 greater than the last index value.

.push - use to add contents to an array, starting from the end

.pop - remove content from an array, starting from the end

let gryffindors = ["Harry Potter", "Ron Weasley", "Hermione Granger"] gryffindors.push("Lavender Brown", "Neville Longbottom", "Parvati Patil", "Padma Patil") gryffindors (7) ["Harry Potter", "Ron Weasley", "Hermione Granger", "Lavender Brown", "Neville Longbottom", "Parvati Patil", "Padma Patil"] gryffindors.pop() "Padma Patil" gryffindors (6) ["Harry Potter", "Ron Weasley", "Hermione Granger", "Lavender Brown", "Neville Longbottom", "Parvati Patil"]

To overwrite the value in an array, do this:

let hogwartsFounders = ["Helena", "Godric", "Salazar", "Helga"] hogwartsFounders[0] = "Rowena" hogwartsFounders (4) ["Rowena", "Godric", "Salazar", "Helga"]

.forEach - use if you want to iterate through the entire array

hogwartsFounders.forEach((members) => {    console.log(members) }) Rowena Godric Salazar Helga

members can be any word you want.

let triwizardChampions = ["Cedric", "Viktor", "Fleur"] let gobletofFire = triwizardChampions gobletofFire.push("Harry") console.log(triwizardChampions) (4) ["Cedric", "Viktor", "Fleur", "Harry"] console.log(gobletofFire) (4) ["Cedric", "Viktor", "Fleur", "Harry"]

How come triwizardChampions and gobletofFire are identical when you only added “Harry” to gobletofFire? The reason is because “when you’re dealing with arrays and objects, you’re passing by reference”. This means gobletofFire is setting a reference or referring to triwizardChampions. It’s not actually creating a new array, so when you push to gobletofFire, you’re actually pushing to triwizardChampions.

To create a new array and not pass by reference anymore or still have the values of the previous array, use ... (spread operator) like this:

let triwizardChampions = ["Cedric", "Viktor", "Fleur"]; let gobletofFire = [...triwizardChampions]; gobletofFire.push("Harry"); console.log(triwizardChampions); console.log(gobletofFire);

The ... will take the values of the previous array and push or add them into the new array.

You can also use .map to create a new array.

let triwizardChampions = ["Cedric", "Viktor", "Fleur"]; let gobletofFire = triwizardChampions.map((members) => {    return members }); gobletofFire.push("Harry"); console.log(triwizardChampions); console.log(gobletofFire);

var magicalCreatures = ["dragon", "sphinx", "gryffin", "basilisk", "phoenix"] magicalCreatures.splice(1, 3, "siren", "harpy") (3) ["sphinx", "gryffin", "basilisk"] magicalCreatures (4) ["dragon", "siren", "harpy", "phoenix"]

.splice(1, 3, “siren”, “harpy”) means add 2 elements after the 1st element (in the above example, that’s after “dragon”), and remove “sphinx”, “gryffin”, and “basilisk”.

slice method - using this will give you a new array with copied values from the original array. The original array will not be modified or changed. 

You can add optional arguments to the slice method (the values in the parenthesis). The first optional argument or the first number in the parenthesis refers to the beginning index, meaning where do you start cutting. The second one refers to the ending index (meaning where to end the selection/cutting), which is non-inclusive (meaning it’s not included). 

If you don’t put an argument in the parenthesis (empty parenthesis), then you’ll just copy the first array into the second array.

let slytherins = ["Draco", "Goyle", "Crabbe"] let slytherinsCopy = slytherins.slice() slytherinsCopy (3) ["Draco", "Goyle", "Crabbe"]

So slytherins and slytherinsCopy will have the same values.

If you only add one argument (one number in the parenthesis) to the slice method, then you will get a copy from the specified index (this starts at 0) up to the end of the array.

let weasleys = ["Bill", "Charlie", "George", "Fred"] let weasleysCopy = weasleys.slice(2) weasleysCopy (2) ["George", "Fred"]

So weasleys.slice(2) means get values from the weasleys array starting from “George” (because the count starts at 0: Bill is 0, Charlie is 1, George is 2) up to the end of the weasleys array. 

weasleysCopy = weasleys.slice(-3) (3) ["Charlie", "George", "Fred"]

You can also specify a negative number inside the slice parenthesis. If you do this, the index counting starts from the end of the array. 

var blackFamily = ["Sirius", "Regulus", "Bellatrix", "Andromeda", "Narcissa"] var blackSisters = blackFamily.slice(2, 5) blackSisters (3) ["Bellatrix", "Andromeda", "Narcissa"] var blackBrothers = blackFamily.slice(0, 2) blackBrothers (2) ["Sirius", "Regulus"]

.slice(2, 5) means start cutting from 2 (Sirius is 0, Regulus is 1, Bellatrix is 2) and end at Narcissa (use 5 because the index counting starts from 0 and this second number isn’t included in the count).

.slice(0, 2) means start cutting from 0 (Sirius is 0) and end at Regulus (use 2 because the index counting starts at 0 and this second number isn’t included in the count).

You can also slice characters from a string or even characters from a specific string in an array.

let potterFamily = ["James", "Lily", "Harry"] let harry = potterFamily[2].slice(2, 4) harry "rr"

potterFamily[2] means select “Harry” out of the potterFamily array.

.slice(2, 4) means start taking out the letter r (H is 0, a is 1, r is 2) then take out another r. The second r is 3, but you use 4 because the second number is not included in the count, so if you use 3, only 1 r will be removed.

var hpSpell = prompt("Harry Potter spell?", "Alohomora"); var spellLength = hpSpell.length; //this will check the number of characters in the hpSpell variable alert(hpSpell.slice(1, spellLength - 1)); //this will print the second through next-to-last characters of the hpSpell variable. In this case, it will print lohomor

.splice method - changes the contents of an array, can be used to add or remove/delete items from an array. This modifies the original array and returns a new array. Can take 3 arguments (the ones in the parenthesis). 

The first number refers to the index where you want to start deleting or adding elements

The second number refers to the number of elements you want to remove

The third is optional and this refers to the new elements you want to add to the array

var malfoyFamily = ["Lucius", "Narcissa", "Draco"] malfoyFamily.splice(2) ["Draco"] malfoyFamily (2) ["Lucius", "Narcissa"]

If there’s only one argument in the parenthesis, then this means all the items after the provided starting point will be removed from the array. In this example, .splice(2) will remove Draco from the array (Lucius is 0, Narcissa is 1, Draco is 2). So if you call malfoyFamily, only Lucius and Narcissa will show up.

var hogwartsProfessors = ["McGonagall", "Flitwick", "Hagrid", "Snape", "Sprout"] hogwartsProfessors.splice(2, 1) ["Hagrid"] hogwartsProfessors (4) ["McGonagall", "Flitwick", "Snape", "Sprout"]

In the above example, .splice(2, 1) means remove the second element or value in the hogwartsProfessors array (McGonagall is 0, Flitwick is 1, Hagrid is 2). The 1 means only remove one item from the array, so only Hagrid was removed.

var hogwartsClasses = ["Transfiguration", "Charms", "Flying", "Potions", "Herbology"] hogwartsClasses.splice(2, 1, "Divination", "Care of Magical Creatures", "Ancient Runes", "Arithmancy") ["Flying"] hogwartsClasses (8) ["Transfiguration", "Charms", "Divination", "Care of Magical Creatures", "Ancient Runes", "Arithmancy", "Potions", "Herbology"]

In the example above, the 2 in the splice parenthesis means remove an element from the hogwartsClasses array starting from 2 (remember that the counting starts from 0, so 2 refers to Flying). The 1 in the parenthesis means only remove one element from the hogwartsClasses array. The rest of the classes (Divination, etc) will be added to the hogwartsClasses array in the place of the Flying element.

var schools = ["Beauxbatons", "Durmstrang"] schools.splice(1, 0, "Hogwarts") [] schools (3) ["Beauxbatons", "Hogwarts", "Durmstrang"]

If you put 0 in the second argument, it means do not remove anything from the array. In the example above, “Hogwarts” was added in the location specified in the first argument (the 1).

Objects

{}

can take in what are called properties

let sampleObject = {    firstName: "Sirius",    lastName: "Black" }; console.log(sampleObject.firstName); //will print Sirius console.log(sampleObject.lastName); //will print Black

You can also add an object inside an object:

let studentInfo = {    fullName: {        firstName: "Harry",        lastName: "Potter"    },    school: {        name: "Hogwarts School of Witchcraft and Wizardry",        location: "Scotland"    },    parents: {        mother: "Lily Evans",        father: "James Potter"    },    relatives: {        aunt: "Petunia Dursley",        uncle: "Vernon Dursley",        cousin: "Dudley Dursley"    },    address: "Number 4 Privet Drive" }; console.log(studentInfo.school.name); //will print Hogwarts School of Witchcraft and Wizardry console.log(studentInfo.parents); //will print {mother: "Lily Evans", father: "James Potter"} console.log(studentInfo.relatives.aunt); //will print Petunia Dursley

You can also add numbers and arrays to an object.

let studentInfo = {    fullName: {        firstName: "Harry",        lastName: "Potter"    },    school: {        name: "Hogwarts School of Witchcraft and Wizardry",        location: "Scotland"    },    parents: {        mother: "Lily Evans",        father: "James Potter"    },    relatives: {        aunt: "Petunia Dursley",        uncle: "Vernon Dursley",        cousin: "Dudley Dursley"    },    address: "Number 4 Privet Drive",    age: 11,    friends: ["Ron Weasley", "Hermione Granger"],    quidditchTeammates: ["Fred", "George", "Katie", "Angelina", "Alicia", "Oliver"],    rivals: ["Draco", "Crabbe", "Goyle"] }; console.log(studentInfo.rivals); //will print ["Draco", "Crabbe", "Goyle"] console.log(studentInfo.friends); //will print ["Ron Weasley", "Hermione Granger"]

You can also reset the values in an object.

let studentInfo = {    fullName: {        firstName: "Harry",        lastName: "Potter"    },    school: {        name: "Hogwarts School of Witchcraft and Wizardry",        location: "Scotland"    },    parents: {        mother: "Lily Evans",        father: "James Potter"    },    relatives: {        aunt: "Petunia Dursley",        uncle: "Vernon Dursley",        cousin: "Dudley Dursley"    },    address: "Number 4 Privet Drive",    age: 11,    friends: ["Ron Weasley", "Hermione Granger"],    quidditchTeammates: ["Fred", "George", "Katie", "Angelina", "Alicia", "Oliver"],    rivals: ["Draco", "Crabbe", "Goyle"] }; studentInfo.age = 12; console.log(studentInfo.age); //will now print 12 instead of 11

Property names are also referred to as keys. Object.keys will print out all the keys except the nested keys (so just fullName instead of also including firstName and lastName).

console.log(Object.keys(studentInfo)); //will print ["fullName", "school", "parents", "relatives", "address", "age", "friends", "quidditchTeammates", "rivals"]

If you use object.values, this will happen:

console.log(Object.values(studentInfo)); //will print [{firstName: "Harry", lastName: "Potter"}, {name: "Hogwarts School of Witchcraft and Wizardry", location: "Scotland"}, {mother: "Lily Evans", father: "James Potter"}, {aunt: "Petunia Dursley", uncle: "Vernon Dursley", cousin: "Dudley Dursley"}, "Number 4 Privet Drive", 12, ["Ron Weasley", "Hermione Granger"], ["Fred", "George", "Katie", "Angelina", "Alicia", "Oliver"], ["Draco", "Crabbe", "Goyle"]]

To check if a property or key exists in an object, do this:

console.log(studentInfo.hasOwnProperty("fullName")); //will print true because hasOwnProperty will check if fullName exists in the studentInfo object

hasOwnProperty - will check if an object has a property with the specified name

Like arrays, objects also pass by reference.

let dracoInfo = {    firstName: "Draco" }; let dracoInfo2 = dracoInfo; dracoInfo2.lastName = "Malfoy"; console.log(dracoInfo); //will print {firstName: "Draco", lastName: "Malfoy"} console.log(dracoInfo2); //will print {firstName: "Draco", lastName: "Malfoy"}

dracoInfo2.lastName.mothersLastName = "Black"; console.log(dracoInfo2); //will result in error, can't add mothersLastName because lastName is not defined as an object. But since dracoInfo2 is defined, it's possible to add or assign the lastName property to it

To create a new object with the value from the original object, do this:

let dracoInfo2 = Object.assign({}, dracoInfo); dracoInfo2.lastName = "Malfoy"; console.log(dracoInfo); //will print {firstName: "Draco"} console.log(dracoInfo2); //will print {firstName: "Draco", lastName: "Malfoy"}

Object.assign - takes in two values inside the parenthesis, the first is what you want to assign it to, in the above example, it will be assigned to an empty object. The second value is what we’re going to assign it to. 

Since we’re now instantiating a new object, the dracoInfo object will no longer pass by reference to dracoInfo2, so dracoInfo2 will now be a new object.

Relational Operators

Relational operators will compare 2 items and return a true or false value.

let example1 = 10; let example2 = 15; console.log(example1 >= example2); //will print false because 10 is not greater than or equal to 15

=== strictly equals comparison compares the value and type. This is same for !==

let example1 = 10; let example2 = '10'; console.log(typeof example1); //prints number console.log(typeof example2); //prints string console.log(example1 === example2); //triple equals sign will check not only the value but also the data type. This is why this will print false - because while the values of example1 and example2 are the same, their data types are not the same

== there is also a less strict one that compares only the value. This is same for !=

let example1 = 10; let example2 = 12; console.log(typeof example1); //will print number console.log(typeof example2); //will print number console.log(example1 == example2); //will return false because 10 is not equal to 12. The double equals sign will just check if the values are the same or not.

let example1 = 10; let example2 = '10'; console.log(typeof example1); //will print number console.log(typeof example2); //will print string becuse there are quotes around the number console.log(example1 == example2); //will print true even though example2's type is now a string because the two equals sign is only checking if the values of the variables are the same

let example1 = 5 === 5; let example2 = 5 == '5'; let example3 = 6 != '6'; let example4 = 7 !== '7'; console.log(example1); //prints true console.log(example2); //prints true console.log(example3); //prints false console.log(example4); //prints true

Increment (++) and Decrement (--)

let sampleIncrement = 1; sampleIncrement++; console.log(sampleIncrement); //will print 2

let sampleDecrement = 2; sampleDecrement--; console.log(sampleDecrement); //will print 1

To add or subtract more than 1, do this:

let sampleIncrement = 1; sampleIncrement +=5; console.log(sampleIncrement); //will print 6

let sampleDecrement = 5; sampleDecrement -=3; console.log(sampleDecrement); //will print 2

You can also multiple or divide or use the modulus operator: *= for multiplying and /= for dividing and %= for modulus 

let example1 = 5; example1++; console.log(example1); //prints 6 let example2 = 5; ++example2; console.log(example2); //prints 6

let example1 = 5; console.log(example1++); //prints 5 let example2 = 5; console.log(++example2); //prints 6

Adding ++ at the end of a value means it will be added after the line of code. If you add ++ at the beginning, it will be added within the line of code. This is the same with -- (for subtraction).

Else if - only runs if the if statement doesn’t run

Else - the default value, if both the if and else if statement fail, then this one will run instead

console.log(10 === 10 && 5 < 4); //prints false console.log(10 === 10 || 5 < 4); //prints true console.log((5 >= 5 || 4 > 4) && 3 + 2 === 5); //prints true

Switch Statements

let hpCharaInfo = "Harry Potter"; switch(hpCharaInfo) {    case "Harry Potter":        console.log("You are the main character.");        break;    case "Sirius Black":    case "James Potter":    case "Remus Lupin":        console.log("You are one of the Marauders.");        break;    case "Peter Pettigrew":        console.log("You are a traitor.");        break;    case "Rowena Ravenclaw":    case "Salazar Slytherin":    case "Godric Gryffindor":    case "Helga Hufflepuff":        console.log("You are one of the Hogwarts Founders.");        break;    case "Severus Snape":        console.log("You are a spy.");        break;    case "Nymphadora Tonks":    case "Kingsley Shacklebolt":        console.log("You are an auror.");        break;    case "Minerva McGonagall":    case "Filius Flitwick":    case "Pomona Sprout":        console.log("You are one of the Hogwarts Heads of Houses.");        break;    case "Bellatrix Lestrange":    case "Lucius Malfoy":        console.log("You are one of the Death Eaters.");        break;    default:        console.log("Please enter your name to find out your status or role in the Harry Potter series."); }

No need to add a break after the default value (the last one in the example above).

For Loop

Start by instantiating a variable, this is the counter, usually initialized by i for iteration (this is the i = 0, the first part in for loops).

The second part of the for loop will continue to run until the statement is no longer true.

let total = 0; for (let i = 0; i < 5; i++) {    console.log(i); //will print 0, 1, 2, 3, 4 }

In the example above, the for loop keeps on running until i is no longer less than 5.

To add the values of i to total, do this:

let total = 0; for (let i = 0; i < 5; i++) {    total += i; } console.log(total); //the for loop will add the values of i to total, so this will now print 10

let numArray = [10, 20, 30, 40, 50, 60, 70, 80]; for (let i = 0; i < numArray.length; i++) {    console.log(numArray[i]); //will print all the values of the numArray    total += numArray[i]; }

let total = 0; let numArray = [10, 20, 30, 40, 50, 60, 70, 80]; for (let i = 0; i < numArray.length; i++) {        total += numArray[i]; } console.log(total); //prints 360

use numArray[i] (the i is what the counter is in the for loop, so this can change to any variable depending on what is used to instantiate the for loop) to access all the values of the array. If you just want to access a specific value in the array, use the index number. For example, if you want to access the first value in the numArray, use numArray[0]. 

var nums = [10, 20]; for (var i = 0; i < nums.length; i++) {  if (nums[i] === nums[i]) {    alert(nums[i]);      break;    }  }

break; stops the loop. The example above will only show one alert.

While

It runs until a value is no longer true.

let count = 0; while (count > 20) {        count++; //as long as the value of count is greater than 20, then the while statement will continue to run } console.log(count); //prints 0. The while statement above doesn't run because 0 (the current value of count) is not greater than 20.

Do While

This will run at least once.

let count = 0; do {    count++;        if(count >= 20) {        break;    } } while (false) console.log(count); //prints 1 because the do statement runs

Functions

A way of storing our code, so we can call it again and again and reuse it.

function sampleFunction() {    console.log("This is a sample function"); }

In the example above, nothing will happen because you need to call or invoke the function first. You can do this by calling it by its name.

sampleFunction(); This is a sample function

Functions can take in parameters (the ones inside the parenthesis). You can add multiple parameters.

function add(num1, num2) {    return num1 + num2; } console.log(add(10, 6)); //prints 16 because the function adds the values of num1 and num2 console.log(add(15, 7)); //prints 22 console.log(add(20, 5)); //prints 25

return will allow you to return a value.

function add() {    return 5; } console.log(add()); //prints the value that is being returned. In this case, it's 5