(function() {
var foo = 'A'
if(foo !== false) {
var foo;
console.log(foo) // this will print "A" to console
}
})()
(function() {
let foo = 'A'
if(foo) {
let foo;
console.log(foo) // this will print "undefined" to console
}
})()const foo = {};
foo = 4 // this will crash
foo.a = 4 // this will notfunction Something() {
setTimeout(() => console.log(this), 1) // will log correct instance Something() {}
setTimeout(function() { console.log(this) }, 1) // will log Window
}
const instance = new Something()
const foo = () => { 123 } // <- this works like normal function
// and will return `undefined`
const bar = () => ( 123 ) // <- this works like expression and will return `123`
const bar = () => 123 // <- notice that () are optional in some cases,
// for example arithmetric operations or simple values
// using callbacks
getUser(1, {
success: (user) => {
this.user = user;
},
failure: (error) => {
this.error = error;
}
);
// using promises
getUser(1)
.then((user) => {
this.user = user
})
.catch(error) => {
this.error = error;
})// using callbacks
doSomething('1', function(resultA) {
thenDoSomething(resultA, function(resultB) {
andSomethingElse(resultB, function(resultC) {
// WE NEED TO GO DEEPER
})
})
})
// using promise chaining
doSomething('1')
.then(thenDoSomething)
.then(andSomethingElse)
.then((result) => {
// WE NEED TO GO DEEPER
})const getUsers = fetch('/users')
const getProjects = fetch('/projects')
Promise.all([ getUsers, getProjects ]).then((results) => {
// this can be simplified with destructuring, we'll get there
const users = results[0]
const projects = results[1]
})async function getResult() {
const resultA = await doSomething('1')
const resultB = await thenDoSomething(resultA)
const resultC = await andSomethingElse(resultB)
// WE NEED TO GO DEEPER
}
try {
const response = await axios('/users')
console.log(response.data)
} catch(error) {
if(error.response && error.response.code === 404) {
console.log("Not found")
}
}const object = { foo: 1, bar: 2}
const { foo, bar } = object
// this is equivalent of
const foo = object.foo
const bar = object.barconst object = { a: { b: 1 } }
const { a: { b, c }} = object
// this is equivalent of
const b = object.a.b
const c = object.a.c
// for most cases this is more readable
const { b, c } = object.aconst list = [1, 2]
const [ foo, bar ] = list
// this is equivalent of
const foo = list[0]
const bar = list[1]
const emptyObject = {}
const { foo = 1, bar } = emptyObject
// this is (more or less) equivalent of
const foo = typeof emptyObject.foo !== 'undefined' ? emptyObject.foo : 1
const bar = emptyObject.barconst emptyObject = { first: 1, last: 2 }
const { first: firstNumber, last: lastNumber } = emptyObject
console.log(firstName, lastName) // will log 1 2
console.log(first, last) // this will throw TypeError because first and last
// are not definedconst name = "Me"
const date = Date.now
// explicitly stating key is unnecessary if it's the same as variable name
const user = { name, date }
const key = "Key"
const anotherKey = "anotherKey"
// keys can be dynamically calculated from variables now
const myObject = {
[key]: 'Value',
[anotherKey]: 'anotherValue'
}class Model {
constructor(attributes) {
this.attributes = attributes
}
}
const me = new Model({ name: 'Michal' })
console.log(me.attributes) // logs { name: 'Michal' }class Model {
constructor(attributes) {
this.attributes = attributes;
}
}
class User extends Model {
constructor(attributes) {
super(attributes);
}
}
const me = new User({ name: 'Michal' })
console.log(me.attributes) // logs { name: 'Michal' }class User extends Model {
constructor(attributes) {
this.attributes = attributes;
}
get name() {
return this.attributes.name
}
set name(value) {
return this.attributes.name = value
}
}
const me = new User({ name: 'Michal' })
console.log(me.name) // logs 'Michal'
me.name = 'Maciek'
console.log(me.name) // logs 'Maciek'
export function createUser() {}
const updateUser = () => {}
export { updateUser }
export default MyClass
import React from 'react'
import { FormGroup } from 'react-bootstrap'
import each from 'lodash/each'
import { createUser }, MyClass from './export_example'import { debounce } from 'lodash-decorators'
class Updater {
constructor(selector) {
document.querySelectorAll(selector).addEventListener('change', this.onChange)
// without decorators we would write this:
// this.onChange = _.debounce(this.onChange, 200)
}
@debounce(500)
onChange(e) {
axios.post('/updates', { [e.target.name]: e.target.value })
}
}
const updater = new Updater('form input[type="text"]')* unless you use a preset or plugin that transforms them to something else