Instantiation of Array vs. Objects in Javascript. When is an array an object and when does it get the methods of an array?

Question

I have some experience in C/C++/PIC assembly and VHDL, but am completely lost with javascript. I'm building a single page application in React, but this question is more to better my understanding than to solve a problem (as I already found my problem).

My question is, in Javascript, when is a variable an array and when is it an object? How do I tell the difference? (Given that 'typeof' always says object).

In case it ever helps someone, my initial problem was that in my state, I had an array of objects and I needed the length. I tried to get it with Array.length() but it should have been Array.length. In the 30 minutes I wasted before I figured this out, I developed more questions.

This was my constructor:

constructor(props, context) {
        super(props, context);

        this.state = {
            activeItem: 'home',
            currentSections: [ { key: 'Home', content: 'Home', link: true } ]
        };

        this.handleItemClick = this.handleItemClick.bind(this);
        this.handleTabChange = this.handleTabChange.bind(this);
    }

For context, I was working on building a breadcrumb trail for the application. In order to determine whether I needed to pop the last element of the array prior to adding a new one, I needed the length of the currentSections array.

handleTabChange = (e, data) => {

        let newSections = [];

        newSections = this.state.currentSections;
        if (newSections.length() > 2) {
            newSections.pop();
        }

        let newSection = {
            key: data.panes[data.activeIndex].name,
            content: data.panes[data.activeIndex].menuItem,
            link: true
        };
        newSections.push(newSection);
                this.setState({currentSections: newSections});

    };

This code produces the error: Uncaught TypeError: newSections.length is not a function

In case you're reading this because you're having a similar problem, the problem was that newSections.length() should be newSections.length. I hate myself. Before I figured that out though, I had thought for some reason that my array in state currentSections was not actually an array. Which led me to my question, when is an array an array in Javascript? Do I misunderstand what 'typeof' returns?

let newSections = [];
console.log(typeof newSections); //object
newSections = this.state.currentSections;
console.log(typeof newSections); //object
let newSections = [1,2,3];
console.log(typeof newSections); //object

I get that an array is an object, but is there a way to tell whether a variable is being treated as an array vs. a plain object? I couldn't find anything discussing this, but it may be because I don't what terms to search for.

Answer 1

Difference between Objects & Arrays

Despite just being objects under the hood, arrays behave very differently from regular objects. The reason is the Array.prototype object, which has all the Array specific methods. Every new array inherits these extra methods from Array.prototype.

Key thing to note is that the value of the prototype property of Array.prototype is Object.prototype. This means two things:

1. Arrays are just objects but with some extra methods.
2. There is nothing an object can do that an array can’t.

Read: https://www.frontendmayhem.com/javascript-arrays-objects/