Different ways of declaring functions

Functions are First class citizens:

It means JavaScript functions are values in themselves. They can be stored in variables and passed into other functions, just like any other piece of data in JavaScript. (see 3rd example below)

With function keyword

Important: These are hoisted, meaning JavaScript 'hoists' or puts them at the top of the file. So if we try to run a function defined with function keyword before it is defined/ above its definition, there's no error and the function is executed successfully.

function doctorize(firstName) {
   return `Dr. ${firstName}`;
}

Anonymous function - function with no name

These are used in callbacks and IIFE: immediately invoked function expressions.

function (firstName) {
 return `Dr. ${firstName}`;
}

Function Expression

Important: These are not hoisted, meaning JavaScript doesn't put them at the top of the file. So if we try to run a function not defined with function keyword before it is defined/ above its definition, there's an error and the function fails to execute.

const doctorize = function(firstName) {
   return `Dr. ${firstName}`;
 };

Arrow Functions

Concise, shorter syntax
Don't have own scope in refer to 'this' keyword
Are anonymous functions

const inchToCM = (inches) => {
	return inches * 2.54;
}

// Implicit return:
const add = (a, b = 3) => a + b;
const inchToCM = (inches) => inches * 2.54;

// In case of only 1 parameter, we can omit the () around it
const inchToCM = inches => inches * 2.54;

Implicitly returning an object:

const makeABaby = (first, last) => ({ name: `${first} ${last}`, age: 0 });

IIFE: Immediately Invoked Function Expression

(function(age) {
  return `You are cool and age ${age}`;
})(10);

// Parantheses run first in JavaScript, so we have wrapped the function in ().
// The function immediately runs.
// The argument passed here is 10 for parameter age.

Methods:

A function which lives inside an object.
For e.g console.log('hey') : here log is the function and console is the object.
2 Ways to define methods:

const wes = {
  name: 'Westopher Bos',
  // Method!
  sayHi: function() {
    console.log(`Hey ${this.name}`);
    return 'Hey Wes';
  },
  // Arrow function
  wisperHi: () => {
    console.log('hii wesss im a mouse');
  },
  // Short hand Method
  yellHi() {
    console.log('HEY WESSSSS');
  }
}

Callback functions:

Function that is passed to another function used for something that will happen when something is done.

<body>
  <button class="clickMe">Click Me!</button>
</body>

// Click Callback
const button = document.querySelector('.clickMe');

function handleClick() {
  console.log('Great Clicking!!');
}

button.addEventListener('click', handleClick);
// everytime we click the button, the handleClick function is run.



button.addEventListener('click', function() {
  console.log('Nice Job!!!');
});
// everytime we click the button, the function inside is run.


// Timer Callback
setTimeout(() => {
  console.log('DONE! Time to eat!');
}, 1000);
// it runs the console.log after each 1 sec or 1000 milliseconds