JavaScript ES5 function and ES6 arrow function examples
ES5: (older codebases & docs most likely use this syntax)
function greet(name) {
return `Hello ${name}!`;
}
// OR
var greet = function(name) {
return `Hello ${name}!`;
}
// greet("Eka") // "Hello Eka!"ES5 callback function:
someElement.addEventListener("click", function() {
alert(`Hello ${name}!`);
});The arrow function syntax was introduced in ES6 a.k.a. ES2015:
const greet = (name) => {
return `Hello ${name}!`;
}
// same usage
// greet("Eka") // "Hello Eka!"ES6 callback function:
someElement.addEventListener("click", () => {
alert(`Hello ${name}!`);
});We can optionally skip the curly brackets and return. We can rewrite greet like so:
const greet = (name) => `Hello ${name}!`So succinct 😻.
Both versions still work as of now albeit with some differences in context & scoping.
As with anything else, it's a good idea to be consistent within one codebase if you can help it, and document necessary inconsistencies.
Learn more:
- Arrow functions
- Ecmascript versions