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;
}
run();
-> 2
-> 1

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

"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
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

Recommended

More Related Content

What's hot (20)

Similar to JavaScript Fundamentals with Angular and Lodash (20)

Recently uploaded (20)

JavaScript Fundamentals with Angular and Lodash