Improve closures concept with practical examples and implementation

Programming JavaScript
1

Hello Exercism community!

I’d like to propose improvements to the closures concept explanation in the JavaScript track, specifically for the Coordinate Transformation exercise.

Current Situation:

  • While learning closures, I noticed a gap between the theoretical explanation and the practical exercise

  • The current introduction could benefit from more concrete examples

Proposed Improvements:

  1. Added Function Factory Examples:
function createMultiplier(factor) {
 
  return function(number) {
    return number * factor;
  };
}

2-Added Practical Coordinate Transformer Example:

function createCoordinateTransformer(scaleX, scaleY) {
  return function(x, y) {
    return {
      x: x * scaleX,
      y: y * scaleY
    };
  };
}

3- Added Key Concepts section to bridge theory and practice
Benefits:

  • Clearer progression from basic to advanced concepts
  • Direct connection to the exercise’s requirements
  • Better understanding of how closures work in practical scenarios
    Link of PR
1 Like
2

Hi there and sorry for the late reply.

We already have an excellent concept article on closures that seems to cover most of the theoretical basics (and links to the MDN article about closures, which I think is really well written.)

The changes you’re proposing seem to me to duplicate these articles. Also the practical example practically gives away part of the solution to the exercise.

I’m curious to see what others think too, but to me these changes seen unnecessary. I’m open to being persuaded in the opposite tho.

3

Apologies for reviving an old thread.

I come here as I myself was stuck at this tutorial exercise.

While I agree with @Cool-Katt here that the proposed additions practically give away the solution.

I think the confusion stems from the fact that we have not dealt with returning a “function definition” and the fact that it is not executed on return.

I think a simplified possible addition to the exercise could be an example demonstrating this?

Fully aware that any example of this also does give away the solution a bit, so maybe in the hint instead?

function personalGreeting(x) {
  return function (y) {
    return x + y;
  };
}

const hello = personalGreeting("Hello ");
const bye = personalGreeting("Bye ")

console.log(hello("Cool-Katt"))
console.log(bye("Cool-Katt"))

(The MDN article is quite good tho, and reading it made everything click in regards to the exercise, it does also give away the solution.)