6 funkcji z biblioteki Lodash, które musisz znać

Biblioteka Lodash, jedna z bardziej popularnych bibliotek JavaScriptowych, zawierająca w sobie masę przydatnych funkcji. W tym artykule przybliżę wam 6 metod, które subiektywnie uważam za najbadziej przydatne. No to lecimy:

_.cloneDeep()

Mój faworyt, z którego korzystam najcześciej. Funkcja służącą do „głębokiego” klonowania obiektów z usunięciem powiązania między klonowanymi elementami. Tzn. jeśli użyjemy funkcji cloneDeep() na obiekcie A a następnie w sklonowanym obiekcie B zmienimy wartość pola np. B.name = "Waldemar" wtedy wartość pola zmieni się tylko w obiekcie B, w obiekcie A pozostanie niezmodyfikowana. Bez użycia tej metody, oba obiekty będą wskazywać na to samo miejsce w pamięci, dzięki czemu przy zmianie pola w jednym obiekcie, automatycznie zmieni się też wartość drugiego.

const obiektA = [{ 'a': 1 }, { 'b': 2 }];
const obiektB = _.cloneDeep(obiektA);
console.log(obiektA[0] === obiektB[0]);
// => false

_.find()

Funkcja find() służy do wyszukiwania pierwszego elementu, który spełnia podany warunek. Tylko tyle i aż tyle. Możecie zapytać, no dobra, ale po co stosować dodatkową bibliotekę skoro metoda find() występuję też w czystym JavaScripcie. Plusem tej od Lodasha jest możliwość wyszukiwania elementów w obiekcie.

Dostępne argumenty:

  1. Object lub tablica, w której będziemy wyszukiwać.
  2. Funkcja wywoływana podczas iteracji, tutaj umieszczamy nasz warunek.
  3. Indeks, od którego chcemy zacząć poszukiwania (argument opcjonalny).

Przykład: 

import _ from 'lodash';

const users = [
  { user: 'barney', age: 36, active: false },
  { user: 'fred', age: 40, active: false },
  { user: 'jim', age: 22, active: true },
];

const myUser = _.find(users, obj => obj.active === true);

console.log(myUser.user);
// myUser.user => "jim"

_.filter()

Funkcja filter() jest bardzo podobna w działaniu do wyżej omawianej find(), różnica polega na tym, że funkcja filter() zwraca tablicę z elementami, które spełniają podany warunek.

Dostępne argumenty:

  1. Object lub tablica, w której będziemy wyszukiwać.
  2. Funkcja wywoływana podczas iteracji, tutaj umieszczamy nas warunek.

Przykład: 

import _ from 'lodash';

const users = [
  { user: 'barney', age: 36, active: false },
  { user: 'fred', age: 40, active: false },
  { user: 'jim', age: 22, active: true },
];

const myUsers = _.find(users, obj => obj.active === false);

myUsers.forEach((user) => {
  console.log(user.user);
})
// user.user => "barney", "fred"

_.get()

Metoda get() z działania przypomina trochę opisywaną funkcję find(), z taką różnicą, że tutaj wyszukujemy po ścieżce a nie po warunku.

Dostępne argumenty:

  1. Object lub tablica, w której będziemy wyszukiwać.
  2. Ścieżka do poszukiwanego elementu.
  3. Zwracana wartość jeśli nie uda znaleźć się elementu po wskazanej scieżce (argument opcjonalny). 
const foodObj = {
  favFoods: [
    "Pizza",
    "Schabowy",
    "Placki",
    { favOption: "Placek po węgiersku" },
  ],
};

const myFavFood = _.get(foodObj, 'favFoods[3].favOption', 'Nic ciekawego nie znaleziono')

console.log(myFavCandy)
// myFavFood => "Placek po węgiersku"

_.set()

Funkcja set() służy do ustawiania danej wartości z wykorzystaniem wskazanej ścieżki.

Dostępne argumenty:

  1. Obiekt lub tablica, gdzie wartość będziemy ustawiać.
  2. Ścieżka do elementu.
  3. Pożądana wartość.
const foodObj = {
  favFoods: [
    "Pizza",
    "Schabowy",
    "Placki",
    { favOption: "Placek po węgiersku" },
  ],
};

_.set(foodObj, 'favFoods[3].favOption', 'naleśniki z serem')

console.log(foodObj.favFoods[3].favOption)
// => "naleśniki z serem"

_.map()

Funkcja map() wykonuje podaną w argumencie funkcję na każdym elemencie obiektu lub tablicy a następnie zwraca nową funkcję z tymi elementami. Lekko zawiłe więc spójrzmy na przykład.

Dostępne argumenty:

  1. Obiekt lub tablica po której będziemy iterować.
  2. Funkcja, która zostanie wykonana przy każdej iteracji. 
const studentList = [
  { name: "Michal", grade: 5 },
  { name: "Ola", grade: 4 },
  { name: "Wiktor", grade: 2 },
  { name: "Sebastian", grade: 3 },
  { name: "Agnieszka", grade: 3 },
  { name: "Filip", grade: 5 },
];

const studentNames = _.map(studentList, (student) => student.name);

console.log(studentNames);
// => ["Michal", "Ola", "Wiktor", "Sebastian", "Agnieszka", "Filip"];

Wymienione wyżej funkcje to tylko część z bogatej biblioteki Lodash, wszystkie metody wraz z opisami dostępne są tutaj.