How does JavaScript type coercion actually work under the hood — what roles do ToPrimitive, valueOf, and toString play, and why does [] + {} differ from {} + []?

Imagine you have two different toys, like a block and a ball, and you want to put them together. JavaScript has a special helper that decides how to turn each toy into a common shape (like a string or a number) so they can be combined. Sometimes the helper looks at the toy's 'value' tag, sometimes at its 'describe' tag, and that's why putting an empty box with a ball gives a different result than putting a ball with an empty box.