JS snippets

JS_closure.js

function createCalcFunction(n){
  return function(){
    console.log(1000*n)
  }
}

const calc = createCalcFunction(42) // no calc, just initialization
calc() // prints 42000

function bind(context, fn){
  return function(...args){
    fn.apply(context, args)
  }
}

JS_context.js

/*
 * Arrow functions are different than traditional functions but do share some common characteristics. For example:
 *
 *  The typeof operator returns “function” for arrow functions.
 *  Arrow functions are still instances of Function, so instanceof works the same way.
 *  The methods call(), apply(), and bind() are still usable with arrow functions, though they do not augment the value of this.
 *  The biggest difference is that arrow functions can’t be used with new, attempting to do results in an error being thrown.
 */

function hello (){
  console.log("Hello", this)
}
let hello2 = function (){
  console.log("Hello2", this)
}
const person = {
  name: "Vladimir",
  age: 25,
  sayHello: hello,
  sayHello2: hello2,
  sayHelloWindow:  hello.bind(window),
  sayHelloWindow2: hello.bind(this),
  sayHelloWindow3: hello.bind(document),
}
person.sayHello()        // `this` is person
person.sayHello2()       // `this` is window
person.sayHelloWindow()  // `this` is window
person.sayHelloWindow2() // `this` is window
person.sayHelloWindow3() // `this` is document 


function work(a,b){
  console.log(this, a,b)
}
work.bind(document, "+","-")()  // sets context and then you can call f-n which which prints document, + -
work.call(document, "+","-")    // immediatelly sets context and calls f-n, which prints document, + -
work.apply(document, ["+","-"]) // immediatelly sets context and calls f-n, which prints document, + -

console.group("sadad")
console.log("----")
console.groupEnd()

JS_links.md

https://www.youtube.com/watch?v=aQkgUUmUJy4 http://latentflip.com/loupe/ https://jsonplaceholder.typicode.com/

https://github.com/chrisvfritz/vue-enterprise-boilerplate https://github.com/chrisvfritz/7-secret-patterns

JS_object.create.js

const person = Object.create(
  { //prototype object
    calculateAge(){
      console.log('Age', new Date().getFullYear() - this.birthYear)
    }
  },
  {
    name: {
      value: 'Vladimir',  //default value
      enumerable: true,   //seen in for-in,         default: false
      writable: true,     //can change value,       default: false
      configurable: true, // can remove attributte, default: false
    },
    birthYear: {
      value: 1993,
      enumerable: false,
      writable: false,
      configurable: false,
    },
    age: {
      get(){
        return new Date().getFullYear() - this.birthYear
      },
      set(value){
        document.body.style.background = 'red'
        console.log('Set age', value)
      }
    }
  }
)

person.calculateAge()

JS_promise.js

const p = new Promise(function(resolve, reject){
  setTimeout(()=>{
    console.log("Preparing data...")
    const backendData = {
      server: 'aws',
      port: 2000,
      status: 'working'
    }
    resolve(backendData) // resolving and sending data to then
  }, 2000)
})

p.then(data =>{
  console.log("promise 1 resolved", data)
	return new Promise((resolve, reject)=>{
  	setTimeout(()=>{
    	data.modified = true
      resolve(data)
    })
  }, 2000)
}).then(clientData => {
	console.log('Data received', clientData)
  clientData.fromPromise = true
  return clientData
}).then(data=>{
	console.log('Modified', data)
}).catch().finally()

JS_prototypes.js

const person = new Object({
  name: "Maxim",
  age: 25,
  greet: function(){
   console.log("Greet!") 
  }
})

Object.prototype.sayHello = ()=>console.log('Hello!');

const lena = Object.create(person);
lena.name = 'Elena'

const str = new String('I am string')

const array = [2,3,4,5]
Array.prototype.multBy = function(n){
  return this.map((i)=>i*n)
}
array.multBy(2)