Extending array fails in JavaScript ES6

Question

I've some problems to extend an JS array. These are my classes:

// ArrayList.js
export default class ArrayList extends Array {
  clear() {
    this.splice(0, this.length);
  }
}

// MyItem.js
export default class MyItem {
  constructor() {
    this._id = 0;
  }

  getID() {
    return this._id;
  }

  setID(value) {
    if (typeof value === 'number') {
      this._id = value;
    }
  }
}

// Test.js
import ArrayList from './ArrayList';
import MyItem from './MyItem';

let list = new ArrayList();

let item1 = new MyItem();
item1.setID(1);
list.push(item1);

let item2 = new MyItem();
item2.setID(2);
list.push(item2);

If I now execute:

list.forEach(function(item) {
  console.log(item.getID());
});

Everything works perfect but if I try to call my custom method I run into errors:

list.clear();
console.log(list.length);

The exception is:

TypeError: list.clear is not a function

+++ UPDATE +++

I use the test script with node.js:

node start.js

That's my start.js:

require('babel-register')({
    presets: [ 'env' ]
})
module.exports = require('./Test.js')

And then every class is stored in a separate JS file.

Where/How do you call `clear()`? After a quick attempt, I have no problems neither in the browser nor in node. — sjahan, Apr 05 '19 at 15:43
Are you using Babel? Extending built-in classes doesn't work with Babel. — Felix Kling, Apr 05 '19 at 16:02
Ah ok. But how can I use imports without Babel? I read that this is necessary? — altralaser, Apr 05 '19 at 18:02
@altralaser: You can enable only the features you need, e.g. module conversion. `preset-env` will only enable features not supported by the target environment. https://babeljs.io/docs/en/babel-preset-env — Felix Kling, Apr 06 '19 at 04:31

Kamil Naja · Accepted Answer · 2019-04-05T18:34:57.960

0

I don't like your import end exports. Try modules (https://nodejs.org/api/modules.html) and this should work without Babel in Node.

module.exports =  class MyItem {
   // class content 
}

module.exports =  class ArrayList extends Array {
    clear() {
        this.splice(0, this.length);
    }
}

// in the test file
const ArrayList = require('./ArrayList');
const MyItem = require('./MyItem');

edited Apr 05 '19 at 18:34

answered Apr 05 '19 at 18:28

Kamil Naja

6,267
6
33
47

Your solution works, so I accepted it but it not exactly match the import use case. – altralaser Apr 05 '19 at 19:01
If you want use imports, like in your example code, you must setup correctly babel. Here https://www.robinwieruch.de/minimal-node-js-babel-setup/ you can find good example how to do this. – Kamil Naja Apr 05 '19 at 19:12
But you wrote that using Babel (which I already configured) did not let you inherit any built-in class. That seems to be the typical chicken or the egg causality dilemma. I suspect the problem can only be solved by choosing the code you posted above or building a wrapper class for the array. – altralaser Apr 05 '19 at 21:53
I get your point. If you want new method in "array" class, maybe you can extends prototype of this class like here - https://stackoverflow.com/questions/948358/adding-custom-functions-into-array-prototype. In my opinion, better way is create some utils methods. For clearing data from array, method can get array as parameter end returns cleared array. – Kamil Naja Apr 06 '19 at 08:38

Extending array fails in JavaScript ES6

1 Answers1