How do the iterator and iterable protocols work in JavaScript, and how do generators let you build lazy sequences, pausable computations, and custom iteration for data structures?

Imagine you have a box of crayons, and you want to look at each crayon one by one. The iterator protocol is like a rule that says 'give me the next crayon' until you're done. A generator is like a magic crayon that can pause and remember where it left off, so you can take breaks and come back later.