weird behavior of array slice method on javascript

Question

I found a very weird behavior of array when it's used within a class... I've been trying to figure out what's going on, but I couldn't wrap my head around. So this is what happened.

class wtf{
  constructor(){
    this.array=[0,2,3];
    this.fn=this.fn.bind(this);
  }
  fn(){
    console.log(this.array.slice(0,this.length));// will print [0,2,3]
    console.log(this.array.slice(0,this.length-1));// will print an empty array
  }
}
const k=new wtf();
k.fn();

It works totally fine when I try to get the entire array using this.array.slice(0,this.length). It will give me the full array. But then when I try to use this.array.slice(0,this.length-1) to get an array not including the last element, it will give me an empty array instead of what I wanted. It seems it only happens when it's written within an object method. Because it works fine normally.

const array=[0,2,3];
console.log(array.slice(0,this.length-1)); // will print [0,2]

I tried to delete bind method to see if this is affecting the behavior, but it still gives me the same result...

Can someone explain why this is happening?

Dickens A S · Accepted Answer · 2020-04-02 03:32:25Z

1

you code is wrong, put this.array.length -1

this.length is undefined

From your conversation I found, you are trying to inherit DOM Array

Try to inherit Array like this

class MyArray extends Array {
   constructor(props){
    super();
    for(var i=0;i<arguments.length;i++) this.push(arguments[i]);
   }
}

const k=new MyArray(5,6,7,8);
console.log(k.length);

edited Apr 2, 2020 at 3:32

answered Apr 2, 2020 at 2:50

Dickens A S

4,0743 gold badges27 silver badges53 bronze badges

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

7 Comments

CS336 Over a year ago

yes, I know that the second parameter is not a length, but we can still use the length of an array to find the last index+1 of the array tho...

Dickens A S Over a year ago

no, f you pass 1, 3 --- 1 will be assumed as index, 3 will be assumed as position, I quoted the example in the answer

CS336 Over a year ago

my question was not about indexing... I know what your talking about. But my indexing is correct. array.slice(0,this.length) give me the full array because slice method is not inclusive of the second argument, and array.slice(0,this.length-1) give me array without the last element because it's not including item on last index. But my question is that it does not work as it should when it is used within the object method.

Dickens A S Over a year ago

got it, I give the answer now :)

CS336 Over a year ago

thanks for answering, and it works! But now I have one more question.. ` const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(0, this.length-2)); ` this one prints ['ant', 'bison', 'camel'], so what is "this" pointing at?... isn't "this" pointing at the array which called the method? and when I use it within an object, why is "this" pointing at the object that I created?

|

DevallaVamsi · Accepted Answer · 2020-04-02 03:16:40Z

the issue is with 'this' keyword inside the slice method. It is trying to find the length property on the object which is 'undefined'. Also undefined - 1 results in NaN

your code is the same as following code:

class wtf{
  constructor(){
    this.array=[0,2,3];
  }
  fn(){
   let length = this.array.length
    console.log(this.array.slice(0,undefined));// undefined because length is not defined on the object
    console.log(this.array.slice(0,NaN));// NaN because undefined-1 is NaN
  }
}
const k=new wtf();
k.fn();

Instead, Try this:

class wtf{
  constructor(){
    this.array=[0,2,3];
  }
  fn(){
   let length = this.array.length
    console.log(this.array.slice(0,length)); // logs [0,2,3]
    console.log(this.array.slice(0,length-1)); // logs [0,2]
  }
}
const k=new wtf();
k.fn();

Collectives™ on Stack Overflow

weird behavior of array slice method on javascript

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related