create account

Removing a Note: Day Seven of "The Complete Node.js Developer Course" by matthewdavid

View this thread on: hive.blogpeakd.comecency.com
· @matthewdavid ·
$3.02
Removing a Note: Day Seven of "The Complete Node.js Developer Course"
![photo5026536570701850556.jpg](https://steemitimages.com/DQmcvuFomDQdgTQdvAwNaqYHqX6RwkggzZUdegSDMQmDpmc/photo5026536570701850556.jpg)

# A challenge: Understanding the filter function 

Thanks to everyone who's been reading and commenting. Especially those who have been commenting with clarifications and answers to my questions.

This app that we are writing is the demo app for the course. It is for learning purposes. Right now, we are writing the JSON data to a file, not to a database.

## Previously 

In this series: [Programming Goals](https://steemit.com/programming/@matthewdavid/my-programming-goals-javascript-proficiency-node-js-and-databases) : [Day One](https://steemit.com/javascript/@matthewdavid/my-programming-progress-day-one-of-the-complete-node-js-developer-course) : [Day Two](https://steemit.com/javascript/@matthewdavid/my-programming-progress-day-two-of-the-complete-node-js-developer-course-require) : [Day Three](https://steemit.com/javascript/@matthewdavid/using-3rd-party-modules-day-three-of-the-comple-node-js-developer-course) : [Day Four](https://steemit.com/javascript/@matthewdavid/my-programming-progress-day-four-of-the-complete-node-js-developer-course) : [Day Five](https://steemit.com/javascript/@matthewdavid/json-a-brief-explanation-day-five-of-the-complete-node-js-developer-course) : [Day Six](https://steemit.com/javascript/@matthewdavid/saving-notes-to-a-json-file-day-six-of-the-complete-node-js-developer-course)

## Starting off with the challenge

This section (18. Removing a Note) started off right away with a challenge to write the removeNote function. A key part of writing this was using the filter function to remove (from all the notes) the note with the title passed in as an argument. As some of you know, I was struggling to understand how the filter function worked. Thanks for your explanations. I think I'm getting it better now.

Here's the code I wrote to complete the challenge:

![Screenshot from 2017-09-12 00-02-11.png](https://steemitimages.com/DQmapFeZ6ywzwjFjVqHoYiL4Bt5ky5CH8rm9g5cABWPAbi7/Screenshot%20from%202017-09-12%2000-02-11.png)

## The line I still struggled with:

```var rmDuplicate = notes.filter((note) => note.title !== title)```

I played around with this for a while. The challenge took me longer than it should have. I can talk out what this does, but am still having a little trouble with the syntax. I think that the ```(note)``` just calls in each of the notes objects from all of the notes and then the next part ```=> note.title !== title)``` compares the note title (looping through each note) with the title that was passed in as an argument. It keeps the titles that don't match and removes (or filters out) the title that does match. This all gets "saved" in the rmDuplicates variable. 

The next line ```saveNotes(rmDuplicate)``` saves the filtered version of the notes to the file, overwriting the previous version and as a result removing the note with the title that matched the title passed in through the argument. Hope that makes sense.

## Note removal status: removed... or not

The rest of this section covered how to determine if a note was removed or not and to log that out to the screen with a "Note was removed" message or "Note not found" message. It used a "ternary operator", which I have encountered before, but haven't used much.

You can't see all of the code in the project (that would be overkill for a blog post... maybe), but you can probably follow what I'm learning.

## Progress

I've been really busy with work and family life this last week and didn't study node.js as much as I should have and I didn't post on Steemit as much as I'd like... but the plan is working. By committing to posting about this, and by having readers and commenters, I am continuing with my learning instead of giving up or "getting too busy".

Please let me know if these posts are helpful. I'm pretty sure that a reader wouldn't be able to learn directly from these posts, but hopefully they'll be an encouragement to someone to take a course or to push through learning something that's not easy.

### Thanks for reading!

-- @matthewdavid
👍  , , , , , , , , , , , , , , , , , , , ,
properties (23)
authormatthewdavid
permlinkremoving-a-note-day-seven-of-the-complete-node-js-developer-course
categoryjavascript
json_metadata{"tags":["javascript","programming","nodejs","technology","learning"],"users":["matthewdavid"],"image":["https://steemitimages.com/DQmcvuFomDQdgTQdvAwNaqYHqX6RwkggzZUdegSDMQmDpmc/photo5026536570701850556.jpg","https://steemitimages.com/DQmapFeZ6ywzwjFjVqHoYiL4Bt5ky5CH8rm9g5cABWPAbi7/Screenshot%20from%202017-09-12%2000-02-11.png"],"links":["https://steemit.com/programming/@matthewdavid/my-programming-goals-javascript-proficiency-node-js-and-databases","https://steemit.com/javascript/@matthewdavid/my-programming-progress-day-one-of-the-complete-node-js-developer-course","https://steemit.com/javascript/@matthewdavid/my-programming-progress-day-two-of-the-complete-node-js-developer-course-require","https://steemit.com/javascript/@matthewdavid/using-3rd-party-modules-day-three-of-the-comple-node-js-developer-course","https://steemit.com/javascript/@matthewdavid/my-programming-progress-day-four-of-the-complete-node-js-developer-course","https://steemit.com/javascript/@matthewdavid/json-a-brief-explanation-day-five-of-the-complete-node-js-developer-course","https://steemit.com/javascript/@matthewdavid/saving-notes-to-a-json-file-day-six-of-the-complete-node-js-developer-course"],"app":"steemit/0.1","format":"markdown"}
created2017-09-12 05:25:27
last_update2017-09-12 05:25:27
depth0
children8
last_payout2017-09-19 05:25:27
cashout_time1969-12-31 23:59:59
total_payout_value2.286 HBD
curator_payout_value0.731 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,152
author_reputation2,155,255,892,877
root_title"Removing a Note: Day Seven of "The Complete Node.js Developer Course""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,624,244
net_rshares1,054,423,375,467
author_curate_reward""
vote details (21)
@petarjs ·
$0.05
Hi Matthew! It's really inspiring to see how you're going about this. Initiative and passion are the key.

I'd like to give my take on explaining this line:

```
var rmDuplicate = notes.filter((note) => note.title !== title)
```

First of all, lets call the variable `uniqueNotes` to better describe what it is, as we're removing the duplicate notes so we can save only the unique ones:

```
const uniqueNotes = notes.filter((note) => note.title !== title)
```

To better understand what it does, let's forget about arrow functions for a moment, so we can write it as an ordinary function and work our way to the arrow function notation.

```
const uniqueNotes = notes.filter(function (note) {
    return note.title !== title
})
```

So far so good. As a note, the `filter` function can be called on any array in JavaScript. You pass it a function as an argument , which is invoked for every element. This predicate function returns `true` if the element should stay or `false` if we want to remove it. Then, the `filter` function returns a new array comprised of all the elements that we decided should stay.

Ok, now we can refactor our predicate function to be an arrow function:

```
const uniqueNotes = notes.filter((note) => {
    return note.title !== title
})
```

Pretty similar, right? But we can go further, and remove the parenthesis around the `note` argument (because there is only one argument, if there were multiple, we'd have to keep the parenthesis)

```
const uniqueNotes = notes.filter(note => {
    return note.title !== title
})
``` 

Okay! But we can make it even more compact by removing the curly braces that denote the function block (we can do this only if our arrow function has one line, and this one does)

```
const uniqueNotes = notes.filter(note => note.title !== title)
```

By removing the curly braces, we also need to remove the `return` keyword, as it is implied when using this shorthand arrow function notation.

So what's the difference between using an arrow function and a regular function?

Well, obviously it's more expressive, meaning that it tells you what it's doing using less characters like curly brackets and the `return` statement.

But there's another thing that makes the arrow functions different - their scope. Arrow functions don't have their own scope, but are bound to the scope of the function that they are defined in.

In practice, this means that `this` inside of the arrow function will be that of the function they are called inside of. You'll find this quite useful if you've ever had to use the old `var that = this` trick to access the context of the parent function. Now you can simply use arrow functions!
👍  
properties (23)
authorpetarjs
permlinkre-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170915t230624886z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-15 23:06:24
last_update2017-09-15 23:06:24
depth1
children1
last_payout2017-09-22 23:06:24
cashout_time1969-12-31 23:59:59
total_payout_value0.035 HBD
curator_payout_value0.011 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,677
author_reputation1,710,016,701,366
root_title"Removing a Note: Day Seven of "The Complete Node.js Developer Course""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id15,008,681
net_rshares17,730,650,968
author_curate_reward""
vote details (1)
@matthewdavid ·
Thank you! 

This was very helpful. It was good to see it re-phrased with familiar javascript syntax and then refactored step by step to using an arrow function. I really appreciate your detailed comment.
properties (22)
authormatthewdavid
permlinkre-petarjs-re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170915t235217261z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-15 23:52:18
last_update2017-09-15 23:52:18
depth2
children0
last_payout2017-09-22 23:52:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length204
author_reputation2,155,255,892,877
root_title"Removing a Note: Day Seven of "The Complete Node.js Developer Course""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id15,010,859
net_rshares0
@sargento · (edited)
$0.05
<div class="pull-right">

<center>https://media.giphy.com/media/rH50laWEAC25O/giphy.gif [Source Credit:  giphy](https://giphy.com/gifs/rH50laWEAC25O/)</center>
</div>

I have been interested and involved with computers and code since the 1970s as a hobby. I remember the time before hard drives and the <em>A:</em> and <em>B:</em> drives. The <em>Microsoft Disk Operating System (MSDOS)</em> was my first operating system.

I use the  <em>Fedora</em> operating system exclusively now. Much more secure than the Windows and Mac systems.

I wish you great fortune with your learning coding. I also wanted to thank you for upvoting my comment on <em><strong>[Can I Reconcile Anarchism/Voluntaryism with My Faith? Wrestling with Romans 13](https://steemit.com/anarchy/@sargento/re-ch4nel-can-i-reconcile-anarchism-voluntaryism-with-my-faith-wrestling-with-romans-13-20170913t181908898z)</strong></em>. 

Have a wonderful and safe week!
___
<center>![BOTTOMBANNERSTEEM.png](https://steemitimages.com/DQmdHz71u9WJSxvGnNEyTp6RoNz4Gtt32YSq54Xpp7GpgU1/BOTTOMBANNERSTEEM.png)</center>
👍  
properties (23)
authorsargento
permlinkre-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170913t213106226z
categoryjavascript
json_metadata{"tags":["javascript"],"image":["https://media.giphy.com/media/rH50laWEAC25O/giphy.gif","https://steemitimages.com/DQmdHz71u9WJSxvGnNEyTp6RoNz4Gtt32YSq54Xpp7GpgU1/BOTTOMBANNERSTEEM.png"],"links":["https://giphy.com/gifs/rH50laWEAC25O/","https://steemit.com/anarchy/@sargento/re-ch4nel-can-i-reconcile-anarchism-voluntaryism-with-my-faith-wrestling-with-romans-13-20170913t181908898z"],"app":"steemit/0.1"}
created2017-09-13 21:31:06
last_update2017-09-13 21:32:21
depth1
children0
last_payout2017-09-20 21:31:06
cashout_time1969-12-31 23:59:59
total_payout_value0.047 HBD
curator_payout_value0.002 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,074
author_reputation-270,084,212,179
root_title"Removing a Note: Day Seven of "The Complete Node.js Developer Course""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,801,526
net_rshares18,171,966,418
author_curate_reward""
vote details (1)
@woz.software ·
$0.05
Do you need this part?

var note = {title} ?

JS is dynamic so not sure you need the definition. If not you could reduce to this :)

```
var removeNote = (title) => {
    saveNotes(fetchNotes().filter((note) => note.title !== title)
}
```

The bit you are fighting with should click in a minute...

```
var wantNote = (note) => note.title !== title;
```

Notice how similar the definition of removeNote is when written this way. That is because wantNote is just another function but in this case you have not assigned it to a variable, just passed it direct to filter.

Filter is known as a high order function, in that it takes a function as an argument. You can pass functions around as you would say a string. They are just another bit of data.

This is very common in JS and also many current languages. 

How filter works is this, it gets the list of notes and your tester function. It then walks through all the notes and tests if you want to keep it, if so it adds it to the results and if not it discards it. The results are all the notes that passed the test function you supplied.

Done in C# as know the syntax better but similar enough you should understand :)

There is a cleaner way but this should make it easy to see what is going on

```
public static IEnumerable<Note> Filter(
    this IEnumerable<Note> toFilter, Func<Note, bool> predicate)
{
    var result = new List<Note>();
    foreach (var note in toFilter)
    {
        if (predicate(note))
        {
            result.Add(note);
        }
    }
    return result;
}
```

So this gets an IEnumerable (list) of notes and a function from note to bool. Called predicate as that is the common term for something that takes a value and returns true/false because maths :)

HTH

Woz
👍  
properties (23)
authorwoz.software
permlinkre-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170912t064326670z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-12 06:43:30
last_update2017-09-12 06:43:30
depth1
children2
last_payout2017-09-19 06:43:30
cashout_time1969-12-31 23:59:59
total_payout_value0.038 HBD
curator_payout_value0.013 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,753
author_reputation2,321,910,395,519
root_title"Removing a Note: Day Seven of "The Complete Node.js Developer Course""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,629,234
net_rshares18,863,291,227
author_curate_reward""
vote details (1)
@matthewdavid ·
Thank you. This helps!

I appreciate that you took the time to explain it.
👍  
properties (23)
authormatthewdavid
permlinkre-wozsoftware-re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170913t042749915z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-13 04:27:54
last_update2017-09-13 04:27:54
depth2
children1
last_payout2017-09-20 04:27:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length74
author_reputation2,155,255,892,877
root_title"Removing a Note: Day Seven of "The Complete Node.js Developer Course""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,723,475
net_rshares6,514,013,641
author_curate_reward""
vote details (1)
@woz.software ·
$0.05
More than happy to help. You are doing the right thing writing like this, it helps get things clear in your head. I found that with my roguelike series. Actually found bugs and fixed them while writing the articles explaining the code :)
👍  
properties (23)
authorwoz.software
permlinkre-matthewdavid-re-wozsoftware-re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170913t095509874z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-13 09:55:09
last_update2017-09-13 09:55:09
depth3
children0
last_payout2017-09-20 09:55:09
cashout_time1969-12-31 23:59:59
total_payout_value0.038 HBD
curator_payout_value0.012 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length237
author_reputation2,321,910,395,519
root_title"Removing a Note: Day Seven of "The Complete Node.js Developer Course""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,744,987
net_rshares18,567,009,166
author_curate_reward""
vote details (1)
@woz.software ·
$0.05
btw, these are all the same. note is just what you have called the argument and note is a good name as makes it clear what is going on

```
(note) => note.title !== title
(x) => x.title !== title
(burger)  => burger.title !== title
```
👍  
properties (23)
authorwoz.software
permlinkre-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170912t064629485z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-12 06:46:33
last_update2017-09-12 06:46:33
depth1
children1
last_payout2017-09-19 06:46:33
cashout_time1969-12-31 23:59:59
total_payout_value0.038 HBD
curator_payout_value0.012 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length235
author_reputation2,321,910,395,519
root_title"Removing a Note: Day Seven of "The Complete Node.js Developer Course""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,629,439
net_rshares18,270,727,105
author_curate_reward""
vote details (1)
@matthewdavid ·
Good example 

:-)
👍  
properties (23)
authormatthewdavid
permlinkre-wozsoftware-re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170913t042850026z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-13 04:28:48
last_update2017-09-13 04:28:48
depth2
children0
last_payout2017-09-20 04:28:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length18
author_reputation2,155,255,892,877
root_title"Removing a Note: Day Seven of "The Complete Node.js Developer Course""
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,723,532
net_rshares6,408,380,987
author_curate_reward""
vote details (1)