JavaScript: Past, Present, and Future

Ah, JavaScript! Like it or not, it's a "tragically important" language that is "eating the world." Hate it? Love it? Avoid it? Embrace it?

This talk will be a parade of face-palm JavaScript fails, stupid JavaScript tricks, and bad jokes sure to get an eye-roll from everyone! Along the way, we may even learn a few mistakes to avoid and tips to make our own JavaScript less terrible!

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. > const lol = a + b + c – f * ( n + o );
    NaN
    

    View Slide

13. > NaN >= 0
    false
    

    View Slide

14. > NaN <= 0
    false
    

    View Slide

15. > typeof NaN
    number
    

    View Slide

16. ( a + b ) + c = a + ( b + c ) // mathematically true
    > 0.1 + 0.2 === 0.3
    false
    > ( a + b ) + c == a + ( b + c )
    ??
    

    View Slide

17. > 0.1 + 0.2
    0.30000000000000004
    

    View Slide

18. > Math.round(0.4999999999999999722444243843710864894092082)
    0
    > Math.round(0.4999999999999999722444243843710864894092083)
    1
    I’ve got 99 problems but
    JavaScript ain’t
    1.0000000000000009
    

    View Slide

19. > [ 2, 10 ].sort()
    [ 10, 2 ]
    

    View Slide

20. > ['10','10','10', '10', '10'].map( parseInt )
    [ 10, NaN, 2, 3, 4 ]
    

    View Slide

21. > typeof undefined // undefined
    > typeof true // boolean
    > typeof "hello" // string
    > typeof 1 // number
    > typeof {lol:true} // object
    > typeof [1,2,3] // object
    > typeof null // object
    

    View Slide

22. > null == 0 // false
    > null > 0 // false
    > null < 0 // false
    > null >= 0 // true
    > null <= 0 // true
    > Number( null ) // 0
    

    View Slide

23. > false
    > null
    > undefined
    > ""
    > 0
    > NaN
    

    View Slide

24. > wat.test("javascript"); // true
    > wat.test("wat r u doin"); // false
    > const wat = /a/g;
    

    View Slide

25. // undefined
    function troll() {
    return
    {
    haha: "ha!"
    };
    }
    troll();
    // automatic semi-colon
    

    View Slide

26. const arr = [];
    arr[1] = 1;
    arr[3] = 2;
    arr[10] = 3;
    arr.length // 11
    arr[-1] = 4;
    arr.s = 5;
    arr.length // 11
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. • trimStart() and trimEnd()
    • Optional Catch
    • Object.fromEntries()
    • flat() and flatMap()
    

    View Slide

95. // String.prototype.trimStart() and trimEnd()
    const what = " \n \t what is love".trimStart();
    const bacon = "bacon don't hurt me\n \n \n \t ".trimEnd();
    const obj = {
    lyric: what + " " + bacon
    };
    console.log( obj );
    // { lyric: "what is love bacon don't hurt me" }
    

    View Slide

96. // Optional Catch
    try {
    console.log( "Error objects?" );
    throw new Error( "LOL" );
    } catch {
    console.log( "We don't need no stinkin' Error objects!" );
    }
    // Error objects?
    // We don't need no stinkin' Error objects!
    

    View Slide

97. // Object.fromEntries()
    const props = [
    [ "what", "is love" ],
    [ "bacon", "don't hurt me" ],
    [ "love", true ]
    ];
    const obj = Object.fromEntries( props );
    console.log( obj );
    // { what: 'is love', bacon: "don't hurt me", love: true }
    

    View Slide

98. // Array.prototype.flat() and .flatMap()
    const nestedArrays = [
    "bacon", "eggs",
    [ "waffles" ], [ "coffee" ],
    [ "doughnuts", "milk" ]
    ];
    const flattened = nestedArrays.flat();
    console.log( flattened );
    // [ 'bacon', 'eggs', 'waffles', 'coffee', 'doughnuts', 'milk' ]
    

    View Slide

99. • Nullish coalescing ?? operator
    • Optional ?. chaining
    • Promise.allSettled()
    • Dynamic import()
    

    View Slide

