{"id":1324,"date":"2026-04-19T12:39:51","date_gmt":"2026-04-19T10:39:51","guid":{"rendered":"https:\/\/trzykody.pl\/?p=1324"},"modified":"2026-04-19T12:39:55","modified_gmt":"2026-04-19T10:39:55","slug":"funkcja-strzalkowa","status":"publish","type":"post","link":"https:\/\/trzykody.pl\/index.php\/2026\/04\/19\/funkcja-strzalkowa\/","title":{"rendered":"Funkcja strza\u0142kowa"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Programowanie w JavaScript bardzo szybko prowadzi do sytuacji, w kt\u00f3rej ten sam schemat zapisuje si\u0119 dziesi\u0105tki razy: przekazanie funkcji do metody tablicy, obs\u0142uga zdarzenia, kr\u00f3tka logika walidacji albo prosty callback. Klasyczny zapis z u\u017cyciem s\u0142owa <code>function<\/code> dzia\u0142a poprawnie, ale przy cz\u0119stym u\u017cyciu staje si\u0119 rozwlek\u0142y i utrudnia czytanie kodu. Szczeg\u00f3lnie w wi\u0119kszych projektach liczy si\u0119 nie tylko poprawno\u015b\u0107, ale te\u017c szybko\u015b\u0107 zrozumienia intencji autora. W praktyce JavaScript jednym z podstawowych mechanizm\u00f3w upraszczaj\u0105cych taki zapis jest <strong>Funkcja strza\u0142kowa<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Spis Tre\u015bci<\/h2><nav><ol><li><a href=\"#funkcja-strzalkowa-jako-skrocony-zapis-funkcji-i-roznica-wzgledem-klasycznego-slowa-function\">Funkcja strza\u0142kowa jako skr\u00f3cony zapis funkcji i r\u00f3\u017cnica wzgl\u0119dem klasycznego s\u0142owa function<\/a><\/li><li><a href=\"#zasada-dzialania-parametru-return-oraz-sposob-zapisu-obiektow-i-bardziej-zlozonej-logiki\">Zasada dzia\u0142ania parametru return oraz spos\u00f3b zapisu obiekt\u00f3w i bardziej z\u0142o\u017conej logiki<\/a><\/li><li><a href=\"#funkcja-strzalkowa-i-mechanizm-this-ktory-najczesciej-powoduje-bledy-w-kodzie-produkcyjnym\">Funkcja strza\u0142kowa i mechanizm this kt\u00f3ry najcz\u0119\u015bciej powoduje b\u0142\u0119dy w kodzie produkcyjnym<\/a><\/li><li><a href=\"#porownanie-z-przykladami-w-c-c-i-python-oraz-dlaczego-skladnia-wyglada-inaczej\">Por\u00f3wnanie z przyk\u0142adami w C, C++ i Python oraz dlaczego sk\u0142adnia wygl\u0105da inaczej<\/a><ol><li><a href=\"#c\">C<\/a><\/li><li><a href=\"#c-1\">C++<\/a><\/li><li><a href=\"#python\">Python<\/a><\/li><li><a href=\"#funkcja-strzalkowa-pomaga-wtedy-gdy-kod-ma-byc-krotki-czytelny-i-przewidywalny\">Funkcja strza\u0142kowa pomaga wtedy gdy kod ma by\u0107 kr\u00f3tki czytelny i przewidywalny<\/a><\/li><\/ol><\/li><li><a href=\"#wzory-myslowe-i-schemat-podejmowania-decyzji-podczas-wyboru-odpowiedniego-typu-funkcji\">Wzory my\u015blowe i schemat podejmowania decyzji podczas wyboru odpowiedniego typu funkcji<\/a><\/li><li><a href=\"#najczestsze-bledy-i-rzeczy-na-ktore-naprawde-warto-uwazac-podczas-codziennej-pracy\">Najcz\u0119stsze b\u0142\u0119dy i rzeczy na kt\u00f3re naprawd\u0119 warto uwa\u017ca\u0107 podczas codziennej pracy<\/a><ol><li><a href=\"#brak-return\">Brak return<\/a><\/li><li><a href=\"#niepoprawny-zwrot-obiektu\">Niepoprawny zwrot obiektu<\/a><\/li><li><a href=\"#uzycie-jako-konstruktora\">U\u017cycie jako konstruktora<\/a><\/li><li><a href=\"#bledne-this-w-metodzie-obiektu\">B\u0142\u0119dne this w metodzie obiektu<\/a><\/li><li><a href=\"#nadmierne-skracanie-kodu\">Nadmierne skracanie kodu<\/a><\/li><\/ol><\/li><li><a href=\"#faq\">FAQ<\/a><ol><li><a href=\"#czy-zapis-strzalkowy-dziala-szybciej-niz-klasyczna-funkcja\">Czy zapis strza\u0142kowy dzia\u0142a szybciej ni\u017c klasyczna funkcja?<\/a><\/li><li><a href=\"#czy-mozna-uzywac-operatora-new\">Czy mo\u017cna u\u017cywa\u0107 operatora new?<\/a><\/li><li><a href=\"#czy-zawsze-warto-zamieniac-function-na-krotszy-zapis\">Czy zawsze warto zamienia\u0107 function na kr\u00f3tszy zapis?<\/a><\/li><li><a href=\"#dlaczego-this-zachowuje-sie-inaczej\">Dlaczego this zachowuje si\u0119 inaczej?<\/a><\/li><li><a href=\"#czy-python-lambda-dziala-identycznie\">Czy Python lambda dzia\u0142a identycznie?<\/a><\/li><li><a href=\"#czy-w-c-istnieje-taki-sam-mechanizm\">Czy w C istnieje taki sam mechanizm?<\/a><\/li><\/ol><\/li><li><a href=\"#krotkie-zakonczenie\">Kr\u00f3tkie zako\u0144czenie<\/a><\/li><\/ol><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"funkcja-strzalkowa-jako-skrocony-zapis-funkcji-i-roznica-wzgledem-klasycznego-slowa-function\">Funkcja strza\u0142kowa jako skr\u00f3cony zapis funkcji i r\u00f3\u017cnica wzgl\u0119dem klasycznego s\u0142owa function<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mechanizm ten zosta\u0142 wprowadzony w standardzie ES6 (ECMAScript 2015). Jego g\u0142\u00f3wnym celem nie by\u0142o wy\u0142\u0105cznie skr\u00f3cenie sk\u0142adni, ale r\u00f3wnie\u017c zmiana sposobu wi\u0105zania kontekstu <code>this<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Klasyczna funkcja tworzona przez <code>function<\/code> posiada w\u0142asne <code>this<\/code>, w\u0142asne <code>arguments<\/code>, mo\u017ce by\u0107 konstruktorem oraz mo\u017ce by\u0107 u\u017cywana z operatorem <code>new<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wersja strza\u0142kowa dzia\u0142a inaczej:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nie tworzy w\u0142asnego <code>this<\/code><\/li>\n\n\n\n<li>nie posiada w\u0142asnego <code>arguments<\/code><\/li>\n\n\n\n<li>nie mo\u017ce by\u0107 konstruktorem<\/li>\n\n\n\n<li>nie dzia\u0142a z <code>new<\/code><\/li>\n\n\n\n<li>zwykle jest kr\u00f3tsza i czytelniejsza przy ma\u0142ych operacjach<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Najprostsza r\u00f3\u017cnica dotyczy samej sk\u0142adni.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Rodzaj zapisu<\/th><th>Kod<\/th><th>Co si\u0119 dzieje<\/th><\/tr><\/thead><tbody><tr><td>Klasyczna funkcja JS<\/td><td><code>function suma(a, b) { return a + b; }<\/code><\/td><td>pe\u0142na sk\u0142adnia, jawny <code>return<\/code><\/td><\/tr><tr><td>Zapis strza\u0142kowy JS<\/td><td><code>const suma = (a, b) =&gt; { return a + b; }<\/code><\/td><td>skr\u00f3cona forma, nadal blok kodu<\/td><\/tr><tr><td>Jeszcze kr\u00f3tszy zapis<\/td><td><code>const suma = (a, b) =&gt; a + b;<\/code><\/td><td>pojedyncze wyra\u017cenie zwracane automatycznie<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Je\u017celi funkcja ma tylko jeden parametr, nawiasy mo\u017cna pomin\u0105\u0107.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Przyk\u0142ad<\/th><th>Kod<\/th><\/tr><\/thead><tbody><tr><td>Jeden argument<\/td><td><code>const kwadrat = x =&gt; x * x;<\/code><\/td><\/tr><tr><td>Kilka argument\u00f3w<\/td><td><code>const pole = (a, b) =&gt; a * b;<\/code><\/td><\/tr><tr><td>Brak argument\u00f3w<\/td><td><code>const start = () =&gt; \"uruchomiono\";<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To wygl\u0105da drobnie, ale w praktyce ma du\u017ce znaczenie. Kod typu:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">tablica.map(function(x) {<br>    return x * 2;<br>});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">po zmianie staje si\u0119:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">tablica.map(x =&gt; x * 2);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">R\u00f3\u017cnica przy jednej linii wydaje si\u0119 ma\u0142a. Przy kilkuset callbackach miesi\u0119cznie oszcz\u0119dza realny czas i zmniejsza liczb\u0119 b\u0142\u0119d\u00f3w przy refaktoryzacji.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"zasada-dzialania-parametru-return-oraz-sposob-zapisu-obiektow-i-bardziej-zlozonej-logiki\">Zasada dzia\u0142ania parametru return oraz spos\u00f3b zapisu obiekt\u00f3w i bardziej z\u0142o\u017conej logiki<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Najcz\u0119stszy b\u0142\u0105d pocz\u0105tkuj\u0105cych dotyczy <code>return<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je\u017celi po operatorze <code>=&gt;<\/code> wyst\u0119puje pojedyncze wyra\u017cenie bez nawias\u00f3w klamrowych, JavaScript wykonuje zwrot automatycznie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Przyk\u0142ad:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Kod<\/th><th>Wynik<\/th><\/tr><\/thead><tbody><tr><td><code>const podwoj = x =&gt; x * 2;<\/code><\/td><td>warto\u015b\u0107 jest zwracana automatycznie<\/td><\/tr><tr><td><code>const podwoj = x =&gt; { x * 2; }<\/code><\/td><td>zwracane jest <code>undefined<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Drugi przypadek nie dzia\u0142a tak, jak wielu zak\u0142ada. Po u\u017cyciu <code>{}<\/code> trzeba napisa\u0107 <code>return<\/code> r\u0119cznie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Poprawna wersja:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Kod<\/th><\/tr><\/thead><tbody><tr><td><code>const podwoj = x =&gt; { return x * 2; }<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Problem pojawia si\u0119 tak\u017ce przy zwracaniu obiekt\u00f3w.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Zapis:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Kod<\/th><\/tr><\/thead><tbody><tr><td><code>const osoba = () =&gt; { imie: \"Jan\" };<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">nie zwraca obiektu, poniewa\u017c interpreter traktuje nawias klamrowy jako blok instrukcji.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Poprawnie:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Kod<\/th><\/tr><\/thead><tbody><tr><td><code>const osoba = () =&gt; ({ imie: \"Jan\" });<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Dodatkowe nawiasy okr\u0105g\u0142e wymuszaj\u0105 interpretacj\u0119 jako obiekt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">W praktyce jest to bardzo cz\u0119sta pu\u0142apka podczas pracy z React, mapowaniem danych oraz generowaniem struktur JSON.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"funkcja-strzalkowa-i-mechanizm-this-ktory-najczesciej-powoduje-bledy-w-kodzie-produkcyjnym\">Funkcja strza\u0142kowa i mechanizm this kt\u00f3ry najcz\u0119\u015bciej powoduje b\u0142\u0119dy w kodzie produkcyjnym<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To najwa\u017cniejsza r\u00f3\u017cnica i jednocze\u015bnie miejsce, gdzie naj\u0142atwiej straci\u0107 kilka godzin na debugowanie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">W klasycznej funkcji <code>this<\/code> zale\u017cy od sposobu wywo\u0142ania.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">W wersji strza\u0142kowej <code>this<\/code> jest dziedziczone z otaczaj\u0105cego zakresu (lexical scope).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To nie jest detal sk\u0142adniowy. To zmienia logik\u0119 dzia\u0142ania programu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Przyk\u0142ad klasycznej funkcji:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Kod<\/th><th>Efekt<\/th><\/tr><\/thead><tbody><tr><td><code>const obiekt = { imie: \"Anna\", pokaz: function() { console.log(this.imie); } };<\/code><\/td><td>wypisze <code>Anna<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Teraz przyk\u0142ad z funkcj\u0105 wewn\u0119trzn\u0105:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Kod<\/th><\/tr><\/thead><tbody><tr><td><code>const obiekt = { imie: \"Anna\", pokaz: function() { setTimeout(function() { console.log(this.imie); }, 1000); } };<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Tutaj cz\u0119sto pojawia si\u0119 <code>undefined<\/code>, poniewa\u017c <code>this<\/code> wewn\u0119trznej funkcji nie wskazuje ju\u017c na obiekt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rozwi\u0105zanie przy u\u017cyciu zapisu strza\u0142kowego:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Kod<\/th><\/tr><\/thead><tbody><tr><td><code>const obiekt = { imie: \"Anna\", pokaz: function() { setTimeout(() =&gt; { console.log(this.imie); }, 1000); } };<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Tutaj <code>this<\/code> zostaje odziedziczone z funkcji <code>pokaz<\/code>, wi\u0119c wynik b\u0119dzie poprawny.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To w\u0142a\u015bnie dlatego taki zapis jest tak cz\u0119sto u\u017cywany w:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>setTimeout<\/code><\/li>\n\n\n\n<li><code>setInterval<\/code><\/li>\n\n\n\n<li>event listenerach<\/li>\n\n\n\n<li>metodach tablic<\/li>\n\n\n\n<li>callbackach asynchronicznych<\/li>\n\n\n\n<li>Promise<\/li>\n\n\n\n<li>kodzie frontendowym<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">W du\u017cych aplikacjach frontendowych b\u0142\u0119dne <code>this<\/code> potrafi powodowa\u0107 trudne do wykrycia b\u0142\u0119dy stanu komponent\u00f3w, utrat\u0119 referencji i problemy z logik\u0105 formularzy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"porownanie-z-przykladami-w-c-c-i-python-oraz-dlaczego-skladnia-wyglada-inaczej\">Por\u00f3wnanie z przyk\u0142adami w C, C++ i Python oraz dlaczego sk\u0142adnia wygl\u0105da inaczej<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">C i klasyczne C++ proceduralne nie posiadaj\u0105 bezpo\u015bredniego odpowiednika. Tam funkcje definiuje si\u0119 jawnie.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"c\">C<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Element<\/th><th>Kod<\/th><\/tr><\/thead><tbody><tr><td>Prosta funkcja<\/td><td><code>int suma(int a, int b) { return a + b; }<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Tutaj nie istnieje skr\u00f3cona sk\u0142adnia przypominaj\u0105ca zapis strza\u0142kowy z JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"c-1\">C++<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nowoczesne C++ posiada lambdy, kt\u00f3re s\u0105 ideowo najbli\u017csze.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Element<\/th><th>Kod<\/th><\/tr><\/thead><tbody><tr><td>Lambda<\/td><td><code>auto suma = [](int a, int b) { return a + b; };<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To rozwi\u0105zanie jest podobne koncepcyjnie, ale sk\u0142adnia jest bardziej formalna.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"python\">Python<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Python u\u017cywa <code>lambda<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Element<\/th><th>Kod<\/th><\/tr><\/thead><tbody><tr><td>Lambda<\/td><td><code>suma = lambda a, b: a + b<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Python ogranicza lambdy do pojedynczego wyra\u017cenia. Nie mo\u017cna tam pisa\u0107 pe\u0142nych blok\u00f3w instrukcji.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wniosek praktyczny jest prosty: JavaScript \u0142\u0105czy skr\u00f3t sk\u0142adni z bardzo istotn\u0105 zmian\u0105 semantyczn\u0105 dotycz\u0105c\u0105 <code>this<\/code>, podczas gdy Python skupia si\u0119 g\u0142\u00f3wnie na skr\u00f3cie zapisu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"funkcja-strzalkowa-pomaga-wtedy-gdy-kod-ma-byc-krotki-czytelny-i-przewidywalny\">Funkcja strza\u0142kowa pomaga wtedy gdy kod ma by\u0107 kr\u00f3tki czytelny i przewidywalny<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nie ka\u017cdy fragment programu powinien by\u0107 zapisany w tej formie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dobre zastosowania:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>map<\/code>, <code>filter<\/code>, <code>reduce<\/code><\/li>\n\n\n\n<li>kr\u00f3tkie walidacje<\/li>\n\n\n\n<li>callbacki<\/li>\n\n\n\n<li>Promise<\/li>\n\n\n\n<li>operacje na zdarzeniach<\/li>\n\n\n\n<li>funkcje pomocnicze jednolinijkowe<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">S\u0142abe zastosowania:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>metody obiekt\u00f3w wymagaj\u0105ce w\u0142asnego <code>this<\/code><\/li>\n\n\n\n<li>konstruktory<\/li>\n\n\n\n<li>rozbudowane funkcje biznesowe po 50 linii<\/li>\n\n\n\n<li>miejsca wymagaj\u0105ce <code>arguments<\/code><\/li>\n\n\n\n<li>API oparte na prototypach<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Przyk\u0142ad z\u0142ego u\u017cycia:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Kod<\/th><\/tr><\/thead><tbody><tr><td><code>const Uzytkownik = (imie) =&gt; { this.imie = imie; };<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To nie zadzia\u0142a poprawnie jako konstruktor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Przyk\u0142ad poprawny:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Kod<\/th><\/tr><\/thead><tbody><tr><td><code>function Uzytkownik(imie) { this.imie = imie; }<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Zbyt agresywne zamienianie wszystkiego na zapis strza\u0142kowy zwykle pogarsza projekt. Kr\u00f3tszy kod nie zawsze znaczy lepszy kod.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wzory-myslowe-i-schemat-podejmowania-decyzji-podczas-wyboru-odpowiedniego-typu-funkcji\">Wzory my\u015blowe i schemat podejmowania decyzji podczas wyboru odpowiedniego typu funkcji<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">W praktyce warto stosowa\u0107 prosty schemat:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Czy potrzebne jest w\u0142asne <code>this<\/code>?<br>Je\u015bli tak &#8211; u\u017cyj <code>function<\/code>.<\/li>\n\n\n\n<li>Czy funkcja ma by\u0107 konstruktorem?<br>Je\u015bli tak &#8211; u\u017cyj <code>function<\/code>.<\/li>\n\n\n\n<li>Czy to kr\u00f3tki callback lub transformacja danych?<br>Je\u015bli tak &#8211; zapis strza\u0142kowy zwykle b\u0119dzie lepszy.<\/li>\n\n\n\n<li>Czy funkcja ma wiele instrukcji i z\u0142o\u017con\u0105 logik\u0119?<br>Cz\u0119sto lepiej pozosta\u0107 przy klasycznej formie dla czytelno\u015bci.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Mo\u017cna to zapami\u0119ta\u0107 praktycznie: kr\u00f3tkie operacje &#8211; strza\u0142ka, logika obiektowa &#8211; klasyczna funkcja.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"najczestsze-bledy-i-rzeczy-na-ktore-naprawde-warto-uwazac-podczas-codziennej-pracy\">Najcz\u0119stsze b\u0142\u0119dy i rzeczy na kt\u00f3re naprawd\u0119 warto uwa\u017ca\u0107 podczas codziennej pracy<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Najcz\u0119stsze problemy:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"brak-return\">Brak return<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Program dzia\u0142a bez b\u0142\u0119du sk\u0142adni, ale zwraca <code>undefined<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"niepoprawny-zwrot-obiektu\">Niepoprawny zwrot obiektu<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Brak nawias\u00f3w <code>()<\/code> przy obiekcie daje b\u0142\u0119dny wynik.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"uzycie-jako-konstruktora\">U\u017cycie jako konstruktora<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Operator <code>new<\/code> nie dzia\u0142a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"bledne-this-w-metodzie-obiektu\">B\u0142\u0119dne this w metodzie obiektu<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Zbyt szybka zamiana metody na zapis strza\u0142kowy psuje logik\u0119 obiektu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"nadmierne-skracanie-kodu\">Nadmierne skracanie kodu<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Kod jednolinijkowy bywa mniej czytelny ni\u017c klasyczna funkcja.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">W pracy zawodowej najwi\u0119cej czasu nie traci si\u0119 na brak wiedzy o sk\u0142adni, tylko na niepozorne szczeg\u00f3\u0142y semantyczne. Ten temat dok\u0142adnie do tego nale\u017cy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">FAQ<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"czy-zapis-strzalkowy-dziala-szybciej-niz-klasyczna-funkcja\">Czy zapis strza\u0142kowy dzia\u0142a szybciej ni\u017c klasyczna funkcja?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">R\u00f3\u017cnice wydajno\u015bci s\u0105 zwykle pomijalne. Wyb\u00f3r powinien wynika\u0107 z semantyki i czytelno\u015bci, nie z mikrooptymalizacji.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"czy-mozna-uzywac-operatora-new\">Czy mo\u017cna u\u017cywa\u0107 operatora new?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nie. Taki zapis nie tworzy konstruktora i nie posiada w\u0142asnego <code>this<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"czy-zawsze-warto-zamieniac-function-na-krotszy-zapis\">Czy zawsze warto zamienia\u0107 function na kr\u00f3tszy zapis?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nie. Przy metodach obiekt\u00f3w i konstruktorach cz\u0119sto jest to b\u0142\u0105d projektowy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"dlaczego-this-zachowuje-sie-inaczej\">Dlaczego this zachowuje si\u0119 inaczej?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Poniewa\u017c kontekst nie jest tworzony lokalnie. Jest dziedziczony z miejsca definicji funkcji.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"czy-python-lambda-dziala-identycznie\">Czy Python lambda dzia\u0142a identycznie?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nie. Idea skr\u00f3conego zapisu jest podobna, ale Python nie zmienia mechaniki odpowiednika <code>this<\/code> i mocno ogranicza sk\u0142adni\u0119.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"czy-w-c-istnieje-taki-sam-mechanizm\">Czy w C istnieje taki sam mechanizm?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nie wprost. Najbli\u017cej jest nowoczesne C++ i jego lambdy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"krotkie-zakonczenie\">Kr\u00f3tkie zako\u0144czenie<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To rozwi\u0105zanie jest ma\u0142e sk\u0142adniowo, ale du\u017ce semantycznie. Najwi\u0119cej problem\u00f3w pojawia si\u0119 nie przy samym zapisie, tylko przy niezrozumieniu <code>this<\/code>, automatycznego <code>return<\/code> i ogranicze\u0144 konstrukcyjnych. Dobrze u\u017cywane upraszcza kod i przyspiesza prac\u0119. U\u017cywane bez zrozumienia staje si\u0119 \u017ar\u00f3d\u0142em bardzo drogich b\u0142\u0119d\u00f3w.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u0179r\u00f3d\u0142o Foto: Freepik<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Programowanie w JavaScript bardzo szybko prowadzi do sytuacji, w kt\u00f3rej ten sam schemat zapisuje si\u0119 dziesi\u0105tki razy: przekazanie funkcji do metody tablicy, obs\u0142uga zdarzenia, kr\u00f3tka logika walidacji albo prosty callback. Klasyczny zapis z u\u017cyciem s\u0142owa function dzia\u0142a poprawnie, ale przy cz\u0119stym u\u017cyciu staje si\u0119 rozwlek\u0142y i utrudnia czytanie kodu. Szczeg\u00f3lnie w wi\u0119kszych projektach liczy si\u0119 nie tylko poprawno\u015b\u0107, ale te\u017c szybko\u015b\u0107 zrozumienia intencji autora. W praktyce JavaScript jednym z podstawowych mechanizm\u00f3w upraszczaj\u0105cych taki zapis jest Funkcja strza\u0142kowa. Funkcja strza\u0142kowa jako skr\u00f3cony zapis funkcji i r\u00f3\u017cnica wzgl\u0119dem klasycznego s\u0142owa function Mechanizm ten zosta\u0142 wprowadzony w standardzie ES6 (ECMAScript 2015). Jego g\u0142\u00f3wnym celem nie by\u0142o wy\u0142\u0105cznie skr\u00f3cenie sk\u0142adni, ale r\u00f3wnie\u017c zmiana sposobu wi\u0105zania kontekstu this. Klasyczna funkcja tworzona przez function posiada w\u0142asne this, w\u0142asne arguments, mo\u017ce by\u0107 konstruktorem oraz mo\u017ce by\u0107 u\u017cywana z operatorem new. Wersja strza\u0142kowa dzia\u0142a inaczej: Najprostsza r\u00f3\u017cnica dotyczy samej sk\u0142adni. Rodzaj zapisu Kod Co si\u0119 dzieje Klasyczna funkcja JS function suma(a, b) { return a + b; } pe\u0142na sk\u0142adnia, jawny return Zapis strza\u0142kowy JS const suma = (a, b) =&gt; { return a + b; } skr\u00f3cona forma, nadal blok kodu Jeszcze kr\u00f3tszy zapis const suma = (a, b) =&gt; a + b; pojedyncze wyra\u017cenie zwracane automatycznie Je\u017celi funkcja ma tylko jeden parametr, nawiasy mo\u017cna pomin\u0105\u0107. Przyk\u0142ad Kod Jeden argument const kwadrat = x =&gt; x * x; Kilka argument\u00f3w const pole = (a, b) =&gt; a * b; Brak argument\u00f3w const start = () =&gt; &#8222;uruchomiono&#8221;; To wygl\u0105da drobnie, ale w praktyce ma du\u017ce znaczenie. Kod typu: tablica.map(function(x) { return x * 2;}); po zmianie staje si\u0119: tablica.map(x =&gt; x * 2); R\u00f3\u017cnica przy jednej linii wydaje si\u0119 ma\u0142a. Przy kilkuset callbackach miesi\u0119cznie oszcz\u0119dza realny czas i zmniejsza liczb\u0119 b\u0142\u0119d\u00f3w przy refaktoryzacji. Zasada dzia\u0142ania parametru return oraz spos\u00f3b zapisu obiekt\u00f3w i bardziej z\u0142o\u017conej logiki Najcz\u0119stszy b\u0142\u0105d pocz\u0105tkuj\u0105cych dotyczy return. Je\u017celi po operatorze =&gt; wyst\u0119puje pojedyncze wyra\u017cenie bez nawias\u00f3w klamrowych, JavaScript wykonuje zwrot automatycznie. Przyk\u0142ad: Kod Wynik const podwoj = x =&gt; x * 2; warto\u015b\u0107 jest zwracana automatycznie const podwoj = x =&gt; { x * 2; } zwracane jest undefined Drugi przypadek nie dzia\u0142a tak, jak wielu zak\u0142ada. Po u\u017cyciu {} trzeba napisa\u0107 return r\u0119cznie. Poprawna wersja: Kod const podwoj = x =&gt; { return x * 2; } Problem pojawia si\u0119 tak\u017ce przy zwracaniu obiekt\u00f3w. Zapis: Kod const osoba = () =&gt; { imie: &#8222;Jan&#8221; }; nie zwraca obiektu, poniewa\u017c interpreter traktuje nawias klamrowy jako blok instrukcji. Poprawnie: Kod const osoba = () =&gt; ({ imie: &#8222;Jan&#8221; }); Dodatkowe nawiasy okr\u0105g\u0142e wymuszaj\u0105 interpretacj\u0119 jako obiekt. W praktyce jest to bardzo cz\u0119sta pu\u0142apka podczas pracy z React, mapowaniem danych oraz generowaniem struktur JSON. Funkcja strza\u0142kowa i mechanizm this kt\u00f3ry najcz\u0119\u015bciej powoduje b\u0142\u0119dy w kodzie produkcyjnym To najwa\u017cniejsza r\u00f3\u017cnica i jednocze\u015bnie miejsce, gdzie naj\u0142atwiej straci\u0107 kilka godzin na debugowanie. W klasycznej funkcji this zale\u017cy od sposobu wywo\u0142ania. W wersji strza\u0142kowej this jest dziedziczone z otaczaj\u0105cego zakresu (lexical scope). To nie jest detal sk\u0142adniowy. To zmienia logik\u0119 dzia\u0142ania programu. Przyk\u0142ad klasycznej funkcji: Kod Efekt const obiekt = { imie: &#8222;Anna&#8221;, pokaz: function() { console.log(this.imie); } }; wypisze Anna Teraz przyk\u0142ad z funkcj\u0105 wewn\u0119trzn\u0105: Kod const obiekt = { imie: &#8222;Anna&#8221;, pokaz: function() { setTimeout(function() { console.log(this.imie); }, 1000); } }; Tutaj cz\u0119sto pojawia si\u0119 undefined, poniewa\u017c this wewn\u0119trznej funkcji nie wskazuje ju\u017c na obiekt. Rozwi\u0105zanie przy u\u017cyciu zapisu strza\u0142kowego: Kod const obiekt = { imie: &#8222;Anna&#8221;, pokaz: function() { setTimeout(() =&gt; { console.log(this.imie); }, 1000); } }; Tutaj this zostaje odziedziczone z funkcji pokaz, wi\u0119c wynik b\u0119dzie poprawny. To w\u0142a\u015bnie dlatego taki zapis jest tak cz\u0119sto u\u017cywany w: W du\u017cych aplikacjach frontendowych b\u0142\u0119dne this potrafi powodowa\u0107 trudne do wykrycia b\u0142\u0119dy stanu komponent\u00f3w, utrat\u0119 referencji i problemy z logik\u0105 formularzy. Por\u00f3wnanie z przyk\u0142adami w C, C++ i Python oraz dlaczego sk\u0142adnia wygl\u0105da inaczej C i klasyczne C++ proceduralne nie posiadaj\u0105 bezpo\u015bredniego odpowiednika. Tam funkcje definiuje si\u0119 jawnie. C Element Kod Prosta funkcja int suma(int a, int b) { return a + b; } Tutaj nie istnieje skr\u00f3cona sk\u0142adnia przypominaj\u0105ca zapis strza\u0142kowy z JavaScript. C++ Nowoczesne C++ posiada lambdy, kt\u00f3re s\u0105 ideowo najbli\u017csze. Element Kod Lambda auto suma = [](int a, int b) { return a + b; }; To rozwi\u0105zanie jest podobne koncepcyjnie, ale sk\u0142adnia jest bardziej formalna. Python Python u\u017cywa lambda. Element Kod Lambda suma = lambda a, b: a + b Python ogranicza lambdy do pojedynczego wyra\u017cenia. Nie mo\u017cna tam pisa\u0107 pe\u0142nych blok\u00f3w instrukcji. Wniosek praktyczny jest prosty: JavaScript \u0142\u0105czy skr\u00f3t sk\u0142adni z bardzo istotn\u0105 zmian\u0105 semantyczn\u0105 dotycz\u0105c\u0105 this, podczas gdy Python skupia si\u0119 g\u0142\u00f3wnie na skr\u00f3cie zapisu. Funkcja strza\u0142kowa pomaga wtedy gdy kod ma by\u0107 kr\u00f3tki czytelny i przewidywalny Nie ka\u017cdy fragment programu powinien by\u0107 zapisany w tej formie. Dobre zastosowania: S\u0142abe zastosowania: Przyk\u0142ad z\u0142ego u\u017cycia: Kod const Uzytkownik = (imie) =&gt; { this.imie = imie; }; To nie zadzia\u0142a poprawnie jako konstruktor. Przyk\u0142ad poprawny: Kod function Uzytkownik(imie) { this.imie = imie; } Zbyt agresywne zamienianie wszystkiego na zapis strza\u0142kowy zwykle pogarsza projekt. Kr\u00f3tszy kod nie zawsze znaczy lepszy kod. Wzory my\u015blowe i schemat podejmowania decyzji podczas wyboru odpowiedniego typu funkcji W praktyce warto stosowa\u0107 prosty schemat: Mo\u017cna to zapami\u0119ta\u0107 praktycznie: kr\u00f3tkie operacje &#8211; strza\u0142ka, logika obiektowa &#8211; klasyczna funkcja. Najcz\u0119stsze b\u0142\u0119dy i rzeczy na kt\u00f3re naprawd\u0119 warto uwa\u017ca\u0107 podczas codziennej pracy Najcz\u0119stsze problemy: Brak return Program dzia\u0142a bez b\u0142\u0119du sk\u0142adni, ale zwraca undefined. Niepoprawny zwrot obiektu Brak nawias\u00f3w () przy obiekcie daje b\u0142\u0119dny wynik. U\u017cycie jako konstruktora Operator new nie dzia\u0142a. B\u0142\u0119dne this w metodzie obiektu Zbyt szybka zamiana metody na zapis strza\u0142kowy psuje logik\u0119 obiektu. Nadmierne skracanie kodu Kod jednolinijkowy bywa mniej czytelny ni\u017c klasyczna funkcja. W pracy zawodowej najwi\u0119cej czasu nie traci si\u0119 na brak wiedzy o sk\u0142adni, tylko na niepozorne szczeg\u00f3\u0142y semantyczne. Ten temat dok\u0142adnie do tego nale\u017cy. FAQ Czy zapis strza\u0142kowy dzia\u0142a szybciej ni\u017c klasyczna funkcja? R\u00f3\u017cnice wydajno\u015bci s\u0105 zwykle pomijalne. Wyb\u00f3r powinien wynika\u0107 z semantyki i czytelno\u015bci, nie z mikrooptymalizacji. Czy mo\u017cna u\u017cywa\u0107 operatora new? Nie. Taki zapis nie tworzy konstruktora i nie posiada w\u0142asnego this. Czy zawsze warto zamienia\u0107 function na kr\u00f3tszy zapis? Nie. Przy metodach obiekt\u00f3w i konstruktorach cz\u0119sto jest to b\u0142\u0105d projektowy. Dlaczego this zachowuje si\u0119 inaczej? Poniewa\u017c kontekst nie jest tworzony lokalnie. Jest dziedziczony z miejsca definicji funkcji. Czy Python lambda dzia\u0142a identycznie? Nie. Idea skr\u00f3conego zapisu jest podobna, ale Python nie zmienia mechaniki odpowiednika this i mocno ogranicza sk\u0142adni\u0119. Czy w C istnieje taki sam mechanizm? Nie wprost. Najbli\u017cej jest nowoczesne C++ i jego lambdy. Kr\u00f3tkie zako\u0144czenie To rozwi\u0105zanie jest ma\u0142e sk\u0142adniowo, ale du\u017ce semantycznie. Najwi\u0119cej problem\u00f3w pojawia si\u0119 nie przy samym zapisie, tylko przy niezrozumieniu this, automatycznego return i ogranicze\u0144 konstrukcyjnych. Dobrze u\u017cywane upraszcza kod i przyspiesza prac\u0119. U\u017cywane bez zrozumienia staje si\u0119 \u017ar\u00f3d\u0142em bardzo drogich b\u0142\u0119d\u00f3w. \u0179r\u00f3d\u0142o Foto: Freepik<\/p>\n","protected":false},"author":1,"featured_media":1325,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-1324","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kodowanie"],"_links":{"self":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/comments?post=1324"}],"version-history":[{"count":1,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1324\/revisions"}],"predecessor-version":[{"id":1326,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1324\/revisions\/1326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/media\/1325"}],"wp:attachment":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/media?parent=1324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/categories?post=1324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/tags?post=1324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}