&w=3840&q=75)
Väl genomtänkta, självförklarande funktions- och variabelnamn
Har du någonsin bara velat döpa en variabel till x, y, eller z? Har du faktiskt gjort det och allt är frid och fröjd. Sen går du tillbaka till koden någon månad eller till och med år senare och det känns som man är tillbaka i skolan och försöker lösa “Vad är x?”. Det får en att uppskatta när man har gett variabler och funktioner beskrivande namn för vad den innehåller eller utför.
Fördelen med ett beskrivande namn är att man inte nödvändigtvis behöver kommentera funktioner och variabler, utan koden blir självförklarande och nästan självdokumenterande. För att parafrasera Robert C. Martin, vi läser konstant gammal kod för att skriva ny kod. Ju enklare koden är att läsa, desto enklare kommer den vara att skriva.
En av våra Frontend utvecklare tillade även hur konsekvent namngivning kan bidra till kodens tydlighet, här är två konkreta exempel.
Javascript// icke-konsekvent namngivning
const userList = []
const products = []
function getUser({ userId })
function fetchTodo({ todo })
// konsekvent namngivning
const userList = []
const productList = []
function getUser({ userId })
function getTodo({ todoId })
Utmana dig själv, hur skulle du skriva kod om du inte fick kommentera den?
Kodbasen följer en bestämd struktur och det är lätt för en utomstående att förstå dess “flow”
Det kan vara bra att påminna sig själv om att ens kod inte lever i ett vakuum. Oavsett om man arbetar på ett företag med många anställda som alla ska lägga till sin lilla bit till stacken, kodar med en kompis, eller lägger upp på GitHub så kommer andra att läsa din kod. Det blir ett klart “flow” för samtliga parter om det redan från början finns en tydlig struktur på hur koden är uppsatt, där man kan enkelt följa vad som händer och bygga ut eller ta bort funktionalitet efter behov.
Keep it Simple, Stupid, K.I.S.S.
Håll det enkelt. Något vi ofta använder på WILL & SKILL för att hålla struktur, och inte behöva skriva om samma kod om och om igen, är Atomic Design. Där bryter man ned koden i sina minsta beståndsdelar och sedan kan använda dessa som byggstenar i sitt projekt.
(Är du obekant med Atomic Design så rekommenderar vi varmt att ta en kik på ämnet )
Kod bör hållas simpel (när det går)
Think DRY, Don’t Repeat Yourself
Undvik att återupprepa dig själv. Ofta kommer man att behöva använda en viss bit kod mer än en gång. Då är det i många fall bättre att göra en funktion av den delen av kod istället för att klippa och klistra in samma kodsnutt flera gånger om.
Likaså bör varje funktion vara så simpel som möjlig. Om din funktion gör tre eller fler handlingar, så bör den kanske vara tre olika funktioner istället. Så att du undviker att den bara kan användas till ett specifikt syfte, utan öppnar upp för möjligheten att nyttjas till fler ändamål.
Javascript//bad
function getData() {
if(!user) {
fetch(userURL).then(res.json()).then(res => setUser(res.data))
}
if(!todos) {
fetch(todosURL).then(res.json()).then(res => setTodos(res.data))
}
}
//good
function getUser() {
if(!user) {
fetch(userURL).then(res.json()).then(res => setUser(res.data))
}
}
function getTodos() {
if(!todos) {
fetch(todosURL).then(res.json()).then(res => setTodos(res.data))
}
}
function getData() {
getUser()
getTodos()
}