JavaScript Fundamentals JavaScript Fundamentals with Angular and Lodash with Angular and Lodash Bret Little - @little_bret blittle.github.io/blog/ http://slides.com/bretlittle/js-fundamentals-angular-lodash 

JavaScript scope is not $scope JavaScript scope is not $scope 

Just because you can, doesn't mean you should Caution! Caution! 

var users = [ { 'name': 'barney', 'age': 36, 'active': true }, { 'name': 'fred', 'age': 40, 'active': false } ] _.filter(users, { 'active': true }) // returns [{ 'name': 'barney', 'age': 36, 'active': true }] 

var users = [ { 'name': 'barney', 'age': 36, 'active': true }, { 'name': 'fred', 'age': 40, 'active': false } ] _.result( _.findWhere(users, { 'active': true, 'age': 36 }), 'name' ) // returns 'barney' 

_.range(10); // → [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 

{{name | lodash:'capitalize'}} $scope.name = 'alfred'; Alfred 

Hello $scope.dynamicClass = 'someDyanmicClassName'; Hello 

{{value | lodash:'padLeft':10:0}} $scope.value = 123; 0000000123 

{{longVal | lodash:'trunc':28}} $scope.longVal = 'Crocodiles have the most acidic stomach of any vertebrate. They can easily digest bones, hooves and horns.'; Crocodiles have the most ... 

Previous Next http:/ /output.jsbin.com/zesuhu http:/ /output.jsbin.com/zesuhu 

angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } }); 

JavaScript Fundamentals JavaScript Fundamentals Higher-order Functions Higher-order Functions Closures Closures Scope & Context Scope & Context Dynamic function invocation Dynamic function invocation Arguments Arguments JavaScript 2015 JavaScript 2015 

JavaScript does not have block scope; JavaScript does not have block scope; it has lexical scope. it has lexical scope. var something = 1; { var something = 2; } console.log(something); -> 2 

var something = 1; function run() { var something = 2; console.log(something); } run(); console.log(something); -> 2 -> 1 

var something = 1; function run() { if (!something) { var something = 2; } console.log(something); } run(); -> 2 JavaScript Variable Hoisting JavaScript Variable Hoisting 

angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } }); 

Higher-order Functions Higher-order Functions "Functions that operate on other "Functions that operate on other functions, either by taking them as functions, either by taking them as arguments or by returning them" arguments or by returning them" http:/ /eloquentjavascript.net/05_higher_order.html http:/ /eloquentjavascript.net/05_higher_order.html 

function greaterThan(n) { return function(m) { return m > n; }; } var greaterThan10 = greaterThan(10); console.log(greaterThan10(11)); // -> true Higher-order Functions Higher-order Functions note note n n is still available within is still available within the returned function the returned function 

Closures Closures "A closure is a special kind of object that "A closure is a special kind of object that combines two things: a function, and combines two things: a function, and the environment in which that function the environment in which that function was created." was created." https:/ /developer.mozilla.org/en-US/docs/Web/JavaScript/Closures https:/ /developer.mozilla.org/en-US/docs/Web/JavaScript/Closures 

function makeFunc() { var name = "Pangolin"; function displayName() { debugger; alert(name); } return displayName; }; var myFunc = makeFunc(); myFunc(); Closures Closures 

var counter = (function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; } return { increment: function() { changeBy(1); }, decrement: function() { changeBy(-1); }, value: function() { return privateCounter; } }; })(); console.log(counter.value()); // logs 0 counter.increment(); console.log(counter.value()); // logs 1 Practical Closures Practical Closures 

angular.module('myApp') .filter('lodash', function(someService) { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } }); 

angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } }); 

function sayHello() { for (var i = 0, iLength = arguments.length; i < iLength; i++) { console.log('Hello', arguments[i]); } } sayHello('Chester Nimitz', 'Raymond Spruance'); Dynamic Arguments Dynamic Arguments -> Hello Chester Nimitz -> Hello Raymond Spruance 

angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } }); 

angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } }); 

JavaScript Context JavaScript Context The environment in which a function The environment in which a function executes. executes. the the this this keyword keyword Context is most often determined by Context is most often determined by how a function is invoked how a function is invoked 

Function Statement Context Function Statement Context function billMe() { console.log(this); function sendPayment() { console.log(this); } sendPayment(); } billMe(); The context for for The context for for function statement is function statement is the global object the global object 

Object Context Object Context var obj = { foo: function(){ return this; } }; obj.foo(); obj.foo() === obj; // true 

Constructor Context Constructor Context function Legate(rank) { this.rank = rank; } var legate = new Legate(100); console.log(legate.rank); 

Dynamic Function Context Dynamic Function Context function add(c, d){ return this.a + this.b + c + d; } var o = {a:1, b:3}; add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 

Function.prototype.bind Function.prototype.bind var myWidget = { type: 'myAwesomeWidget', clickCallback: function() { console.log(this.type); } } document.getElementById('submit').addEventListener( 'click', myWidget.clickCallback.bind(myWidget) ); 

jQuery jQuery $( "li" ).each(function myIterator(index) { $( this ).text(); }); jQuery controls the context of the callback jQuery controls the context of the callback and and this this becomes each becomes each li li element element 

Angular Angular angular.module('app') .controller('Customers', function() { var vm = this; vm.title = 'Customers'; }); Angular controls the context of the controller. Angular controls the context of the controller. With With controllerAs controllerAs the context the context becomes becomes bound to the template. bound to the template. 

angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } }); 

import _ from 'lodash'; import angular from 'angular'; angular.module('app') .filter('lodash', function() { return (input, method, ...args) => ( _[method].apply(_, [input, ...args]) ) }); 

1. http://ryanmorr.com/understanding-scope-and-context-in-javascript/ 2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this 3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures 4. http://eloquentjavascript.net 5. JS 2015-2016 - https://babeljs.io/ 6. Axel Rauschmayer - http://www.2ality.com/ Resources Resources 

No content