ok

1. Lecture 2: ES6/ES2015 and
Beyonds with the Best Practices
Kobkrit Viriyayudhakorn, Ph.D.
CEO of iApp Technology Limited.
kobkrit@gmail.com
http://www.kobkrit.com

2. What we will learn today?
• A bit on JavaScript History
• Learn how to program in the modern JavaScript
i.e., ECMAScript 2015 (Version 6) / ECMAScript 6 /
ES2015 / ES6 complied by BabelJS
• Program with the best practices (Airbnb coding
style) and style checking tools by ESLint

3. Short History
• Want to added support for Java applets more
accessible to non-Java programmers in Netscape.
• Developed by Brendan Eich of Netscape
• December 1995
• Mocha => LiveScript => JavaScript
• Popular!
• Microsoft release JScript
• NetScape submit to ECMA for standardize

4. ECMAScript
• Script-Language
Specification
• Standardized by Ecma
International in
ECMA-262 and ISO/IEC
16262, based on
JavaScript
• First Appeared June
1997, 19 year ago.

5. Significant Development
• V8 JavaScript engine (2008). To compete with Internet
Explorer on JavaScript benchmark, Google developed v8 that
can compile JavaScript to Native Machine code. It is very fast.
• NodeJS + NPM (2009): Using V8 to make server-side
JavaScript Web Application.
• MongoDB (2009): No SQL database based on V8 engine.
• React (2013): JavaScript Front-end Web framework for
creating Interactive UI.
• React-Native (2015): Enable to Mobile App Development

6. https://www.youtube.com/watch?v=8ybquJSjZHg

7. HomeBrew Installation
• Open Terminal (Click on Find icon on the top right
of the screen)
• Type “Terminal”
• Enter $ /usr/bin/ruby -e "$(curl -fsSL https://
raw.githubusercontent.com/Homebrew/install/
master/install)"

8. Install React-Native in Mac
for iOS Development.

9. React-Native-Cli Command

10. Atom IDE
https://atom.io/

11. Setup the Project
• Download atom IDE and install
• $ cd workingFolder
• $ react-native init l2es6
• $ cd l2es6
• $ react-native run-ios
• $ atom .

12. Making a new JS file
Right click on l2es6, Select New File, Type down a new file
with JS extension

13. Running JS Script
• Open Terminal (Open
Spotlight , Type
Terminal)
• Change Directory to
working directory
($ cd {working dir})
• $ node {filename.js}

14. Let’s Start with ES6

15. ES6 Basic
• /* Comment */
• // Comment
• console.log(‘print out’);
• Syntax mostly derived from C language
• if (true){}
• while (true){}
• do{…} while(true);
• for(init ; condition; incr) {}

16. Primitive Types
• Directly Store Value
• string
• number
• boolean
• null
• undefined

17. Primitive Type #1: String, Number, and Boolean

18. Primitive Type #2: Null, Undefined, and Reference by Value

19. Exercise 1

20. Complex Types
• Reference of its value
• object
• array
• function

21. Complex Type #1: Object & Array

22. Complex Type #2: Function and Pass by Reference

23. Exercise 2

24. Declaration
(Var, Let and Const)
• Var, Let, Const = Making Variable Declaration
• Const = Constant Declaration, Can’t Reassign.
• Use with reference that never change.
• Block-Level Scope
• Safer (If reassignment happen, it will throw the
errors)

25. Declaration
(Var, Let and Const)
• Let = Variable Declaration, Can Reassign.
• Block-Level Scope
• Var = Variable Declaration, Can Reassign
• Global-Level Scope
• Old JavaScript
• Dangerous. Don’t use it.

26. Declaration #1: Global Scope, Block Scope and Constant

27. Declaration #2: General Use Case in For loop

28. Exercise 3

29. Functions
• Function in JavaScript are objects, which can use
as arguments.
• Function can be invoked.

30. Function #1: Declaration, Invocation

31. Function #2: ES6 Feature - Declaration

32. Exercise 4

33. Function #3: Anonymous Function

34. Function #4: Recursive

35. Function #5: Callback

36. Exercise 5

37. Function #6: Exceptions

38. Function #7: ES6 Feature - Rest Params (Spreads …),
Default Params

39. Function #8: ES6 Feature - Named Parameters

40. Exercise 6

41. Function’s Airbnb Style
Guides
Style Guide #1. Use function declarations instead of function
expressions.

42. Style Guide #2. Wrap immediately invoked function
expressions in parentheses.
Why? An immediately invoked function expression is a single unit -
wrapping both it, and its invocation parens, in parens, cleanly expresses
this.

43. Style Guide #3. Never declare a function in a non-function
block (if, while, etc.)

44. Style Guide #4. Never use arguments, use … instead.

45. Style Guide #5. Use parameter syntax rather than mutating
function arguments.

46. Style Guide #6. Avoid side effects with default parameters

47. Style Guide #7: Always put default parameters last.

48. Style Guide #8: Use spread operator … to call variadic
function.

49. Style Guide #8: Use Arrow Functions when passing an
anonymous function.

50. Style Guide #9: Omit braces and use the implicit return, if the
function body consists of a single expressions.

51. Style Guide #10: If your function takes a single argument and
doesn’t use braces, omit the parentheses. Otherwise, always
include parentheses around arguments.

52. Object
• Object is a dictionary data structure.
• Map between Key => Value

53. Object #1: Declaration, Reference

54. Object #2: Assignment, Retrieval, Re-Assignment

55. Object #3: Deletion, Keys, Size, Loops

56. Exercise 7
• Complete the following code that can change digit
to reading word.
For example, 12.3 => “one two dot three”
Starting code

57. HomeWork 1
(1) Write down a function that sum every element in
array. E.g. sumArray([12,3,4,1,2,3]) = 25

58. HomeWork 2
(2) Write function that count word size case-insensitively.
Input: "Hello world hello hello earth earth" (Not limited to
these word, it can be any words)
Output: Object{hello : 3, world : 1, earth : 2 }

59. Q/A