Dobre praktyki w JavaScript: $ (dolar) w nazwie zmiennej

• 2 minuty

Piszę dużo w czystym JavaScript. Wprowadziłem do swojego stylu pracy pewien szczegół. Mianowicie ulepszyłem nazewnictwo zmiennych. W pewnych przypadkach (o których więcej w dalszej części) zaczynam nazwę zmiennej od znaku dolara ($).

Chcesz dowiedzieć się dlaczego?

Baner promujący artykuł

Po co mi dolar? Zadanie ⌨️

Zanim odpowiem na pytanie, spróbuj napisać kawałek kodu, który:

  • będzie pobierać username użytkownika z pola input
  • sprawdzi, czy wpisana wartość nie jest pusta

Masz pomysł na implementację?

•

Prawdopodobnie napisałbyś coś takiego:

const username = document.querySelector('.username');
const userName = username.value;
const isEmptyUsername = (userName.length === 0);

console.log({ isEmptyUsername });

W takim przypadku aż kusi stwierdzenie, że zmienne username oraz userName są bardzo podobne, co może generować błędy.

Moja rada

W opisywanej przeze mnie sytuacji uprościłbym sobie życie i zastosował regułę:

Złota Zasada

Jeśli zmienna przechowuje referencję do elementu w DOM, poprzedź jej nazwę znakiem dolara. Poprzez element mam na myśli: Node lub NodeList.
Jeśli używasz jQuery lub jakiejś innej biblioteki do komunikacji z DOMem, to zmienne przechowujące obiekty jQuery też poprzedzam znakiem dolara.

Powyższy kod przepisałbym do następującego:

const $username = document.querySelector('.username');
const username = $username.value;
const isEmptyUsername = (username.length === 0);

console.log({ isEmptyUsername });

Czytelniej?

•

Aktualizacja: 2018-12-27

Jak widać nie tylko ja stosuję taką konwencję. Zobaczcie jaki kod wychodzi spod ręki mojego kolegi blogera — Miłosza:

const click$ = fromEvent(breedsFetchEl, 'click');
const breeds$ = click$.pipe(
  switchMap(() =>
    ajax.getJSON('https://dog.ceo/api/breeds/list/all')),
  map(result => Object.keys(result.message).join(', '))
);
breeds$.subscribe(breeds => breedsListEl.innerText = breeds);

Jak widać stosuje on dwie konwencje nazewnicze:

  • breedsFetchEl — *El do nazywania elementów z drzewa DOM
  • breeds$, click$ — *$ do nazywania reaktywnych strumieni