Funkcje: Tworzenie funkcji w JavaScripcie

W mojej karierze pracy z JavaScriptem nic, nie było dla mnie tak mgliste i mylące jak mnogość sposobów na stworzenie nowej funkcji. Najgorsze było to, że żadna z książek, które czytałem, nie wyjaśniała definitywnie tego tematu. Internet, też nie był zbyt pomocny, zresztą, nie wiedziałem nawet jak pytać o ten problem googla.

Teraz już wiem na co zwracać uwagę i rozumiem, że wiedza ta jest bardzo ważna. W tym poście opiszę sposoby na tworzenie funkcji w JavaScripcie. Czym różnią się między sobą i które są dobre, a które niekoniecznie. Jak zawsze wszystko zilustrujemy przykładami.

Tworzenie funkcji w JavaScripcie

Konstruktor new Function

Najmniej chyba popularna metoda tworzenia nowych funkcji. Jednak można się spotkać z nią w niektórych publikacjach. Ponieważ każda funkcja to instancja klasy Function, możemy stworzyć ją tak, jakbyśmy tworzyli każdy inny obiekt.

var dodaj = new Function('x','y','return y + x');
console.log(dodaj(2,3)); // zwraca 5

1 2	var dodaj = new Function('x','y','return y + x'); console.log(dodaj(2,3)); // zwraca 5

Do konstruktora przekazujemy wszystkie argumenty jako ciągi znaków. Ostatni argument to treść jaką ma mieć tworzona funkcja. W naszym wypadku zwraca ona sumę dwóch poprzednich argumentów.

Osobiście odradzam używania tego sposobu do tworzenia nowych funkcji. Szczerze mówiąc, nie wiem czy ktokolwiek z niego korzysta. Problemem jest to, że musielibyśmy trzymać dużo kodu w ciągach znaków. Nie jest to wygodna sytuacja. Edytory tekstu, nie będą nam kolorować składni a wszelkie narzędzia do debugowania kodu, będą miały znacznie utrudnioną pracę.

Ponieważ jest mało użyteczna, nie będziemy szczegółowo przyglądać się tej metodzie i przejdziemy szybko do kolejnej.

Deklaracja funkcji

Deklaracja to najpopularniejsza metoda tworzenia funkcji. Jest bardzo lubiana przez programistów, ponieważ pozwala na dużą swobodę podczas pisania kodu. Czemu? Zaraz wyjaśnię. Najpierw przyjrzyjmy się samej metodzie:

function dodaj(x,y) {
	return x+y;
}
console.log(dodaj(4,5)); // zwraca 9

function dodaj(x,y) {

return x+y;

}

console.log(dodaj(4,5)); // zwraca 9

Osobiście uważam, że składnia wygląda dużo czytelniej niż w przypadku zastosowania konstruktora Function.

Warto zaznaczyć, że jak każdy obiekt, funkcje również posiadają swoje własne właściwości. Jedną z nich jest name. zwraca ona identyfikator danej funkcji czyli to co w deklaracji znajduję się po słowie function. Spójrzmy

function dodaj(x,y) {
	return x+y;
}

console.log(dodaj.name);  // zwraca 'dodaj'

function dodaj(x,y) {

return x+y;

}

console.log(dodaj.name); // zwraca 'dodaj'

Identyfikator może zostać wykorzystany do wywołania funkcji. Jest on dostępny w zasięgu (scope), w którym tworzymy funkcję, oraz w jej wnętrzu. Przykład:

function dodaj(x,y) {
	var wynik = x+y;
	console.log("wynik funkcji '"+dodaj.name+"' to: "+wynik);
	console.log(typeof(dodaj));
}
dodaj(3,4)
// zwraca: wynik funkcji 'dodaj' to: 9
// zwraca: function

function dodaj(x,y) {

var wynik = x+y;

console.log("wynik funkcji '"+dodaj.name+"' to: "+wynik);

console.log(typeof(dodaj));

}

dodaj(3,4)

// zwraca: wynik funkcji 'dodaj' to: 9

// zwraca: function

Ciekawym aspektem związanym z deklaracją funkcji jest tak zwany hoisting, czyli z angielskiego podnoszenie lub dźwignięcie. Na czym to polega. Otóż deklaracje funkcji, tak samo jak deklaracje zmiennych, podczas parsowania kodu przez przeglądarkę, są przenoszone na samą górę aktualnego zasięgu. Tam są ustawiane w takiej kolejności, w jakiej zostały zapisane. Oznacza to w praktyce, że możemy wywoływać w kodzie funkcje, zanim je zadeklarujemy. A działa to tak:

console.log(wykonajObliczenie(5,5));

function wykonajObliczenie(x,y) {
	var wynik = x+y;
	return wynik;
}

//kod zwróci 10

console.log(wykonajObliczenie(5,5));

function wykonajObliczenie(x,y) {

var wynik = x+y;

return wynik;

}

//kod zwróci 10

Chociaż na pierwszy rzut oka wydaje się to dość wygodne, to może to prowadzić do dość kłopotliwych sytuacji. Rozpatrzmy taki przykład:

