DEV Community

56kode
56kode

Posted on

1 1

Avoiding global functions in JavaScript

Many beginner developers modify global prototypes in JavaScript without realizing the risks. Let's look at a common example: creating a function that finds the difference between two arrays.

A developer might try to extend the native prototype like this:

// Never do this
Array.prototype.diff = function(comparisonArray) {
  const hash = new Set(comparisonArray);
  return this.filter(elem => !hash.has(elem));
};

// Usage
const array1 = [1, 2, 3, 4];
const array2 = [2, 4];
console.log(array1.diff(array2)); // [1, 3]
Enter fullscreen mode Exit fullscreen mode

This approach might look convenient at first, but it creates several serious problems. Name collisions are the main risk: if two libraries add a diff method to the Array prototype, one will override the other. This can make your code behave differently depending on the order scripts load, creating bugs that are hard to find.

Modifying prototypes also affects performance. Each addition to the prototype makes JavaScript work harder when operating on arrays. This slows down your entire application, even parts that don't use the new method.

Fixing bugs becomes harder because errors can appear far from the source of the problem. Standard debugging tools can't easily show where a prototype was modified, making code maintenance difficult.

A much better solution is to create a pure function:

const arrayDiff = (array1, array2) => {
  const hash = new Set(array2);
  return array1.filter(elem => !hash.has(elem));
};

// Usage
const array1 = [1, 2, 3, 4];
const array2 = [2, 4];
const result = arrayDiff(array1, array2); // [1, 3]
Enter fullscreen mode Exit fullscreen mode

This functional approach has many benefits. The function stays isolated and predictable, doesn't change native types, and is easier to test. The code becomes clearer because you can see exactly where the arrayDiff function comes from.

Your code also becomes more portable. Without global changes, there's less risk of conflicts with future JavaScript versions or other libraries. Updating to new versions of frameworks becomes easier.

By using pure functions like this, you create code that's easier to maintain, more reliable, and simpler for all team members to understand.

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay