JavaScript Fundamentals with Angular and Lodash

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

JavaScript scope is not $scopeJavaScript scope is not $scope

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

<div class='active-users' ng-repeat='user in users | lodash:"filter":{active: true}'> {{ user.name }} </div> 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 }]

<div class='selected-user'> {{ users | lodash:'findWhere':{active: true, age: 36} | lodash:'result':'name' }} </div> var users = [ { 'name': 'barney', 'age': 36, 'active': true }, { 'name': 'fred', 'age': 40, 'active': false } ] _.result( _.findWhere(users, { 'active': true, 'age': 36 }), 'name' ) // returns 'barney'

<div ng-repeat="i in 10 | lodash:'range'"> {{ $index }} </div> _.range(10); // → [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

<span>{{name | lodash:'capitalize'}}</span> $scope.name = 'alfred'; <span>Alfred</span>

<span class='{{dynamicClassName | lodash:'kebabCase'}}'> Hello </span> $scope.dynamicClass = 'someDyanmicClassName'; <span class='some-dyanmic-class-name'>Hello</span>

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

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

<div ng-repeat='user in users | lodash :"slice":(page * amountPerPage) :((page + 1) * amountPerPage)' > {{user.name}} </div> <button ng-click='page = page - 1'>Previous</button> <button ng-click='page = page + 1'>Next</button> http://output.jsbin.com/zesuhuhttp://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 FundamentalsJavaScript Fundamentals Higher-order FunctionsHigher-order Functions ClosuresClosures Scope & ContextScope & Context Dynamic function invocationDynamic function invocation ArgumentsArguments JavaScript 2015JavaScript 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 HoistingJavaScript Variable Hoisting

Higher-order FunctionsHigher-order Functions "Functions that operate on other"Functions that operate on other functions, either by taking them asfunctions, either by taking them as arguments or by returning them"arguments or by returning them" http://eloquentjavascript.net/05_higher_order.htmlhttp://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 FunctionsHigher-order Functions notenote nn is still available withinis still available within the returned functionthe returned function

ClosuresClosures "A closure is a special kind of object that"A closure is a special kind of object that combines two things: a function, andcombines two things: a function, and the environment in which that functionthe environment in which that function was created."was created." https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closureshttps://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(); ClosuresClosures

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); } });

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

JavaScript ContextJavaScript Context The environment in which a functionThe environment in which a function executes.executes. thethe thisthis keywordkeyword Context is most often determined byContext is most often determined by how a function is invokedhow a function is invoked

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

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

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

Dynamic Function ContextDynamic 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.bindFunction.prototype.bind var myWidget = { type: 'myAwesomeWidget', clickCallback: function() { console.log(this.type); } } document.getElementById('submit').addEventListener( 'click', myWidget.clickCallback.bind(myWidget) );

jQueryjQuery $( "li" ).each(function myIterator(index) { $( this ).text(); }); jQuery controls the context of the callbackjQuery controls the context of the callback andand thisthis becomes eachbecomes each lili elementelement

AngularAngular 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. WithWith controllerAscontrollerAs the contextthe context becomesbecomes bound to the template.bound to the template.

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/ ResourcesResources

JavaScript Fundamentals with Angular and Lodash

JavaScript Fundamentals with Angular and Lodash

More Related Content

What's hot

Similar to JavaScript Fundamentals with Angular and Lodash

Recently uploaded

JavaScript Fundamentals with Angular and Lodash