Skip to content

Commit add37b9

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
1 parent 42185df commit add37b9

File tree

1 file changed

+93
-0
lines changed

1 file changed

+93
-0
lines changed

a1/README.md

Lines changed: 93 additions & 0 deletions
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. [Low Level Functions](#low-level-functions)
5960
1. [Angular Docs](#angular-docs)
6061

6162
## Single Responsibility
@@ -3268,6 +3269,98 @@ Use [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com) for creating automa
32683269
32693270
**[Back to top](#table-of-contents)**
32703271
3272+
## Helper Functions
3273+
3274+
Angular 1.x ships with some [helper functions](https://docs.angularjs.org/api/ng/function) that are found within JavaScript natively (e.g. `angular.isArray()`, `angular.forEach()`, etc). In such cases we should favor usage of native JavaScript functions instead of Angular's helper functions. In other cases where functionality is not found in JavaScript natively, we should turn to utility libraries such as [lodash](https://lodash.com/docs) to fill-in the gaps.
3275+
3276+
###### [Style [Y500](#style-y500)]
3277+
3278+
- Avoid using Angular helper functions such as `angular.copy()`, `angular.extend()` or even `angular.isUndefined()`.
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+
Replace `angular.forEach()` and `angular.isArray()`:
3285+
3286+
```javascript
3287+
/* avoid */
3288+
var arr = [1, 2, 3];
3289+
var obj = { hello: 'Hello', world: 'World' };
3290+
3291+
angular.forEach(arr, function(value) {
3292+
console.log(value);
3293+
});
3294+
3295+
angular.forEach(obj, function(value) {
3296+
console.log(value);
3297+
});
3298+
3299+
angular.isArray(arr); // true
3300+
angular.isArray(obj); // false
3301+
```
3302+
3303+
```javascript
3304+
/* recommended */
3305+
var arr = [1, 2, 3];
3306+
var obj = { hello: 'Hello', world: 'World' };
3307+
3308+
// iterate through arrays
3309+
arr.forEach(function(value) {
3310+
console.log(value);
3311+
});
3312+
3313+
// iterate through objects
3314+
Object.keys(obj)
3315+
.forEach(function(key) {
3316+
console.log(obj[key]);
3317+
});
3318+
3319+
// alternative lodash helper to iterate through objects
3320+
_.forEach(obj, function(value) {
3321+
console.log(value);
3322+
});
3323+
3324+
// native js functionality
3325+
Array.isArray(arr); // true
3326+
Array.isArray(obj); // false
3327+
```
3328+
3329+
Favor usage of JavaScript features (in this case available starting with ES2015) over `angular.copy()` and `angular.extend()`.
3330+
3331+
```javascript
3332+
/* avoid */
3333+
var arr1 = [1, 2, 3];
3334+
var arr2 = angular.copy(arr1); // [1, 2, 3]
3335+
3336+
var obj1 = { hello: 'Hello' };
3337+
var obj2 = { world: 'World' };
3338+
var obj3 = angular.extend({}, obj1, obj2); // {hello: 'Hello', world: 'World'}
3339+
```
3340+
3341+
```javascript
3342+
/* recommended */
3343+
var arr1 = [1, 2, 3];
3344+
var arr2 = [...arr1]; // [1, 2, 3]
3345+
3346+
var obj1 = { hello: 'Hello' };
3347+
var obj2 = { world: 'World' };
3348+
var obj3 = Object.assign({}, obj1, obj2); // {hello: 'Hello', world: 'World'}
3349+
```
3350+
3351+
*Why?*: These are commonly known features of JavaScript and using them makes code more intuitive to read.
3352+
3353+
*Why?*: This will ease the process of upgrading to Angular 2 as it does not ship with these helper functions.
3354+
3355+
3356+
- Note: favor usage of functions that are available in JavaScript natively, then resort to using a utility library like [lodash](https://lodash.com/docs) when what you need is not available.
3357+
3358+
- 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.
3359+
3360+
- 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.
3361+
3362+
**[Back to top](#table-of-contents)**
3363+
32713364
## Filters
32723365
32733366
###### [Style [Y420](#style-y420)]

0 commit comments

Comments
 (0)