Habits of Highly Effective JavaScript Developers #JSHabits @jonathanfmills

This is me… Jonathan Mills Consultant at Paige Technologies I Write JavaScript Pluralsight Author… This is me…

“We are what we repeatedly do. Excellence is not an act, but a habit” Aristotle

Know Your Code

JS is…

JS is… Not your primary language

JS is…

JS is… Different

JS is…

JS is… Helpful

JS is… Helpful;

“Certain ECMAScript statements (…) must be terminated with semicolons EcmaScript Standards

“For convenience, however, such semicolons may be omitted from the source text in certain situations.“ EcmaScript Standards

“These situations are described by saying that semicolons are automatically inserted….” EcmaScript Standards

var a = 12 var b = 13 ​ if(a){console.log(a)} console.log(a+b)

var a = 12; var b = 13; ​ if(a){console.log(a);} console.log(a+b);

var a = 12 var b = 13 var c = b + a ​ ['menu', 'items', 'listed'] .forEach(function(element) { console.log(element) })

var a = 12; var b = 13; var c = b + a ​ ['menu', 'items', 'listed'] .forEach(function(element) { console.log(element); })

var a = 12 var b = 13 var c = b + a ​ (function(){ console.log('inside my iife’) console.log('doing secret stuff...’) }())

var a = 12; var b = 13; var c = b + a ​ (function(){ console.log('inside my iife'); console.log('doing secret stuff...'); }())

var a = 12; var b = 13; var c = b + a ​ ;(function(){ console.log('inside my iife'); console.log('doing secret stuff...'); }())

function returnObject() { if(someTrueThing) greeting: 'hello' } restricted productions

function returnObject() { if(someTrueThing) return; greeting: 'hello' }

Equality…

var x = 1; var y = '1'; ​ if (x == y) { document.write('Equal') } else { document.write('Not Equal') }

var x = false; var y = 0; ​ if (x == y) { document.write('Equal') } else { document.write('Not Equal') }

var x = false; var y = 0; ​ if (x === y) { document.write('Equal') } else { document.write('Not Equal') }

name:'Jon', DOB: ‘11/11/11', single: false } var person = { ​ if(person.name){ document.write('Exists') } else { document.write('Does Not ')

name:'Jon', DOB: ‘11/11/11', single: false } var person = { ​ if(person.DOB){ document.write('Exists') } else { document.write('Does Not ')

name:'Jon', DOB: ‘11/11/11', single: false } var person = { ​ if(person.single){ document.write('Exists') } else { document.write('Does Not ')

name:'Jon', DOB: ‘11/11/11', single: false } var person = { if(typeof person.name !== 'undefined'){ document.write('Exists') } else { document.write('Does Not ')

Hoisting Function Expressions Prototypes…

Spend the time to understand what is happening

Linting

Have an automated system check your code for you!

Know Your IDE

Make your IDE work for you!

Strict Mode

“JavaScript is trying to help you…. Don’t let it.” Me

Globals

var toPrint = "print me"; ​ function print(out){ var stringToPrint = 'printing: ' + out;   console.log(stringToPrint); } print('Hello');

var toPrint = "print me"; ​ function print(out){ var stringToPrint = 'printing: ' + out;   console.log(stringToPrint); } print('Hello'); console.log(stringToPrint);

var toPrint = "print me"; ​ function print(out){ var stringToPrint = 'printing: ' + out;   console.log(stringToPrint); } print('Hello'); console.log(stringToPrint); // ReferenceError:

var toPrint = "print me"; ​ function print(out){ stringToPrint = 'printing: ' + out;   console.log(stringToPrint); } print('Hello'); console.log(stringToPrint);

var toPrint = "print me"; ​ function print(out){ stringToPrint = 'printing: ' + out;   console.log(stringToPrint); } print('Hello'); console.log(stringToPrint); // printing: Hello

'use strict'; var toPrint = "print me"; ​ function print(out){ stringToPrint = 'printing: ' + out;   console.log(stringToPrint); } print('Hello'); console.log(stringToPrint);

'use strict’; var toPrint = "print me"; ​ function print(out){ stringToPrint = 'printing: ' + out; // ReferenceError   console.log(stringToPrint); } print('Hello'); console.log(stringToPrint);

Deletes…

var obj = {a: 100,           b: 200},     myVar = 10; ​ delete obj.a; ​ console.log(obj);

var obj = {a: 100,           b: 200},     myVar = 10; ​ delete obj.a; ​ console.log(obj); //{b: 200}

