Why do projects like angular have their own version of common functions?

Question

I am trying to understand or update my logic on this better - for example, in angular it has angular.forEach ().

I thought this was because the code in the controller (or in the general module) - did not have access to the api browser (functions and objects, etc.) - and, most importantly, the forEach function of the browser.

But just tested it, as I was trying to understand it better / justify it - and both of these console.log () expressions worked.

angular.module('myApp', []) .controller('JCtrl', ['$scope', function($scope) { $scope.test = 'scope and binding works'; [0, 1, 4].forEach(function(value) { console.log(value); }); console.log([].forEach); }]); 

here plnkr

Answer 1

Directly from github Angular.js source code you can find here

 /** * @ngdoc function * @name angular.forEach * @module ng * @kind function * * @description * Invokes the `iterator` function once for each item in `obj` collection, which can be either an * object or an array. The `iterator` function is invoked with `iterator(value, key, obj)`, where `value` * is the value of an object property or an array element, `key` is the object property key or * array element index and obj is the `obj` itself. Specifying a `context` for the function is optional. * * It is worth noting that `.forEach` does not iterate over inherited properties because it filters * using the `hasOwnProperty` method. * * Unlike ES262's * [Array.prototype.forEach](http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.18), * Providing 'undefined' or 'null' values for `obj` will not throw a TypeError, but rather just * return the value provided. * ```js var values = {name: 'misko', gender: 'male'}; var log = []; angular.forEach(values, function(value, key) { this.push(key + ': ' + value); }, log); expect(log).toEqual(['name: misko', 'gender: male']); ``` * * @param {Object|Array} obj Object to iterate over. * @param {Function} iterator Iterator function. * @param {Object=} context Object to become context (`this`) for the iterator function. * @returns {Object|Array} Reference to `obj`. */ 

So, as you can see

Unlike ES262 Array.prototype.forEach , providing 'undefined' or 'null' values ​​for obj will not raise a TypeError, just return the supplied value.

These things are done because when you design your own system, there is a high probability that you will need something other than the original.

Answer 2

As a rule, for optimization, standardization and backward compatibility, they provide api for iterating a loop that will work "in any environment", so you do not have to relay on other platforms to do this

In your forEach example (if I'm not mistaken, this is not supported by IE8), so instead of using any external library or something else. you can use corners

Answer 3

Try using Array.forEach in IE8 - it does not work.

Javascript frameworks usually have two main goals:

• Provide helper functions that allow you to perform general or complex tasks such as animation, DOM search, etc.
• Provide a consistent API so you don’t have to worry about browser compatibility.

Here is item 2. If you had to check every time you want to use the "standard" function and bypass it if it does not exist, your code will be more dirty and difficult to read, for example. For comparison:

 var arr = [1,2,3,4]; if(arr.forEach) { arr.forEach(function(v,i) { // do domething }) } else { for(var i = 0; i < arr.length; i++) { var val = arr[i]; // do something } } 

from

 var arr = [1,2,3,4]; angular.forEach(arr, function(value, key) { // do something }); 

In fact, internally, many frameworks will check if a built-in method exists and use it, and if necessary, use its own implementation.

Point 1 is also relevant here, because, for example, Array.forEach only works with arrays, while Angular.forEach through the arrays and properties of the object in the same way, therefore it provides additional functionality for the basic Javascript implementation.