window.pipedriveLeadboosterConfig = { bas: 'leadbooster-chat.pipedrive.com', företagId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(funktion () { var w = fönster if (w.LeadBooster) { console.warn('LeadBooster finns redan') } annars { w.LeadBooster = { q: [], on: funktion (n, h) { this.q.push({ t: "o", n: n, h: h }) }, trigger: funktion (n) { this.q.push({ t: 't', n: n }) }, } } })() Funktionell programmering i JavaScript Del 1 - Introduktion - The Codest
Codest
  • Om oss
  • Tjänster
    • Utveckling av programvara
      • Frontend-utveckling
      • Backend-utveckling
    • Staff Augmentation
      • Frontend-utvecklare
      • Backend-utvecklare
      • Dataingenjörer
      • Ingenjörer inom molntjänster
      • QA-ingenjörer
      • Övriga
    • Det rådgivande
      • Revision och rådgivning
  • Industrier
    • Fintech & bankverksamhet
    • E-commerce
    • Adtech
    • Hälsoteknik
    • Tillverkning
    • Logistik
    • Fordon
    • IOT
  • Värde för
    • VD OCH KONCERNCHEF
    • CTO
    • Leveranschef
  • Vårt team
  • Fallstudier
  • Vet hur
    • Blogg
    • Möten
    • Webbinarier
    • Resurser
Karriär Ta kontakt med oss
  • Om oss
  • Tjänster
    • Utveckling av programvara
      • Frontend-utveckling
      • Backend-utveckling
    • Staff Augmentation
      • Frontend-utvecklare
      • Backend-utvecklare
      • Dataingenjörer
      • Ingenjörer inom molntjänster
      • QA-ingenjörer
      • Övriga
    • Det rådgivande
      • Revision och rådgivning
  • Värde för
    • VD OCH KONCERNCHEF
    • CTO
    • Leveranschef
  • Vårt team
  • Fallstudier
  • Vet hur
    • Blogg
    • Möten
    • Webbinarier
    • Resurser
Karriär Ta kontakt med oss
Pil tillbaka GÅ TILLBAKA
2022-05-25
Utveckling av programvara

Funktionell programmering i JavaScript Del 1 - Introduktion

Codest

Pawel Ged

Vue.js-utvecklare

Läs vår artikel för att upptäcka kraften i funktionell programmering i JavaScript. Funktionell programmering klassificeras som ett deklarativt paradigm där programbeskrivningen är separerad från beräkningarna.

Vad är funktionell programmering?

"Enkelt uttryckt är funktionell programmering en Utveckling av programvara stil som lägger stor vikt vid användningen av funktioner"

Utdrag ur boken: Luis Atencio "Funktionell programmering i JavaScript. Hur du kan förbättra din JavaScript program som använder funktionella tekniker"

Funktionell programmering är klassificerad som en deklarativ paradigm där programbeskrivningen är separerad från beräkningarna. Tyngdpunkten ligger här på att använda uttryck för att beskriva programlogiken. Detta är motsatsen till tvingande programmering, där kod utförs steg för steg och talar om för datorn i detalj hur jobbet ska utföras.

Deklarativ vs imperativ, exempel

Tänk på ett fall där vi har en matris med heltal och vi måste höja vart och ett av dem till andra potensen och sedan bara välja de värden som inte är jämna.

Imperativ

konstnummer = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const resultat = []

for(let i = 0; i < numbers.length; i++) {
const secondPower = Math.pow(siffror[i], 2)
if(secondPower & 1) { // eller % 2 men operationer på bitar är snabbare
resultat.push(andraPower);
}
}

console.log(resultat) // [1, 9, 25, 49, 81]

När det gäller tvingande lösningen är fokus på implementeringsdetaljer tydligt synligt. I loopen kan du se arrayindexet baserat på behovet av att kontrollera antalet element. På grund av det stora antalet detaljer i koden är det svårare att fokusera på vad den gör. Låt oss nu fokusera på deklarativ lösning.

Deklarativ

const risesToSecondPower = (num) => Math.pow(num, 2)
const isOdd = (num) => num & 1;

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]

const resultat = siffror
.map(stigerTillSekundmakt)
.filter(isOdd);

console.log(resultat) // [1, 9, 25, 49, 81]

