SyntaxError: Unexpected token "new" when using await new Promise in JavaScript

Question

I have the following code (snippet out of a larger program and within an async function):

foo = questionData.media ? (await new Promise(resolve => {
  const image = new Image();
  image.onload = function () {
    const canvas = document.ceateElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;
                    
    canvas.drawImage(image, 0, 0, this.width, this.height);
                    
    resolve(canvas.toDataURL("image/jpg"));
  };
                
  image.src = "https://example.com/" + questionData.media;
})) : false;

I keep getting SyntaxError: Unexpected token 'new' on the first line, and I have no idea why. When I try to use parenthesis:

foo = questionData.media ? (await (new Promise(resolve => {
  const image = new Image();
  image.onload = function () {
    const canvas = document.ceateElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;
                    
    canvas.drawImage(image, 0, 0, this.width, this.height);
                    
    resolve(canvas.toDataURL("image/jpg"));
  };
                
  image.src = "https://example.com/" + questionData.media;
}))) : false;

And I get Uncaught ReferenceError: await is not defined.

Meanwhile, I have this code that works just fine:

data.push(await new Promise(resolve => {
  const req = new XMLHttpRequest();
  req.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      resolve(this.responseText);
    }
  };
  req.open("GET", `https://example.com/${id}/answer`, true);
  req.send();
}));

What am I missing?

A call to `await` *usually* has to be inside an `async` function. — Pointy, Jan 19 '22 at 18:26
To wit: running `async function foo(bar) { const baz = bar ? await new Promise(res => setTimeout(res, 10, 'hi')) : await Promise.resolve('bye!'); return baz; }` and calling it in my browser console seems to work just fine. — Jared Smith, Jan 19 '22 at 18:27
It works fine if `await` is expected, i.e. _directly_ in an `async` function, or top-level in a module. — Sebastian Simon, Jan 19 '22 at 18:29

score 1 · Accepted Answer · answered Jan 19 '22 at 18:28

It sounds like you aren't in an async function, so await does not get interpreted as a keyword, but as a variable name. If you put the entire initial snippet into an async function, it'll work as expected.

What's going on with

Unexpected token 'new'

and

await is not defined

is that, when you're not in an async function, those words are interpreted as normal identifiers (variable names) - if you switch them out for another placeholder variable name, it makes more sense for why the syntax would be invalid:

foo = questionData.media ? (someVariable new Promise(resolve => {

foo = questionData.media ? (someVariable (new Promise(resolve => {

Neither of those makes sense, and so the parser will give you errors as expected, when you use await when not in an async function.

I just noticed that the larger snippet of code that this was taken out of contained an array map function which was not using an async function for its parameter. — luek baja, Jan 19 '22 at 18:35

SyntaxError: Unexpected token "new" when using await new Promise in JavaScript

1 Answers1