The Transformations
💡
This section is where your code goes from working to clean. These are the tools senior engineers use every day.
1. Ternary Operator
A shorter way to write a simple if/else.
javascript
// if/else
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
// ternary — same thing, one line
let status = age >= 18 ? "Adult" : "Minor";
console.log(status);condition ? valueIfTrue : valueIfFalse
In practice
javascript
let balance = 200;
let price = 50;
let result = balance >= price ? "Purchase approved" : "Not enough balance";
console.log(result); // Purchase approvedMental model: Ternary = a question with two possible answers. Yes or no. Left or right.
2. Destructuring Objects
Pull values out of an object into their own variables.
javascript
let student = {
name: "Ahmed",
age: 22,
city: "Oslo"
};
// without destructuring
let name = student.name;
let age = student.age;
// with destructuring
let { name, age, city } = student;
console.log(name); // Ahmed
console.log(age); // 22
console.log(city); // OsloRename while destructuring
javascript
let { name: studentName } = student;
console.log(studentName); // AhmedIn practice
javascript
let order = {
customer: "Faadumo",
amount: 500,
status: "pending"
};
let { customer, amount, status } = order;
console.log(customer + " sent " + amount + " NOK. Status: " + status);
// Faadumo sent 500 NOK. Status: pendingMental model: Destructuring = unpacking a bag. Instead of reaching in every time, you lay everything out on the table.
3. Destructuring Arrays
Pull values out of an array into their own variables.
javascript
let cities = ["Mogadishu", "Hargeisa", "Kismaayo"];
// without destructuring
let first = cities[0];
let second = cities[1];
// with destructuring
let [first, second, third] = cities;
console.log(first); // Mogadishu
console.log(second); // HargeisaRest items
javascript
let [first, ...rest] = cities;
console.log(first); // Mogadishu
console.log(rest); // ["Hargeisa", "Kismaayo"]In practice
javascript
let scores = [91, 85, 72];
let [top, second, third] = scores;
console.log("Top score: " + top); // Top score: 91
console.log("Second: " + second); // Second: 85Mental model: Array destructuring = taking items out of a list by position. First, second, third.
4. Arrow Functions
A shorter way to write functions.
javascript
// regular function
function add(a, b) {
return a + b;
}
// arrow function
const add = (a, b) => a + b;
console.log(add(3, 5)); // 8With one parameter — no brackets needed
javascript
const double = n => n * 2;
console.log(double(5)); // 10With a body — use {} and return
javascript
const calculateTotal = (price, tax) => {
let taxAmount = price * tax;
return price + taxAmount;
};
console.log(calculateTotal(200, 0.1)); // 220In practice
javascript
const toNOK = amount => amount * 10;
console.log(toNOK(50)); // 500
console.log(toNOK(200)); // 2000Mental model: Arrow function = a regular function with less writing. Same job, cleaner look.
5. Callbacks
A callback is a function you pass into another function as an argument.
javascript
function welcome(name) {
console.log("Salaam, " + name);
}
function run(callback) {
callback("Ahmed");
}
run(welcome); // Salaam, AhmedYou are not calling welcome yourself. You are handing it to run and letting run call it.
With an arrow function
javascript
function run(callback) {
callback("Ahmed");
}
run(name => console.log("Salaam, " + name)); // Salaam, AhmedMental model: Callback = instructions you hand to someone else to run at the right time. Like telling a friend: when the food is ready, call me.
6. Higher Order Functions
A higher order function takes a callback and runs it on each item in an array.
javascript
let numbers = [1, 2, 3, 4, 5];
// instead of a loop
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
// use forEach
numbers.forEach(num => console.log(num));The function you pass to forEach is the callback. It runs once for every item.
Mental model: Higher order function = a machine that takes your instructions and applies them to every item in the list.
7. map
Transforms every item in an array. Returns a new array.
javascript
let prices = [100, 200, 300];
let discounted = prices.map(price => price * 0.9);
console.log(discounted); // [90, 180, 270]In practice
javascript
let students = [
{ name: "Ahmed", score: 85 },
{ name: "Faadumo", score: 72 },
{ name: "Yusuf", score: 91 }
];
let names = students.map(student => student.name);
console.log(names); // ["Ahmed", "Faadumo", "Yusuf"]Mental model: map = transform every item. Give me the same list but changed.
8. filter
Keeps only the items that pass a condition. Returns a new array.
javascript
let scores = [85, 42, 91, 55, 78];
let passed = scores.filter(score => score >= 60);
console.log(passed); // [85, 91, 78]In practice
javascript
let students = [
{ name: "Ahmed", score: 85 },
{ name: "Faadumo", score: 42 },
{ name: "Yusuf", score: 91 },
{ name: "Nimo", score: 55 }
];
let passed = students.filter(student => student.score >= 60);
console.log(passed);
// [{ name: "Ahmed", score: 85 }, { name: "Yusuf", score: 91 }]Mental model: filter = a sieve. Pour everything in. Only the right ones come through.
9. find
Returns the first item that matches a condition. Returns one item, not an array.
javascript
let students = [
{ name: "Ahmed", score: 85 },
{ name: "Faadumo", score: 72 },
{ name: "Yusuf", score: 91 }
];
let topStudent = students.find(student => student.score > 90);
console.log(topStudent); // { name: "Yusuf", score: 91 }In practice
javascript
let orders = [
{ id: 1, customer: "Ahmed", status: "pending" },
{ id: 2, customer: "Faadumo", status: "delivered" },
{ id: 3, customer: "Yusuf", status: "pending" }
];
let order = orders.find(o => o.id === 2);
console.log(order.customer); // FaadumoMental model: find = search a list and return the first match. Like finding a contact by name.
10. sort
Sorts an array. Sorts numbers and strings differently.
Sort strings
javascript
let cities = ["Oslo", "Mogadishu", "Hargeisa"];
cities.sort();
console.log(cities); // ["Hargeisa", "Mogadishu", "Oslo"]Sort numbers — always pass a compare function
javascript
let scores = [85, 42, 91, 55, 78];
scores.sort((a, b) => a - b); // low to high
console.log(scores); // [42, 55, 78, 85, 91]
scores.sort((a, b) => b - a); // high to low
console.log(scores); // [91, 85, 78, 55, 42]In practice
javascript
let students = [
{ name: "Ahmed", score: 85 },
{ name: "Faadumo", score: 42 },
{ name: "Yusuf", score: 91 }
];
let ranked = students.sort((a, b) => b.score - a.score);
ranked.forEach(s => console.log(s.name + ": " + s.score));
// Yusuf: 91
// Ahmed: 85
// Faadumo: 42Mental model: sort = put the list in order. Numbers need a rule. Strings sort themselves alphabetically.
Summary
| Topic | Key Ideas |
|---|---|
| Ternary | condition ? true : false — short if/else |
| Destructuring Objects | let { name, age } = user |
| Destructuring Arrays | let [first, second] = items |
| Arrow Functions | const fn = (a, b) => a + b |
| Callbacks | function passed as argument, runs when needed |
| Higher Order Functions | takes a callback, runs it on every item |
| map | transform every item, returns new array |
| filter | keep items that pass, returns new array |
| find | returns first match, not an array |
| sort | sort strings alphabetically, numbers need (a, b) => a - b |