Are you an Apex developer who is excited about the LWC framework, but at the same time is confused by the modern JavaScript required? Maybe this session can help! During this session, we will go over the JavaScript language from the point of view of an Apex developer, focusing on the differences between the two languages and the frequent confusing areas and pain points. This session is ideal for those familiar with Apex and who have little or no experience with JavaScript.

1. Modern JavaScript
Explain it like I'm an Apex developer
by Edith Valencia-Martinez

2. #CD22
So what is modern JavaScript?
5 modern JavaScript features
Show me a Lightning Web Component !
Conclusions
Agenda

3. #CD22
So what is modern JavaScript?
Brendan Eich
invented
JavaScript for
Netscape
1995

4. #CD22
So what is modern JavaScript?
Brendan Eich
invented
JavaScript for
Netscape
1995
1997
ECMAScript
1 published
ES2
published
1998
1999
ES3
published

5. #CD22
So what is modern JavaScript?
2009
1999
2003

6. #CD22
So what is modern JavaScript?
Brendan Eich
invented
JavaScript for
Netscape
1995
1997
ECMAScript
1 published
ES2
published
1998
1999
ES3
published
ES5
published
2009

7. #CD22
So what is modern JavaScript?
2009
1999
Ajax, JQuery
JSON, strict,
NodeJS
2015
AngularJS,
ReactJS

8. #CD22
So what is modern JavaScript?
Brendan Eich
invented
JavaScript for
Netscape
1995
1997
ECMAScript 1
published
ES2
published
1998
1999
ES3
published
ES5
published
2009
ES6
published
2015

9. #CD22
So what is modern JavaScript?
Brendan Eich
invented
JavaScript for
Netscape
1995
1997
ECMAScript
1 published
ES2
published
1998
1999
ES3
published
ES5
published
2009
ES6
published
2015

10. #CD22
So what is modern JavaScript?
Brendan Eich
invented
JavaScript for
Netscape
1995
1997
ECMAScript
1 published
ES2
published
1998
1999
ES3
published
ES5
published
2009
ES6
published
2015
ES2022
published
… 2022 …

11. #CD22
Block-level declarations
Classes
Modules
Arrow functions
Promises
5 modern JavaScript (ES6) features

12. #CD22
Declare variables/constants that are inaccessible outside a given block scope
( indicated by curly brackets { and } )
let: declare a variable and limit its scope to only the current code block.
const: declare constants, their value cannot be changed once set.
Block-level declarations

13. #CD22
Apex: variable scope

14. #CD22
Apex: variable scope

15. #CD22
Apex: variable scope

16. #CD22
Apex: variable scope

17. #CD22
Apex: variable scope

18. #CD22
Apex: constants

19. #CD22
Apex: constants

20. #CD22
Apex: constants

21. #CD22
ES6: let and const

22. #CD22
ES6: let and const
Scope 1
Scope 1

23. #CD22
ES6: let and const

24. #CD22
ES6: let and const

25. #CD22
ES6: let and const

26. #CD22
ES6: let and const
Scope 2
Scope 2

27. #CD22
ES6: let and const

28. #CD22
ES6: let and const

29. #CD22
Similarities: ES6 classes support: static functions, instance methods, getters
and setters, inheritance.
Differences: No access modifiers in ES6’s classes. Private field declarations
available in ECMAScript 2022
Constructors in ES6 use the keyword ‘constructor’.
ES6 classes vs Apex classes

30. #CD22

31. #CD22

32. #CD22

33. #CD22

34. #CD22

35. #CD22

36. #CD22

37. #CD22

38. #CD22

39. #CD22

40. #CD22

41. #CD22
Related set of Javascript code. By default, variables and functions of a
module are not available for use.
ES6: modules

42. #CD22
ES6: modules
formatAmount()

43. #CD22
ES6: modules
export
formatAmount()

44. #CD22
ES6: modules
export
formatAmount() import

45. #CD22
Apex does not have a module concept per se. As long as you declare
your class 'public' or 'global', you can reuse it in another class.
ES6: modules

46. #CD22
ES6: exporting

47. #CD22
ES6: exporting

48. #CD22
ES6: exporting

49. #CD22
ES6: exporting

50. #CD22
ES6: single default export

51. #CD22
ES6: importing

52. #CD22
ES6: importing

53. #CD22
ES6: importing

54. #CD22
Simple syntax for creating functions
Uses an arrow =>
In a way arrow functions behave similar to Apex as opposed to
traditional JavaScript functions.
ES6: arrow functions

55. #CD22
ES6: arrow functions

56. #CD22
ES6: arrow functions

57. #CD22
ES6: arrow functions

58. #CD22
ES6: arrow functions

59. #CD22
They operate in the context of their enclosing scope.
As opposed to:
The value of this is usually determined by a function’s execution
context.
this might be referring to something different each time the function is
called (runtime binding).
ES6: arrow functions

60. #CD22
ES6: arrow functions and this

61. #CD22
ES6: arrow functions and this

62. #CD22
ES6: arrow functions and this

63. #CD22
ES6: arrow functions and this

64. #CD22
ES6: arrow functions and this

65. #CD22
ES6: arrow functions and this
NaN !

66. #CD22
ES6: arrow functions and this
Window !

67. #CD22
ES6: arrow functions and this

68. #CD22
ES6: promises
Asynchronous programming.
“A promise is an object that is used as a placeholder for the eventual results
of a deferred computation.”
Specifies some code to be executed later, and also explicitly indicates if the
code succeeded or failed.
Apex: @future, Queueables

69. #CD22
ES6: promises

70. #CD22
ES6: promises

71. #CD22
ES6: promises

72. #CD22
ES6: promises

73. #CD22
ES6: promises

74. #CD22
Show me a LWC!

75. #CD22

76. #CD22
modules

77. #CD22
modules,
classes,
inheritance

78. #CD22
promises,
arrow
functions

79. #CD22
The road from Apex to JavaScript is smoother now thanks to ES6.
Conclusions

80. #CD22
The road from Apex to JavaScript is smoother now thanks to ES6.
Similar syntax to Apex is an advantage.
Conclusions

81. #CD22
The road from Apex to JavaScript is smoother now thanks to ES6.
Similar syntax to Apex is an advantage.
There is more demand to code in JavaScript.
Conclusions

82. #CD22
The road from Apex to JavaScript is smoother now thanks to ES6.
Similar syntax to Apex is an advantage.
There is more demand to code in JavaScript.
There are many resources around to learn JavaScript!
Conclusions

83. #CD22
The road from Apex to JavaScript is smoother now thanks to ES6.
Similar syntax to Apex is an advantage.
There is more demand to code in JavaScript.
There are many resources around to learn JavaScript!
Conclusions

84. #CD22
JavaScript skills for Salesforce developers
https://trailhead.salesforce.com/en/content/learn/modules/javascript-essentials-
salesforce-developers
Trailhead: Learn to work with JavaScript
(https://trailhead.salesforce.com/en/content/learn/trails/learn-to-work-with-javascript)
Trailhead: Build a Bear-Tracking App with Lightning Web Components
https://trailhead.salesforce.com/en/content/learn/projects/lwc-build-flexible-
apps?trail_id=build-lightning-web-components
Understanding ECMAScript 6: The definite guide for JavaScript developers
1st Edition
Nicholas C. Zakas
Resources

85. Thank you! #CD22