1. Habits of Highly Effective JavaScript Developers
#JSHabits
@jonathanfmills

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

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

5. Know Your Code

6. JS is…

7. JS is… Not your primary language

8. JS is…

9. JS is… Different

10. JS is…

11. JS is… Helpful

12. JS is… Helpful;

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

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

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

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

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

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

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

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

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

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

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

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

25. Equality…

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

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

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

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

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

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

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

33. Hoisting
Function Expressions
Prototypes…

34. Spend the time to understand what is happening

35. Linting

37. Have an automated system check your code for you!

38. Know Your IDE

39. Make your IDE work for you!

40. Strict Mode

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

42. Globals

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

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

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

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

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

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

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

50. Deletes…

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

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

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

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

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

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

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

58. '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);

59. Strict Mode makes JavaScript give you your errors…

60. What is this?

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

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

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

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

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

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

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

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

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

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

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

72. Make JavaScript give you your errors

73. Know Who Your Functions Are…

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

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

76. I Promise!

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

78. 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 () {})

79. Don’t give in to lazy callback practices

80. ES6 Rocks!

81. Use the latest features that are available to you

82. Don’t reinvent the wheel

83. Moment
React
Lodash
Bootstrap
Font Awesome…
Underscore
Angular
Jquery

84. Use packages that are available to you.

85. Don’t Over Do It…

86. 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;

87. Habits of Highly Effective JavaScript Developers
#JSHabits
@jonathanfmills