Intermediate

Collections

• They are used to store collections of data. Programming is all about working with some data.

• They are stored as reference in memory meaning that [] === [] is false

Arrays

• Array is like a container where we can store values and later reference them

• They start with index 0 and have a length property

// Ist method (Array literal)
const hosts = ['Cloudflare', 'Netlify', 'Vercel'];

// IInd method
const cars = new Array("Fisker", "Mustang", "Tesla");

// Accessing values
console.log(hosts[0]); // "Cloudflare"
console.log(cars.length) // 3

// Last element
console.log(cars[cars.length - 1]) // "Lambo"

• Only primitive values are immutable, meaning that an array defined using const will still be mutable. But we can not reassign the value

• This is possible because of the way how JS stores values in memory

const startups = ["Cleao", "Phleebs", "Fugers", "Undercode"];
startups[1] = "Sezbania";
console.log(startups); // Cleao, Rovity, Fugers, Undercode

startups = ["DuckDuckGo", "Fisker", "Phoenix"]; // Can't reassign

Basic Array Operations (Methods)

• Array methods allow us to do array operations

const friends = [];

// Adding elements (returns the new length)
friends.push('Benni', "Bob Ziroll"); // ["Benni", "Bob Ziroll"];
friends.unshift("Steve"); // ["Steve", "Benni", "Bob Ziroll"];

// Removing elements (returns deleted item)
friends.pop(); // ["Steve", "Benni"];
friends.shift() // ["Benni"];

friends.indexOf('') // -1, gives the index
friends.includes('Benni') // true, gives Boolean

Array.concat() // Merge two arrays

.slice() // Gets off part
.splice(start, deleteCount, newElements) // Supports insertion & deletion
.join(seperator) // Creates string

Higher Order Array Methods

.forEach() // Invokes a function for each value
.map() // Returns new array
.filter() // Filters out based on some condition, if bool is true
.some() // If any 1 value pass the test function
.every() // If all the values pass the test
.find() // The first value that pass the test
.findIndex() // Index of the first value that pass the test

/*
The master .reduce() method
The reduce() takes in a callback
and gives an accumulator and the currentValue
Whatever we return gets added to the current value

[].reduce((acc, cv) => {}, starting value)
*/

Objects

• In Objects we give each of the value stored a name

• The names are also called as key or property

• There’s no order of properties, objects are unstructured and values can be accessed only using names

Dot vs Bracket Notation

• We can access values from an Object in two ways: dot and bracket notation syntax

• Both of them are operators. Dot is called Member Access & Brackets is called Computed Member Access

• Bracket notation accepts any expression so it’s good for computed name

• Can also be used to add values to the Object

// Accessing Values
Object[expression] // Bracket Notation
Object.key // Dot notation

const teacher = {
	firstName: 'Jonas',
	lastName: 'Schmedtmann',
	age: 30,
	job: 'Teacher',
	friends: ["Michael", "Peter", "Steven"]
}

const key = "friends";

console.log(teacher.key); // undefined
console.log(teacher[key]) // ["Michael", "Peter", "Steven"]

// Object class methods
Object.keys(), Object.entries(), Object.items()

Methods

• We can also store functions inside an object. Then it’s called a method of that Object

• Again, functions are just values, that’s why a method is also a property

• Arrays are also Objects as they also have methods

const person = {
	sayHi: function(){
		console.log("Hello there");
	}
}

person.sayHi(); // "Hello there" logged to the console

• The this keyword is equal to the object on which the method is called

const person = {
	firstName: 'Chak',
	birthYear: 2000,
	age: function(){
		return 2024 - this.birthYear; // reference to Object
	}
}

person.age(); // gives 22

Iteration

• Loops are also another control structure then if-else

• It’s like doing reps of an exercise

// for loop keeps running while the condition is true
// This loop will run 11 times
for(let rep = 0; rep <= 10; rep++){
	console.log(`Lifting weights repetition ${rep} 🏋️`);
}

Looping Arrays, Breaking & Continuing

• One very common use case of loops is to iterate over an array

• Keyword continue is used to end current iteration and break is to terminate the entire loop

const teacher = [
	"Jonas",
	"Schmedtmann",
	false,
	["Michael", "Peter", "Steven"],
	30,
	"Teacher",
]

const newArr = [];

// Only storing string values to newArr
for(let i=0; i < teacher.length; i++){
  // --- ONLY STRINGS --- //
	if(typeof teacher[i] !== 'string') continue;
	newArr.push(teacher[i]);
}

newArr; // ["Jonas", "Schmedtmann", "Teacher"]

Looping Backwards and Loops in Loops

• Here we are logging an array in reverse order

const pets = ["Zuzu", "Kittu", "Browzer"];

for(let i = pets.length - 1; i >= 0; i--){
	console.log(pets[i]);
}

• Doing 5 rep of each exercise

const exercises = ["Pushup", "Squat", "Leg Raises"];

for(let i = 0; i < exercises.length; i++){
	for(let j=1; j <= 5; j++){
		console.log(`Rep ${j} of ${exercises[i]} exercise.`);
	}
}

// Rep 1 of Pushup
// Rep 2 of Pushup ... Rep 5 of Pushup
// ... Rep 5 of Leg Raises

The while Loop

• Keeps looping while a condition is true, mostly used when we don’t prior know the number of iterations

• It is more versatile meaning that it can be used in more number of ways as it doesn’t require a counter

• It is the most common case for an infinite loop to occur

let rep = 1; // initalization
while(rep <= 10); { // condition
	console.log(rep);
	rep++; // updater
}

• This program uses a while loop to roll a die until a 6 is obtained

// Gives a value from 1 to 6
const rollDie = () => Math.floor(Math.random() * 6) + 1;

// Attempts to roll until a 6 is Obtained
function rollA6(){
  let aRoll = rollDie();
  console.log('--- first roll: ', aRoll);
  let totalAttempts = 1;
  while(aRoll !== 6){
    aRoll = rollDie();
    totalAttempts++;
    console.log('--- subsequent roll: ', aRoll);
  }
  console.log('--- final roll', aRoll);
  console.log(`It took ${totalAttempts} number of attempts!`);
}

rollA6();

for in and for of

• for in loop is used to iterate over an object, giving the key on every iteration

• for of is used to iterate over an array