EthioCode · P3·L07 · Lodash 🔧

01Lodash ምንድን ነው? — ለምን ያስፈልገናል?

Lodash (_) — በ JavaScript ውስጥ የጎደሉትን ጠቃሚ ፈንክሽኖች (utility functions) በሙሉ የያዘ ቤተ-መጽሐፍት (library) ነው! Array ፣ Object ፣ String ፣ Function manipulation — ቀለል ያለ እና ስህተት የሌለው ኮድ እንድንፅፍ ይረዳናል! Tree-shakeable ስለሆነ — የምንፈልገውን function ብቻ ለይተን import ማድረግ እንችላለን!
Used by millions — React, Angular, Vue, Node.js — everywhere!

📦

npm install lodash && npm install @types/lodash
import _ from 'lodash' | import { debounce } from 'lodash' (tree-shake!)

❌ ያለ Lodash — ብዙ ኮድ + ስህተት የመፍጠር ዕድል

// Deep clone ለማድረግ?
JSON.parse(JSON.stringify(obj))
// ❌ Dates ፣ undefined ፣ Functions ይበላሻሉ!

// Arrayን በምድብ ለመከፋፈል (Group)?
arr.reduce((acc, item) => {
  acc[item.cat] = acc[item.cat] || [];
  acc[item.cat].push(item);
  return acc;
}, {}) // ❌ 4 መስመር ኮድ ለ 1 ስራ!

// Debounce ለማድረግ?
let timer;
clearTimeout(timer);
timer = setTimeout(fn, 300);

✅ በ Lodash — 1 መስመር ብቻ!

import _ from 'lodash';

// ✅ Deep clone — ለሁሉም አይነት ዳታ (type) ይሰራል!
_.cloneDeep(obj)

// ✅ Group — በ 1 መስመር ብቻ!
_.groupBy(arr, 'category')

// ✅ Debounce — ለ production ዝግጁ የሆነ!
_.debounce(fn, 300)

02🔍 Function Explorer — ሁሉንም Function ሞክሩ!

🔧 Lodash Function መመልከቻ — Function ጠቅ ያድርጉ → ማብራሪያ + ኮድ ያገኛሉ

INTERACTIVE

👈

Function ይምረጡ

በግራ በኩል ካለው ዝርዝር ውስጥ function ጠቅ ያድርጉ → ማብራሪያው ይታያል!

03📚 Categories — Array · Object · String · Function

lodash-categories.ts

CODE REFERENCE

📦 Array

🗂 Object

🔤 String

⚡ Function

🔗 Collection

array-methods.ts

import { chunk, flatten, uniq, difference,
         intersection, compact, zip, unzip,
         groupBy, sortBy, orderBy } from 'lodash';

const arr = [1,2,3,4,5,6,7];
const nums = [1,2,2,3,3,4];
const nested = [[1,2],[3,4],[5]];

// chunk — ትልቅ arrayን ወደ ትናንሽ chunks (ክፍሎች) ለመከፋፈል
chunk(arr, 3)        // [[1,2,3],[4,5,6],[7]]

// flatten — የተደራረበ (nested) arrayን ቀጥ ለማድረግ
flatten(nested)      // [1,2,3,4,5]
flattenDeep([[1,[2]]])  // [1,2] (ሙሉ በሙሉ ቀጥ ያደርገዋል!)

// uniq — የተደጋገሙ (duplicates) ዳታዎችን ለማስወገድ
uniq(nums)           // [1,2,3,4]
uniqBy(users, 'id') // በተወሰነ property ብቻ ነጥሎ ለማውጣት

// Set operations (የስብስብ ስሌቶች)
difference([1,2,3,4],[2,4])   // [1,3]
intersection([1,2],[2,3]) // [2]
union([1,2],[2,3])       // [1,2,3]

// compact — falsy የሆኑ እሴቶችን ለማስወገድ
compact([0,1,false,2,'',3]) // [1,2,3]

// zip / unzip
zip(['a','b'],[1,2]) // [['a',1],['b',2]]

object-methods.ts

import { cloneDeep, merge, pick, omit,
         get, set, has, mapValues,
         invert, defaults } from 'lodash';

const user = { name:'Samuel', age:26,
               addr:{ city:'Addis', zip:'1000' } };