var obj = {a: 100,           b: 200},     myVar = 10; ​ delete obj.a; delete obj; console.log(obj);

var obj = {a: 100,           b: 200},     myVar = 10; ​ delete obj.a; delete obj; console.log(obj); //{b: 200}

var obj = {a: 100,           b: 200},     myVar = 10; ​ delete obj.a; delete myVar; console.log(obj); console.log(myVar);

var obj = {a: 100,           b: 200},     myVar = 10; ​ delete obj.a; delete myVar; console.log(obj); //{b: 200} console.log(myVar); //10

'use strict’; var obj = {a: 100,           b: 200},     myVar = 10; ​ delete obj.a; delete myVar; delete obj; console.log(obj); console.log(myVar);

'use strict’; var obj = {a: 100,           b: 200},     myVar = 10; ​ delete obj.a; delete myVar; //SyntaxError: Delete of an unqualified identifier in strict mode. delete obj; console.log(obj); console.log(myVar);

Strict Mode makes JavaScript give you your errors…

What is this?

var objA = { greeting: 'Hello', sayHi: function (name) { } ​

var objA = { greeting: 'Hello', sayHi: function (name) { document.write(this.greeting + ' ' + name) } ​

var objA = { greeting: 'Hello', sayHi: function (name) { document.write(this.greeting + ' ' + name) } ​ objA.sayHi('Jon'); // Hello Jon

var objA = { greeting: 'Hello', sayHi: function (name) { document.write(this.greeting + ' ' + name) } var objB = { greeting: 'Sup',

var objA = { greeting: 'Hello', sayHi: function (name) { document.write(this.greeting + ' ' + name) } var objB = { greeting: 'Sup', objB.sayHi = objA.sayHi objB.sayHi('Jon');

var objA = { greeting: 'Hello', sayHi: function (name) { document.write(this.greeting + ' ' + name) } var objB = { greeting: 'Sup', objB.sayHi = objA.sayHi objB.sayHi('Jon'); // Sup Jon

var objA = { greeting: 'Hello', sayHi: function (name) { document.write(this.greeting + ' ' + name) } var objB = { greeting: 'Sup', objB.sayHi = objA.sayHi objB.sayHi('Jon'); // Sup Jon

var objA = { greeting: 'Hello', sayHi: function (name) { document.write(this.greeting + ' ' + name) } var sayHi = objA.sayHi sayHi('Jon');

var objA = { greeting: 'Hello', sayHi: function (name) { document.write(this.greeting + ' ' + name) } var sayHi = objA.sayHi sayHi('Jon'); // undefined Jon

'use strict’; var objA = { greeting: 'Hello', sayHi: function (name) { document.write(this.greeting + ' ' + name) } var sayHi = objA.sayHi sayHi('Jon'); // Ref Error

var objA = { greeting: 'Hello', sayHiAsync: function (name) { setTimeout(function () { document.write(this.greeting + ' ' + name) }, 500) } ​ objA.sayHiAsync('Jon');

Make JavaScript give you your errors

Know Who Your Functions Are…

asyncMethod('Open DB Connection', function () { //do stuff then: asyncMethod('Find User', function () { asyncMethod('validate User', function () { asyncMethod('do stuff', function(){ //do stuff }) } )

var findAndValidateUser = function(){ asyncMethod('findUser',validateUser) } var validateUser = function () { asyncMethod('validateUser',  doStuff) var doStuff = function () { asyncMethod('do stuff', function () {}) asyncMethod('Open DB Connection',findAndValidateUser)

I Promise!

function asyncMethod(message) { return new Promise(function (fulfill, reject) { setTimeout(function () { console.log(message); fulfill(); }, 500) }); }

function findUser() { return asyncMethod('Find User') } function validateUser() { return asyncMethod('validate User') function doStuff() { return asyncMethod('do stuff') asyncMethod('Open DB Connection') .then(findUser) .then(validateUser) .then(doStuff) .then(function () {})

Don’t give in to lazy callback practices

ES6 Rocks! https://kangax.github.io/compat-table/es6/

Use the latest features that are available to you

Don’t reinvent the wheel

Moment React Lodash Bootstrap Font Awesome… Underscore Angular Jquery

Use packages that are available to you.

Don’t Over Do It…

module.exports = xxxxx; function xxxxx(str, len, ch) { str = String(str); var i = -1; if (!ch && ch !== 0) ch = ' '; len = len - str.length; while (++i < len) { str = ch + str; } return str;

Habits of Highly Effective JavaScript Developers #JSHabits @jonathanfmills