Skip to content

Commit d2c6568

Browse files
committed
adds block about angular low-level functions
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
1 parent 2cc4278 commit d2c6568

File tree

1 file changed

+78
-4
lines changed

1 file changed

+78
-4
lines changed

a1/README.md

+78-4
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see
5656
1. [Routing](#routing)
5757
1. [Task Automation](#task-automation)
5858
1. [Filters](#filters)
59+
1. [Helper Functions](#helper-functions)
5960
1. [Angular Docs](#angular-docs)
6061

6162
## Single Responsibility
@@ -3268,13 +3269,86 @@ Use [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com) for creating automa
32683269
32693270
**[Back to top](#table-of-contents)**
32703271
3271-
## Filters
3272+
## Helper Functions
32723273
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.
32743275
3275-
- Avoid using filters for scanning all properties of a complex object graph. Use filters for select properties.
3276+
###### [Style [Y500](#style-y500)]
32763277
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.
32783352
32793353
**[Back to top](#table-of-contents)**
32803354

0 commit comments

Comments
 (0)