#arguments object

[obscurejavascript]

Array.from in JavaScript

Array.from simplifies array conversion by providing one simple interface to turn objects that can be iterated through to arrays. Normally, separate operations are required for different types:

const str = 'test'; const strArray = str.split(''); const printArguments = function() { console.log([].slice.call(arguments)); } console.log(strArray); // [ 't', 'e', 's', 't' ] printArguments('test1', 'test2', 'test3'); // [ 'test1', 'test2', 'test3' ]

This is simplified with Array.from:

const strArray2 = Array.from(str); const printArguments2 = function() { console.log(Array.from(arguments)); } console.log(strArray); // [ 't', 'e', 's', 't' ] printArguments('test1', 'test2', 'test3'); // [ 'test1', 'test2', 'test3' ]

It is also useful for new ES6 Objects like Set and Map:

const map1 = new Map([['property1', 'value1'], ['property2', 'value2']]); const set1 = new Set(['test1', 'test2', 'test1', 'test3']); const map1Str = Array.from(map1); const set1Str = Array.from(set1); console.log(map1Str); // [ [ 'property1', 'value1' ], [ 'property2', 'value2' ] ] console.log(set1Str); // [ 'test1', 'test2', 'test3' ]

Browser support is good other than there is no IE support, only MS Edge. MDN has a polyfill that can help in that case.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2017/arrayFrom.js

[obscurejavascript]

JavaScript Arguments and Function Parameter Binding

It is well known that the arguments object has some strange properties. For example, it is not quite an array. But one little known quirk is that assigning to argument indices and assigning to named parameter is actually equivalent:

var test = function(message) { console.log(message);// test arguments[0] = 'modified'; console.log(message);// modified message = 'modified again'; console.log(arguments[0]);// modified again }; test('test');

So it is a good idea to either use function parameters or the arguments object, not both at once when possible. Rest parameters will be one of the new ways to deal with this in ES6. Awhile ago, I did a post on how to do that in ES5 (What most browsers implement). Finally, I found out about this quirk from this post, which although a little outdated, still explains the arguments object and its quirks well. The Chrome bugs he mentions have been fixed since then.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2015/argumentParameterBinding.js

[obscurejavascript]

Traceur Object Initializer Shorthand in Current JS

It can be tedious to write out returning objects with keys with the same names as variables in the function. So for JS.next there is a proposal for a shorthand. It look like this (from Traceur):

var getPoint = function() { var x = 1; var y = 10; return {x, y}; }; console.log(getPoint());// {x: 1, y: 10}

I was able to come up with a close syntax:

var getPoint = function() { var x = 1; var y = 10; return objectify(x, y); }; console.log(getPoint());// {x: 1, y: 10}

But this time there are more severe limitations. I had to parse the calling function:

var objectify = function objectify() { var args = Array.prototype.slice.call(arguments), obj = {}; // Look for the variables in the calling function var caller = objectify.caller + '', argNames = caller.split('objectify(').slice(-1)[0] .split(')')[0] .split(','); args.forEach(function(argument, index) { obj[argNames[index]] = argument; }); return obj; };

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2014/objectInitializerShorthand.js

[obscurejavascript]

Cleaning Up JavaScript Callbacks

/When multiple callbacks are required, the JS code can become very unwieldy. This happens a lot with AJAX calls in the browser or file operations in Node,js. For example:

var a = function(callback){ console.log('start'); callback('result1'); } var b = function(msg, callback){ console.log(msg); callback('result2'); } a(function(result1){ b(result1, function(result2){ console.log(result2); }); });// start, result1, result2

This can be reduced by collecting the functions and then recursively applying the functions defined first, passing their results in as parameters to the next function:

var order = function _order(start, toRun) { // Collect the functions to be run toRun = (toRun && toRun.length > 0) ? toRun : [start]; if (toRun.length > 0){ toRun.push(start); } return { // Wrap each of them in an object that collects the functions and // can execute them correctly (_orders return) then: function(callback) { return _order(callback, toRun); }, // finish: function _finish(){ // First order results in one duplicate toRun.shift(); (function run(toRun) { // Array.prototype.slice.call transforms arguments into an array var args = Array.prototype.slice.call(arguments, 1); var toSend = (args.length > 0) ? args : []; // Give the function about to call a callback that calls the // function after that with the results toSend.push(function(){ toRun.shift(); // apply sends the array as arguments to the function run.apply(null, [toRun].concat( Array.prototype.slice.call(arguments) )); }); // Keep on calling the functions with the constructed args until // at the final function if (toRun.length > 1){ toRun[0].apply(null, toSend); } else { toRun[0].apply(null, args); } })(toRun); } } } order(a).then(b).then(function(msg){ console.log(msg); }).finish();

That strategy for simplicity purposes assumed all callbacks were at the end and there was only among other things. If you need to do more complex operations there are quite a few libraries for this, I am currently using Q.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2014/cleanCallbacks.js