Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

{{ user.name }}
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 }]

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Hello $scope.dynamicClass = 'someDyanmicClassName'; Hello

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

{{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 ...

Slide 11

Slide 11 text

{{user.name}}
Previous Next http:/ /output.jsbin.com/zesuhu http:/ /output.jsbin.com/zesuhu

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content