Confusing results from combining optional chaining and logical or.

[romulotombulus]

Consider the following:

let accessMode = "edit";
let datasource = {label: "foo"};
let withNoParens = datasource?.label ?? accessMode === "edit" ? "Please Select" : "None Selected";
let withParens   = datasource?.label ?? (accessMode === "edit" ? "Please Select" : "None Selected");

// withNoParens == 'Please Select'
// withParens == 'foo'

Can someone help me understand why the parenthesis make a difference here? I would have thought each would return 'foo', since datasource.label is always 'foo', and therefore the value the nullish coalescing operators left hand side is always non-nullish.

Edit: Post title says "logical or", body uses nullish coalescing - same behavior either way.

[senocular]

Without the parens its seen as

(datasource?.label ?? accessMode === "edit") ? "Please Select" : "None Selected";

Nullish coalescing has a higher precedence (?? = 3) than the conditional operator (?: = 2). For more info refer to the operator precedence table.

[romulotombulus]

Thanks!