How to maintain similar behaviour among all browsers?

Question

I came across Object.assign function, I am using it to merge two objects into one, but the javascript doesn't work on older browsers, how do I make sure it works on all browsers?

It works fine on chrome.

My code looks similar to this,

function getConfig(){
   var config = { a: 4};
   var envConfig = {a:2, b:6};
   return Object.assign({}, config, envConfig);
}
console.log(getConfig());

The [documentation on MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) includes a polyfill. — Niet the Dark Absol, Aug 01 '17 at 10:03
Possible duplicate of [Object.assign equivalent function in javascript](https://stackoverflow.com/questions/30498318/object-assign-equivalent-function-in-javascript) — Jeremy Thille, Aug 01 '17 at 10:06

score 2 · Answer 1 · answered Aug 01 '17 at 10:03

There's always a retro way. Here's two:

1) via jQuery

jQuery offers the same functionality via its $.extend() method, i.e.

var newObj = $.extend({}, oldObj1, oldObj2);

2) via loops (this is roughly what jQuery does under the hood)

var newObj = {};
[oldObj1, oldObj2].forEach(function(oldObj) {
    for (var prop in oldObj) newObj[prop] = oldObj[prop];
});

score 1 · Answer 2 · answered Aug 01 '17 at 10:02

1

Hmm I have also faced such issues while development.

You can easily resolve this error using shim libraries. Which provides Javascript Objects to be available in IE 11.

Below are the links which worked for me.

https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js

https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js

The above two links will help you getting all the Javascript Object properties in IE browsers.

Thanks

answered Aug 01 '17 at 10:02

Hemant Nagarkoti

434
2
12

You can also found this link to helpful for you. https://github.com/angular/angular/issues/7144 – Hemant Nagarkoti Aug 01 '17 at 10:03

T.J. Crowder · Accepted Answer · 2017-08-01T10:12:15.977

Object.assign was defined by ES2015. Browsers released before that (and probably relatively soon after it) won't have it. That includes all versions of IE, for instance.

This particular function can be polyfilled; I quote MDN's polyfill for it below.

In the general case: If you need to support older browsers that don't have modern features (and many of us do), you need to either:

Not use the features they don't have, or
Use polyfills and transpilers (like Babel) to convert your source code using those features into something that will run on old browsers that don't support them.

Here's that polyfill as of this writing (I just fixed two minor errors in it):

if (typeof Object.assign != 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { // .length of function is 2
      'use strict';
      if (target == null) { // TypeError if undefined or null
        throw new TypeError('Cannot convert undefined or null to object');
      }

      var to = Object(target);

      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) { // Skip over if undefined or null
          for (var nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

thanks for the detailed explanation, ill also use shims in future to avoid having to run into these bugs again — Syed Faizan, Aug 01 '17 at 10:17
@SyedFaizan: Just beware that shims/polyfills only cover functions, like `Object.assign`. If you start using new *syntax* (like `let`, arrow functions, etc.), you'll still run into trouble unless you're transpiling. (Beware that IE has a particular "gotcha" for you: It *has* `let`, but it doesn't work the way the specification says it should work.) — T.J. Crowder, Aug 01 '17 at 10:23

score 1 · Answer 4 · answered Aug 01 '17 at 10:05

Object.assign() is only available in ECMAScript 2015 (6th Edition, ECMA-262). ref: http://www.ecma-international.org/ecma-262/6.0/#sec-object.assign

You can use it in older versions of ECMAScript with a pollyfill.

Babel offers a good option for this. You can find clear instructions about how to use it here: https://babeljs.io/docs/plugins/transform-object-assign/

How to maintain similar behaviour among all browsers?

4 Answers4