Error unexpected end of function definition at end of input

Ситуация: вы пишете скрипт, в котором объявляете новые функции или используете уже встроенные. Вы уверены, что всё правильно, потому что делали так сотни раз в других проектах, но при запуске кода появляется такая ошибка:

❌ Uncaught SyntaxError: Unexpected end of input

Что это значит: браузер ждёт от вас или от кода продолжения ввода параметров или новых значений, но не находит их и падает с ошибкой.

Когда встречается: чаще всего это значит, что вы где-то потеряли закрывающие скобки. Вторая ситуация, более редкая — вы обрабатываете JSON-запрос и вам просто не приходят нужные данные (хотя должны бы). О том, что такое JSON-запросы и ответы, будет в отдельной статье — тема слишком большая и интересная для короткого ответа. Сейчас остановимся на первом варианте.

Что делать с ошибкой Uncaught SyntaxError: Unexpected end of input

Чтобы отловить и исправить эту ошибку, вам нужно посчитать и сравнить количество открытых и закрытых скобок в программе — как круглых (), так и фигурных {}. Скорее всего, вам не хватает и того, и другого (и точки с запятой после них).

Проще всего такую ошибку найти простым форматированием кода: когда все вложенные команды и параметры сдвигаются вправо табуляцией или пробелами. В этом случае легко найти разрыв в получившейся лесенке кода и добавить туда нужные скобки. Смотрите сами:

