lecture 2: es6 / es2015 slide
Post on 16-Jan-2017
2.736 Views
Preview:
TRANSCRIPT
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
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
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
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.
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
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)"
Install React-Native in Mac for iOS Development.
React-Native-Cli Command
Atom IDE
https://atom.io/
Setup the Project• Download atom IDE and install
• $ cd workingFolder
• $ react-native init l2es6
• $ cd l2es6
• $ react-native run-ios
• $ atom .
Making a new JS file
Right click on l2es6, Select New File, Type down a new file with JS extension
Running JS Script• Open Terminal (Open
Spotlight , Type Terminal)
• Change Directory to working directory ($ cd {working dir})
• $ node {filename.js}
Let’s Start with ES6
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) {}
Primitive Types• Directly Store Value
• string
• number
• boolean
• null
• undefined
Primitive Type #1: String, Number, and Boolean
Primitive Type #2: Null, Undefined, and Reference by Value
Exercise 1
Complex Types• Reference of its value
• object
• array
• function
Complex Type #1: Object & Array
Complex Type #2: Function and Pass by Reference
Exercise 2
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)
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.
Declaration #1: Global Scope, Block Scope and Constant
Declaration #2: General Use Case in For loop
Exercise 3
Functions• Function in JavaScript are objects, which can use
as arguments.
• Function can be invoked.
Function #1: Declaration, Invocation
Function #2: ES6 Feature - Declaration
Exercise 4
Function #3: Anonymous Function
Function #4: Recursive
Function #5: Callback
Exercise 5
Function #6: Exceptions
Function #7: ES6 Feature - Rest Params (Spreads …), Default Params
Function #8: ES6 Feature - Named Parameters
Exercise 6
Function’s Airbnb Style Guides
Style Guide #1. Use function declarations instead of function expressions.
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.
Style Guide #3. Never declare a function in a non-function block (if, while, etc.)
Style Guide #4. Never use arguments, use … instead.
Style Guide #5. Use parameter syntax rather than mutating function arguments.
Style Guide #6. Avoid side effects with default parameters
Style Guide #7: Always put default parameters last.
Style Guide #8: Use spread operator … to call variadic function.
Style Guide #8: Use Arrow Functions when passing an anonymous function.
Style Guide #9: Omit braces and use the implicit return, if the function body consists of a single expressions.
Style Guide #10: If your function takes a single argument and doesn’t use braces, omit the parentheses. Otherwise, always
include parentheses around arguments.
Object• Object is a dictionary data structure.
• Map between Key => Value
Object #1: Declaration, Reference
Object #2: Assignment, Retrieval, Re-Assignment
Object #3: Deletion, Keys, Size, Loops
Exercise 7• Complete the following code that can change digit
to reading word.For example, 12.3 => “one two dot three”
Starting code
HomeWork 1(1) Write down a function that sum every element in array. E.g. sumArray([12,3,4,1,2,3]) = 25
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 }
Q/A
top related