Difference betweeen Two line of same code

Question

can someone explain to me the differenec between the two line of code. In my atom editor the prettier changes the first to second.

(await fetchSearchResults(state.requestConfig, context))?.facilities ?? [] ) 

and

await fetchSearchResults(state.requestConfig, context)?.facilities ?? [] )

Answer 1

Prettier changes the whole thing to follow the rules given in a Prettier config file.
In your specific case, the (await fetchSearchResults(state.requestConfig, context)) is useless, hence why Prettier strips it.

Meanwhile, it may be quite important in a classic async context as explained in the comment below. Maybe the optional chaining is somehow tricking Prettier here, not sure.

---

The default Vue2 ESlint configuration comes with plugin:vue/essential and eslint:recommended as defaults.
Here is a link where you could get more details as of why.

If it's Prettier only, check the options part of the documenation or a .prettierrc config file in your project (or above).

Answer 2

The two lines are not the same and any automated change between these two is most likely incorrect.

To simplify, the difference is between:

1. (await foo()).bar
2. await foo() .bar:

Due to the operator precedence of await the second code (await foo().bar) will:

1. Execute foo()
2. Read the property bar from it
3. await that value

Which can be written as:

const functionResult = foo();
const result = await functionResult.bar;

While the first code uses the grouping operator () to change the order of operations to:

1. Execute foo()
2. await that value
3. Read the property bar from it

Which can be written as:

const functionResult = await foo();
const result = functionResult.bar;

This absolutely makes a difference if the function returns a promise:

function foo() {
  return Promise.resolve({ bar: "hello world" });
}

async function main() {
  console.log( await foo() .bar); // undefined - `foo()` returns a promise and there is no `bar` property
  console.log((await foo()).bar); // "hello world" - since the promise resolves to { bar: "hello world" }
}

main();

It also makes a difference if foo() is synchronous but the bar property is a promise:

function foo() {
  return { bar: Promise.resolve("hello world") };
}

async function main() {
  console.log( await foo() .bar); // "hello world" since the promise resolves to that string
  console.log((await foo()).bar); // Promise (check the browser console)
}

main();

The only time it does not make a difference is if there is no asynchronous code (which means the await probably should not be there):

function foo() {
  return { bar: "hello world" };
}

async function main() {
  console.log( await foo() .bar); // "hello world"
  console.log((await foo()).bar); // "hello world" 
}

main();

Answer 3

You don't need those brackets as long as you are not going to use the promise result straight after as in the example below

(await fetchSearchResults(state.requestConfig, context))?.facilities ?? [] )?.someMethod()

but the line is already getting quite long so you are probably best assigning the promise result to a variable.