// cloneDeep — ሙሉ (Deep) Clone ለማድረግ
const clone = cloneDeep(user);
clone.addr.city = 'Hawassa'; // ዋናው (original) ዳታ አይቀየርም!

// merge — objects ማዋሃድ (በጥልቀት / deep)
merge({a:1,b:{x:1}}, {b:{y:2},c:3})
// → {a:1, b:{x:1,y:2}, c:3}

// pick / omit — የተወሰኑ fields ብቻ ለመምረጥ
pick(user, ['name','age'])   // {name,age} ብቻ ይሰጠናል
omit(user, ['addr'])        // 'addr'ን ትቶ ሌላውን ይሰጠናል

// get — safe nested access (ያለ ስህተት ዳታ ለማውጣት)
get(user, 'addr.city')      // 'Addis'
get(user, 'addr.phone', 'N/A') // ከሌለ 'N/A' (default) ይመልሳል
has(user, 'addr.zip')       // true

// set — nested value ለማስቀመጥ
set(clone, 'addr.phone', '0911')

// mapValues — በ object ውስጥ ያሉትን እሴቶች (values) በሙሉ ለመቀየር
mapValues({a:1,b:2}, v => v*2)
// → {a:2, b:4}

string-methods.ts

import { camelCase, snakeCase, kebabCase,
         capitalize, startCase, truncate,
         pad, padStart, padEnd, trim,
         escape, unescape, words } from 'lodash';

const str = 'hello world ethiopia';

// 🐪 Case conversion (የአፃፃፍ ስልት መቀየሪያ)
camelCase(str)   // 'helloWorldEthiopia'
snakeCase(str)   // 'hello_world_ethiopia'
kebabCase(str)   // 'hello-world-ethiopia'
startCase(str)   // 'Hello World Ethiopia'
capitalize(str)  // 'Hello world ethiopia'
upperFirst(str)  // 'Hello world ethiopia'

// ✂️ truncate — ረጅም ፅሁፍን ለማሳጠር (clip)
truncate('Hello World Ethiopia!', {
  length: 12,
  omission: '...'  // 'Hello Wor...'
})

// 📏 pad — string alignment (ክፍተቶችን ለመሙላት)
pad('abc', 8)      // '  abc   '
padStart('5', 4, '0') // '0005' (ለ IDs ይጠቅማል!)
padEnd('ET', 5, '-')  // 'ET---'

// 🛡️ Security (ለደህንነት)
escape('<script>')   // '&lt;script&gt;'
words(str)           // ['hello','world','ethiopia']

function-methods.ts

import { debounce, throttle, memoize,
         once, partial, curry } from 'lodash';

// ⏱️ debounce — ተጠቃሚው ፅፎ እስኪያቆም ይጠብቃል (ለ Search input!)
const search = debounce((query) => {
  fetchResults(query); // 300ms ካለፈ በኋላ ብቻ ይሰራል
}, 300);
input.addEventListener('input', (e) =>
  search(e.target.value));

// 🚦 throttle — በተወሰነ ጊዜ ውስጥ አንዴ ብቻ እንዲሰራ (ለ Scroll!)
const onScroll = throttle(() => {
  updateProgress(); // በየ 200ms አንዴ ብቻ ይሰራል
}, 200);

// 💾 memoize — የሰራውን ስሌት ውጤት ያስቀምጣል (Result Cache!)
const factorial = memoize((n) => {
  return n <= 1 ? 1 : n * factorial(n - 1);
});
factorial(100); // ✅ ሁለተኛ ጊዜ ሲጠራ ቀጥታ ከ cache ይሰጠናል!

// 1️⃣ once — አንዴ ብቻ እንዲሰራ (ለ Init functions!)
const initApp = once(() => {
  console.log('App initialized!');
});
initApp(); // ይሰራል (prints)
initApp(); // ✅ ዝም ይላል — በድጋሚ አይሰራም!

collection-methods.ts

import { groupBy, sortBy, orderBy, keyBy,
         countBy, sumBy, maxBy, minBy,
         filter, map, reduce, find } from 'lodash';

const products = [
  { name:'Injera',  cat:'food',   price:50,  rating:4.8 },
  { name:'Tibs',    cat:'food',   price:200, rating:4.5 },
  { name:'Coffee',  cat:'drink',  price:30,  rating:4.9 },
  { name:'Tej',     cat:'drink',  price:80,  rating:4.2 },
];

