Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lecture 3 - ES6 Script Advanced for React-Native

1,851 views

Published on

Lecture 3 - ES6 Advance, JavaScript

Published in: Software
  • Be the first to comment

  • Be the first to like this

Lecture 3 - ES6 Script Advanced for React-Native

  1. 1. Lecture 3: 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. 2. Object #4: Pass by Reference
  3. 3. Object #5: Clone a Object
  4. 4. Object #6: Functions in Objects
  5. 5. Object #7: ES6 Features - Dynamic Keys & Function Shorthand
  6. 6. Object #8: ES6 Features - Property Value Shorthand & Destructuring
  7. 7. Object #9: ES6 Features - Sprades Operators
  8. 8. Exercise #1
  9. 9. Object’s Airbnb Style Guides Style Guide #1. Use literal syntax for object creation.
  10. 10. Style Guide #2: Define All Property in One Place
  11. 11. Style Guide #3: Use Object Method Shorthand
  12. 12. Style Guide #4: Use Property Value Shorthand
 Why? It is shorter to write and descriptive.
  13. 13. Style Guide #5: Group your shorthand properties
 at the beginning of your object declaration.
 Why? It’s easier to tell which one are using shorthand.

  14. 14. Style Guide #6: Only quote properties that are invalid identifiers
 Why? Easier to Read. Easily Optimized by many JS Engines.
  15. 15. Style Guide #7: Use dot notation when accessing properties.
 Use bracket when accessing properties with a variable.
  16. 16. Array • Array is a list data structure. • Sequence of objects
  17. 17. Array #1: Declaration, Update, Length
  18. 18. Array #2: Delete, Sub-Array
  19. 19. Array #3: Push, Pop, Unshift, Shift
  20. 20. Array #4: Array.isArray, [].indexOf
  21. 21. Array #5: Loop
  22. 22. Exercise #2 • Write down a function to be able to add a number to all numbers in an array.
  23. 23. Array #6: Sort, Reverse
  24. 24. Array #7: Array <-> String, 2D and 3D Array
  25. 25. Array #8: [].forEach
  26. 26. Array #9: ES6 Features: Array Spreads …, Array.from, Array.of
  27. 27. Array #10: ES6 Features: [].fill, [].find, [].findIndex, [].map
  28. 28. Array #11: ES6 Features: [].reduce, [].filter
  29. 29. Array #12: ES6 Features: Destructuring
  30. 30. Exercise #3 • Do the same with Exercise #2, but using array.map only!
  31. 31. Array’s Airbnb Style Guides Style Guide #1. Use literal syntax for array creation.
  32. 32. Style Guide #2. Use Array.push() instead of direct assignment to add items to an array.
  33. 33. Style Guide #3. Use array spreads ... to copy arrays.
  34. 34. Style Guide #4-1 Use return statements in array method callbacks. It's ok to omit the return if the function body consists of a single statement
  35. 35. Style Guide #4-2 Use return statements in array method callbacks. It's ok to omit the return if the function body consists of a single statement
  36. 36. String String #1: Declaration, Concatenation, NewLine
  37. 37. String #2: ES6 Feature - Template Strings
  38. 38. String #3: Number <-> Strings
  39. 39. String #4: IndexOf, Search, Replace
  40. 40. String #5: IndexOf, Search, Replace, Compare
  41. 41. String #6: charAt, slice, toLowerCase, toUpperCase, trim, includes
  42. 42. String #7: startsWith, endsWith, Repeats
  43. 43. Exercise #4 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 }
  44. 44. String’s Airbnb Style Guides Style Guide #1. Use single quote ‘ ‘ for Strings
  45. 45. Style Guide #2. Strings that cause the line to go over 100 characters should not be written across multiple lines using string concatenation. …
  46. 46. Style Guide #3 When programmatically building up strings, use template strings instead of concatenation …
  47. 47. Style Guide #4 - Do not unnecessarily escape characters in strings. …
  48. 48. Class • Programming Paradigm that Encapsulate data and methods based on the concept of real world objects. • JavaScript never have Class concept before. They just added in ES6. • I personally like the function-oriented nature of JavaScript more. But by adding the Class, it make the object-oriented programming in JavaScript a lot easier and nicer.
  49. 49. Class #1: ES6 Feature - Declaration, Instantiate
  50. 50. Class #2: ES6 Feature - Extend
  51. 51. Class #3: ES6 Feature - Getter/Setter
  52. 52. Class’s Airbnb Style Guides Style Guide #1. Methods can return this, to enable method chaining.
  53. 53. Style Guide #2 Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary.
  54. 54. Modules • ES6 gave us a native way to organize our code into modules.
  55. 55. Module #1: ES6 Feature - Import, Export
  56. 56. Module’s Airbnb Style Guides Style Guide #1 Do not use wildcard imports.
  57. 57. Style Guide #2 Only import from a path in one place
  58. 58. Style Guide #3: Put all imports above non-import statements.
  59. 59. Style Guide #4: Do not export directly from an import
  60. 60. Style Guide #5: Do not export mutable bindings.
  61. 61. Style Guide #6: In modules with a single export, prefer default export over named export.
  62. 62. HomeWork Let’s say: '(', '{', '[' are called “openers." 
 ')', '}', ']' are called "closers." Write an efficient function that tells us whether or not an input string's openers and closers are properly nested. Examples: "{ [ ] ( ) }" should return true "{ [ ( ] ) }" should return false "{ [ }" should return false

×