function wykonajObliczenie(x,y) {
	var wynik = x-y;
	return wynik;
}

console.log(wykonajObliczenie(5,5));

function wykonajObliczenie(x,y) {
	var wynik = x+y;
	return wynik;
}

//Co zwróci kod?

function wykonajObliczenie(x,y) {

var wynik = x-y;

return wynik;

}

console.log(wykonajObliczenie(5,5));

function wykonajObliczenie(x,y) {

var wynik = x+y;

return wynik;

}

//Co zwróci kod?

Pierwsza myśl, może sugerować, że kod zwróci nam 0. W końcu wywołanie funkcji następuję zaraz po zadeklarowaniu funkcji wykonajObliczenia, w której wykonuje się odejmowanie. Ale nie jest tak. Kod zwróci nam 10. Dlatego, że wszystkie deklaracje są hoistowane. Dla przeglądarki kod wygląda tak:

function wykonajObliczenie(x,y) {
	var wynik = x-y;
	return wynik;
}

function wykonajObliczenie(x,y) {
	var wynik = x+y;
	return wynik;
}

console.log(wykonajObliczenie(5,5));

//Co zwróci kod?

function wykonajObliczenie(x,y) {

var wynik = x-y;

return wynik;

}

function wykonajObliczenie(x,y) {

var wynik = x+y;

return wynik;

}

console.log(wykonajObliczenie(5,5));

//Co zwróci kod?

Pierwsza deklaracja jest nadpisana przez drugą, i dopiero później następuje wykonanie. To sprawia, że możemy mieć problem z np. takim przeładowywaniem funkcji. Czyli ze zmienianiem treści funkcji, która wcześniej robi coś innego. Mogę jeszcze bardziej udziwnić zachowanie tego kodu:

console.log(zwrotWyniku());
function zwrotWyniku(){
	function wykonajObliczenie(x,y) {
		var wynik = x-y;
		return wynik;
	}

	return(wykonajObliczenie(3,3));

	function wykonajObliczenie(x,y) {
		var wynik = x+y;
		return wynik;
	}
}
//kod zwróci... 6!

console.log(zwrotWyniku());