I den här lösningen har implementeringen separerats från anropet genom att logiken har flyttats till separata funktioner. Tack vare den här lösningen kan vi bara fokusera på namnen på funktionerna som beskriver vad som händer i dem. Dessutom har abstraktionsnivån höjts och logiken kan nu återanvändas. Låt oss nu fokusera på samtalet. Du kan inte se några detaljer i den, bara en beskrivning som berättar vad den här koden gör, steg för steg:

  1. map(stigerTillSekundmakt) - tar varje element i en array och höjer det till andra potensen,
  2. filter(isOdd) - filtrera och välja udda element.

Fördelar

Funktionell programmering har många fördelar. När det gäller JavaScriptär användningen av funktioner naturlig eftersom det är ett funktionellt språk. Till och med klasserna i detta språk är "syntaktiskt socker" och de består underifrån av funktioner.

När det gäller läsbarhet blir koden i den imperativa metoden vanligtvis en lista med namn på funktioner som kan läsas sekventiellt utan att fördjupa sig i deras logik. Som ett resultat fokuserar vi inte på implementeringsdetaljerna.

En annan fördel är att hålla sig till konventionen med oföränderliga objekt. Tack vare detta tillvägagångssätt blir koden säkrare eftersom referenserna i JavaScript är mycket starka och det är lätt att modifiera det oönskade objektet.

I funktionell programmering bryts koden ner i små funktioner som enkelt kan betraktas som återanvändbar abstrakt kod.

Ren funktion

En av de viktigaste aspekterna inom funktionell programmering är rena funktioner. För att skapa en sådan funktion måste du komma ihåg några regler:

  • det resultat som funktionen returnerar beror endast på inmatningsparametrarna,
  • använd inte globala variabler och variabler som ligger utanför ditt eget område,
  • ändrar inte parametrarnas tillstånd,
  • rena funktioner har inga "sidoeffekter" (vanligtvis modifiering av objektets egenskaper),
  • för de angivna indataparametrarna kommer de alltid att ge ett och samma resultat,
  • en ren funktion tar alltid en parameter och returnerar alltid en parameter.
// Funktion för inmatning
låt räknare = 5
...
const multipleCounter = (multiplikator) => {
räknare = räknare * multiplikator
}

multiplyCounter(2) // -> ? resultatet beror på det ursprungliga värdet
// Ren funktion
const multiplyBy = (multiplikator) => (värde) => värde * multiplikator
const multipleByTwo = multiplyBy(2)

const counter = multiplyByTwo(5) // -> 10

Den första funktionen är oförutsägbar eftersom den är beroende av en extern parameter som kan ändras. Den andra funktionen är transparent, den beror bara på inparametrar, ändrar dem inte och använder inte variabler utanför intervallet. Den är transparent eftersom den är beroende av parametrar, inte ändrar dem, inte använder variabler utanför intervallet och returnerar ett nytt värde.

samarbetsbanner

Relaterade artiklar

Utveckling av programvara

Javascript-verktyg i aktion

Upptäck några verktyg för att hämta JavaScript för att höja nivån på ditt programmeringsspel. Läs mer om ESLint, Prettier och Husky!

Codest
Reda Salmi React Utvecklare

Prenumerera på vår kunskapsbas och håll dig uppdaterad om expertisen från IT-sektorn.

    Om oss

    The Codest - Internationellt mjukvaruutvecklingsföretag med teknikhubbar i Polen.

    Förenade kungariket - Huvudkontor

    • Kontor 303B, 182-184 High Street North E6 2JA
      London, England

    Polen - Lokala tekniknav

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Kraków
    • Brain Embassy, Konstruktorska
      11, 02-673 Warszawa, Polen

      Codest

    • Hem
    • Om oss
    • Tjänster
    • Fallstudier
    • Vet hur
    • Karriär
    • Ordbok

      Tjänster

    • Det rådgivande
    • Utveckling av programvara
    • Backend-utveckling
    • Frontend-utveckling
    • Staff Augmentation
    • Backend-utvecklare
    • Ingenjörer inom molntjänster
    • Dataingenjörer
    • Övriga
    • QA-ingenjörer

      Resurser

    • Fakta och myter om att samarbeta med en extern partner för mjukvaruutveckling
    • Från USA till Europa: Varför väljer amerikanska startup-företag att flytta till Europa?
    • Jämförelse av Tech Offshore Development Hubs: Tech Offshore Europa (Polen), ASEAN (Filippinerna), Eurasien (Turkiet)
    • Vilka är de största utmaningarna för CTO:er och CIO:er?
    • Codest
    • Codest
    • Codest
    • Privacy policy
    • Användarvillkor för webbplatsen

    Copyright © 2025 av The Codest. Alla rättigheter reserverade.

    sv_SESwedish
    en_USEnglish de_DEGerman da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek sv_SESwedish