Obsługa Błędów JavaScript: SyntaxError: missing ) after argument list

Kontynuując naszą serię JavaScript Error Handling, dzisiaj będziemy przyglądać się bliżej błędowi Missing Parenthesis After Argument List JavaScript. Błąd Missing Parenthesis After Argument List może pojawić się z wielu różnych powodów, ale jak większość SyntaxErrors, często wyskakuje, gdy jest literówka, brakuje operatora lub łańcuch nie jest poprawnie ucieczką.

W tym artykule zbadamy błąd Missing Parenthesis After Argument List nieco bardziej szczegółowo, w tym gdzie pasuje w hierarchii JavaScript Exception i co powoduje występowanie takich błędów. Away we go!

The Technical Rundown

• Wszystkie obiekty błędów JavaScript są potomkami obiektu Error, lub obiektem dziedziczonym po nim.
• Obiekt SyntaxError jest dziedziczony po obiekcie Error.
• Błąd Missing Parenthesis After Argument List jest specyficznym typem obiektu SyntaxError.

Kiedy powinieneś go użyć?

Jak wspomniano we wstępie, błąd Missing Parenthesis After Argument List może wystąpić z różnych powodów. W większości przypadków problem dotyczy literówki lub zapomnianego operatora jakiegoś rodzaju. Aby lepiej to zilustrować, możemy po prostu zbadać kilka prostych przykładów.

Bardzo typowym działaniem w JavaScript jest concatenate łączenie wielu łańcuchów razem w celu utworzenia jednego większego łańcucha. Można to zrobić za pomocą prostego operatora + między dwoma ciągami: console.log("Hello " + "world");

Or, you can also concatenate strings inline, using backtick (`) and bracket ({}) syntax: console.log(`Hello ${worldVar}`);

Niezależnie od sposobu wykonania, wiele metod JavaScript akceptuje nieokreśloną liczbę argumentów (takich jak łańcuchy), w tym metodę console.log(). W poniższym przykładzie zauważ, co się stanie, jeśli zapomnimy uwzględnić jakąkolwiek formę konkatenacji dla naszych dwóch łańcuchów:

var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { var name = "Jane Doe"; console.log("Name is:" name);} catch (e) { if (e instanceof SyntaxError) { printError(e, true); } else { printError(e, false); }}

Wynikiem tego jest natychmiastowe wygenerowanie błędu Missing Parenthesis After Argument List:

Uncaught SyntaxError: missing ) after argument list

Jak możesz zauważyć, przekazaliśmy dwa argumenty do console.log(), ale nie oddzieliliśmy ich typowym przecinkiem (,), ani nie dokonaliśmy konkatenacji naszych dwóch wartości łańcuchowych razem z jedną z powyższych metod. Powoduje to, że JavaScript przetwarza nasz kod bardzo dobrze, aż do momentu, gdy dochodzi do końca pierwszego łańcucha (is:") i przechodzi do następnego argumentu (name). Ponieważ nie powiedzieliśmy mu, aby konkatenował, ani aby oczekiwał kolejnego argumentu poprzez użycie separatora przecinka, JavaScript oczekuje, że jest to koniec naszej listy argumentów do metody console.log() i stwierdza, że brakuje naszego nawiasu zamykającego ()), rzucając tym samym błąd Missing Parenthesis After Argument List.

Rozwiązanie zależy od tego, jak chcemy, aby nasz kod się zachowywał, ale w tym przypadku, ponieważ przekazujemy argumenty do console.log(), możemy osiągnąć konkatenację bezpośrednio, lub po prostu dodając separator przecinka. Separator przecinków jest generalnie bardziej czytelny dla naszych celów, więc wybierzmy tę opcję:

var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { var name = "Jane Doe"; console.log("Name is:", name);} catch (e) { if (e instanceof SyntaxError) { printError(e, true); } else { printError(e, false); }}

Daje nam to naszą nazwę wyjściową zgodnie z oczekiwaniami:

Name is: Jane Doe

Raczej prosta poprawka, aby być pewnym, ale to jest problem z błędem Missing Parenthesis After Argument List i z SyntaxErrors w ogóle. Wszystkie są tak oczywiste po wykryciu, ale jeśli twój edytor kodu nie analizuje i nie ocenia twojego kodu pod kątem błędów składni w locie, często łatwo je przeoczyć, dopóki sam nie przetestujesz kodu.

Warto również zauważyć, że podobnie jak inne SyntaxErrors, błąd Missing Parenthesis After Argument List nie może być łatwo wychwycony przez typowy blok try-catch. Ponieważ problemem jest składnia, próba wykonania problematycznego kodu przez silnik JavaScript kończy się niepowodzeniem dokładnie w tym momencie. Zazwyczaj oznacza to, że nie dociera on do punktu w wykonaniu, w którym może kontynuować do części catch bloku, ponieważ nie wie, jak poprawnie ją przetworzyć. Można to obejść przesuwając wykonanie przez różne pliki i warstwy, ale dla wszystkich podstawowych intencji i celów, catching SyntaxErrors jest głównym wyzwaniem.

Aby zanurzyć się jeszcze głębiej w zrozumieniu jak twoje aplikacje radzą sobie z błędami JavaScript, sprawdź rewolucyjne narzędzie Airbrake JavaScript error tracking tool dla alertów w czasie rzeczywistym i natychmiastowego wglądu w to, co poszło nie tak z twoim kodem JavaScript.