100. // Logical OR || operator works with any falsy value
     console.log( 0 || "zero value" ); // zero value
     console.log( "" || "empty string value" ); // empty string value
     console.log( false || "false value" ); // false value
     console.log( null || "null value" ); // null value
     console.log( undefined || "undefined value" ); // undefined value
     

     View Slide

101. // Nullish (??) operator only works with null/undefined
     console.log( 0 ?? "zero value" ); // 0
     console.log( "" ?? "empty string value" ); // ""
     console.log( false ?? "false value" ); // false
     console.log( null ?? "null value" ); // null value
     console.log( undefined ?? "undefined value" ); // undefined value
     

     View Slide

102. // The old way of checking for potentially missing properties
     const customer = {};
     let city;
     try {
     city = customer.address.city;
     } catch ( err ) {
     console.log( err );
     // TypeError: Cannot read properties of undefined (reading 'city’)
     }
     console.log( city ); // undefined
     

     View Slide

103. // The old way of checking for potentially missing properties
     const customer = {};
     let city;
     if ( customer && customer.address && customer.address.city ) {
     city = customer.address.city;
     }
     console.log( city ); // undefined
     

     View Slide

104. // Optional ?. Chaining
     const customer1 = {};
     const customer2 = {
     address: {
     city: "Nashville"
     }
     };
     const city1 = customer1?.address?.city; // undefined
     const city2 = customer2?.address?.city; // Nashville
     

     View Slide

105. // Promise.allSettled()
     const p1 = new Promise( ( resolve, reject ) => {
     setTimeout( () => { resolve( "p1 resolved" ); }, 250 );
     } );
     const p2 = new Promise( ( resolve, reject ) => {
     setTimeout( () => { resolve( "p2 resolved" ); }, 450 );
     } );
     const p3 = new Promise( ( resolve, reject ) => {
     setTimeout( () => { reject( "p3 rejected" ); }, 650 );
     } );
     

     View Slide

106. // Promise.allSettled()
     const results = await Promise.allSettled( [ p1, p2, p3 ] );
     console.log( results );
     // [
     // { status: 'fulfilled', value: 'p1 resolved' },
     // { status: 'fulfilled', value: 'p2 resolved' },
     // { status: 'rejected', reason: 'p3 rejected' }
     // ]
     

     View Slide

107. // Dynamic import()
     const example = await import( "./importExample.js" );
     console.log( example );
     // [Module: null prototype] {
     // default: { whatIsLove: [Function: whatIsLove] }
     // }
     

     View Slide

108. • String.prototype.replaceAll()
     • Promise.any()
     • Logical assignment operators ||= &&= ??=
     • Numeric separator
     

     View Slide

109. // Old string replace()
     const qs = "q=what+is+love";
     const nope = qs.replace( "+", " " ); // "q=what is+love”
     

     View Slide

110. // Old string replace()
     const qs = "q=what+is+love";
     const nope = qs.replace( "+", " " ); // "q=what is+love”
     const yep = qs.replace( /\+/g, " " ); // "q=what is love"
     

     View Slide

111. // Old string replace()
     const qs = "q=what+is+love";
     const nope = qs.replace( "+", " " ); // "q=what is+love”
     const yep = qs.replace( /\+/g, " " ); // "q=what is love"
     const lol = qs.split( "+" ).join( " " ); // "q=what is love"
     

     View Slide

112. // String.prototype.replaceAll()
     const n00b = "Hey, I can leet speak, too, yo";
     const l33t = n00b.replaceAll( "e", "3" )
     .replaceAll( "o", "0" )
     .replaceAll( ",", "" )
     .toLowerCase();
     console.log( l33t );
     

     View Slide

113. // String.prototype.replaceAll()
     const n00b = "Hey, I can leet speak, too, yo";
     const l33t = n00b.replaceAll( "e", "3" )
     .replaceAll( "o", "0" )
     .replaceAll( ",", "" )
     .toLowerCase();
     console.log( l33t ); // h3y i can l33t sp3ak t00 y0
     

     View Slide

