Friday, January 8, 2021

Modern JavaScript ECMAScript ES6

 ES6, modern JavaScript in year 2020 and 2021, is short for ECMAScript version 6. It is pronounced Ehk, Ma, Script 6. It is a standard, spec drafted by an European consortium for web technology and advancement, by convention. Developers call modern javascript ES6 to distinguish from the old ways, and signal that new conventions are involved: arrow function, and semicolons are optional. One can write a book on ES6. This blog post focuses on getting started quickly, with the basics, know just enough to be effective.

undefined : refers to the variable exists but is not defined yet.

null : exists and hasn't been explicitly set.

primitive type : means there's no method attached to it the data type. Not to be confused with the objects that usually work on primitive types. A good example of primitive type is booleans true false. There's no distinguishing float vs int just number - the unified type for all numbers. Every thing is a double 64 bits.

Implication of the number type is, there are only 64 bits so large numbers don't fit. Can use exponent notation as work around. No float also means not accurate in calculation, no floating point precision. 

promise : is a first class citizen, is native to modern javascript. It is the new pattern to use, instead of callbacks (event driven, could result in callback hell, code can be unorganized,indented). A great use case is to retrieve data from APIs. Promise is an object.

let promise = myfunction(request)

Instead to get a callback, ask the function for a promise.

You might also seen fetch() being used, but that's also the slightly older way. fetch() is native to javascript and supports promise. 

Promise can have states, status PENDING, FULFILLED (successfully resolved), REJECTED (error). Can check the promise object for states.                

Instead of constantly checking the status, we can use then() and catch() in conjunction with promise to handle next steps. 

then() accepts a function as input. Will call the function when the promise preceding it is fulfilled. 

Callbacks : the old event driven way could cause nested, or long sequence code, or a callback calling another callback, hard to manage, read, not sustainable. 

var variableName : var is familiar syntax, if omitted var then a global variable is created.  If you haven't given the variable a value at declaration, it will be undefined. If the system has to make a placeholder, the initial value is null. 

Event: commonly used event types, when adding EventListener: 'load', 'unload', 'change', 'click' etc.

Eventloop :  The javascript event loop constantly check if the stack is empty, if yes, it will check if there's anything on the queue to be put on the stack.

Date :  new Date() generate the current date time stamp. 

Return default disable automatic browser behavior like event propagation, prevent default

Commonly used JavaScript functions:

vanilla javascript functions 





charAt opposite of indexof

ES6 include template strings

No comments:

Post a Comment

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid