- 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;
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')
: herelog
is the function andconsole
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