Lecture 3 - ES6 Script Advanced for React-Native

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

Object #6: Functions in Objects

Object #7: ES6 Features - Dynamic Keys & Function
Shorthand

Object #8: ES6 Features - Property Value Shorthand &
Destructuring

Object #9: ES6 Features - Sprades Operators

Object’s Airbnb Style Guides
Style Guide #1. Use literal syntax for object creation.

Style Guide #2: Deﬁne All Property in One Place

Style Guide #3: Use Object Method Shorthand

Style Guide #4: Use Property Value Shorthand 
Why? It is shorter to write and descriptive.

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.

Style Guide #6: Only quote properties that are invalid
identiﬁers 
Why? Easier to Read. Easily Optimized by many JS Engines.

Style Guide #7: Use dot notation when accessing properties. 
Use bracket when accessing properties with a variable.

Array
• Array is a list data structure.
• Sequence of objects

Array #1: Declaration, Update, Length

Array #3: Push, Pop, Unshift, Shift

Array #4: Array.isArray, [].indexOf

Exercise #2
• Write down a function to be able to add a number
to all numbers in an array.

Array #7: Array <-> String, 2D and 3D Array

Array #9: ES6 Features: Array Spreads …, Array.from, Array.of

Array #10: ES6 Features: [].fill, [].find, [].findIndex, [].map

Array #11: ES6 Features: [].reduce, [].ﬁlter

Array #12: ES6 Features: Destructuring

Exercise #3
• Do the same with Exercise #2, but using array.map
only!

Array’s Airbnb Style Guides
Style Guide #1. Use literal syntax for array creation.

Style Guide #2. Use Array.push() instead of direct assignment
to add items to an array.

Style Guide #3. Use array spreads ... to copy arrays.

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

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

String
String #1: Declaration, Concatenation, NewLine

String #2: ES6 Feature - Template Strings

String #4: IndexOf, Search, Replace

String #5: IndexOf, Search, Replace, Compare

String #6: charAt, slice, toLowerCase, toUpperCase, trim,
includes

String #7: startsWith, endsWith, Repeats

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 }

String’s Airbnb Style Guides
Style Guide #1. Use single quote ‘ ‘ for Strings

Style Guide #2. Strings that cause the line to go over 100
characters should not be written across multiple lines using
string concatenation.
…

Style Guide #3 When programmatically building up strings,
use template strings instead of concatenation
…

Style Guide #4 - Do not unnecessarily escape characters in
strings.
…

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.

Class #1: ES6 Feature - Declaration, Instantiate

Class #2: ES6 Feature - Extend

Class #3: ES6 Feature - Getter/Setter

Class’s Airbnb Style Guides
Style Guide #1. Methods can return this, to enable method
chaining.

Style Guide #2 Classes have a default constructor if one is not
speciﬁed. An empty constructor function or one that just
delegates to a parent class is unnecessary.

Modules
• ES6 gave us a native way to organize our code into
modules.

Module #1: ES6 Feature - Import, Export

Module’s Airbnb Style Guides
Style Guide #1 Do not use wildcard imports.

Style Guide #2 Only import from a path in one place

Style Guide #3: Put all imports above non-import statements.

Style Guide #4: Do not export directly from an import

Style Guide #5: Do not export mutable bindings.

Style Guide #6: In modules with a single export, prefer default
export over named export.

HomeWork
Let’s say: '(', '{', '[' are called “openers."  
')', '}', ']' are called "closers."
Write an efﬁcient 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

Lecture 3 - ES6 Script Advanced for React-Native

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Lecture 3 - ES6 Script Advanced for React-Native (20)

More from Kobkrit Viriyayudhakorn (20)

Recently uploaded (20)

Lecture 3 - ES6 Script Advanced for React-Native