Functions
## Learning Objectives
- Declare and invoke functions
- Understand function parameters and return values
- Master arrow functions and closures
- Learn about higher-order functions
## Function Declarations
### Named Functions
```javascript
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // "Hello, Alice!"
```
### Function Expressions
```javascript
const greet = function(name) {
return "Hello, " + name + "!";
};
console.log(greet("Bob")); // "Hello, Bob!"
```
### Arrow Functions
```javascript
// Single expression
const greet = (name) => "Hello, " + name + "!";
// Multiple statements
const greet = (name) => {
const message = "Hello, " + name + "!";
return message;
};
```
## Parameters
### Default Parameters
```javascript
function greet(name = "Guest") {
return "Hello, " + name + "!";
}
greet(); // "Hello, Guest!"
greet("Alice"); // "Hello, Alice!"
```
### Rest Parameters
```javascript
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3, 4); // 10
sum(1, 2); // 3
```
### Arguments Object
```javascript
function showArgs() {
console.log(arguments.length);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
showArgs(1, "hello", true); // 3, 1, "hello", true
```
## Return Values
```javascript
function add(a, b) {
return a + b;
}
const result = add(5, 3); // 8
// No return -> undefined
function noReturn() {
console.log("Hello");
}
console.log(noReturn()); // undefined
```
## Scope
### Global Scope
```javascript
const globalVar = "I'm global";
function test() {
console.log(globalVar); // Accessible
}
```
### Function Scope
```javascript
function test() {
const functionVar = "I'm function-scoped";
console.log(functionVar); // Accessible
}
// console.log(functionVar); // Error!
```
### Block Scope
```javascript
{
const blockVar = "I'm block-scoped";
let alsoBlock = "I'm also block-scoped";
console.log(blockVar); // Accessible
}
// console.log(blockVar); // Error!
```
### Lexical Scope
```javascript
function outer() {
const outerVar = "outer";
function inner() {
const innerVar = "inner";
console.log(outerVar); // Can access outerVar
console.log(innerVar); // Can access innerVar
}
// console.log(innerVar); // Error!
}
```
## Closures
```javascript
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
const counter2 = createCounter();
console.log(counter2()); // 1 (independent count)
```
### Practical Closure Example
```javascript
function createTimer(taskName) {
const start = Date.now();
return function() {
const elapsed = Date.now() - start;
console.log(`${taskName} took ${elapsed}ms`);
};
}
const timer = createTimer("Download");
setTimeout(timer, 1000); // "Download took 1000ms"
```
## Higher-Order Functions
Functions that take other functions as arguments or return functions.
```javascript
function applyOperation(x, y, operation) {
return operation(x, y);
}
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
console.log(applyOperation(5, 3, add)); // 8
console.log(applyOperation(5, 3, multiply)); // 15
```
## Callback Functions
```javascript
function processData(data, callback) {
const result = data.toUpperCase();
callback(result);
}
processData("hello", function(result) {
console.log(result); // "HELLO"
});
processData("world", (result) => {
console.log(result); // "WORLD"
});
```
## Function Methods
### call()
```javascript
const person = {
name: "Alice",
age: 30
};
function introduce(greeting) {
return greeting + ", I'm " + this.name;
}
console.log(introduce.call(person, "Hello")); // "Hello, I'm Alice"
```
### apply()
```javascript
const numbers = [1, 2, 3, 4, 5];
function sum(a, b, c, d, e) {
return a + b + c + d + e;
}
console.log(sum.apply(null, numbers)); // 15
```
### bind()
```javascript
const person = {
name: "Bob",
getName: function() {
return this.name;
}
};
const getName = person.getName.bind(person);
console.log(getName()); // "Bob"
```
## Immediately Invoked Function Expressions (IIFE)
```javascript
(function() {
const privateVar = "I'm private";
console.log("IIFE executed!");
})();
// With parameters
(function(name) {
console.log("Hello, " + name);
})("Alice");
```
## Recursion
```javascript
function factorial(n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
```
## Summary
- Functions are first-class citizens in JavaScript
- Use arrow functions for concise syntax
- Closures enable data privacy and factory functions
- Higher-order functions enable functional programming patterns
- Understanding `this`, `call()`, `apply()`, and `bind()` is crucial for object-oriented JavaScript
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →