JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<pre id="output"></pre>

JavaScript

(function () {
 
     var datain = ['val1','val2','val3'];
     var dataout = []; 
 
     var output = document.getElementById("output");
     var outputText = document.createTextNode("");
     output.appendChild(outputText);
    
    function printOutput(line) {
        outputText.data += line + "\n";
    }
    
    function concatenateUsers() {
   			var deferred = $.Deferred();
        var i = 0;
        var l = datain.length;
        
        var startConcatenate = function() {
        		if (i <= l) {
            
                ko.utils.arrayForEach(datain, function(values) {
                  printOutput("inner: " + values);
                  dataout.push("inner: " + values);
               })
               
            } else {
            		deferred.resolve();
            }
        }
        startConcatenate();
        return deferred.promise();
    }
    
    function waitForConcatenation() {
    		var promise = concatenateUsers();
        console.log(promise);

        promise.then(function(result) {
          console.log("then");
          printOutput(dataout);
        });

        promise.fail(function(result) {
          console.log("fail");
          printOutput(dataout);
        });

        promise.promise(function(result) {
          console.log("promise");
          printOutput(dataout);
        });

        promise.done(function(result) {
          console.log("done");
          printOutput(dataout);
        });        
        
    }
    
    waitForConcatenation();
     
})();