Functions are First class citizens:
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
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:
<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