SFMC | How to JavaScript in Marketing Cloud

Salesforce Marketing Cloud uses JavaScript where a advanced customization is needed e.g. automations, cloud pages and even in message personalization.

Last time we discussed how to JavaScript in Adobe Campaign, we discovered that it utilizes an older version of ECMAScript. However, it’s worth noting that Salesforce Marketing Cloud (SFMC) goes even further back and employs ECMAScript 3 (ES3), which dates back to 1999. SFMC uses a customized version of the Rhino JavaScript engine. Although based on ES3 specifications, SFMC’s version of Rhino has likely been tailored and modified by Salesforce to suit the platform’s specific requirements and functionality. For example ES3 does not have native JSON.parse() or JSON.stringify() functions and you have to use platform functions.

<script runat="server">
     var str = '{ "prop1": "propVal" }';
     var obj = Platform.Function.ParseJSON(str);
     var val = obj.prop1;
     Platform.Function.Write(Platform.Function.Stringify(obj));
</script>

It is important to consult Salesforce’s official documentation, resources, and examples to ensure compatibility and adhere to the syntax and best practices provided for SSJS development within the SFMC environment.

ES3 compared to ES5

We learnt that ES5 does not have fancy arrow functions, spreading, object decomposing and many more. What can be even worse than that? In ES3 we do not have functions like Array.map() or Arary.filter() and to do any operation with Arrays we have to do good old for loop. For traversing objects we need to bring ES5 Object.keys() polyfil function and many more.

The transition from ECMAScript 3 (ES3) to ECMAScript 5 (ES5) introduced several significant changes and improvements to the JavaScript language. Some of the major differences between ES3 and ES5 include:

1. Strict Mode: ES5 introduced strict mode, which enables a stricter set of rules for JavaScript code, helping to eliminate common mistakes and improve code quality.
2. JSON Support: ES5 standardized the JSON object, providing built-in methods for parsing JSON strings and serializing JavaScript objects to JSON format.
3. Array Methods: ES5 introduced several new methods for working with arrays, such as forEach(), map(), filter(), reduce(), and indexOf(). These methods provide a more concise and expressive way to manipulate arrays.
4. Function Enhancements: ES5 introduced new methods for functions, including bind(), call(), and apply(), which allow explicit control over function execution context and arguments.
5. Object Enhancements: ES5 introduced new methods for objects, such as Object.create(), Object.defineProperty(), and Object.keys(), which provide more flexible object creation and property manipulation capabilities.
6. StrictEquality Operator: ES5 introduced the === and !== strict equality operators, which perform a strict type and value comparison, eliminating type coercion in equality comparisons.

These are just some of the major differences between ES3 and ES5. It’s worth noting that ES5 was a significant step forward in the evolution of JavaScript and brought several important language improvements, enhancing the overall developer experience and enabling more sophisticated programming techniques.

Polyfills

We can use polyfills that provide the implementation of a specific feature or functionality in an older or less capable environment. It allows developers to use modern or advanced language features in older browsers or environments that do not natively support those features.

While there aren’t many dedicated polyfill libraries specifically targeting ES3, there are utility libraries and toolkits that can provide additional functionality or compatibility in ES3 environments. Here are a few options you can explore:

1. Underscore.js: Underscore.js (https://underscorejs.org/) is a popular utility library that provides a wide range of functions to assist with common programming tasks. It is compatible with ES3 and can be used to enhance your ES3 codebase with useful utility functions.
2. Lodash: Lodash (https://lodash.com/) is a modern JavaScript utility library that offers a collection of helper functions. Although it is designed for newer versions of JavaScript, it also provides an ES3-compatible build that you can use in ES3 environments.
3. Modernizr: Modernizr (https://modernizr.com/) is a feature detection library that allows you to check for browser support of specific JavaScript features. While its main purpose is feature detection, it can be used to conditionally load polyfills or alternative code paths in ES3 environments based on feature availability.
4. ES5-Shim: ES5-Shim (https://github.com/es-shims/es5-shim) is a popular library that provides polyfills for various ES5 features in older browsers or environments. While it primarily targets ES5 compatibility in ES3 environments, some of its features may require ES5 support.

It’s important to note that these libraries provide additional functionality but may not fully polyfill all ES5 or newer features in an ES3 environment. Additionally, ensure compatibility and test thoroughly when incorporating any library or polyfill into your codebase.

Please leave this field empty

Oh hi there
I have a FREE e-book for you.

Sign up now to get an in-depth analysis of Adobe and Salesforce Marketing Clouds!

Email Address *

We don’t spam! Read our privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.