Lecture 2: ES6 / ES2015 Slide
10 likes5,150 views
The document outlines a lecture on modern JavaScript (ECMAScript 2015/ES6), detailing its history, key features, and best programming practices using the Airbnb coding style. It includes instructions for setting up the development environment, along with exercises on fundamental concepts such as variable declarations (var, let, const), functions, and objects. Additionally, it emphasizes style guidelines to enhance code quality and maintainability.
![HomeWork 1
(1) Write down a function that sum every element in
array. E.g. sumArray([12,3,4,1,2,3]) = 25](https://image.slidesharecdn.com/l2-es6-160830040119/85/Lecture-2-ES6-ES2015-Slide-57-320.jpg)
Lecture 2: ES6 / ES2015 Slide
- 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
- 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.
- 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
- 36. Exercise 5
- 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