Przejdź do głównej zawartości

Bug #054

🪲 Znajdź buga​

const func1 = function (...arguments) {
  console.log(arguments)
}
const func2 = (...arguments) => {
  console.log(arguments)
}

const func3 = function (a, b) {
  console.log(arguments)
}
const func4 = (a, b) => {
  console.log(arguments)
}

func1("foo", "bar")
func2("foo", "bar")
func3("foo", "bar")
func4("foo", "bar")

Czy powyższe wywołania funkcji, zalogują do konsoli przekazane argumenty?

🧪 Rozwiązanie​

const func1 = function (...arguments) {
  console.log(arguments)
}
const func2 = (...arguments) => {
  console.log(arguments)
}

const func3 = function (a, b) {
  console.log(arguments)
}
const func4 = (a, b) => {
  console.log(arguments)
}

func1("foo", "bar") // ["foo", "bar"]
func2("foo", "bar") // ["foo", "bar"]
func3("foo", "bar") // { 0: "foo", 1: "bar"}
func4("foo", "bar") // arguments is not defined

Wywołania func1() i func2() zalogują do konsoli to samo, czyli tablice z listą przekazanych argumentów.

Nazwę parametru reszty (występującego po wielokropku) możemy zdefiniować dowolnie, nie musi nazywać się arguments.

Następnie w tak zdefiniowanym parametrze reszty otrzymujemy dostęp do tablicy z pozostałymi parametrami przekazanymi do funkcji.

Pozostałymi, czyli jeśli w funkcji zdefiniujemy np. func(a, ...rest), to w rest będziemy mieli dostęp do tablicy z resztą parametrów, bez parametru a.

W kolejnych funkcjach, func3() i func4() wywołane zostały predefiniowane obiekty arguments.

Funkcje mają dostęp do takiego obiektu, mimo, że nie jest on wyraźnie zadeklarowany. Podobna sytuacja ma miejsce np. z this.

Analogicznie do this, obiekt arguments jest dostępny tylko w przypadku deklaracji funkcji z użyciem słowa kluczowego function. Jeśli zdefiniowana funkcja jest funkcją strzałkową, wtedy obiekt arguments nie jest dostępny.

W wywołaniu func4() JavaScript wyrzuci więc błąd ReferenceError: arguments is not defined.

Jeśli jednak sprawdzisz kod w środowisku StackBlitz (Plac zabaw poniżej), obiekt arguments wewnątrz funkcji strzałkowej zwróci dziwne rzeczy.

Jest to spowodowane zdefiniowaniem obiektu arguments w globalnym zakresie poprzez StackBlitz i to samo zostanie zwrócone gdy wywołamy console.log(arguments) bezpośrednio w globalnym polu, bez zagnieżdżania go w funkcji

Podsumowując, preferowane jest używanie parametru reszty, zamiast predefiniowanego obiektu arguments.

🎢 Plac zabaw​

Otwórz edytor w nowym oknie

📑 Linki​

❤️ Podobają Ci się bugi JS?​

Podziel się linkiem ze znajomymi:
https://codisity.pl/100-bugow-js