Function Declarations
A function declaration, or function statement, is the most common way to define a named function. A key characteristic is that declarations are "hoisted," meaning they are loaded into memory before any code is executed. This allows you to call the function before it is physically written in the code. Explore this concept below.
Hoisting Demonstration
Calling Before Declaration (Works)
hoistedGreet(); // Called before definition
function hoistedGreet() {
return "Hello from the future!";
}Expression (Doesn't Work)
unhoistedGreet(); // Called before definition
const unhoistedGreet = () => {
return "This won't work.";
};Function Expressions
A function expression defines a function inside a larger expression, typically assigning it to a variable. These functions can be named or anonymous. Unlike declarations, expressions are not hoisted. Trying to call one before it's assigned will result in an error, as you saw in the demonstration above.
Examples
Anonymous Expression
const greet = function(name) {
return `Hello, ${name}!`;
};
greet('World');Named Expression
const add = function sum(a, b) {
return a + b;
};
add(5, 3);Arrow Functions
Introduced in ES6, arrow functions provide a more concise syntax for writing function expressions. They are always anonymous and have a key difference in behavior: they do not have their own `this` context. Instead, they inherit `this` from their parent scope, which makes them incredibly predictable, especially in callbacks.
Syntax Variations
// Single parameter, implicit return
const square = x => x * x;
// Multiple parameters
const add = (a, b) => a + b;
// Block body, explicit return
const greet = (name) => {
return `Hello, ${name}!`;
};The `this` Keyword Explorer
The behavior of `this` is one of the most confusing parts of JavaScript. In traditional functions, its value is determined when the function is called. In arrow functions, `this` is lexically bound—it inherits the value from its surroundings. Select a scenario below to see a side-by-side comparison of this behavior.
Traditional Function
Arrow Function
JavaScript vs. TypeScript
TypeScript is a superset of JavaScript that adds static typing. This allows you to define the types for function parameters and return values, catching potential errors during development instead of at runtime. Use the toggle below to see how type annotations are added to a standard JavaScript function.