Function to Array Prototype

Question

I did a sort function that passing an array as a parameter return a new array with the index positions sorted by the name of the item.

P.E: if the input is ["dog", "cat", "tiger"] the expected output will be [1, 0, 2]

Without Prototype method

let sortIndexes = (a) => {
    var aClone = a.slice(0);
    return a.sort().map(x => aClone.indexOf(x));
}

let animals = ["dog", "cat", "tiger"];
var result = sortIndexes(animals); 
console.log(result) // [1, 0, 2]

Well, this code works, but I think is better do the same adding an Array Prototype method. And I try it...

With Prototype

Array.prototype.sortIndexes = () => {
    var aClone = this.slice(0); //Console Error in this line
    return this.sort().map(x => aClone.indexOf(x));
}

let animals = ["dog", "cat", "tiger"];
var result = animals.sortIndexes();

I expected the same result that without using prototype, but this error console occurs:

Cannot read property 'slice' of undefined

How can do this using Array Prototype?

Thanks!

Please read Arrow function vs function declaration / expressions: Are they equivalent / exchangeable? — Felix Kling
– Felix Kling, Commented Mar 25, 2016 at 18:53

Felix Kling · Accepted Answer · 2016-03-25 18:53:43Z

4

That is the beauty of Arrow functions,

Array.prototype.sortIndexes = function(){
    var aClone = this.slice(0); //Console Error in this line
    return this.sort().map(x => aClone.indexOf(x));
}

let animals = ["dog", "cat", "tiger"];
var result = animals.sortIndexes(); 

console.log(result); // [1, 0, 2]

Arrow function will bind the lexical scope into it automatically. Here in your case the lexical scope is window. So window.slice is undefined. Hence it is throwing error.

And the main rule is that you cannot force the scope of an arrow function with another one by using bind/call/etc.. So we have to be very careful while deciding when to use arrow functions.

edited Mar 25, 2016 at 18:53

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

answered Mar 25, 2016 at 18:25

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Dmitri Pavlutin Over a year ago

Cannot read property 'slice' of undefined means that the context this is undefined (but not window as you mention). Probably strict mode is enabled.

Dmitri Pavlutin Over a year ago

And it's not the problem in lexical scope. It's the context of the function invocation: this.

Felix Kling Over a year ago

Scope and this are different things.

Rajaprabhu Aravindasamy Over a year ago

@DmitriPavlutin Arrow function decides the this based on which scope it is getting executed.

Felix Kling Over a year ago

Arrow functions don't decide anything. They simply resolve this lexically. This also means that the scope is determined when / where the function is defined, not where/when it is executed.

|

Scott Marcus · Accepted Answer · 2016-03-25 19:44:44Z

1

Arrow functions don't bind this to the element being iterated, instead this simply remains bound to the enclosing scope: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

edited Mar 25, 2016 at 19:44

answered Mar 25, 2016 at 18:27

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

8 Comments

Felix Kling Over a year ago

Nit: The don't bind this at all, they simply resolve this lexically, like any other variable.

Scott Marcus Over a year ago

@FelixKling this isn't a variable - it is a keyword that is bound to an object reference and that binding cannot be changed (unless a containing function is called with call, apply, bind, forEach, map, etc.). Arrow functions use the lexical binding of this. The binding process for this takes place when a function's Activation Object is created.

Felix Kling Over a year ago

Sure. All I am saying is that arrow functions are not binding this in the sense how .bind binds this. "The binding process for this takes place when a function's Activation Object is created." Activation objects don't exist anymore in ES6. this is not bound in arrow functions: ecma-international.org/ecma-262/6.0/…: "A function Environment Record is a declarative Environment Record that is used to represent the top-level scope of a function and, if the function is not an ArrowFunction, provides a this binding. "

Scott Marcus Over a year ago

@FelixKling True, but then again, I didn't say they did bind as in .bind(), but they do actually bind.

Felix Kling Over a year ago

Well, I hope my quote from the spec convinces you otherwise. I agree that this is not resolved exactly like other variables, but it is not bound. The relevant part of the spec is ecma-international.org/ecma-262/6.0/… and ecma-international.org/ecma-262/6.0/… .

|

Collectives™ on Stack Overflow

Function to Array Prototype

Without Prototype method

With Prototype

How can do this using Array Prototype?

2 Answers 2

10 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Without Prototype method

With Prototype

How can do this using Array Prototype?

2 Answers 2

10 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related