// groupBy — በ Category መመደብ (ቡድን ማድረግ)
groupBy(products, 'cat')
// {food:[injera,tibs], drink:[coffee,tej]}

// sortBy / orderBy — መደርደር
sortBy(products, 'price')
orderBy(products, ['rating'], ['desc'])

// keyBy — ID lookup map (በፍጥነት ዳታ ለማግኘት)
keyBy(products, 'name')
// {Injera:{...}, Tibs:{...}}

// Aggregation (የስሌት ስራዎች)
countBy(products, 'cat')    // {food:2,drink:2}
sumBy(products, 'price')   // 360
maxBy(products, 'rating') // Coffee object
minBy(products, 'price')  // Coffee {price:30}

04🎮 Live Playground — ቀጥታ ሞክሩት!

🔧 Lodash Playground — ዳታ ፃፉ → Function ምረጡ → ▶ Run

✅ READY

📦 Input Array (JSON)

⚙️ Function

📋 Input

—

✅ Output — ውጤት

▷ Run ጠቅ ያድርጉ → ውጤቱ ይታያል!

05⛓️ Chaining — _.chain() በመጠቀም ማያያዝ!

_.chain() — Operationsን በቅደም ተከተል ማሰለፍ!

CHAIN

_.chain() — ብዙ operationsን ቀጥ አድርጎ ያያይዛል! .value() ሲደርስ ሂደቱ ይጠናቀቃል! ለእውነተኛ ዳታ ፕሮሰሲንግ (Real-world data processing) ምርጡ pattern ነው!

①

const orders = [ { user:'Samuel', amount:500, status:'paid', region:'Addis' }, { user:'Meron', amount:200, status:'pending', region:'Hawassa' }, { user:'Kebede', amount:800, status:'paid', region:'Addis' }, { user:'Tigist', amount:150, status:'paid', region:'Bahir Dar' }, { user:'Abel', amount:300, status:'pending', region:'Addis' }, ];

📋 ጥሬ ዳታ (Raw data) — 5 orders

②

_.chain(orders) .filter({ status: 'paid' }) // ✅ የተከፈሉትን (paid) ብቻ

→ [Samuel-500, Kebede-800, Tigist-150]

③

.groupBy('region') // 📍 በ Region መመደብ

→ {Addis:[Samuel,Kebede], 'Bahir Dar':[Tigist]}

④

.mapValues(orders => _.sumBy(orders, 'amount')) // 💰 አጠቃላይ ድምር በየ Region

→ {Addis: 1300, 'Bahir Dar': 150}

✅

.value(); // 🎯 ውጤቱን ያወጣል

→ { Addis: 1300, 'Bahir Dar': 150 } — ተጠናቀቀ! 🎉

06⚖️ Lodash vs Native JS — መቼ የትኛውን እንጠቀም?

ዘመናዊው JS (ES2020+) ብዙ የ Lodash features በራሱ አካቷል! ነገር ግን አሁንም Lodash የሚያሸንፍባቸው ቦታዎች አሉ!

ተግባር (Task)	❌ Native JS (ረዣዥም)	✅ Lodash (ቀላሉ)
Deep Clone	JSON.parse(JSON.stringify(obj)) — Dates/undefined ይበላሻሉ!	_.cloneDeep(obj) — ለሁሉም type ይሰራል ✅
Deep Merge	ብዙ recursive code መፃፍ ያስፈልጋል	_.merge(obj1, obj2) — በ 1 መስመር
Group By	arr.reduce((acc,x)=>{acc[x.k]=acc[x.k]\|\|[];acc[x.k].push(x);return acc},{})	_.groupBy(arr, 'key') — በ 1 መስመር!
Uniq Objects	Filter + JSON.stringify comparison	_.uniqBy(arr, 'id') — በ property ብቻ
Debounce	Manual setTimeout/clearTimeout	_.debounce(fn, 300) — ለ production ዝግጁ
Safe Get	obj?.a?.b?.c?.d (optional chain)	_.get(obj, 'a.b.c.d', default)
Sum By	arr.reduce((s,x)=>s+x.price, 0)	_.sumBy(arr, 'price') — ንፁህ እና አጭር
Chunk	Custom loop + slice logic	_.chunk(arr, size) — ለ pagination!

07⚡ Production Ready — የእውነተኛ ዓለም ምሳሌ

