Is it safe to pass 'arguments' to 'apply()' - javascript

Suppose I have the following code (completely useless, I know)
function add( a, b, c, d ) {
alert(a+b+c+d);
}
function proxy() {
add.apply(window, arguments);
}
proxy(1,2,3,4);
Basically, we know that apply expects an array as the second parameter, but we also know that arguments is not a proper array. The code works as expected, so is it safe to say that I can pass any array-like object as the second parameter in apply()?
The following will also work (in Chrome at least):
function proxy() {
add.apply(window, {
0: arguments[0],
1: arguments[1],
2: arguments[2],
3: arguments[3],
length: 4
});
}
Update: It seems that my second code block fails in IE<9 while the first one (passing arguments) works.
The error is Array or arguments object expected, so we shall conclude that it's always safe to pass arguments, while it's not safe to pass an array-like object in oldIE.

From definition of Function.prototype.apply in MDN:
fun.apply(thisArg[, argsArray])
You can also use arguments for the argsArray parameter. arguments is a
local variable of a function. It can be used for all unspecified
arguments of the called object. Thus, you do not have to know the
arguments of the called object when you use the apply method. You can
use arguments to pass all the arguments to the called object. The
called object is then responsible for handling the arguments.
REF: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply
As the second argument apply accepts "an array like object, specifying the arguments with which function should be called". To my understanding, this array-like object should have the length property for internal iteration, and numerically defined properties (zero-indexed) to access the values.
And the same is confirmed my the spec: http://www.ecma-international.org/ecma-262/5.1/#sec-15.3.4.3, as was kindly pointed out by #Pointy.

Assuming ECMAScript 5.1: Yes. As per ECMA-262, 10.6, the arguments object has the length and index properties that 15.3.4.3 (Function.prototype.apply) requires.

MDN can only speak for Mozilla implementations. The actual spec to which all implementations should comply says the following:
15.3.4.3 Function.prototype.apply (thisArg, argArray)
When the apply method is called on an object func with arguments thisArg and
argArray, the following steps are taken:
1. If IsCallable(func) is false, then throw a TypeError exception.
2. If argArray is null or undefined, then
Return the result of calling the [[Call]] internal method of func,
providing thisArg as the this value and an empty list of arguments.
3. If Type(argArray) is not Object, then throw a TypeError exception.
4. Let len be the result of calling the [[Get]] internal method of argArray
with argument "length".
5. If len is null or undefined, then throw a TypeError exception.
6. Let n be ToUint32(len).
7. If n is not equal to ToNumber(len), then throw a TypeError exception.
8. Let argList be an empty List.
9. Let index be 0.
10. Repeat while index < n
a. Let indexName be ToString(index).
b. Let nextArg be the result of calling the [[Get]] internal method of
argArray with indexName as the argument.
c. Append nextArg as the last element of argList.
d. Set index to index + 1.
11. Return the result of calling the [[Call]] internal method of func,
providing thisArg as the this value and argList as the list of arguments.
The length property of the apply method is 2.
NOTE The thisArg value is passed without modification as the this value. This
is a change from Edition 3, where an undefined or null thisArg is replaced
with the global object and ToObject is applied to all other values and that
result is passed as the this value.
It seems that property length and numeric index values are the only prerequisites.

Related

When using bind() on a Javascript number, what does the console.log() output represent?

I came across a tutorial on bind() and the output is [Number: 1]. Why is the number represented like this when logged as the context of the bind function?
const func = function() {
console.log(this)
}.bind(1);
func();
Thanks!
Bind sets the "this" property to whatever the argument is that it is passed. In this case, since 1 is a primitive it is wrapped in the Number object (this is how JS handles primitives being used as objects) so the this context is the Number object containing 1.
The first parameter of bind is the target to bind to the function.
In this case a number literal is supplied.
Internally, bind boxes the number literal into a Number object, equivalent to Number(1).
This object is then printed to the console.
Where, internally, bind performs the boxing, I am unsure.
In the spec the operation BoundFunctionCreate assigns the new target to the [[BoundThis]] internal slot.
9.4.1.3 BoundFunctionCreate ( targetFunction, boundThis, boundArgs )
The abstract operation BoundFunctionCreate with arguments targetFunction, boundThis and boundArgs is used to specify the creation of new Bound Function exotic objects. It performs the following steps:
Assert: Type(targetFunction) is Object.
Let proto be ? targetFunction.[GetPrototypeOf].
Let obj be a newly created object.
Set obj's essential internal methods to the default ordinary object definitions specified in 9.1.
Set obj.[[Call]] as described in 9.4.1.1.
If IsConstructor(targetFunction) is true, then
Set obj.[[Construct]] as described in 9.4.1.2.
Set obj.[[Prototype]] to proto.
Set obj.[[Extensible]] to true.
Set obj.[[BoundTargetFunction]] to targetFunction.
Set obj.[[BoundThis]] to boundThis.
Set obj.[[BoundArguments]] to boundArgs.
Return obj.

