Before I moved in how did I know the importance of Right-associative? let's dive into what is associative in short:

Associative in JavaScript:

Associative in JavaScript describes in which order the operators with the same precedence level are evaluated in an expression.

There are two types of Associative:

Left Associative:

Operators with the left associativity are evaluated from left to right.

when there are multiple operators with the same precedence then the expression is evaluated from left to right, one such example is with the addition and subtraction operator.

  let result = 10 + 5 - 3; 
  console.log(result);// result = 12
  // + and - operator has the same precedence, and due to their 
  // left associative nature they are evaluated as (10 + 5) - 3

Another example is with is less than or greater than operator:

  console.log(2 > 3 > 5); //output: true
  //under the hood  console.log((2 >  3) > 5); within next step
  //it goes like this console.log(true > 5);
  // where true is coerced into a number value which is  1,
  //so 1  > 5 is true.

Other prime examples include the OR and AND operators, waiting for your exploration!

Right Associative:

Operators with the Right associativity are evaluated from Right to left.
when there are multiple operators with the same precedence then the expression is evaluated from right to left, one such example is the assignment operator:
```
  let a = 10;
  //where the value 10 is read first & is assigned to the variable name "a".
```

Another example is the ternary operator through which I learned the importance of it.

let ternary = true;
const result = (ternary === true ? true 
: ternary === false ? "nested-true" : "nested-false");
console.log(result);

Now, let's dive under the hood to learn how the evaluation of the above expression takes place in the JavaScript engine:

On the Default Mode (Right-associative):

//Example 1
let ternary = true;
const result = (ternary === true ? true 
:(ternary === false ? "nested-true": "nested-false"));
console.log(result);

First, the right expression (ternary === false ? "nested-true": "nested-false") is executed, and the expression is evaluated to "nested-false" as the condition "ternary === false" is false.

Then the expression becomes like this:

  let ternary = true;
  const result = (ternary === true ? true : nested-false );
  console.log(result);

Now the expression is evaluated to "true" as the condition "ternary === true" is true.

so, the final output of the above expression (Example 1) is "true".

What if the Ternary operator was left-associative?

//Example 2
let ternary = true;
const result2 = ( (ternary === true ? true : ternary === false)
 ? "nested-true": "nested-false");
console.log(result2);

In this example 2, the (ternary === true ? true : ternary === false) is executed firstly which evaluates to "true" as the condition "ternary === true" is true.

Then the expression becomes like this:

  //Example 2
  let ternary = true;
  const result2 = (true ? "nested-true": "nested-false");
  console.log(result2);

Now, the expression is evaluated as "nested-true".

so, the final output of the above expression (Example 2) is "nested-true".

NOTE: In example 2, the left-associative has changed the order in which the expressions are evaluated which results in neglecting the ternary === false condition and directly results in the conclusion of nested-true as the final output.

This is the reason why the right associative nature of the ternary operator enables it for conditional chains which are concise and can be used as a replacement for if … else if … else if … else chain.

I am a front-end developer who is always open to learning from and contributing to the community.

you can connect with me on LinkedIn and Twitter too : )

I hope this blog provided insight into how right associativity enables conditional chains in the ternary operator. Thanks for reading! Like and subscribe for more JavaScript insights!

If there is any mistake please let me know in the comment! I am open to acting upon those mistake : )

Nabal Blogs