A Short Guide on ES6 to ES5 | SuiteCommerce

This is a short guide to the most commonly used ES6 patterns. If you've been in the habit of using ES6 and are now required to use ES5 code in your SuiteCommerce projects, this may be a helpful guide!

Variable declarations: let and const vs var

ES6 provides block-scoped let and const for declaring variables.

let x = 10;
const y = 20;

ES5 uses var, which is function-scoped.

var x = 10;
var y = 20;

Arrow Functions

ES6 includes arrow functions as an alternative syntax for defining functions.

const add = (a, b) => a + b;

ES5 uses traditional function syntax.

var add = function(a, b) {
    return a + b;
};

Template Literals

ES6 uses template literals for string interpolation with backticks.

let name = 'John';
let message = `Hello, ${name}!`;

ES5 uses string concatenation.

var name = 'John';
var message = 'Hello, ' + name + '!';

Default Parameters

ES6 introduces default parameter values in function definitions

function greet(name = 'Guest') {
    return `Hello, ${name}`;
}

ES5 manually checks for undefined values to assign defaults.

function greet(name) {
    name = typeof name !== 'undefined' ? name : 'Guest';
    return 'Hello, ' + name;
}

Destructuring Assignment

ES6 allows destructuring to extract values from arrays or objects.

const person = {name: 'Alice', age: 30};
const {name, age} = person;

ES5 accesses values manually.

var person = {name: 'Alice', age: 30};
var name = person.name;
var age = person.age;

Rest Parameters and Spread Operator

ES6 introduces rest parameters (...args) and spread (...array).

function sum(...args) {
    return args.reduce((a, b) => a + b, 0);
}
const arr = [1, 2, 3];
console.log(...arr);

ES5 uses arguments for rest and apply for spreading arrays.

function sum() {
    var args = Array.prototype.slice.call(arguments);
    return args.reduce(function(a, b) {
        return a + b;
    }, 0);
}
var arr = [1, 2, 3];
console.log.apply(console, arr);

Object.assign() for Cloning Objects

ES6 introduces Object.assign() for shallow-cloning objects or merging objects.

const obj1 = {a: 1, b: 2};
const obj2 = {c: 3};
const mergedObj = Object.assign({}, obj1, obj2);

ES5 uses manual methods like loops or custom functions to clone objects.

var obj1 = {a: 1, b: 2};
var obj2 = {c: 3};
var mergedObj = {};
for (var key in obj1) {
    if (obj1.hasOwnProperty(key)) {
        mergedObj[key] = obj1[key];
    }
}
for (var key in obj2) {
    if (obj2.hasOwnProperty(key)) {
        mergedObj[key] = obj2[key];
    }
}

Object Property Shorthand

ES6 allows shorthand for object properties when the key matches the variable name.

const name = 'John';
const age = 25;
const person = {name, age};

ES5 requires explicitly defining both key and value.

var name = 'John';
var age = 25;
var person = {
    name: name,
    age: age
};

Promises

ES6 provides native Promise support for handling asynchronous operations.

function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve('Data received'), 1000);
    });
}
getData().then(result => console.log(result));

ES5 relies on callback functions for asynchronous code.

function getData(callback) {
    setTimeout(function() {
        callback('Data received');
    }, 1000);
}
getData(function(result) {
    console.log(result);
});

For...of Loop

ES6 introduces the for...of loop for iterating over iterable objects like arrays.

const array = [10, 20, 30];
for (let value of array) {
    console.log(value);
}

ES5 uses a traditional for loop or the forEach method.

var array = [10, 20, 30];
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Author: Volodymyr Kira

Got stuck on a step in this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!

FREE SuiteCommerce Book

If you liked this article, you'll LOVE our book on SuiteCommerce! Order the free SuiteCommerce book today, and we'll even pay for shipping!

Oracle NetSuite Alliance Partner & Commerce Partner

If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!

We are a premium SuiteCommerce agency that creates powerful customer portals. Unlike our competitors, we have already solved your problems.

A Short Guide on ES6 to ES5 for SuiteCommerce