The Transformations
Updated Jul 4, 2026
💡
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/elseif (age >= 18) { console.log("Adult");} else { console.log("Minor");}
// ternary — same thing, one linelet 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 destructuringlet name = student.name;let age = student.age;
// with destructuringlet { name, age, city } = student;
console.log(name); // Ahmedconsole.log(age); // 22console.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 destructuringlet first = cities[0];let second = cities[1];
// with destructuringlet [first, second, third] = cities;
console.log(first); // Mogadishuconsole.log(second); // HargeisaRest items
javascript
let [first, ...rest] = cities;console.log(first); // Mogadishuconsole.log(rest); // ["Hargeisa", "Kismaayo"]In practice
javascript
let scores = [91, 85, 72];
let [top, second, third] = scores;console.log("Top score: " + top); // Top score: 91console.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 functionfunction add(a, b) { return a + b;}
// arrow functionconst 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)); // 500console.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 loopfor (let i = 0; i < numbers.length; i++) { console.log(numbers[i]);}
// use forEachnumbers.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 highconsole.log(scores); // [42, 55, 78, 85, 91]
scores.sort((a, b) => b - a); // high to lowconsole.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 |