Scribd
Upload
22 views61 pages

Lecture 2: ES6/ES2015 and Beyonds With The Best Practices

The document is a lecture on ES6/ES2015 and best practices in modern JavaScript programming, covering its history, features, and coding standards. It includes practical installation instructions for React Native, coding exercises, and style guidelines based on Airbnb's coding style. Key topics include variable declarations, functions, and object manipulation in JavaScript.

Uploaded by

phutranngoc.se
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views61 pages

Lecture 2: ES6/ES2015 and Beyonds With The Best Practices

The document is a lecture on ES6/ES2015 and best practices in modern JavaScript programming, covering its history, features, and coding standards. It includes practical installation instructions for React Native, coding exercises, and style guidelines based on Airbnb's coding style. Key topics include variable declarations, functions, and object manipulation in JavaScript.

Uploaded by

phutranngoc.se
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 61

Lecture 2: ES6/ES2015 and

Beyonds with the Best


Practices
All source code
• https://github.com/anhhna/learning-react-native
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): NoSQL 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
React Native Installing
for Android Development
on Windows
https://www.youtube.com/watch?v=L3KIlNZOp3c
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
IntelliJ IDEA

https://www.jetbrains.com/idea/
NativeBase

https://nativebase.io/
Let’s Start with ES6
ES6 Basic
• /* Comment */

• // Comment

• console.log(‘print out’);

• Syntax mostly derived from C language

• if (true){} • do{…} while(true);

• 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
…),
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

You might also like