esnext - szabadszoftverkonferencia.hu...the ecma an specification, the javascript an...
TRANSCRIPT
ESNextThe modern JavaScript
About meTasnádi Zsolt
Flow Academy Kft - Programming training
Flow Junior 5 months daytime training based on Node.js and Java
Swipe Technologies Kft - Salarify wage payment platform
You can access your earned, but yet unpaid salary,on-demand, through our easy to use platform
Ai Venture kft - Amanda - Virtual receptionist
Virtual assistant for hotels and offices, an 3D avatar, audiovisual chatbot
CV: www.teletype.hu
JS vs ECMAThe ECMA an specification, the JavaScript an implementation.
- ES3 - 1999- ES5 - 2009- ES5.1 - 2011- ES6 - 2015- ES7 - 2016- ES8 - 2017- ES9 - 2018
ESM - ECMAScript ModulesBrowser
- Used by webpack- Limitated browser support
ESM
import MyModule from ‘./myModule’;
CommonJS
const MyModule = require(‘./myModule’);
Node
- CommonJS by default- ESM support in the Node 8.5- Need for TypeScript
Class- Introduced in the ES6- Inheritance- super, super.method- The JS is NOT OOP- getters & setters- static methods- good for many class instance variables
class Person {
constructor (name) {
this._name = name
}
set name(value) {
this._name = value;
}
get name() {
return this._name
}
move (x, y) {
this.x = x;
this.y = y;
}
static version() {
return ‘1.0’;
}
}
Class decorators- Clean wrappine- Stage-2 proposal in JavaScript- Used by TypeScript
@withRouter
@connect({ checked: state.checked })
class MyComponent extends Component {
constructor(props) {
super(props);
console.log(this.router);
}
render() {
if (!this.state.checked) return null;
return <div>OK</div>;
}
}
var vs let & constLET & CONST
Input:
console.log(x);
let x=5;
console.log(x);
Output:
Error
VAR
Input:
console.log(x);
var x=5;
console.log(x);
Output:
undefined
Arrow functionsfunction example(arg1) {
console.log(arg1);
}
const example = (arg1) => {
console.log(arg1);
}
const example = (arg1) => console.log(arg1);
const example = arg1 => console.log(arg1);
Promise- Common async handling- Easier error handling- No more christmas tree effect- async-await- Promise chaining
const example = new Promise((resolve, reject) => {
if (success()) {
resolve(‘OK’);
} else {
reject(‘ERROR’);
}
});
example().then(result => {
console.log(result);
}).catch(error => {
console.log(error);
})
Promise.all- We can run many promises- Utilizes the async- The transparently is deteriorating
Promise.all([ promise1, promise2, promise3
]).then(results => {
const result1 = results[0];
const result2 = results[1];
const result3 = results[2];
console.log(result1, result2, result3);
}).catch(error => {
console.log(error);
})
async / await- An eye-candy for the Promise
The async function always return to an Promise- The class constructor never can be async
const example = async email => {
const user = await models.User.findOne({ where: { email: email } });
return user;
}
const example = email => {
return models.User.findOne({ where: { email: email } });
}
InterpolationES5:
const text = “I’m ” + age + “years old.”;
ES6:
const text = `I’m ${age} years old.`;
Parameter handling- Default params
const example = (a = 2, b = 3) => console.log(a, b);
- Rest params
const example (a, b, ...args) => console.log(a, b, args);
- Spread params
const params = { a: 1, b: 2, c: 3 }
const { a, b, c } = params;
Object methods- Keys
Object.keys({ a: 1, b: 2 });
=> [‘a’, ‘b’]
- Values
Object.values({ a: 1, b: 2 });
=> [1, 2]
- Entries
Object.entries({ a: 1, b: 2 });
=> [[‘a’, 1], [‘b’, 2]]
- Assign
Object.assign({ a: 1 }, { b: 2}, {});
=> { a: 1, b: 2 }
- Shorthand
const a = 1;
const b = 2;
const c = { a, b };
- Dynamic property names
let a = ‘name’;
let b = {
[name]: ‘Tasi’;
}
Array methods- Includes
[‘a’, ‘b’, ‘c’].includes(‘b’);
=> true
- Holes
[1,,2]
=> [1, undefined, 2]
- Find & FindIndex
[1, 2, 3].find((e) => e === 2)
=> true
- Of
Array.of(1, 2, 3);
=> [1, 2, 3]
- IsArray
Array.isArray({ a: 1, b: 2 })
=> false
For cycleconst t = [1, 2, 3];
for (let i = 1; i < a.length; i++) {
console.log(a[i]);
}
for (let i in t) {
console.log(a[i]);
}
for (let element of t) {
console.log(element);
}
Flow Academy
Angular, Java, Spring Boot, Devops
+36 (30) 962 7284
Join us!
Join us!Swipe Technologies -
Salarify
Node backend developer
+36 (20) 489 3535
Referenceshttps://www.w3schools.com/js/js_versions.asphttps://www.w3schools.com/js/js_es6.asphttps://medium.com/webpack/the-state-of-javascript-modules-4636d1774358https://blog.logrocket.com/es-modules-in-node-js-12-from-experimental-to-release/https://www.geeksforgeeks.org/difference-between-var-and-let-in-javascript/https://lethalbrains.com/new-features-of-ecmascript-2017-c25a9db5f5e0https://css-tricks.com/new-es2018-features-every-javascript-developer-should-know/https://2ality.com/2014/05/es6-array-methods.htmlhttps://www.freecodecamp.org/news/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e/https://www.sitepoint.com/javascript-decorators-what-they-are/
Thank you for your attentionQuestions?