Why is this converted to an array using .apply() with jQuery.when and jQuery.Deferred.resolveWith?

Question

Using jQuery 3.0.0, given

$(function() {

  var n = 5;

  function jQueryWhenApplyResolveRejectWith(n) {
    
    var arr = $.map(Array(5), function(_, i) {
      return $.Deferred();
    });

    var obj = {
      "index": null
    };

    var promises = $.when.apply(null, arr.map(function(promise, i) {
      return i < n 
             ? promise.resolveWith(obj, [i]) 
             : promise.rejectWith((obj.index = i, obj)
               , [new Error(i + " is not less than " + n)])
    }));
    
    function success(...result) {
      console.log("resolved, result:", result, "this:", this);
    }
    
    function err(error) {
      console.log("rejected, error:", error, "this:", this);
    }
    
    return promises.then(success, err);
    
  }
  
  jQueryWhenApplyResolveRejectWith(n)
  .then($.proxy(jQueryWhenApplyResolveRejectWith, null, --n))

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
</script>

the first call to jQueryWhenApplyResolveRejectWith should return an array of resolved jQuery promise values at .then() chained to promises, where this is an array of obj objects.

The second call to jQueryWhenApplyResolveRejectWith should return Error, with this set to single object obj.

The expected result of success is this set to single obj, as single object was passed to deferred.resolveWith.

Though the expected result is not returned, at javascript at stacksnippets, the single object can be returned by using .bind() or $.proxy() at .then() chained to promises.

$(function() {

  var n = 5;

  function jQueryWhenApplyResolveRejectWith(n) {
    
    var arr = $.map(Array(5), function(_, i) {
      return $.Deferred();
    });

    var obj = {
      "index": null
    };

    var promises = $.when.apply(null, arr.map(function(promise, i) {
      return i < n 
             ? promise.resolveWith(obj, [i]) 
             : promise.rejectWith((obj.index = i, obj)
               , [new Error(i + " is not less than " + n)])
    }));
    
    function success(...result) {
      console.log("resolved, result:", result, "this:", this);
    }
    
    function err(error) {
      console.log("rejected, error:", error, "this:", this);
    }
    
    return promises.then($.proxy(success, obj), err);
    
  }
  
  jQueryWhenApplyResolveRejectWith(n)
  .then($.proxy(jQueryWhenApplyResolveRejectWith, null, --n))

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
</script>

Questions:

1. Why is this converted to an array from the plain object passed to .resolveWith(); while the same object passed to .rejectWith() returns a single object using $.when.apply() pattern?

2. Is the expected behaviour of using $.when.apply() or .resolveWith(), or both in same procedure, this being set to an array containing original this multiplied by the number of resolved jQuery promise objects?

Answer 1

Why is this converted to an array using .apply() with jQuery.when and jQuery.Deferred.resolveWith?

1. Why is this converted to an array from the plain object passed to .resolveWith(); while the same object passed to .rejectWith() returns a single object using $.when.apply() pattern?
2. Is the expected behaviour of using $.when.apply() or .resolveWith(), or both in same procedure, this being set to an array containing original this multiplied by the number of resolved jQuery promise objects?

Each promise object has its own context. The array returned as this at success function represents the this value of each resolved promise. Since the context could be changed between the promise being resolved or rejected, the this is not flattened to a single object, or single value within the returned array, but distinct for each jQuery promise object originally passed to $.when.apply().

Yes, believe this to be expected behaviour. Note that $.when.apply() is not a jQuery method, but a way to pass an array of promises to $.when() and retrieve array of resolved promises at .then(), or single rejected promise if any one of the promises in passed array is rejected.

If expected result is single this at success where an array of resolved promises is return value, you can use .bind() or $.proxy() to set this at success function.

  return i < n 
         ? promise.resolve(i) // use `.resolve()` instead of `.resolveWith()` here
         : promise.rejectWith((obj.index = i, obj)
           , [new Error(i + " is not less than " + n)])

  return promises.then(success.bind(obj), err); // use `.bind()` to set `this`

There is no need to adjust err function as only single rejected promise is returned to onRejected handler, where this would be single value, not an array.