114. // Promise.any() example
     const p1 = new Promise( res => { setTimeout( () => { res(
     "knock, knock" ); }, 200 ); } );
     const p2 = new Promise( res => { setTimeout( () => { res(
     "who's there?" ); }, 400 ); } );
     const interruptingCow = Promise.reject( "MOO!!" );
     const lol = await Promise.any( [ p1, p2, interruptingCow ] );
     console.log( lol );
     

     View Slide

115. // Promise.any() example
     const p1 = new Promise( res => { setTimeout( () => { res(
     "knock, knock" ); }, 200 ); } );
     const p2 = new Promise( res => { setTimeout( () => { res(
     "who's there?" ); }, 400 ); } );
     const interruptingCow = Promise.reject( "MOO!!" );
     const lol = await Promise.any( [ p1, p2, interruptingCow ] );
     console.log( lol ); // knock, knock
     

     View Slide

116. // Logical assignment operators
     // OR only assigns if x is a falsy value
     let x = false;
     x ||= "yes";
     x ||= "what is";
     

     View Slide

117. // Logical assignment operators
     // OR only assigns if x is a falsy value
     let x = false;
     x ||= "yes";
     x ||= "what is"; // yes
     

     View Slide

118. // Logical assignment operators
     // OR only assigns if x is a falsy value
     let x = false;
     x ||= "yes";
     x ||= "what is"; // yes
     // AND assigns if y is not a falsy value
     let y = "gimme-all-yer";
     y &&= "i love";
     

     View Slide

119. // Logical assignment operators
     // OR only assigns if x is a falsy value
     let x = false;
     x ||= "yes";
     x ||= "what is"; // yes
     // AND assigns if y is not a falsy value
     let y = "gimme-all-yer";
     y &&= "i love"; // i love
     

     View Slide

120. // Logical assignment operators
     // OR only assigns if x is a falsy value
     let x = false;
     x ||= "yes";
     x ||= "what is"; // yes
     // AND assigns if y is not a falsy value
     let y = "gimme-all-yer";
     y &&= "i love"; // i love
     // ??= Nullish only assigns if z is null or undefined
     let z = "bacon";
     z ??= y;
     

     View Slide

121. // Logical assignment operators
     // OR only assigns if x is a falsy value
     let x = false;
     x ||= "yes";
     x ||= "what is"; // yes
     // AND assigns if y is not a falsy value
     let y = "gimme-all-yer";
     y &&= "i love"; // i love
     // ??= Nullish only assigns if z is null or undefined
     let z = "bacon";
     z ??= y; // bacon
     

     View Slide

122. // Numeric separators example
     const numbersMakeMeSad = 10204005020405;
     

     View Slide

123. // Numeric separators example
     const numbersMakeMeSad = 10204005020405;
     const notSoBad = 10_204_005_020_405;
     

     View Slide

124. // Numeric separators example
     const numbersMakeMeSad = 10204005020405;
     const notSoBad = 10_204_005_020_405;
     console.log( numbersMakeMeSad === notSoBad ); // true
     

     View Slide

125. • Array.prototype.at() & String .at()
     • Top-level await
     • Error cause
     • New static, private class members
     

     View Slide

126. // String and Array at()
     const arr = [ "what", "is", "love", "bacon", "don't", "hurt", "me" ];
     console.log( arr.at( 3 ) );
     

     View Slide

127. // String and Array at()
     const arr = [ "what", "is", "love", "bacon", "don't", "hurt", "me" ];
     console.log( arr.at( 3 ) ); // bacon
     

     View Slide

128. // String and Array at()
     const arr = [ "what", "is", "love", "bacon", "don't", "hurt", "me" ];
     console.log( arr.at( 3 ) ); // bacon
     console.log( arr.at( -1 ) );
     

     View Slide

129. // String and Array at()
     const arr = [ "what", "is", "love", "bacon", "don't", "hurt", "me" ];
     console.log( arr.at( 3 ) ); // bacon
     console.log( arr.at( -1 ) ); // me
     

     View Slide

