I perfectly know the usages for :
Function.prototype.bind.apply(f,arguments)
Explanation - Use the original (if exists) bind method over f with arguments (which its first item will be used as context to this)
This code can be used ( for example) for creating new functions via constructor function with arguments
Example :
function newCall(Cls) {
return new (Function.prototype.bind.apply(Cls, arguments));
}
Execution:
var s = newCall(Something, a, b, c);
But I came across this one : Function.prototype.apply.bind(f,arguments) //word swap
Question :
As it is hard to understand its meaning - in what usages/scenario would I use this code ?
This is used to fix the first parameter of .apply.
For example, when you get the max value from an array, you do:
var max_value = Math.max.apply(null, [1,2,3]);
But you want to get the first parameter fixed to null, so you could create an new function by:
var max = Function.prototype.apply.bind(Math.max, null);
then you could just do:
var max_value = max([1,2,3]);
Related
I'm working on a Javascript challenge. The challenge is the code below in which you add the numbers provided together:
function addTogether() {
//I left this blank because I'm focused on checking for the second parentheses
}
However, if you tried to pass this addTogether(5)(7) to the function addTogether(), it would be difficult to get the second parentheses.
However, you can get both parentheses if you write this code:
function addTogether() {
//get first parenteses
let first = arguments;
//get second parentheses
let second = function() {
return arguments;
};
}
But my question is how do you check if there's a second parentheses? Because I'm passing other data such as addTogether(2,3). In other words, I might be passing some with one parentheses and another with two parentheses to the function addTogether()
There is no way to check, unless you're parsing the source code, but your function can optionally accept second argument and if it's provided return the sum, otherwise return a function
const addTogether = (a, opt) => opt ? a + opt : b => a + b
console.log("addTogether(1,3) => ", addTogether(1,3))
console.log("addTogether(4)(6) => ", addTogether(4)(6))
Naive implementation using function that coerces to number.
Using reduce to calculate sums. Overriding ##toPrimitive to create function that coerces to value of add. Recursive call to generate recursively chainable callable number coercable functions.
Check ECMAScript specs if you want to customize behavior further. You will need to understand the conversion path.
function sum(...args) {
const first = args.reduce((sum,x)=>sum+x,0)
const second = function(...args) {return sum(first, ...args)}
second[Symbol.toPrimitive] = function(){return first}
return second
}
console.log(
1+sum(1)(2)+sum(1)+sum(3),
sum(1,1,2) (1,3)(0)(0)+sum(0,-1,1,0),
sum(1)(1)(2)(1)(3)(0)(0)(-1,1)(0)+sum()
)
I have code that is using currying to get the average on an array that results from concatenating two arrays: an n size array and an m size array.
var avg = function(...n){
let tot=0;
for(let i=0; i<n.length; i++){
tot += n[i];
}
return tot/n.length;
};
var spiceUp = function(fn, ...n){
return function(...m){
return fn.apply(this, n.concat(m));
}
};
var doAvg = spiceUp(avg, 1,2,3);
console.log(doAvg(4,5,6));
In this line return fn.apply(this, n.concat(m));, I don't understand why do we need to use apply. What is the object we are binding with the average function and why does just normal calling (return fn(n.concat(m));) not work?
In that example, this is not that important. It would also work if instead of this you would pass an empty object instead. It's just an example on how to use apply.
What you need to focus is on the second parameter n.concat(m). They key concept here is that passing an array as a second argument you are calling that function (fn) passing each value in the array as an argument.
About your second question: no, it won't work because fn expects several arguments (one per value to calculate the average) while by doing return fn(n.concat(m)); you are just passing one argument, an array containing all values
Maybe you would understand it better with a simpler example:
function sum3params(a,b,c){
return a+b+c;
}
console.log(sum3params([3,4,2])) // won't work
console.log(sum3params.apply(this, [3,4,2])) // will work ('this' is not important here)
For this use case, it does not. But consider the following:
var foo = {
bar: 3
};
var addBar = function(a, b) { return a + b + this.bar };
foo.add3AndBar = spiceUp(addBar, 3);
foo.add3AndBar(1); // 7
Using apply means that your spiceUp function can be applied to methods as well as normal functions. For more likely example, consider partially applying when defining a method on a prototype:
const ENV = "linux";
DoesSomePlatformSpecificStuff.prototype.getPath = spiceUp(ENV);
apply also will spread the gathered array of arguments back out into positional arguments which can also be done like so:
return fn(...n.concat(m));
Which can be simplified as
return fn(...n, ...m);
Which is equivalent to
return fn.apply(undefined, n.concat(m));
I have following two arrays:
var element_1 = new Array([x1,y1],[x2,y2],[x3,y3],[x4,y4]);
var element_2 = new Array([x1,y1],[x2,y2],[x3,y3],[x4,y4]);
Logic:
I want to run a loop (nested) where each element of element_1 (for eg [x1,y1]) is compared to each element of element_2 and the shortest distance between them shall be calculated within the loop (I know how to calculate the shortest path). The tricky part here is that I need a reference that which pair made the shortest past and then obtain those [x1,y1] and [x2,y2] combinations to draw a line.
Sample data:
var element_1 = new Array([10,0],[20,10],[10,20],[0,10]);
var element_2 = new Array([10,30],[20,40],[10,50],[0,40]);
Line should be made between [10,20] and [10,30]. Also, I would somehow need to store the coordinates somewhere to pass it to the line drawing function
How can I do this? Any leads would be highly appreciated.
Here is how I would do it:
var element_1 = [[0,0],[1,2],[5,3],[6,8]];
var element_2 = [[0,1],[1,4],[5,9],[9,8]];
var closest = {a: false, b: false, distance: false};
for(var i=0; i<element_1.length; i++) {
for(var j=0; j<element_2.length; j++) {
var distance = calculate_distance(element_1[i], element_2[j]);
console.log('Distance between element_1['+i+'] and element_2['+j+']: ' + distance);
if(closest.distance === false || distance < closest.distance) {
closest = {a: element_1[i], b: element_2[j], distance: distance};
}
}
}
console.log('The shortest path is between '+closest.a+' and '+closest.b+', which is '+closest.distance);
function calculate_distance(a, b) {
var width = Math.abs( a[0] - b[0] ),
height = Math.abs( a[1] - b[1] ),
hypothenuse = Math.sqrt( width*width + height*height );
return hypothenuse;
}
As Roko C. Buljan said, in your case you can just replace new Array() with []. Here's why.
Well i liked this question a lot. It inspired me to invent a generic Array method to apply a callback with each other items of two arrays. So i called it Array.prototype.withEachOther(). What it does is exactly what #blex has done in his solution with nested for loops. It applies an operation (provided by the callback) to each array item with the other array's item. Let's see how it works.
Array.prototype.withEachOther = function(a,cb,s=0){
return this.reduce((p,et) => a.reduce((q,ea) => cb(et,ea,q),p),s);
};
var element_1 = [[10,0],[20,10],[10,20],[0,10]],
element_2 = [[10,30],[20,40],[10,50],[0,40]],
cb = (p1,p2,q) => {var h = Math.hypot(p1[0]-p2[0],p1[1]-p2[1]);
return h < q.d ? {d:h,p1:p1,p2:p2} : q},
minDist = element_1.withEachOther(element_2,cb,{d:Number.MAX_SAFE_INTEGER,p1:[],p2:[]});
console.log(minDist);
So let's explain what's going on.
Array.prototype.withEachOther = function(a,cb,s=0){
return this.reduce((p,et) => a.reduce((q,ea) => cb(et,ea,q),p),s);
};
is a reusable function. It will execute the operation that is provided in a callback function, with each other element of the two arrays. It takes 3 arguments (a,cb,s=0).
a is the second array that we will apply our callback to each item for each item of the array that is invoking .withEachOther.
cb is the callback. Below I will explain the callback applied specific for this problem .
s=0 is the initial (with a default value of 0) value that we will start with. It can be anything depending on the callback function.
return this.reduce((p,et) => a.reduce((q,ea) => cb(et,ea,q),p),s);
this part is the core of the function. As you see it has two nested reduces. The outer reduce has an initial value designated by the s, which is provided as explained above. The initial value gets initially assigned to the p argument of the outer reduce's callback and the other argument et is assigned one by one with each of the items of invoking array. (element of this). In the outer reduce we invoke another reduce (the inner reduce). The inner reduce starts with the initial value of the result of previous loop which is the p of outer reduce and after each calculation returns the result to it's reduced value variable q. q is our memory and tested in the callback to see if we keep it as it is or replace it with the result of our calculation. After inner reduce finishes a complete round it will return the q to p and the same mechanism will run again until we finish with all items of the array that's invoking .withEachOther.
cb = (p1,p2,q) => {var h = Math.hypot(p1[0]-p2[0],p1[1]-p2[1]);
return h < q.d ? {d:h,p1:p1,p2:p2} : q}
The callback is special to this problem. It will receive two points (each with x and y coordinates) Will calculate the distance between them and will compare it with the previously made calculation. If it's smaller it will replace q by returning this new value; if not it will return q as it is.
I have a ActiveX object which I want to use in the browser (javascript).
There is a function I want to call. Its prototype is:
function TOPOSFiscalPrinter.DirectIO(Command: Integer; var pData: Integer;
var pString: WideString): Integer;
So, the function returns three values: result code, pData and pString;
In javascript the function does not update the variables pData and pString;
function test()
{
var d=1, s="DIRECIO:";
var code = opos.DirectIO(1024, d, s);
alert(d); alert(s);
}
Variables d and s are not updated. They must be d=0 and s="ED123456";
How to read data from function which returns more than one value in javascript?
EDIT
Apparently, Javascript always passes parameters by value, never by reference.
Is there anything I can do to pass values by reference in Javascript, or
I will have to change my design to only rely on parameters passed by
value and on return values.
Primitive types, primarily strings/numbers/booleans are passed by value for efficiency purposes. Objects such as functions, objects, arrays and the like are passed by reference. You can create an object and pass it, eg { d:1, s:'directo' } and then change the values because you're passing a reference.
There is no support for output parameter in JavaScript. Pack what you want to return in an automation object, assign values to its properties and return it, or if your return value is already occupied, create a class that has properties you can assign to in your ActiveX and add a parameter whose type is the class. In your ActiveX you can use IDispatch/Ex to get/set the properties.
Primitives like int's or float's are always passed by value for performance reasons, but you can just wrap them into e.g. a Float32Array with just one element:
a = new Float32Array([123])
a[0]; // == 123
function ChangeA(a) {
a[0] = 333;
}
ChangeA(a)
a[0]; // == 333
Make a global variable or object. Or if you're worried about other funcs accessing and changing the variables then make a singleton. The other option is to return an object. Such as like this
function TOPOSFiscalPrinter.DirectIO(Command: Integer; var pData: Integer;
var pString: WideString): Integer;
function TOPOSFiscalPrinter.DirectIO(Command, pData, pString){
....
var pObj = {
d: 0,
s: '',
code: ''
}
pObj.d = pDataAltertedValue;
pObj.s = pStringAltertedValue;
pObj.code = code;
return pObj;
}
function test()
{
var d=1, s="DIRECIO:";
var r = opos.DirectIO(1024, d, s);
code = r.code;
d = r.d;
s = r.s;
alert(d); alert(s);
}
this.String = {
Get : function (val) {
return function() {
return val;
}
}
};
What is the ':' doing?
this.String = {} specifies an object. Get is a property of that object. In javascript, object properties and their values are separated by a colon ':'.
So, per the example, you would call the function like this
this.String.Get('some string');
More examples:
var foo = {
bar : 'foobar',
other : {
a : 'wowza'
}
}
alert(foo.bar); //alerts 'foobar'
alert(foo.other.a) //alerts 'wowza'
Others have already explained what this code does. It creates an object (called this.String) that contains a single function (called Get). I'd like to explain when you could use this function.
This function can be useful in cases where you need a higher order function (that is a function that expects another function as its argument).
Say you have a function that does something to each element of an Array, lets call it map. You could use this function like so:
function inc (x)
{
return x + 1;
}
var arr = [1, 2, 3];
var newArr = arr.map(inc);
What the map function will do, is create a new array containing the values [2, 3, 4]. It will do this by calling the function inc with each element of the array.
Now, if you use this method a lot, you might continuously be calling map with all sorts of arguments:
arr.map(inc); // to increase each element
arr.map(even); // to create a list of booleans (even or odd)
arr.map(toString); // to create a list of strings
If for some reason you'd want to replace the entire array with the same string (but keeping the array of the same size), you could call it like so:
arr.map(this.String.Get("my String"));
This will create a new array of the same size as arr, but just containing the string "my String" over and over again.
Note that in some languages, this function is predefined and called const or constant (since it will always return the same value, each time you call it, no matter what its arguments are).
Now, if you think that this example isn't very useful, I would agree with you. But there are cases, when programming with higher order functions, when this technique is used.
For example, it can be useful if you have a tree you want to 'clear' of its values but keep the structure of the tree. You could do tree.map(this.String.Get("default value")) and get a whole new tree is created that has the exact same shape as the original, but none of its values.
It assigns an object that has a property "Get" to this.String. "Get" is assigned an anonymous function, which will return a function that just returns the argument that was given to the first returning function. Sounds strange, but here is how it can be used:
var ten = this.String["Get"](10)();
ten will then contain a 10. Instead, you could have written the equivalent
var ten = this.String.Get(10)();
// saving the returned function can have more use:
var generatingFunction = this.String.Get("something");
alert(generatingFunction()); // displays "something"
That is, : just assigns some value to a property.
This answer may be a bit superflous since Tom's is a good answer but just to boil it down and be complete:-
this.String = {};
Adds an object to the current object with the property name of String.
var fn = function(val) {
return function() { return(val); }
}
Returns a function from a closure which in turn returns the parameter used in creating the closure. Hence:-
var fnInner = fn("Hello World!");
alert(fnInner()); // Displays Hello World!
In combination then:-
this.String = { Get: function(val) {
return function() { return(val); }
}
Adds an object to the current object with the property name of String that has a method called Get that returns a function from a closure which in turn returns the parameter used in creating the closure.
var fnInner = this.String.Get("Yasso!");
alert(fnInner()); //displays Yasso!