Changing JavaScript function's parameter value using arguments array not working

I am learning JavaScript and am pretty confused about the arguments property array.
I have a function that takes a single argument and returns it. When I pass the parameter and reassign it using arguments[0] = value, it's updating the value.
function a(b) {
arguments[0] = 2;
return b;
}
console.log(a(1)); //returns 2
But when I call the same function with no parameters it returns undefined.
function a(b) {
arguments[0] = 2;
return b;
}
console.log(a()); //returns undefined
But even if I pass undefined, the value will update as well.
function a(b) {
arguments[0] = 2;
return b;
}
console.log(a(undefined)); //returns 2
I thought that if you do not pass a parameter to a JavaScript function, it automatically creates it and assigns the value to undefined and after updating it should reflect the updated value, right?
Also a() and a(undefined) are the same thing, right?
Assigning to arguments indicies will only change the associated argument value (let's call it the n-th argument) if the function was called with at least n arguments. The arguments object's numeric-indexed properties are essentially setters (and getters):
http://es5.github.io/#x10.6
Italics in the below are my comments on how the process relates to the question:
(Let) args (be) the actual arguments passed to the [[Call]] internal method
Let len be the number of elements in args.
Let indx = len - 1.
Repeat while indx >= 0, (so, the below loop will not run when no arguments are passed to the function:)
(assign to the arguments object being created, here called map:)
Add name as an element of the list mappedNames.
Let g be the result of calling the MakeArgGetter abstract operation with arguments name and env.
Let p be the result of calling the MakeArgSetter abstract operation with arguments name and env.
Call the [[DefineOwnProperty]] internal method of map passing ToString(indx), the Property Descriptor {[[Set]]: p, [[Get]]: g, [[Configurable]]: true}, and false as arguments.
So, if the function is invoked with no arguments, there will not be a setter on arguments[0], so reassigning it won't change the parameter at index 0.
The same sort of thing occurs for other indicies as well - if you invoke a function with 1 parameter, but the function accepts two parameters, assigning to arguments[1] will not change the second parameter, because arguments[1] does not have a setter:
function fn(a, b) {
arguments[1] = 'bar';
console.log(b);
}
fn('foo');
So
a() and a(undefined) are the same thing right?
is not the case, because the second results in an arguments object with a setter and a getter on index 0, while the first doesn't.
Note that this odd interaction between the arguments and the function parameters is only present in sloppy mode. In strict mode, changes to arguments won't have any effect on the value an individual argument identifier contains:
'use strict';
function a(b) {
arguments[0] = 2;
return b;
}
console.log(a(1)); //returns 1
ECMA 262 9.0 2018 describes this behaviour in 9.4.4 Arguments Exotic Objects with
NOTE 1:
The integer-indexed data properties of an arguments exotic object whose numeric name values are less than the number of formal parameters of the corresponding function object initially share their values with the corresponding argument bindings in the function's execution context. This means that changing the property changes the corresponding value of the argument binding and vice-versa. This correspondence is broken if such a property is deleted and then redefined or if the property is changed into an accessor property. If the arguments object is an ordinary object, the values of its properties are simply a copy of the arguments passed to the function and there is no dynamic linkage between the property values and the formal parameter values.
In short,
if in 'sloppy mode', then all arguments are mapped to their named variables, if the length correspond to the given parameter, or
if in 'strict mode', then the binding is lost after handing over the arguments.
This is only readable in an older version of ECMA 262 7.0 2016. It describes this behaviour in 9.4.4 Arguments Exotic Objects with
Note 1:
For non-strict functions the integer indexed data properties of an arguments object whose numeric name values are less than the number of formal parameters of the corresponding function object initially share their values with the corresponding argument bindings in the function's execution context. This means that changing the property changes the corresponding value of the argument binding and vice-versa. This correspondence is broken if such a property is deleted and then redefined or if the property is changed into an accessor property. For strict mode functions, the values of the arguments object's properties are simply a copy of the arguments passed to the function and there is no dynamic linkage between the property values and the formal parameter values.
it's because arguments it's not like a Array, it's a object with integer indexed data keys, and property length, And if length equal zero it's mean you don't have a arguments
function a(b) {
arguments[0] = 2;
console.log(arguments.length)
return b;
}
a(1); // length 1 returns 2
console.log(a()); // length 0 returns undefined
When you are not providing any parameter then arguments array has length equal to 0. Then you are trying to set the non existing element of array to 2 which causes returning undefined
You can simply test this with this snippet:
function a(b){
alert(arguments.length) // It will prompt 0 when calling a() and 1 when calling a(undefined)
arguments[0] = 2;
return b;
}
This is the undefined value definition from javascript spec :
primitive value used when a variable has not been assigned a value.
so if you do not specify the function return type it will return undefined.
so a() and a(undefined) it is not same thing. returning undefined is based on return type is defined or not.
for more clarification similar_problem
My understanding is that the arguments object only tracks what is passed into the function. Since you've not initially passed anything, b is not bound and at that point arguments is not 'tracking' b. Next, you assign a value to the initialised but empty Array-like object arguments and finally return b, which is undefined.
To delve into this further:
If a non-strict function does not contain rest, default, or destructured parameters, then the values in the arguments object do change in sync with the values of the argument variables. See the code below:
function func(a) {
arguments[0] = 99; // updating arguments[0] also updates a
console.log(a);
}
func(10); // 99
and
function func(a) {
a = 99; // updating a also updates arguments[0]
console.log(arguments[0]);
}
func(10); // 99
When a non-strict function does contain rest, default, or destructured parameters, then the values in the arguments object do not track the values of the arguments. Instead, they reflect the arguments provided when the function was called:
function func(a = 55) {
arguments[0] = 99; // updating arguments[0] does not also update a
console.log(a);
}
func(10); // 10
and
function func(a = 55) {
a = 99; // updating a does not also update arguments[0]
console.log(arguments[0]);
}
func(10); // 10
and
// An untracked default parameter
function func(a = 55) {
console.log(arguments[0]);
}
func(); // undefined
Source: MDN Web docs

What happens when you instantiate a new Object(1) with a parameter in JavaScript?

What happens when you call:
new Object(1)
When I tried it out, it returned:
[Number: 1]
I want to understand what is going on there. Any info would be appreciated.
You can look at the spec:
When new Object(arg) is invoked, we are essentially calling ToObject(arg).
ToObject is defined as
The abstract operation ToObject converts argument to a value of type Object according to Table 13
And the table says:
Number: Return a new Number object whose [[NumberData]] internal slot is set to the value of argument. See 20.1 for a description of Number objects.
So it's the same as calling new Number(1), i.e. it creates a number object.
The primitive data types String, Number and Boolean have equivalent object values that can be created by invoking the equivalent constructor functions. But that is not a common thing to do since object values behave differently than primitive values, i.e. a number primitive will behave different than a number object in certain cases.
Example:
Boolean(0); // false
Boolean(new Number(0)); // true
Here is the documentation for the default constuctor:
http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.2.1
When the Object constructor is called with no arguments or with one
argument value, the following steps are taken:
If value is supplied, then
If Type(value) is Object, then
If the value is a native ECMAScript object, do not create a new object but simply return value.
If the value is a host object, then actions are taken and a result is returned in an implementation-dependent manner that
may depend on the host object.
If Type(value) is String, return ToObject(value).
If Type(value) is Boolean, return ToObject(value).
If Type(value) is Number, return ToObject(value).
Assert: The argument value was not supplied or its type was Null or Undefined.
Let obj be a newly created native ECMAScript object.
Set the [[Prototype]] internal property of obj to the standard built-in Object prototype object (15.2.4).
Set the [[Class]] internal property of obj to "Object". Set the [[Extensible]] internal property of obj to true.
Set all the internal methods of obj as specified in 8.12.
Return obj.

Javascript Array map "appears" to execute callback on missing elements

Map doesn't get executed on the following array.
Array(100).map(function(e,i){return i+1;});
console.log(Array(100).map(function(e, i) {
return i + 1;
}));
I assume because all elements of the array are 'missing': https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
However, map gets executed on all elements in the following:
Array.apply(null,Array(100)).map(function(e,i){return i+1;});
console.log(Array.apply(null, Array(100)).map(function(e, i) {
return i + 1;
}));
How is it in the second example, the elements of the array change from 'missing' to 'undefined'? (at least I assume that is what is happening.)
In your call
Array.apply(null,Array(100)).map(function(e,i){return i+1;});
the Array function is called with 100 arguments (in fact, the length of Array(100) is 100). But when accessing the arguments, all of them are undefined.
If you would call some arbitrary function func(a, b) like this:
func.apply(null, Array(2))
The parameters a and b will be undefined and the length of arguments will be 2.
map() iterates over the elements in the array but there are actually no elements! However, the array has length 100. This is weird but this is the way arrays behave in JS. If you use the array as an argument list for a function (via .apply()), the arguments are accessed and become undefined. The original array does not change, but accessing an index in the empty array yields undefined.
Let's see how MDN defines "missing":
It is not called for missing elements of the array (that is, indexes
that have never been set, which have been deleted or which have never
been assigned a value).
Internally, this is done with [[HasProperty]]. You can use the in operator to check [[HasProperty]] manually.
And now see the difference:
var arr = Array(100);
'0' in arr; // false
var arr = Array.apply(null, Array(100));
'0' in arr; // true
The main question is "Why Array(100) is an empty array with length equal 100 and Array.apply(null, Array(100)) is an array with 100 empty values?"
To answer that we need to go to the standard. Precisely, Standard ECMA-262, sections 22.1.1.2, 22.1.1.3, 19.2.3.1 and 7.3.17. I'll quote it here:
22.1.1.2 Array (len)
This description applies if and only if the Array constructor is
called with exactly one argument.
1. Let numberOfArgs be the number of arguments passed to this function call.
2. Assert: numberOfArgs = 1.
3. If NewTarget is undefined, let newTarget be the active function object, else let newTarget be NewTarget.
4. Let proto be GetPrototypeFromConstructor(newTarget, "%ArrayPrototype%").
5. ReturnIfAbrupt(proto).
6. Let array be ArrayCreate(0, proto).
7. If Type(len) is not Number, then
Let defineStatus be CreateDataProperty(array, "0", len).
Assert: defineStatus is true.
Let intLen be 1.
8. Else,
Let intLen be ToUint32(len).
If intLen ≠ len, throw a RangeError exception.
9. Let setStatus be Set(array, "length", intLen, true).
10. Assert: setStatus is not an abrupt completion.
11. Return array.
22.1.1.3 Array (...items )
This description applies if and only if the Array constructor is
called with at least two arguments.
When the Array function is called the following steps are taken:
1. Let numberOfArgs be the number of arguments passed to this function call.
2. Assert: numberOfArgs ≥ 2.
3. If NewTarget is undefined, let newTarget be the active function object, else let newTarget be NewTarget.
4. Let proto be GetPrototypeFromConstructor(newTarget, "%ArrayPrototype%").
5. ReturnIfAbrupt(proto).
6. Let array be ArrayCreate(numberOfArgs, proto).
7. ReturnIfAbrupt(array).
8. Let k be 0.
9. Let items be a zero-origined List containing the argument items in order.
10. Repeat, while k < numberOfArgs
Let Pk be ToString(k).
Let itemK be items[k].
Let defineStatus be CreateDataProperty(array, Pk, itemK).
Assert: defineStatus is true.
Increase k by 1.
11. Assert: the value of array’s length property is numberOfArgs.
12. Return array.
19.2.3.1 Function.prototype.apply ( thisArg, argArray )
When the apply method is called on an object func with arguments
thisArg and argArray, the following steps are taken:
1. If IsCallable(func) is false, throw a TypeError exception.
2. If argArray is null or undefined, then
Return Call(func, thisArg).
3. Let argList be CreateListFromArrayLike(argArray).
4. ReturnIfAbrupt(argList ).
5. Perform PrepareForTailCall().
6. Return Call(func, thisArg, argList).
7.3.17 CreateListFromArrayLike (obj [, elementTypes] )
The abstract operation CreateListFromArrayLike is used to create a
List value whose elements are provided by the indexed properties of an
array-like object, obj. The optional argument elementTypes is a List
containing the names of ECMAScript Language Types that are allowed for
element values of the List that is created. This abstract operation
performs the following steps:
1. ReturnIfAbrupt(obj).
2. If elementTypes was not passed, let elementTypes be (Undefined, Null, Boolean, String, Symbol, Number, Object).
3. If Type(obj) is not Object, throw a TypeError exception.
4. Let len be ToLength(Get(obj, "length")).
5. ReturnIfAbrupt(len).
6. Let list be an empty List.
7. Let index be 0.
8. Repeat while index < len
Let indexName be ToString(index).
Let next be Get(obj, indexName).
ReturnIfAbrupt(next).
If Type(next) is not an element of elementTypes, throw a TypeError exception.
Append next as the last element of list.
Set index to index + 1.
9. Return list.
As you can see, there is plenty of work going here. In short, when Array(100) executes it produces an array-like object with property length equal to 100, but there is no objects inside that Array. But, if you'll try to get any, it will return undefined for any indexes. Because of that, when CreateListFromArrayLike executes, it gets all 100 undefined values from array-like object provided and returns actual List with 100 undefined values in it, which goes to the Array(...items) function.

Function.call taking array-like object , doesnt require the first parameter?

So, I couldn t find out how Function.call doesnt have to take the first argument as an object as I couldn t find such an information anywhere. Although I have seen hundreds of usage of Function.call like the next line of code, taking only this array-like object, NOT REQUIRING THE FIRST PARAMETER AS AN OBJECT, SINCE IT TAKES ARGUMENTS OF FUNCTION WHICH IS AN ARRAY-LIKE OBJECT. It works of course.
argsSliced = Array.prototype.slice.call((function(){return arguments;})(1,2,3,4))
Although next lines of codes behaves as we expect, requiring the first parameter to be an object to set this of function to that object and requires parameters to pass to function after that object.
var a = function(){return arguments[0] + arguments[1] ; }
console.log(a.call(1,2)); // returns NaN
console.log(a.call(null,1,2)); // behaves as we expect, returns 3
So my question, what is the situation with the array-like object ? How does it work with the Function.call as it doesn t give it an object as a first parameter but only gives an array-like object.
This function, when called, returns an array-like Arguments object with the arguments
var f = function(){return arguments;};
Then, when you call it with arguments 1,2,3 and 4,
f(1,2,3,4) // Arguments [1,2,3,4]
Then, you call Function.prototype.call on Array.prototype.slice, passing that Arguments object as the argument.
So Function.prototype.call will call Array.prototype.slice with the this value set to the Arguments object (instead of Array.prototype), and no arguments.
When Array.prototype.slice is called on an array-like object, it builds a real array from that object. So you get
Array.prototype.slice.call(f(1,2,3,4)); // Array [1,2,3,4]
Note there are better ways to achieve this:
Array.of(1,2,3,4)
Array(1,2,3,4)
[1,2,3,4]
MDN for call() explains it clearly: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
The value of this provided for the call to function. Note that this may not
be the actual value seen by the method: if the method is a function in
non-strict mode code, null and undefined will be replaced with the
global object and primitive values will be converted to objects.
var a = function(){return arguments[0] + arguments[1] ; }
console.log(a.call(1,2));
arguments[1] will be undefined ,and 2 will be arguments[0] because 1 will be boxed to an object.
remember f.call(ob,4); is like saying ob.f(4)

Categories

Resources