130. // String and Array at()
     const arr = [ "what", "is", "love", "bacon", "don't", "hurt", "me" ];
     console.log( arr.at( 3 ) ); // bacon
     console.log( arr.at( -1 ) ); // me
     const msg = "I love rock n' roll";
     console.log( msg.at( 4 ) );
     

     View Slide

131. // String and Array at()
     const arr = [ "what", "is", "love", "bacon", "don't", "hurt", "me" ];
     console.log( arr.at( 3 ) ); // bacon
     console.log( arr.at( -1 ) ); // me
     const msg = "I love rock n' roll";
     console.log( msg.at( 4 ) ); // v
     

     View Slide

132. // Top-level await
     async function sleep( ms ) {
     const msg = `I slept for ${ ms } milliseconds`;
     return new Promise( resolve => setTimeout( () => resolve( msg ), ms ) );
     }
     const result = await sleep( 500 );
     console.log( result );
     console.log( "finished" );
     

     View Slide

133. // Top-level await
     async function sleep( ms ) {
     const msg = `I slept for ${ ms } milliseconds`;
     return new Promise( resolve => setTimeout( () => resolve( msg ), ms ) );
     }
     const result = await sleep( 500 );
     console.log( result );
     console.log( "finished" );
     // I slept for 500 milliseconds
     // finished
     

     View Slide

134. // Error _with_ a cause
     function breakin() {
     throw new Error( "Gonna stop you cold" );
     }
     function breakin2ElectricBoogaloo() {
     try {
     breakin();
     } catch ( err ) {
     throw new Error( "Whacked", { cause: err } );
     }
     }
     

     View Slide

135. // Error _with_ a cause
     function shutUpAndDance() {
     try {
     breakin2ElectricBoogaloo();
     } catch ( err ) {
     console.log( err );
     }
     }
     shutUpAndDance();
     

     View Slide

136. // Error _with_ a cause
     shutUpAndDance();
     // Error: Whacked
     // at breakin2ElectricBoogaloo ...
     // [cause]: Error: Gonna stop you cold
     // at breakin ...
     // }
     

     View Slide

137. // Private and static class members
     class Of86GlenbrookNorthHigh {
     #reason;
     static car = "Ferrari";
     static #miles = 26000;
     constructor( reason ) {
     this.#reason = reason;
     }
     ...
     }
     

     View Slide

138. // Private and static class members
     class Of86GlenbrookNorthHigh {
     #reason;
     static car = "Ferrari";
     static #miles = 26000;
     static #getMiles() {
     Of86GlenbrookNorthHigh.#miles += 123;
     return Of86GlenbrookNorthHigh.#miles;
     }
     }
     

     View Slide

139. // Private and static class members
     class Of86GlenbrookNorthHigh {
     #reason;
     static car = "Ferrari";
     static #miles = 26000;
     static #getMiles() { …
     }
     #carStatus() {
     const miles = Of86GlenbrookNorthHigh.#getMiles();
     return `The ${ Of86GlenbrookNorthHigh.car } has ${ miles } miles`;
     }
     }
     

     View Slide

140. // Private and static class members
     class Of86GlenbrookNorthHigh {
     #carStatus() { …
     }
     status() {
     console.log( `Ferris can't go to school, he's ${ this.#reason }` );
     console.log( this.#carStatus() );
     }
     }
     

     View Slide

141. // Private and static class members
     const myClass = new Of86GlenbrookNorthHigh( "sick" );
     myClass.status();
     // Ferris can't go to school, he's sick
     // The Ferrari has 26123 miles
     

     View Slide

142. // Private and static class members
     const myClass = new Of86GlenbrookNorthHigh( "sick" );
     myClass.status();
     myClass.#carStatus(); // SyntaxError
     console.log( myClass.#car ); // SyntaxError
     

     View Slide

143. View Slide

144. View Slide

145. View Slide

146. View Slide

147. View Slide

148. View Slide

149. View Slide

150. View Slide

151. View Slide

152. View Slide

153. View Slide

154. View Slide

155. View Slide

156. View Slide

157. View Slide

158. View Slide

159. View Slide

160. View Slide

161. View Slide

162. View Slide

163. View Slide

164. View Slide