$(function () {
  $("#mewlyDiagnosed").hover(function () {
    $("#mewlyDiagnosed").animate({ 'height': '237px', 'top': "-75px" });
  }, function () {
    $("#mewlyDiagnosed").animate({ 'height': '162px', 'top': "0px" });
  });

Может показаться, что всё в порядке, но вот как выглядит этот код после форматирования:

$(function () {
  $("#mewlyDiagnosed").hover(function () {
    $("#mewlyDiagnosed").animate({ 'height': '237px', 'top': "-75px" });
  }, function () {
    $("#mewlyDiagnosed").animate({ 'height': '162px', 'top': "0px" });
  });

Сразу видно, что в конце скрипта не хватает строки с )}; — если их не поставить, браузер будет ждать продолжения ввода параметров вызова функции, не дождётся их и выдаст ошибку Uncaught SyntaxError: Unexpected end of input

Попробуйте сами. Найдите ошибку в этом коде:

$(function() {

  $state.on('change', function(ev) {

    if($state.is(':checked')) {

    }else {

  });

Code formatting. Tabs or spaces, semi-colons or no semi-colons. It is a pretty controversial subject to many but it is quite important in some instances. If you are on a team, having a cohesive code format helps code readability among your peers. Even if you work alone, one big benefit of having a good sense of code formatting is to avoid syntactical errors.

JavaScript is pretty open when it comes to code format. There is a wide range of different ways to format your codebase in this language. What can happen if you don’t do it? Well, an example of a simple error that is often caused by code formatting issues is the Unexpected end of input error. How does it work?

The Problem

When JavaScript code is run it uses just in time compilation (JIT) to turn your code into something the computer can do. When this happens your code is read and certain things are expected about the code, for example having matching parentheses. If you received the Unexpected end of input error, odds are you are missing a closing curly brace } so the error is basically saying “you opened the curly brace but the code ended before it was closed”.

Here’s an example:

const writeHelloWorld = () => {
  console.log('hello world')

writeHelloWorld();
Code language: JavaScript (javascript)

As you can see, the code is clearly missing a ending curly brace at the end of the arrow function which causes the error. So how does the code formatting mentioned earlier fit into this? Let’s look at a more real-world example:

const items = ['one', 'two', 'three'];

function parseItems() {
  for (let i = 0; i < items.length; i++) {
    if (items[i]) {
    console.log(items[i])
  }
}

parseItems();



  


                       
  



Code language: JavaScript (javascript)

In this example, it is a little less clear where the error is. The indentation is not very consistent so you might not notice that the if statement is actually missing a curly brace after which causes the error.

The Solution

Fortunately this is pretty simple to fix — you can just add your missing curly brace. In the above example:

const items = ["one", "two", "three"];

function parseItems() {
  for (let i = 0; i < items.length; i++) {
    if (items[i]) {
      console.log(items[i]); // indented this line over
    } // added this curly brace
  }
}

parseItems();
Code language: JavaScript (javascript)

It can definitely be challenging to find a missing curly brace. Depending on your code editor of choice, you may be able to configure different colors for each pair of curly brace so it is easier to see which ones match and which ones don’t.

Another approach is to try and avoid these errors from the start. Using formatting tools such as Prettier or linting tools like ESLint can help a lot, at least in my experience.

Unexpected end of JSON input

There’s a chance that you received a similarly named but slightly different error: Unexpected end of JSON input. Rather than simply a missing curly brace, this error often occurs when you are trying to parse a JSON string that is itself missing a curly brace. Here’s an example:

const parseJson = (input) => JSON.parse(input);

const validJson = JSON.stringify({ hello: "world" });

const invalidJson = "{";

console.log(parseJson(validJson)); // prints out a valid object
console.log(parseJson(invalidJson)); // throws an error
Code language: JavaScript (javascript)

This can be simply fixed by ensuring the string you are parsing is valid JSON if you have control over that string. If you don’t, you can wrap the whole thing in a try / catch to be safe. Using the previous example:

const parseJson = (input) => {
  try {
    return JSON.parse(input);
  } catch (error) {
    return "error parsing input";
  }
};
Code language: JavaScript (javascript)

If you add this to the parseJson function, you can now handle invalid JSON strings rather than getting an unexpected runtime error.

Conclusion

Hopefully this helps you see how useful good code formatting can be in your code, whether you work with a team or alone. Let us know if you have any other reasons why formatting can be so useful or how you do it in your own code setup. Thanks for reading!

I know that sometimes the errors we face in JavaScript can be difficult to debug. While with all the modern tools like Chrome developer tools etc the debugging has become far easier, there still are times when we come across issues that are tricky to debug. One such issue is the “Uncaught SyntaxError: Unexpected end of input” error in JavaScript.

Let us take a look at how can we debug such issues and what might be causing them.

What causes Unexpected end of Input in JavaScript?

Well, a large number of times, the cause of the “Uncaught SyntaxError: Unexpected end of input” error in JavaScript is missing parentheses, brackets, or quotes. Let’s take a look at the example below:

var addPost = function() {
   //add a new post when called
}

var editPost = function() {
   //edit the post when called
}

var deletePost = function() {
   //delete a post when called


var publishPost = function() {
   //publish a post when called
}

While everything looks good in the code above, this was throwing the Unexpected end of input error. However, if you look carefully, you’ll notice that the deletePost method has a missing closing bracket ( } ) which is actually causing the error.

On a javascript file with hundreds of lines of code, it can become very cumbersome to track the brackets line by line. There is an easier way to catch such errors and to avoid them too as shown in the next section.

How to fix Uncaught SyntaxError: Unexpected end of input error in JavaScript or jQuery?

Now that we know what causes this issue, the debugging method is also easy. While we can definitely look into the code and brackets and parentheses line by line, it would not be an effective method in the case of a large file. The easier way would be to make use of any tool.

One such tool I would recommend is https://jshint.com/ .

Once you visit JsHint, copy and paste your javascript code there. It would run an auto-scan of the code and list all the warnings and errors that the tool finds.

If you copy-paste the above code on JSHint, you’ll notice that it shows an ” Unmatched ‘{‘. ” warning. Once you hover over it, it would highlight the line with the deletePost method indicating that the missing bracket is in this method. Here is a screenshot that shows the issue on JsHint.

Can the error be caused due to any other reason other than missing brackets etc?

Yes! While it is true that most of the time the issue is caused due to missing parentheses, brackets, or quotes, it has been noticed that whenever we try to parse an empty response from a JSON returned by Ajax call, the Unexpected end of input error can crop up too.

In such cases, add a conditional check to see if the data returned really has something within it before making use of the data returned.

For example, consider the following Ajax call in jQuery:

$.ajax({
   url: url,
   ...
   success: function (response) {

      if(response.data.length == 0){
         // this condition would prevent a blank json from being parsed
         // Empty response returned, maybe show an error etc
      }else{
        //Parse the JSON and use it
      }
   }
});

In the above code, you can notice that once we receive the response, we check if the length of the data returned is 0 i.e if the data returned is empty then maybe write a handler method or show an error to the user, otherwise, if there is data then parse it and use it.

To Summarize, the causes of Uncaught SyntaxError: Unexpected end of input error can be:

• Missing Parentheses in the code
• Missing Bracket in the code
• Missing quote in the code, for string etc
• Parsing an empty JSON

As I mentioned earlier, the “Uncaught SyntaxError: Unexpected end of input” error in JavaScript can be caused due to various reasons, however, the majority of the time it is because of missing parentheses, bracket, quote or because of parsing an empty JSON. However, an easy way to spot and avoid such issues is to run your javaScript through a validator like jsHint.com. If you are using webpack then you can even configure JSLinting or ESlint in your build process which would highlight such warnings and errors during the build time itself. Hope you would this article useful. Let us know in the comments!