|
2 | 2 |
|
3 | 3 | Below is a stripped down, simplified version of the closure example we used during the lecture. |
4 | 4 |
|
5 | | -<script src="https://gist.github.com/remarcmij/e9d86314ccbe9089be3b1646171c3b02.js"></script> |
| 5 | +```js |
| 6 | +function greetPerson(name) { |
| 7 | + function innerFunction(greeting) { |
| 8 | + return greeting + ', ' + name; |
| 9 | + }; |
| 10 | + return innerFunction; |
| 11 | +} |
| 12 | + |
| 13 | +const greetTimir = greetPerson('Timir'); |
| 14 | +const timirGreeting = greetTimir('Good morning'); |
| 15 | +console.log(timirGreeting); |
| 16 | +``` |
6 | 17 |
|
7 | 18 | The `greetPerson` function (the "outer" function) contains another function inside its function body, called `innerFunction`. This inner function has access to the `name` argument of `greetPerson`, as well as its own `greeting` argument. |
8 | 19 |
|
9 | | -In line 8 we call `greetPerson('Timir')`. The `greetPerson` function sets its `name` argument to the string `'Timir'` and then returns its inner function. This inner function **retains access to the `name` argument** and its value `'Timir'`, even after `greetPerson` exits. |
| 20 | +When we call `greetPerson('Timir')`, the `greetPerson` function sets its `name` argument to the string `'Timir'` and then returns its inner function. This inner function **retains access to the `name` argument** and its value `'Timir'`, even after `greetPerson` exits. |
10 | 21 |
|
11 | 22 | > Returning an inner function that accesses arguments and/or variables of its outer function creates (what we call) a **closure**. |
12 | 23 |
|
13 | | -In line 8 the return value of `greetPerson` (i.e. the inner function) is assigned to the variable `greetTimir`. |
| 24 | +The return value of `greetPerson` (i.e. the inner function) is subsequently assigned to the variable `greetTimir`. |
14 | 25 |
|
15 | | -In line 9 we are now calling effectively calling the inner function, as assigned the variable `greetTimir`, and passing it the string `'Good morning'`. The end result in line 10 is that we print to the console the message: |
| 26 | +With `greetTimir('Good morning')` we are now calling effectively calling the inner function, and passing it the string `'Good morning'`. The end result is that we print to the console the message: |
16 | 27 |
|
17 | 28 | ``` |
18 | 29 | Good morning, Timir |
19 | 30 | ``` |
20 | 31 |
|
21 | | -We could obtain the same result by scrapping lines 1-8 and replace it with the code below. We wouldn't be able to tell the difference from just looking at the output produced. |
| 32 | +We could obtain the same result by scrapping all lines except the last two and replace them with the code below. We wouldn't be able to tell the difference from just looking at the output produced. |
| 33 | + |
| 34 | +```js |
| 35 | +function greetTimir(greeting) { |
| 36 | + const name = 'Timir'; |
| 37 | + return greeting + ', ' + name; |
| 38 | +} |
22 | 39 |
|
23 | | -<script src="https://gist.github.com/remarcmij/2327c1fe2fe85d587df610a7f28f436e.js"></script> |
| 40 | +const timirGreeting = greetTimir('Good morning'); |
| 41 | +console.log(timirGreeting); |
| 42 | +``` |
24 | 43 |
|
25 | 44 | But with that alternative `greetTimir` function we can only greet Timir. In contrast, with the `greetPerson` function we can easily produce functions to greet any person we like (or don't like :wink:), e.g.: |
26 | 45 |
|
27 | | -<script src="https://gist.github.com/remarcmij/eb3971a655f61ded7384e9f1892e8cf4.js"></script> |
| 46 | +```js |
| 47 | +const greetMaartje = greetPerson('Maartje'); |
| 48 | +const maartjeGreeting = greetMaartje('Hi there'); |
| 49 | +console.log(maartjeGreeting); |
| 50 | + |
| 51 | +const greetHasan = greetPerson('Hasan'); |
| 52 | +const hasanGreeting = greetHasan('Have a good day'); |
| 53 | +console.log(hasanGreeting); |
| 54 | +``` |
28 | 55 |
|
29 | | -### Recommended additional reading: |
| 56 | +### Recommended further reading |
30 | 57 |
|
31 | 58 | [Eloquent JavaScript - Chapter 3: Functions](http://eloquentjavascript.net/03_functions.html) (Press Ctrl+F in your browser and search for the word 'closure') |
32 | 59 |
|
|
0 commit comments