productionUtils.ts — EthioShop Dashboard

import { debounce, groupBy, orderBy, sumBy,
         maxBy, cloneDeep, pick, uniqBy,
         chunk, memoize } from 'lodash';

// 1️⃣ Search — ከ debounce ጋር (አላስፈላጊ API calls ይቀንሳል!)
const handleSearch = debounce(async (query: string) => {
  const results = await searchProducts(query);
  setProducts(results);
}, 350);

// 2️⃣ Dashboard analytics — ሁሉም operations ተያይዘው (chain)!
const getDashboardData = memoize((orders: Order[]) => {
  const paid = orders.filter(o => o.status === 'paid');
  return {
    byRegion:    groupBy(paid, 'region'),
    totalRevenue:sumBy(paid, 'amount'),
    topOrder:    maxBy(paid, 'amount'),
    topProducts: orderBy(paid, ['amount'],['desc']).slice(0,5),
  };
}); // memoize → ተመሳሳይ input ሲመጣ? cache ያደርጋል ↩

// 3️⃣ Safe user update — ከ cloneDeep ጋር!
const updateUser = (user: User, updates: Partial<User>) => {
  const safe = cloneDeep(user);       // original ዳታው አይነካም!
  return { ...safe, ...pick(updates,
    ['name','phone','address'])   // የተፈቀዱ fields ብቻ
  };
};

// 4️⃣ Pagination — ከ chunk ጋር!
const paginate = (items: any[], pageSize = 10) =>
  chunk(items, pageSize);
// paginate(products, 10) → [[p1..p10],[p11..p20]...]

// 5️⃣ የተደጋገሙ ተጠቃሚዎችን (users) በ email መለየት
const deduplicateUsers = (users: User[]) =>
  uniqBy(users, 'email');

📌ጠቅለል ያለ ማስታወሻ

1

⏱️ debounce + throttle — ለ Performance!

Search input → debounce(fn, 300) — ፊደል በተፃፈ ቁጥር API አይጠራም! Scroll → throttle(fn, 200) — በሰከንድ max 5 ጊዜ! ለ UI performance ሁሌም አስፈላጊ ናቸው!

debounce = waits for pause · throttle = limits frequency.

2

🪆 cloneDeep — Deep Clone ለማድረግ ብቸኛ መፍትሔ!

JSON.parse(JSON.stringify()) Dates ፣ undefined ፣ Functions ያበላሻል! _.cloneDeep() ግን ሁሉንም type በትክክል clone ያደርጋል!

Always use cloneDeep when modifying state copies in React!

3

📊 groupBy + sumBy — ለ Data Analytics!

ለ Dashboard ፣ Reports ፣ Charts ሁሉ ያገለግላል! groupBy(orders, 'region') + sumBy(group, 'amount') — ቀላሉ የ analytics pipeline!

_.chain() with groupBy → mapValues → sumBy = most powerful pattern.

4

⛓️ _.chain() — Pipeline Pattern!

ብዙ operations በቅደም ተከተል chain አድርጉ! _.chain(data).filter().groupBy().mapValues().value() — ለማንበብ በጣም ቀላል ነው!

Always end with .value() — lazy evaluation!

5

🌲 Tree-shaking — Bundle Size!

import _ from 'lodash' = ሁሉንም ያመጣል (70KB)! import { debounce } from 'lodash' = ያንን function ብቻ ያመጣል! ለ Production ሁሌም named import ተጠቀሙ!

Better: import debounce from 'lodash/debounce' — smallest bundle!

🎯ለዕውቀት መፈተኛ Quiz!

❓ Search input ላይ ፊደል ሲጻፍ እያንዳንዱ ፊደል API call እንዳያደርግ፣ ተጠቃሚው ፅፎ ሲያቆም ብቻ call ለማድረግ የሚጠቅመው Lodash function የቱ ነው?

Which Lodash function delays execution until after the user stops typing?

A

_.throttle() — max rate limit ያደርጋል

B

_.debounce() — ፅፈው ሲያቆሙ ብቻ ይሰራል! ✅

C

_.memoize() — result caching ያደርጋል

D

_.once() — አንዴ ብቻ ይሰራል

Lodash —የዴቨሎፐሮች የጀርባ አጥንት! 🔧

Lodash —
የዴቨሎፐሮች የጀርባ አጥንት! 🔧