Not able to understand why JS Code is not running in JS Bin

Question

Getting the below error code in JS Bin when I am trying to run the following code, am I doing anything wrong??

let myTodos = {
  day: "Monday",
  meetings: 0,
  meetDone: 0,
}

let addMeeting = function(todo, meet = 0) {
  todo.meetings = todo.meetings + meet;  
}


let meetDone = function (todo, meet = 0) {
  todo.meetDone = todo.meetDone - meet; 

}

let resetDay = function (todo) {
  todo.meetings = 0;
  todo.meetDone = 0;
}

let getSummaryOfDay = function (todo) {
  let meetleft = todo.meetings + todo.meetDone;
  return `You have ${meetleft} meetings for today.!`;
}

addMeeting(myTodos, 4);
addMeeting(myTodos, 2);
meetDone(myTodos, 5);
console.log(getSummaryOfDay(myTodos));
console.log (myTodos);

And the error that I am getting in JS Bin is as follows.

"error"
 "SyntaxError: Unexpected token '{'
  at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924
  at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"

I've had issues using JSBin before. Albeit personal preference, I tend to use codesandbox, or just jsfiddle for something simple, like this. — Kobe, Mar 27 '20 at 08:57
You should target `ES6 / Babel`, not `JavaScript`. You'll see then that the code will run. — Kobe, Mar 27 '20 at 09:00
[I can reproduce it](https://jsbin.com/wuninuvaxe/1/edit?js,console). Open the console for a better error message. It's really weird - [removing the WORD "for" in the template literal fixes it](https://jsbin.com/roqosiyasa/1/edit?js,console) — VLAZ, Mar 27 '20 at 09:01
Your code contains `es6` syntax so you need to target `es6/babel` as what @Kobe said. You can also hover the code which has error so you can see a hint. — Rieljun Liguid, Mar 27 '20 at 09:02
@RieljunLiguid and @ Kobe this is a *runtime* error. JSBin, for some reason, validates your code as if it's ES5, however, it *does* run ES6 code. So, it's not any of the linting errors, it's literally a problem once you execute the code which you CAN do. — VLAZ, Mar 27 '20 at 09:04

score 1 · Answer 1 · answered Mar 27 '20 at 09:27

This is a bug in JSBin's loop protection.

When you use this code (JSBin link):

let myTodos = {
  day: "Monday",
  meetings: 0,
  meetDone: 0,
}

let addMeeting = function(todo, meet = 0) {
  todo.meetings = todo.meetings + meet;  
}


let meetDone = function (todo, meet = 0) {
  todo.meetDone = todo.meetDone - meet; 

}

let resetDay = function (todo) {
  todo.meetings = 0;
  todo.meetDone = 0;
}

let getSummaryOfDay = function (todo) {
  let meetleft = todo.meetings + todo.meetDone;
  return `You have ${meetleft} meetings for today.!`;
}

addMeeting(myTodos, 4);
addMeeting(myTodos, 2);
meetDone(myTodos, 5);
console.log(getSummaryOfDay(myTodos));
console.log (myTodos);

JSBin produces the following document that will be executed:

<!DOCTYPE html>

<html>
<head>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width\">
  <title>JS Bin</title>
<style id=\"jsbin-css\">

</style>
</head>
<body>

<script>try {let myTodos = {
  day: \"Monday\",
  meetings: 0,
  meetDone: 0,
}

let addMeeting = function(todo, meet = 0) {
  todo.meetings = todo.meetings + meet;  
}

let meetDone = function (todo, meet = 0) {
  todo.meetDone = todo.meetDone - meet; 

}

let resetDay = function (todo) {
  todo.meetings = 0;
  todo.meetDone = 0;
}

let getSummaryOfDay = function (todo) {
  let meetleft = todo.meetings + todo.meetDone;
 {
if (window.runnerWindow.protect.prote{;window.runnerWindow.protect.protect({ line: 23, reset: true }); ct({ line: 23 })) break;
 return `You have ${meetleft} meetings for today.!`;
}}

}

addMeeting(myTodos, 4);
addMeeting(myTodos, 2);
meetDone(myTodos, 5);
window.runnerWindow.proxyConsole.log(getSummaryOfDay(myTodos));
window.runnerWindow.proxyConsole.log (myTodos);
} catch (error) { throw error; }

//# sourceURL=xibavicide.js
</script>
</body>
</html>

Note how the template literal is wrapped in the protection code and now it's not syntactically correct.

Presumably, the protection is there to stop infinite loops.

If you just remove for (JSBin link) then you don't trigger the protection and the document produced is syntactically correct:

<!DOCTYPE html>

<html>
<head>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width\">
  <title>JS Bin</title>
<style id=\"jsbin-css\">

</style>
</head>
<body>

<script>try {let myTodos = {
  day: \"Monday\",
  meetings: 0,
  meetDone: 0,
}

let addMeeting = function(todo, meet = 0) {
  todo.meetings = todo.meetings + meet;  
}

let meetDone = function (todo, meet = 0) {
  todo.meetDone = todo.meetDone - meet; 

}

let resetDay = function (todo) {
  todo.meetings = 0;
  todo.meetDone = 0;
}

let getSummaryOfDay = function (todo) {
  let meetleft = todo.meetings + todo.meetDone;
  return `You have ${meetleft} meetings  today.!`;
}

addMeeting(myTodos, 4);
addMeeting(myTodos, 2);
meetDone(myTodos, 5);
window.runnerWindow.proxyConsole.log(getSummaryOfDay(myTodos));
window.runnerWindow.proxyConsole.log (myTodos);
} catch (error) { throw error; }

//# sourceURL=roqosiyasa.js
</script>
</body>
</html>

You can use a workaround suggested in the bug - adding a // noprotect comment anywhere in the JavaScript area will stop the loop protection from triggering. JSBin link

score -1 · Answer 2 · answered Feb 05 '23 at 11:43

Switching from Firefox browser to Chrome while using jsbin fixed this error for me.

If code did not have any issues, it worked fine in both browsers. If it had any issues , errors reason in Firefox was displayed like in question. In Chrome the correct reason was shown.

Not able to understand why JS Code is not running in JS Bin

2 Answers2