The Mechanics
These are the building blocks of every JavaScript program. Master these and you can build anything.
1. Functions
A function is a block of code you can run whenever you need it.
function welcome() { console.log("Salaam!");}
welcome(); // Salaam!Mental model: Function = a reusable instruction. Like telling someone how to make shaah once. They can make it anytime after that.
2. Parameters and Return
Parameters β give the function inputs
function welcome(name) { console.log("Salaam, " + name);}
welcome("Ahmed"); // Salaam, Ahmedwelcome("Faadumo"); // Salaam, FaadumoMultiple parameters
function add(a, b) { return a + b;}
let result = add(3, 5);console.log(result); // 8console.log vs return
function double(n) { console.log(n * 2); // prints β but gives nothing back}
function double(n) { return n * 2; // gives the value back β you can use it}
let result = double(5);console.log(result); // 10Without return the function gives back undefined.
In practice
function calculateTotal(price, tip) { return price + tip;}
let total = calculateTotal(200, 1);console.log(total); // 220Mental model: Parameters = ingredients you hand to the function. Return = the finished result it hands back.
3. Scope
Variables live where they are created.
function greet() { let message = "Salaam!"; console.log(message); // works}
console.log(message); // β error β message does not exist hereGlobal vs local
let name = "Ahmed"; // global β available everywhere
function greet() { let message = "Salaam"; // local β only inside this function console.log(message + ", " + name); // can use global name}
greet(); // Salaam, AhmedMental model: A variable only exists inside the {} where it was created. Like a note written inside a room. Step outside and it is gone.
4. Arrays
An array is an ordered list of values.
let cities = ["Mogadishu", "Hargeisa", "Kismaayo"];
console.log(cities[0]); // Mogadishuconsole.log(cities[2]); // KismaayoIndex starts at 0, not 1.
console.log(cities.length); // 3In practice
let prices = [100, 200, 300];
console.log(prices[0]); // 100console.log(prices.length); // 3Mental model: Array = a numbered list. Like a queue at the xawaala office. Everyone has a position and it starts at 0.
5. Array Methods
Add and remove
let names = ["Ahmed", "Faadumo"];
names.push("Yusuf"); // add to end β ["Ahmed", "Faadumo", "Yusuf"]names.pop(); // remove from end β ["Ahmed", "Faadumo"]
names.unshift("Nimo"); // add to start β ["Nimo", "Ahmed", "Faadumo"]names.shift(); // remove from start β ["Ahmed", "Faadumo"]Check if value exists
let cities = ["Mogadishu", "Hargeisa", "Kismaayo"];
console.log(cities.includes("Hargeisa")); // trueconsole.log(cities.includes("Oslo")); // falseRemove by position
let items = ["rice", "eggs", "bread", "chicken"];
items.splice(1, 1); // remove 1 item at index 1console.log(items); // ["rice", "bread", "chicken"]splice(start, deleteCount) β where to start, how many to remove.
In practice
let cart = ["rice", "eggs", "bread"];
cart.push("chicken");console.log(cart); // ["rice", "eggs", "bread", "chicken"]
cart.splice(1, 1); // remove "eggs"console.log(cart); // ["rice", "bread", "chicken"]Mental model: push/pop = end of array. shift/unshift = start of array. splice = anywhere.
6. Loops
Loops repeat code without writing it again and again.
for loop
for (let i = 0; i < 3; i++) { console.log(i); // 0, 1, 2}Loop through an array
let names = ["Ahmed", "Faadumo", "Yusuf"];
for (let i = 0; i < names.length; i++) { console.log(names[i]);}while loop
let count = 0;
while (count < 3) { console.log(count); count++;}In practice
let prices = [10, 20, 30];let total = 0;
for (let i = 0; i < prices.length; i++) { total += prices[i];}
console.log(total); // 60Mental model: Loop = do this until the job is done. Like calling each person on a list one by one.
7. Objects
An object groups related values under one name.
let user = { name: "Ahmed", age: 25, city: "Oslo"};
console.log(user.name); // Ahmedconsole.log(user.age); // 25Add and update
user.email = "ahmed@mail.com"; // add new propertyuser.age = 26; // update existing propertyIn practice
let product = { name: "Laptop", price: 1000, inStock: true};
if (product.inStock) { console.log(product.name + " is available");}Mental model: Object = a profile. Like a contact in your phone. One person, multiple details.
8. Arrays of Objects
Combine arrays and objects to store a list of things.
let students = [ { name: "Ahmed", score: 85 }, { name: "Faadumo", score: 72 }, { name: "Yusuf", score: 91 }];
console.log(students[0].name); // Ahmedconsole.log(students[2].score); // 91Loop through
for (let i = 0; i < students.length; i++) { console.log(students[i].name + ": " + students[i].score);}In practice
let cart = [ { item: "Rice", price: 15 }, { item: "Chicken", price: 25 }, { item: "Bread", price: 5 }];
let total = 0;
for (let i = 0; i < cart.length; i++) { total += cart[i].price;}
console.log("Total: $" + total); // Total: $45Mental model: Array of objects = a list where every item has its own details. Like a class register. Every student has a name, a score, a status.
Summary
| Topic | Key Ideas |
|---|---|
| Functions | function, calling, console.log inside |
| Parameters and Return | inputs, return, store the result |
| Scope | local vs global, variables live inside {} |
| Arrays | index starts at 0, .length |
| Array Methods | push, pop, shift, unshift, includes, splice |
| Loops | for, while, loop through arrays |
| Objects | key/value pairs, dot notation |
| Arrays of Objects | list of objects, loop + dot notation |