You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Update README.md
Update README.md
Addressed comments made in #768
Low level functions: added code samples and more why's
Angular Helper Functions: more reviews in #768
Angular Helper Functions: addressing more comments on #768
Helper functions: Changed language to sound more like a soft suggestion
Copy file name to clipboardExpand all lines: a1/README.md
+78-4
Original file line number
Diff line number
Diff line change
@@ -56,6 +56,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see
56
56
1.[Routing](#routing)
57
57
1.[Task Automation](#task-automation)
58
58
1.[Filters](#filters)
59
+
1.[Helper Functions](#helper-functions)
59
60
1.[Angular Docs](#angular-docs)
60
61
61
62
## Single Responsibility
@@ -3268,13 +3269,86 @@ Use [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com) for creating automa
3268
3269
3269
3270
**[Back to top](#table-of-contents)**
3270
3271
3271
-
## Filters
3272
+
## Helper Functions
3272
3273
3273
-
###### [Style [Y420](#style-y420)]
3274
+
Angular 1.x ships with some [helper functions](https://docs.angularjs.org/api/ng/function) whose equivalent functionality can be found within newer versions of JavaScript (e.g. `angular.isArray()`, `angular.forEach()`, etc). In such cases we should favor usage of native JavaScript functions.
3274
3275
3275
-
- Avoid using filters for scanning all properties of a complex object graph. Use filters for select properties.
3276
+
###### [Style [Y500](#style-y500)]
3276
3277
3277
-
*Why?*: Filters can easily be abused and negatively affect performance if not used wisely, for example when a filter hits a large and deep object graph.
3278
+
- Suggestion: Use native JavaScript functions instead of Angular's helper functions whenever possible.
3279
+
3280
+
*Why?*: You can replace a of lot Angular's helper functions with native ES2015+ functionality such as [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) for copying objects and the [Spread Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Copy_an_array) for copying arrays _(ie. `[...arr1]`)_.
3281
+
3282
+
*Why?*: Because these are features that have been made available in the latest versions of JavaScript, but did not exist natively when the Angular helper functions were first written.
3283
+
3284
+
**Example 1**: Replacing `angular.forEach()` and `angular.isArray()`:
3285
+
3286
+
```javascript
3287
+
var arr = [1, 2, 3];
3288
+
3289
+
// Instead of this:
3290
+
angular.forEach(arr, function(value) {
3291
+
console.log(value);
3292
+
});
3293
+
3294
+
// Try this:
3295
+
arr.forEach(function(value) {
3296
+
console.log(value);
3297
+
});
3298
+
```
3299
+
3300
+
```javascript
3301
+
var obj = { hello:'Hello', world:'World' };
3302
+
3303
+
// Instead of this:
3304
+
angular.forEach(obj, function(value) {
3305
+
console.log(value);
3306
+
});
3307
+
3308
+
// Try this:
3309
+
Object.keys(obj)
3310
+
.forEach(function(key) {
3311
+
console.log(obj[key]);
3312
+
});
3313
+
```
3314
+
3315
+
```javascript
3316
+
// Instead of this:
3317
+
angular.isArray([1, 2, 3]); // true
3318
+
angular.isArray({ hello:'World' }); // false
3319
+
3320
+
// Try this:
3321
+
Array.isArray([1, 2, 3]); // true
3322
+
Array.isArray({ hello:'World' }); // false
3323
+
```
3324
+
3325
+
**Example 2:** Favor usage of JavaScript features (in this case available starting with ES2015) over `angular.copy()` and `angular.extend()`.
3326
+
3327
+
```javascript
3328
+
var arr1 = [1, 2, 3];
3329
+
3330
+
// Instead of this:
3331
+
var copyArr1 =angular.copy(arr1);
3332
+
3333
+
// Try this:
3334
+
var copyArr1 = [...arr1];
3335
+
3336
+
```
3337
+
3338
+
```javascript
3339
+
var obj1 = { hello:'Hello' };
3340
+
var obj2 = { world:'World' };
3341
+
3342
+
// Instead of this
3343
+
var mergedObjects =angular.extend({}, obj1, obj2); // {hello: 'Hello', world: 'World'}
3344
+
3345
+
// Try this:
3346
+
var mergedObjects =Object.assign({}, obj1, obj2); // {hello: 'Hello', world: 'World'}
3347
+
```
3348
+
3349
+
- Note: you might need to use a [polyfill](https://babeljs.io/docs/usage/polyfill/) to take advantage of the latest features of JavaScript for better browser support.
3350
+
3351
+
- Note: Be sure to understand the differences in implementation when using a native JavaScript feature over an Angular helper. For example Angular's `forEach` implementation does not throw an error if you pass it a `null` or `undefined` object, whereas JavaScript's native implementation only works with arrays.
0 commit comments