Functions 4.27

1. Anonymous Functions

no named functions.
a function expression that is usually assigned to a variable

function(){ return "hello" }
const hello = function(){ return "hello" }

2. Callback Functions

passing function as parameter

setTimeout(function() { return "hello" }

3. Named Functions

constuctor function , factory function etc
come with their own name

function hello(){} -factory
function Person(n){ this.name =n } -constructor

4. Object Methods

functions inside the object

const me= { hello:function(){} } 

5. Generator Functions

6. Arrow Functions

from : const hello = function () { return "hello" } // hello()
  
  to : const hello = () =>{ return "hello" } //hello()
       
       const hello = (name)=>{ return `hello ${name}` } //hello(Hawook)
    
       const hello = (firstname , lastname)=>{ 
       return `hello ${firstname},${lastname}` } //hello(hawook, jeong)
		
from : setTimeout(function(){console.log("hello"),1000}
  to : setTimeout( ()=>{console.log("hello),1000}
  
from: function hello(){console.log("hello")}
  to: hello()=>{console.log("hello")} //XXX arrow function is always anonymous.
  											it cant have named functions
thus: const hello = () => { return "hello" }

Benefits : 가독성 : shorter, simpler
Binding, this 의 scope :

const me ={ name:"hawook",
			talk: function(){ return this},
            arrowTalk: ()=> { return this}
          }
me.talk() //me에대한 모든것
me.arrowTalk() //global this

arrow functions don't bind their own scope, but inherit it from the parent one, which in this case is window or the global object.

const me ={
			name:"hawook",
			talk() { setTimeout(()=>{
            console.log(this.name) }, 100) }
          }
me.talk() //잘나옴. talk()가 me를 보고 있기때문.          

functions added to prototype XX -아직 이해X

function Person(n) { this.name=n }

Person.prototype.talk = function(){ return this }

Dont use Arrow Functions for
1.Object methods = this
2.Prototypes = 공부중
3.Constructors = named functions
4.Event handlers = this