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.
javascript
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
javascript
function welcome(name) {
console.log("Salaam, " + name);
}
welcome("Ahmed"); // Salaam, Ahmed
welcome("Faadumo"); // Salaam, FaadumoMultiple parameters
javascript
function add(a, b) {
return a + b;
}
let result = add(3, 5);
console.log(result); // 8console.log vs return
javascript
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
javascript
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.
javascript
function greet() {
let message = "Salaam!";
console.log(message); // works
}
console.log(message); // ❌ error — message does not exist hereGlobal vs local
javascript
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.
javascript
let cities = ["Mogadishu", "Hargeisa", "Kismaayo"];
console.log(cities[0]); // Mogadishu
console.log(cities[2]); // KismaayoIndex starts at 0, not 1.
javascript
console.log(cities.length); // 3In practice
javascript
let prices = [100, 200, 300];
console.log(prices[0]); // 100
console.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
javascript
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
javascript
let cities = ["Mogadishu", "Hargeisa", "Kismaayo"];
console.log(cities.includes("Hargeisa")); // true
console.log(cities.includes("Oslo")); // falseRemove by position
javascript
let items = ["rice", "eggs", "bread", "chicken"];
items.splice(1, 1); // remove 1 item at index 1
console.log(items); // ["rice", "bread", "chicken"]splice(start, deleteCount) — where to start, how many to remove.
In practice
javascript
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
javascript
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}Loop through an array
javascript
let names = ["Ahmed", "Faadumo", "Yusuf"];
for (let i = 0; i < names.length; i++) {
console.log(names[i]);
}while loop
javascript
let count = 0;
while (count < 3) {
console.log(count);
count++;
}In practice
javascript
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.
javascript
let user = {
name: "Ahmed",
age: 25,
city: "Oslo"
};
console.log(user.name); // Ahmed
console.log(user.age); // 25Add and update
javascript
user.email = "ahmed@mail.com"; // add new property
user.age = 26; // update existing propertyIn practice
javascript
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.
javascript
let students = [
{ name: "Ahmed", score: 85 },
{ name: "Faadumo", score: 72 },
{ name: "Yusuf", score: 91 }
];
console.log(students[0].name); // Ahmed
console.log(students[2].score); // 91Loop through
javascript
for (let i = 0; i < students.length; i++) {
console.log(students[i].name + ": " + students[i].score);
}In practice
javascript
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 |