Issue on assigning function to variable

Question

I am working on the following demo. Why am I not able to get the result of a function assigned to a variable?

 var cartssku = function() { $(".cart").each(function() { skus = []; skus.push($(this).data('sku')); return skus.join(); }); }; console.log(cartssku);

 .cart { background: gold; height: 40px; width: 100%; margin: 6px; padding: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cart" data-sku="mt-01"> Cart SKU I</div> <div class="cart" data-sku="mt-02"> Cart SKU II</div> <div class="cart" data-sku="mt-03"> Cart SKU III</div>

Answer 1

1. if your function is returning something, you have to call it like a function: yourfunction();
2. the function inside the function is returning something, not the function that you're calling is returning something. try this:

 var cartssku = function() { var skus = []; $(".cart").each(function() { skus.push($(".cart").data('sku')); }); return skus.join() }; console.log(cartssku());

 .cart { background: gold; height: 40px; width: 100%; margin: 6px; padding: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cart" data-sku="mt-01"> Cart SKU I</div> <div class="cart" data-sku="mt-02"> Cart SKU II</div> <div class="cart" data-sku="mt-03"> Cart SKU III</div>

Answer 2

First remove the first and last statements from inside the .each() method; initializing belongs before the .each() method and return belongs after as shown below. Then call the function by appending () as shown:

 var cartssku = function() { var skus = []; $(".cart").each(function() { skus.push($(this).data('sku')); }); return skus.join(); }; console.log( cartssku() );

 .cart { background: gold; height: 40px; width: 100%; margin: 6px; padding: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cart" data-sku="mt-01"> Cart SKU I</div> <div class="cart" data-sku="mt-02"> Cart SKU II</div> <div class="cart" data-sku="mt-03"> Cart SKU III</div>

Alternatively, you can use the jQuery .map() method as in the demo below:

 var cartssku = function() { return $(".cart").map(function() { return $(this).data('sku'); }).get().join(); }; console.log( cartssku() );

 .cart { background: gold; height: 40px; width: 100%; margin: 6px; padding: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cart" data-sku="mt-01"> Cart SKU I</div> <div class="cart" data-sku="mt-02"> Cart SKU II</div> <div class="cart" data-sku="mt-03"> Cart SKU III</div>