window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster już istnieje') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() Programowanie funkcyjne w JavaScript Część 1 - Wprowadzenie - The Codest
The Codest
  • O nas
  • Nasze Usługi
    • Software Development
      • Frontend Development
      • Backend Development
    • Zespoły IT
      • Programiści frontendowi
      • Backend Dev
      • Inżynierowie danych
      • Inżynierowie rozwiązań chmurowych
      • Inżynierowie QA
      • Inne
    • Konsultacje IT
      • Audyt i doradztwo
  • Branże
    • Fintech i bankowość
    • E-commerce
    • Adtech
    • Healthtech
    • Produkcja
    • Logistyka
    • Motoryzacja
    • IOT
  • Wartość dla
    • CEO
    • CTO
    • Delivery Managera
  • Nasz zespół
  • Case Studies
  • Nasze Know How
    • Blog
    • Meetups
    • Webinary
    • Raporty
Kariera Skontaktuj się z nami
  • O nas
  • Nasze Usługi
    • Software Development
      • Frontend Development
      • Backend Development
    • Zespoły IT
      • Programiści frontendowi
      • Backend Dev
      • Inżynierowie danych
      • Inżynierowie rozwiązań chmurowych
      • Inżynierowie QA
      • Inne
    • Konsultacje IT
      • Audyt i doradztwo
  • Wartość dla
    • CEO
    • CTO
    • Delivery Managera
  • Nasz zespół
  • Case Studies
  • Nasze Know How
    • Blog
    • Meetups
    • Webinary
    • Raporty
Kariera Skontaktuj się z nami
Strzałka w tył WSTECZ
2022-05-25
Software Development

Programowanie funkcyjne w JavaScript Część 1 - Wprowadzenie

The Codest

Paweł Ged

Vue.js Developer

Przeczytaj nasz artykuł, aby odkryć moc programowania funkcyjnego w JavaScript. Programowanie funkcyjne jest klasyfikowane jako paradygmat deklaratywny, w którym opis programu jest oddzielony od obliczeń.

Czym jest programowanie funkcjonalne?

"Mówiąc najprościej, programowanie funkcjonalne jest rozwój oprogramowania styl, który kładzie duży nacisk na wykorzystanie funkcji"

Fragmenty książki: Luis Atencio "Programowanie funkcyjne w JavaScript. Jak poprawić swoje JavaScript programy wykorzystujące techniki funkcjonalne"

Programowanie funkcjonalne jest klasyfikowany jako deklaratywny gdzie opis programu jest oddzielony od obliczeń. Nacisk kładziony jest tutaj na wykorzystanie wyrażeń do opisu logiki programu. Jest to przeciwieństwo imperatywny programowanie, gdzie kod jest wykonywana krok po kroku i szczegółowo informuje komputer, jak wykonać zadanie.

Deklaratywny vs imperatywny, przykłady

Rozważmy przypadek, w którym mamy tablicę liczb całkowitych i musimy podnieść każdą z nich do drugiej potęgi, a następnie wybrać tylko te wartości, które nie są parzyste.

Imperatyw

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

const results = []

for(let i = 0; i < numbers.length; i++) {
const secondPower = Math.pow(numbers[i], 2)
if(secondPower & 1) { // lub % 2, ale operacje na bitach są szybsze
results.push(secondPower);
}
}

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

Jeśli chodzi o imperatywny wyraźnie widać skupienie się na szczegółach implementacji. W pętli widać indeks tablicy oparty na potrzebie kontrolowania liczby elementów. Ze względu na dużą liczbę szczegółów w kodzie, trudniej jest skupić się na tym, co robi. Skupmy się teraz na deklaratywny rozwiązanie.

Deklaratywny

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

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

const results = numbers
.map(risesToSecondPower)
.filter(isOdd);

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

W tym rozwiązaniu implementacja została oddzielona od inwokacji poprzez przeniesienie logiki do osobnych funkcji. Dzięki temu rozwiązaniu możemy skupić się jedynie na nazwach funkcji, które opisują to, co się w nich dzieje. Dodatkowo, poziom abstrakcji został podniesiony, a logika może być teraz ponownie wykorzystana. Skupmy się teraz na wywołaniu. Nie widać w nim żadnych szczegółów, tylko opis, który mówi, co ten kod robi, krok po kroku:

  1. map(risesToSecondPower) - pobiera każdy element tablicy i podnosi go do drugiej potęgi,
  2. filter(isOdd) - filtruj i wybieraj nieparzyste elementy.

