EcmaScript 6: Dekompozycja parametrów funkcji

0:00Temat destructuring'u czy inaczej mówiąc dekompozycji, zakończymy sobie

0:04jeszcze jednym przykładem, w którym pokażę ci, że można tego używać również na parametrach

0:08funkcji. To jest coś co dla deweloperów, którzy nie korzystali jeszcze ES6, też

0:13na początku wygląda dziwnie, ale jest niesłychanie przydatne, dlatego na początek pokażę

0:17ci, że mam taki kod i nazwałem metodę setSliderSpeed. Tutaj oczywiście

0:21jest to taka metoda, która nic nie będzie robić, ale zakładamy, że może tworzymy jakieś rozwiązanie

0:25jakiś slider i chcemy móc mu przekazać jakieś opcje. No

0:29i generalnie będziemy mieli pod zmienną config za moment jakieś opcje i

0:33zobacz, że one wpadną tutaj pod options i powiedzmy, że mam jakiś slider

0:38i chciałbym dodać do jego właściwości speed oraz easing na takie same jak były tutaj

0:42w options przekazanym i następnie go wyświetlić Dlatego utworze sobie

0:46taki oto config za pomocą const, aby nie można było go później już nadpisać, pamiętaj

0:51jednak, że te wartości, które są wewnątrz można, const tego nie zmienia,

0:55czyli można je normalnie zmienić po config kropka na przykład autoplay i powiedzmy,

1:00że teraz chciałbym wywołać sobie metodę setSliderSpeed i przekazać config.

1:04No, czyli generalnie tutaj myślę, że wiesz jak to działa. On wpadnie pod options. No

1:08i z niego wyciągniemy sobie speed orazeasing i przypiszemy do tego slider'a, który będziemy

1:12mogli podejrzeć. Po odświeżeniu widzimy taki oto obiekt, będzie to

1:17ten nasz slider, który ma speed i easing. Co jednak, jeżeli nie chcemy tutaj odwoływać

1:21się do tych poszczególnych kluczy, można powiedzieć, czy właściwości tego obiektu,

1:25bo wiemy, że nasza metoda setSliderSpeed zawsze będzie przyjmowała tylko

1:29dwa parametry. Chciałbym, żeby to było speed oraz easing. I

1:34teraz, żeby to zadziałało to z kolei tutaj przy wywoływaniu musiałbym podać speed

1:38oraz config. No i wydawałoby

1:42się, że nie jest to żaden problem, bo faktycznie nie jest i powinno nam to zadziałać. Tutaj

1:46oczywiście musielibyśmy się tego pozbyć No i nie ma błędu, działa

1:50to dokładnie tak samo, ale ciekawa rzecz jest taka, że możemy sobie tutaj

1:54zrobić destructuring na parametrach, czyli gdybym bym napisał coś takiego, nie

2:00to nic czego nic czego byś jeszcze nie znał, czyli po prostu destructuring obiektu,

2:05tak jak widziałeś kilka lekcji temu, to to co zostanie przekazane tutaj

2:09przy wywoływaniu tej funkcji, czyli config, będzie potraktowane jako ten obiekt,

2:13który normalnie i pokaże ci to wyżej albo może niżej. Gdybyśmy

2:17mieli let i tutaj config, no to dokładnie pod speed i

2:21easing, mielibyśmy wyciągnięte z tego config'a speed i easing, i dokładnie

2:25to samo stanie się tutaj, tylko że tutaj nie robimy już równa się, bo jeżeli zrobię równa

2:29się, to po prostu przypisuje wartość domyślną dla całego tego parametru, więc

2:33zrobimy to za moment, ale tak by to wyglądało.  Czyli w tym momencie

2:37tutaj przekazuje config i pod parametrami speed oraz easing znajdzie

2:42się tylko to, co z tego config'a zostanie z nich wyciągnięte. No i teraz

2:46powinno to zadziałać tak samo. Zobaczmy, natomiast gdybyś chciał zmienić nazwę

2:50z tych któregoś z tych parametrów, na przykład sliderSpeed,

2:55to mógłbyś tutaj napisać speed i slider, czyli

3:00dokładnie to, co wszystko widziałeś już wcześniej w przypadku

3:04destructuring'u obiektu Widzisz, że działa to dokładnie tak samo. Ja jednak

3:08zostawię to przy takiej wartości speed. Co jednak by było, gdyby ktoś

3:12jest wywołujący tę funkcję nie podał tutaj nic. Okaże się, że mamy

3:16błąd. Ten sam błąd, który pojawiał się w przypadku destructuring'u go obiektu. Dlatego,

3:21jeżeli robisz destructuring parametrów funkcji. Warto tutaj skorzystać z

3:25domyślnego parametru jakim jest pusty obiekt i wtedy te zmienne

3:30przyjmą wartość undefined, ale przynajmniej nie będzie błędu, czyli pamiętaj, że tutaj

3:34nie robimy destructuring'u z tego obiektu, tylko z tego, który zostanie

3:38przekazany tutaj, ale gdyby nie został przekazany, to ten w tym miejscu jest

3:42domyślnym parametrem dla właśnie całego tego obiektu config,

3:46który miał być tutaj przekazany, bo normalnie gdybyśmy to wyciągnęli i robili

3:50takidestructuring, no to robimy destructuring z tego obiektu. W przypadku funkcji

3:54no różnica jest właśnie taka, że to będzie domyślnym parametrem dla config'a,

3:59który powinien tutaj być przekazany. Dowiedziałeś się zatem

4:03sporo na temat destructuring'u i mam nadzieję, że jest to coś z czego będziesz chętnie korzystał.

4:07Zarówno na tablicach jak i na obiektach, ale jak widzisz również na

4:11parametrach funkcji.