Enable newest ES6 JavaScript features

Marcel Szimonisz
Dec 11, 2023
3 minutes read

Enable newest ES6 JavaScript features

You may have noticed, when working with the tool for some time, that the JavaScript used around the Adobe Campaign Classic platform is not the newest version.

Table of Contents

Adobe Campaign Classic relies on ES5 JavaScript, released in 2012. This may cause some first world problems for those accustomed to modern features like Array.indexOf, Array.find, classes, object spread syntax, and arrow functions. Fortunately, polyfills can bridge the gap, providing compatibility with these features and easing the transition to more contemporary JavaScript functionality.

A polyfill in JavaScript is a piece of code (usually JavaScript) that provides the implementation of a feature or API that is not natively supported in a particular environment, typically an older browser or runtime. Polyfills enable developers to use modern features in environments that lack native support.

Array.find()

// Polyfill for Array.prototype.find
if (!Array.prototype.find) {
  Array.prototype.find = function(predicate, thisArg) {
    if (this == null) {
      throw new TypeError('Array.prototype.find called on null or undefined');
    }

    if (typeof predicate !== 'function') {
      throw new TypeError('predicate must be a function');
    }

    var list = Object(this);
    var length = list.length >>> 0;

    for (var i = 0; i < length; i++) {
      if (i in list && predicate.call(thisArg, list[i], i, list)) {
        return list[i];
      }
    }

    return undefined;
  };
}

// Sample array of objects
var users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 22 },
  { id: 4, name: 'David', age: 28 }
];

// Using Array.prototype.find with the polyfill to find a user with age greater than 25
var result = users.find(function(user) {
  return user.age > 25;
});

logInfo(JSON.stringify(result));

Array.indexOf()

This method is used to find the index of the first occurrence of a specified element in an array.

// Polyfill for Array.prototype.indexOf
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(searchElement, fromIndex) {
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }

    var array = Object(this);
    var length = array.length >>> 0;

    fromIndex = fromIndex || 0;

    for (var i = Math.max(fromIndex, 0); i < length; i++) {
      if (i in array && array[i] === searchElement) {
        return i;
      }
    }

    return -1;
  };
}

Array.fill()

Method that fills all the elements of an array from a start index to an end index with a static value.

if (!Array.prototype.fill) {
  Array.prototype.fill = function(value, start, end) {
    var array = this;
    start = start || 0;
    end = end === undefined ? array.length : end;
    for (var i = start; i < end; i++) {
      array[i] = value;
    }
    return array;
  };
}

Array.entries() Array.keys() and Array.values()

These methods return iterators for array entries, keys, and values, respectively.

// ES6
const numbers = [1, 2, 3];
const entries = numbers.entries(); // iterator for [0, 1], [1, 2], [2, 3]
const keys = numbers.keys();       // iterator for 0, 1, 2
const values = numbers.values();   // iterator for 1, 2, 3

Polyfills in ES5

if (!Array.prototype.entries) {
  Array.prototype.entries = function() {
    var index = 0;
    var array = this;
    return {
      next: function() {
        return index < array.length ?
          { value: [index, array[index++]], done: false } :
          { value: undefined, done: true };
      }
    };
  };
}

if (!Array.prototype.keys) {
  Array.prototype.keys = function() {
    var index = 0;
    var array = this;
    return {
      next: function() {
        return index < array.length ?
          { value: index++, done: false } :
          { value: undefined, done: true };
      }
    };
  };
}

if (!Array.prototype.values) {
  Array.prototype.values = function() {
    var index = 0;
    var array = this;
    return {
      next: function() {
        return index < array.length ?
          { value: array[index++], done: false } :
          { value: undefined, done: true };
      }
    };
  };
}