How do JavaScript arrays work under the hood?

Front-end and full-stack developers use JavaScript arrays every day. Most of them, however, haven’t done a deep dive to understand how JS arrays are implemented in native code.

Not doing this doesn’t mean you’re a bad developer. It’s entirely possible to use JavaScript effectively without digging in to understand how JS arrays are implemented. But taking a closer look can help you understand performance issues your might run into, so it’s a worthwhile exercise.

How exactly they are implemented depends on the specific JavaScript interpreter or VM you’re using. I’m going to use the V8 JavaScript engine (used by Chrme and Node.js) as an example. Other JavaScript engines, such as Mozilla’s SpiderMonkey and Microsoft’s Chakra will be similar but not identical.

JavaScript Arrays in V8

In V8, if your array only contains integers, it’ll be backed by a C++ array of integers. Typically, the backing array will be bigger than the number of integers it currently contains. If it contains a mixture of integers and floating point values or only floating point values, it’ll be backed by an array of doubles.

If the array contains only objects, or a mixture of numbers and objects, it’ll backed by an array of pointers. Even though JavaScript itself doesn’t have a concept of ‘integer’ or ‘double’ – it just sees them all as ‘number’, V8 keeps track and makes it so arrays are a bit faster and more memory efficient if you only put integers in them.

If you call push() when the backing array is full, it’ll allocate a new, bigger backing array, copy the existing elements over, and then add the new value you pushed. This is similar to the implementation of ArrayList in Java or vector in C++.

All of the above only is only sure to apply if your array is packed, and not sparse – i.e. you don’t have any gaps in the array. If you do something like

let abc = [1,2,3];
abc[100] = 50;

you now have a sparse array. If is not too spare, it’ll still be backed by an array, with empty array indices replaced with a ‘hole’ value. If you look at V8’s C++ array source (linked below), you’ll see calls to element->is_the_hole(i). If an array is very sparse, it’ll no longer be backed by an array in memory. Instead, it will be backed by a dictionary/hashtable, and it’ll take longer to both access elements and iterate through the array.

If you’re interested, you can read through V8’s array implementation in C++ here. You’ll notice that it often checks the following constants:

  • PACKED_SMI_ELEMENTS – a packed integer array
  • PACKED_DOUBLE_ELEMENTS – a packed double array
  • PACKED_ELEMENTS – a packed object array
  • HOLEY_SMI_ELEMENTS – a sparse integer array
  • HOLEY_DOUBLE_ELEMENTS – a sparse double array
  • HOLEY_ELEMENTS – a sparse object array
  • DICTIONARY_ELEMENTS – a very sparse array that is backed by a dictionary

And you’ll see that it always tries to do whatever will be fastest for the array it is operating on. Lots of builtin functions like push, pop, shift, unshift, and concat do different things depending on the array’s density and what kind of elements it contains.

Some other things to keep in mind: if you have an array that only contains integers, and you push a floating point number or other type into it, it will be ‘downgraded’ for the rest of its life, even if you purge the non integers from it.

Also keep in mind that none of these implementation details are guaranteed. A naive implementation of JavaScript’s Array object could be backed by a linked list, and it would still work the same way it does now. It would just be slower.

Actually, if you grab an early copy of the Mozilla source code from 20 years ago, you’ll find that arrays were backed by ordinary JS objects without much optimization, just some extra code to handle special cases like the `length` property.

Digging Deeper

If you’re interested in diving even deeper into V8’s internals, I suggest starting by reading through the source files I linked to above. If you’re not used to C++, understanding it will be a bit of a chore at first.

I recommend sticking with it, though. Learning and understanding a new language is always good – and every extra insight you gain into how JavaScript VMs run your code will make you a more effective JavaScript developer.

If you liked this, you might like these other articles I’ve written:
Using Web Components with React in 2019
An Angular Roadmap – The Past, Present, and Future of Angular

Advice for Freelance Web Developers

This post is based on a reply I wrote on /r/webdev. Someone decided it was worth giving Reddit gold to, so I figure it’s worth posting here and expanding on it a bit. 

Just to be clear, I’m not currently working as a freelance web dev, although  I’ve done it in the past. My advice here is based on my past experience, as well as conversations I’ve had over the years with freelance developers and people who hire freelance developers.

You might love it, or you might think I’m a complete idiot.

Here’s my advice, in question/answer format:

Should I call myself ‘freelance’?

Some others might disagree with me, but I’d advise against calling yourself ‘freelance’. Positioning matters, and by explicitly calling yourself a freelancer, you’ll be positioning yourself as a low-cost provider. That will tend to attract the kinds of clients you’d probably rather avoid.

No, this isn’t fair. And I suspect that some people will object to this advice for the same reason that some people object to Patrick McKenzie’s Don’t Call Yourself a Programmer. There’s nothing wrong with being a freelancer, just like there’s nothing wrong with being a programmer. 

But in the same way that many managers equate “programmer” with (in Patrick’s words) “anomalously high-cost peon who types some mumbo-jumbo into some other mumbo-jumbo”, many potential clients associate the word ‘freelancer’ with “cheap labour who is interchangable with every other web freelancer”. 

For this reason, using the word “freelance” to describe yourself is like shooting yourself in the foot before starting a 100 mile hike. You might still reach your destination, but you’re making it more painful than it needs to be. Not all potential clients are biased against freelancers, but enough of them are that it’s something you should think about.

What should I call myself, then?

You could just call yourself developer, or consultant. But I think you should go beyond just thinking about what to call yourself. If you’re going to be doing this full-time, for money, you’re going to want to incorporate. This is true for a whole bunch of reasons, but a big one is to limit liability.

If you’re a sole proprietor,  an irate customer can decide to sue you and completely wipe you out financially. If your business is incorporated, the upset client can sue your business. Usually, they can only go after the business’ assets, and not your personal assets. There are cases where this isn’t true, but in general you’re safer if you incorporate. I’m not a lawyer, though. You’ll probably want to talk to one if you plan on doing this full-time.

Beyond the legal aspects, incorporating also forces you to think of your freelance business as a *real business*. Clients won’t be hiring you personally – they’re going to be hiring your business, and the contracts that are signed are going to be between their business and your business.

And so your company’s branding and positioning are going to matter a lot more than what title you give yourself. You could be Founder, or President, Lead Solution Architect, or Chief Ninja – whatever you want, really, as long as people will take you seriously.

Even if you never *want* your business to grow bigger than just yourself, you’d still do well to treat it as a business from the start. Make it clear that clients are signing a contract with Awesome Sauce Labs Ltd., not John Smith, Freelance Web Developer. This alone will help position you in a way that attracts better clients, and will also help solve the problem of “what do I call myself?”.

Are freelance developers even a thing anymore with sites like Wix making it easy to people to make websites?

Freelance web developers are still a thing, but if developing straight up websites is all you do, you might find yourself getting squeezed by things like Wix and Squarespace. Still, don’t overestimate the tech aptitude of your target market.

There are lots of people who try to create a site with Wix and still end up with something terrible. You could literally people charge money to make a Wix or Squarespace website for them, and you’d still be providing them significant value.

Envision a successful small business with 5-10 employees. They’re likely already spending $10,000+ on wages every month, so paying you $1500-$2500 (or more) to make them a Wix site isn’t crazy for them. They’re paying you to do it so they don’t have to worry about it or think about it. Think in terms of the value you’re delivering instead of the tools you’re using or how long it takes you.

​There’s more money in developing custom web applications, and even more money in developing ‘cloud native’ custom web apps. As a start, if you can use and understand all of the bits of tech used in this course, you’ll be several cuts above generic freelance web developers and will be able to take on more lucrative projects.

How should I price my services?

Look into fixed pricing and value based pricing – if you’re able to figure how how much business value you’re delivering, it becomes easier to charge what you’re worth.

This also helps you avoid taking on clients who aren’t going to get any business value out of your work. It’ll also weed out those who just don’t know how to calculate the business value of what you deliver. These clients will be unhappy and try to get a discount no matter how little you’re charging them.

Jonathan Stark’s Hourly Nilling is Nuts is helpful here. But if you don’t want to spend $49 on his book just yet, his e-mail course is quite helpful. I’m not affiliated with him in any way; I’ve just found his information useful.

How should I bill clients?

​For billing, something like Freshbooks it helpful. It helps you keep track of your revenue and expenses, and will let you issue invoices that your clients can pay online. Some will still want to pay via check, but for smaller jobs many clients will find it easier to just put it on their business credit card, and for that scenario having a ‘pay online’ option makes the payment process much smoother.

Do I really need a contract?

You absolutely, positively, need a contract. You should create a Master Services Agreement that covers all work you’ll do for a client over time, along with a Statement of Work for each individual project that you’ll be billing for.

The best way to do this is to talk to a lawyer. It’ll be a bit costly up front, bu then you’ll end up with documents you can re-use for all clients and projects. You can also start with sample MSAs and SOWs and customize them to your needs.

I believe Rob Conery’s Going Solo package has sample documents like these.  I’m not 100% sure because I bought it a while ago. I’d recommend it regardless, because it contains lots of advice that’s directly applicable to your situation. n top of that, it only costs $15. 

Double Your Freelancing definitely has a good sample MSA and SoW. DYF costs hundreds of dollars, but it’s probably worth that much for the MSA and SoW alone.  Consider how much you’d pay a lawyer to create similar ones for you. It also has a ton of great advice on top of that, particularly with regard to billing and project scoping. You’ll likely still want to get a lawyer to review your documents to make sure they don’t contain any mistakes that will cause you problems. 

I’m not affiliated with any of these products. I don’t get any kickbacks for suggesting them. I’ve just bought them and I’ve found them to be a good value. 

In Conclusion

I’ve shared all of this in the hope that it’ll be helpful to those trying to successfully freelance, or are thinking of doing it in the future. At the end of the day, this is just free advice from some guy on the internet. I can’t promise you’ll be successful if you follow any of it. 

Regardless, I hope that at least a few people will take some of it and adapt it to their situation. Happy freelancing! Or consulting, or developing, or whatever else you decide to call it. 

Whether you love my advice or think I’m an idiot, I invite you to discuss this further on Reddit or Hacker News.