function zwrotWyniku(){

function wykonajObliczenie(x,y) {

var wynik = x-y;

return wynik;

}

return(wykonajObliczenie(3,3));

function wykonajObliczenie(x,y) {

var wynik = x+y;

return wynik;

}

//kod zwróci... 6!

Przeanalizujmy. zwrotWyniku, jest hoistowany, więc możemy go wywołać przed deklaracją. Robimy to w console logu. Wewnątrz tej funkcji mamy dwie kolejne, obie nazwane tak samo. Jednak między nimi znajduje się wyrażenie return. Na pewno nie raz słyszeliście, że kod po return jest nieosiągalny. I to może was zgubić. Hoistowanie odbywa się przed jakimkolwiek odpalaniem kodu. Dla interpretora, return, znajduje się na końcu bloku. Reszta, to historia którą już znamy. Wykonuje się funkcja z dodawaniem.

Nie są to bardzo trudne rzeczy, ale należy o nich pamiętać. Przejdźmy do kolejnej metody tworzenia funkcji

Wyrażenie funkcji

Ta metoda wykorzystuje fakt, że funkcje możemy przypisywać do zmiennych. Nazwa wywodzi się z faktu, że tworzenie funkcji jest częścią większego wyrażenia. Wygląda to w ten sposób:

var wykonajObliczenie = function(x,y){
	return x+y;
}

console.log(wykonajObliczenie(5,6));
//zwraca 11;

var wykonajObliczenie = function(x,y){

return x+y;

}

console.log(wykonajObliczenie(5,6));

//zwraca 11;

Deklarujemy zmienną i operatorem ‚=’ przypisujemy do niej funkcję. Właściwość name tej funkcji zwraca nam interesujące rzeczy.

console.log(wykonajObliczenie.name);
//zwraca pusty ciąg znaków

1 2	console.log(wykonajObliczenie.name); //zwraca pusty ciąg znaków

Do tego zmienna do której przypisujemy funkcję, w ogóle nie jest widoczna we wnętrzu funkcji

var wykonajObliczenie = function(){
	typeof(wykonajObliczenie);
}

console.log(wykonajObliczenie());
//zwraca undefined

var wykonajObliczenie = function(){

typeof(wykonajObliczenie);

}

console.log(wykonajObliczenie());

//zwraca undefined

Przejdźmy teraz to kwesti hositingu. Jak zachowują się wyrażenia funkcji, kiedy próbujemy wywołać je przed ich utworzeniem. Najlepiej zilustruje to kolejny przykład

var wykonajObliczenie = function(x,y) {
	return x-y;
}
console.log(wykonajObliczenie(6,3));
var wykonajObliczenie = function(x,y) {
	return x+y;
}

//w konsoli wyswietla sie 3

var wykonajObliczenie = function(x,y) {

return x-y;

}

console.log(wykonajObliczenie(6,3));

var wykonajObliczenie = function(x,y) {

return x+y;

}

//w konsoli wyswietla sie 3

Czyli wyrażenia funkcji się nie hoistują! Nie do końca. Hoisting występuje, ale wygląda trochę inaczej niż w przypadku deklaracji. oto jak ten kod widzi przeglądarka:

var wykonajObliczenie;
var wykonajObliczenie;

var wykonajObliczenie = function(x,y) {
	return x-y;
}
console.log(wykonajObliczenie(6,3));
var wykonajObliczenie = function(x,y) {
	return x+y;
}

//w konsoli wyswietla sie 3

var wykonajObliczenie;

var wykonajObliczenie = function(x,y) {

return x-y;

}

console.log(wykonajObliczenie(6,3));

var wykonajObliczenie = function(x,y) {

return x+y;

}

//w konsoli wyswietla sie 3

Hoistowane są same deklaracje zmiennych, nie przypisanie. Dlatego kod poniżej nie zadziała:

console.log(wykonajObliczenie(6,3));
var wykonajObliczenie = function(x,y) {
	return x-y;
}
var wykonajObliczenie = function(x,y) {
	return x+y;
}

console.log(wykonajObliczenie(6,3));

var wykonajObliczenie = function(x,y) {

return x-y;

}

var wykonajObliczenie = function(x,y) {

return x+y;

}

Konsola wypluje nam błąd, ponieważ wykonajObliczenie jest undefined w momencie wywołania. Dla przeglądarki wygląda to tak:

var wykonajObliczenie;
var wykonajObliczenie;

console.log(wykonajObliczenie(6,3));
var wykonajObliczenie = function(x,y) {
	return x-y;
}
var wykonajObliczenie = function(x,y) {
	return x+y;
}

var wykonajObliczenie;

console.log(wykonajObliczenie(6,3));

var wykonajObliczenie = function(x,y) {

return x-y;

}

var wykonajObliczenie = function(x,y) {

return x+y;

}

Bonus – nazwane wyrażenie funkcji

Na koniec mała ciekawostka. Otóż możemy jeszcze spotkać się z czymś takim:

var wykonajObliczenie = function dodawanie(x,y) {
	return x+y;
}

var wykonajObliczenie = function dodawanie(x,y) {

return x+y;

}

Wyrażenie funkcji, które ma podaną nazwę po słowie function. Spróbujmy wywołać tę funkcję.

console.log(wykonajObliczenie(3,4)); // zwraca 7
console.log(dodawanie(4,6)); // zwraca błąd - undefined

1 2	console.log(wykonajObliczenie(3,4)); // zwraca 7 console.log(dodawanie(4,6)); // zwraca błąd - undefined

Skoro nie możemy użyć tej nazwy, to po co nam ona? Otóż możemy, ale tylko wewnątrz funkcji. A robimy to np tak:

var wykonajObliczenie = function dodawanie(x,y) {
	return x+y;
}

console.log(wykonajObliczenie.name)

var wykonajObliczenie = function dodawanie(x,y) {

return x+y;

}

console.log(wykonajObliczenie.name)

Jest to ciekawe zachowanie, o którym warto pamiętać. Czasem możemy potrzebować odwołać się do funkcji w jej wnętrzu.

O zasięgu funkcji, napiszę jeszcze parę słów w innym poście

Podsumowanie

Na koniec małe podsumowanie. Która metoda jest najlepsza. Nie mam tutaj dobrej odpowiedzi. Na pewno powinno się unikać tworzenia funkcji używając operatora new. Co do dwóch pozostałych… to kwestia preferencji.

Przez hoisting, deklaracje funkcji są łatwe w użyciu, ale pozwalają też na niedbalstwo. Wiem dobrze, bo sam ich używam 🙂

Wyrażenia funkcji z kolei, są bardziej podatne na błędy, ale przez to zmuszają programistę do pisania przemyślanego kodu.

Na pewno jako programista javascriptu, trzeba znać każdą z tych metod i zdawać sobie sprawę z ich słabych i mocnych stron. Mam nadzieję, że tym krótkim wpisem, pomogłem wam zrozumieć ten aspekt języka JavaScript.

Podobne

2 thoughts on “Funkcje: Tworzenie funkcji w JavaScripcie”

jcubic napisał(a):

Czerwiec 17, 2019 o 3:44 pm

Istnieją jeszcze funkcje strzałkowe, nowa składnia dodana w ES6.

const foo = x => x * x;

Odpowiedz
Marek napisał(a):

Styczeń 5, 2020 o 8:36 am

No właśnie nie ma funkcji strzałkowych co jest bardzo wazne.

Odpowiedz

P	W	Ś	C	P	S	N
« Lut
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Konstruktor new Function

Deklaracja funkcji

Wyrażenie funkcji

Bonus – nazwane wyrażenie funkcji

Podsumowanie

Podziel się:

Podobne

2 thoughts on “Funkcje: Tworzenie funkcji w JavaScripcie”

Dodaj komentarz Anuluj pisanie odpowiedzi