Korzyści

Programowanie funkcjonalne ma wiele zalet. Jeśli chodzi o JavaScriptUżycie funkcji jest naturalne, ponieważ jest to język funkcjonalny. Nawet klasy w tym języku są "cukrem syntaktycznym" i składają się z funkcji.

Jeśli chodzi o czytelność, w podejściu imperatywnym kod zwykle staje się listą z nazwami funkcji, które można odczytać sekwencyjnie bez zagłębiania się w ich logikę. W rezultacie nie skupiamy się na szczegółach implementacji.

Kolejną zaletą jest trzymanie się konwencji niezmiennych obiektów. Dzięki takiemu podejściu kod staje się bezpieczniejszy, ponieważ referencje w JavaScript są bardzo silne i łatwo jest zmodyfikować niechciany obiekt.

W programowaniu funkcjonalnym kod jest podzielony na małe funkcje, które można łatwo uznać za abstrakcyjny kod wielokrotnego użytku.

Czysta funkcja

Jedną z ważnych kwestii w programowaniu funkcyjnym są czyste funkcje. Aby utworzyć taką funkcję, należy pamiętać o kilku zasadach:

  • wynik zwracany przez funkcję zależy tylko od parametrów wejściowych,
  • nie używaj zmiennych globalnych i zmiennych, które wykraczają poza twój własny zakres,
  • nie zmieniają stanu parametrów,
  • Czyste funkcje nie mają żadnych "efektów ubocznych" (zwykle modyfikujących właściwości obiektu),
  • dla wskazanych parametrów wejściowych, zawsze zwrócą jeden i ten sam wynik,
  • czysta funkcja zawsze przyjmuje parametr i zawsze zwraca parametr.
// Funkcja Inpure
let counter = 5
...
const multipleCounter = (multiplier) => {
counter = counter * multiplier
}

multiplyCounter(2) // -> ? wynik zależy od wartości początkowej
// Czysta funkcja
const multiplyBy = (multiplier) => (value) => value * multiplier
const multipleByTwo = multiplyBy(2)

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

Pierwsza funkcja jest nieprzewidywalna, ponieważ zależy od zewnętrznego parametru, który może ulec zmianie. Druga funkcja jest przezroczysta, zależy tylko od parametrów wejściowych, nie modyfikuje ich i nie używa zmiennych spoza zakresu. Jest przejrzysta, ponieważ zależy od parametrów, nie modyfikuje ich, nie używa zmiennych spoza zakresu i zwraca nową wartość.

baner współpracy

Powiązane artykuły

Software Development

Narzędzia Javascript w akcji

Odkryj kilka narzędzi JavaScript, aby podnieść poziom swojej gry programistycznej. Dowiedz się więcej o ESLint, Prettier i Husky!

The Codest
Reda Salmi React Developer

Subskrybuj naszą bazę wiedzy i bądź na bieżąco!

    O nas

    The Codest - Międzynarodowa firma programistyczna z centrami technologicznymi w Polsce.

    Wielka Brytania - siedziba główna

    • Office 303B, 182-184 High Street North E6 2JA
      Londyn, Anglia

    Polska - lokalne centra technologiczne

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

      The Codest

    • Strona główna
    • O nas
    • Nasze Usługi
    • Case Studies
    • Nasze Know How
    • Kariera
    • Słownik

      Nasze Usługi

    • Konsultacje IT
    • Software Development
    • Backend Development
    • Frontend Development
    • Zespoły IT
    • Backend Dev
    • Inżynierowie rozwiązań chmurowych
    • Inżynierowie danych
    • Inne
    • Inżynierowie QA

      Raporty

    • Fakty i mity na temat współpracy z zewnętrznym partnerem programistycznym
    • Z USA do Europy: Dlaczego amerykańskie startupy decydują się na relokację do Europy?
    • Porównanie centrów rozwoju Tech Offshore: Tech Offshore Europa (Polska), ASEAN (Filipiny), Eurazja (Turcja)
    • Jakie są największe wyzwania CTO i CIO?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Warunki korzystania z witryny

    Copyright © 2025 by The Codest. Wszelkie prawa zastrzeżone.

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