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
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
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
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)"
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}
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.
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.)
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
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 }