Javascript's array slice method can exhibit some unorthodox behavior

Question

Javascript's array slice method can exhibit some unorthodox behavior

Encountered a peculiar array anomaly when used within a class... Attempted to unravel the mystery, but couldn't quite grasp it. So here's what went down.

class weirdArray{
  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 obj=new weirdArray();
obj.fn();

It functions perfectly when attempting to access the entire array using this.array.slice(0,this.length). It returns the complete array. However, upon trying to retrieve an array without the last element with

this.array.slice(0,this.length-1)

, instead of the expected output, an empty array is returned. This issue seems to only arise within a method of an object. The expected behavior is exhibited under normal circumstances.

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

Even after removing the bind method to test its impact on the behavior, the result remains constant...

Any insights as to why this phenomenon occurs?

javascript arrays oop methods slice

Answer 1

Answer №1

Your code is incorrect; you should use this.array.length - 1

It seems that this.length is undefined

Based on our discussion, it appears you are attempting to inherit from the DOM Array

Here is a way to properly inherit from Array:


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);

Answer 2

Your code is incorrect; you should use this.array.length - 1

It seems that this.length is undefined

Based on our discussion, it appears you are attempting to inherit from the DOM Array

Here is a way to properly inherit from Array:


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);

Answer 3

Answer №2

There seems to be an issue related to the 'this' keyword within the slice method. The problem arises when trying to access the length property of an object that is 'undefined'. As a result, subtracting 1 from undefined leads to NaN.

Your code can be simplified and rewritten as:

class example{
  constructor(){
    this.array=[0,2,3];
  }
  fn(){
   let length = this.array.length;
    console.log(this.array.slice(0, undefined)); // Output: undefined due to the absence of a defined length
    console.log(this.array.slice(0, NaN)); // Output: NaN because undefined - 1 equals NaN
  }
}
const instance=new example();
instance.fn();

To resolve this issue, consider using the following amended code:

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

Answer 4

There seems to be an issue related to the 'this' keyword within the slice method. The problem arises when trying to access the length property of an object that is 'undefined'. As a result, subtracting 1 from undefined leads to NaN.

Your code can be simplified and rewritten as:

class example{
  constructor(){
    this.array=[0,2,3];
  }
  fn(){
   let length = this.array.length;
    console.log(this.array.slice(0, undefined)); // Output: undefined due to the absence of a defined length
    console.log(this.array.slice(0, NaN)); // Output: NaN because undefined - 1 equals NaN
  }
}
const instance=new example();
instance.fn();

To resolve this issue, consider using the following amended code:

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

Javascript's array slice method can exhibit some unorthodox behavior

Answer №1

Answer №2

Similar questions

Guide to handling URL errors in a form using AngularJS

What is the process for connecting this to React ES6 getter and setter methods?

Error encountered in TypeScript Yarn application during download process: SyntaxError: Unforeseen symbol '.'

Error TS2345: The provided argument 'Observable<TodoInterface[]>' does not match the expected parameter type 'TodoInterface[]'

Ensure that the line above is shorter in length compared to the following line

Cordova triggers a 500 (Internal Server Error) when making an Ajax request

Tips for integrating a logo into router view animations

Error Encountered when Using JQuery AJAX: Unexpected Identifier Syntax Issue

Guidelines on extracting information from a POST request, evaluating it based on a specified criteria, and providing a corresponding feedback

Why does my Visual Studio Code always display "building" when I launch an extension?

What is the correct way to send a basic array through an AJAX call?

Develop a cutting-edge Angular application enhanced with Firebase authentication and integrated with Node.js and MongoDB

Is there a Rails 3 equivalent to $(document).ready() for ensuring that Highcharts loads correctly?

Fortran subroutine: Sending array size of Common block as parameter

Setting up npm packages for a Node application

Mastering the proper implementation of in_array with nested arrays

Ensure that an async function's result is resolved before rendering react routes

Leveraging 'fs' in conjunction with browserify

The arrangement of a JSON array can be modified by AngularJS' Ng-repeat functionality

Issue with Angular JS failing to populate HTML content following an HTTP request