 # 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:  ## 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
author | matthewdavid |
---|---|
permlink | removing-a-note-day-seven-of-the-complete-node-js-developer-course |
category | javascript |
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"} |
created | 2017-09-12 05:25:27 |
last_update | 2017-09-12 05:25:27 |
depth | 0 |
children | 8 |
last_payout | 2017-09-19 05:25:27 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 2.286 HBD |
curator_payout_value | 0.731 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 4,152 |
author_reputation | 2,155,255,892,877 |
root_title | "Removing a Note: Day Seven of "The Complete Node.js Developer Course"" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 14,624,244 |
net_rshares | 1,054,423,375,467 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
cmp2020 | 0 | 13,356,273,708 | 19% | ||
doitvoluntarily | 0 | 451,758,140,897 | 100% | ||
remlaps1 | 0 | 14,385,408,904 | 19% | ||
cub1 | 0 | 37,333,892,818 | 19% | ||
lisa.palmer | 0 | 1,369,208,700 | 19% | ||
manuel78 | 0 | 104,724,895 | 1% | ||
staticinstance | 0 | 434,107,312,294 | 100% | ||
pilcrow | 0 | 24,800,676,017 | 50.51% | ||
teamturnerlive | 0 | 66,780,790,113 | 100% | ||
maxmilan878 | 0 | 2,238,635,965 | 100% | ||
kid-coder | 0 | 1,176,330,745 | 100% | ||
sargento | 0 | 1,321,524,723 | 100% | ||
scorer | 0 | 1,125,080,670 | 100% | ||
petarjs | 0 | 1,098,044,411 | 100% | ||
derkon | 0 | 969,120,133 | 100% | ||
rollsman | 0 | 87,167,140 | 100% | ||
phil-coding | 0 | 1,111,164,322 | 100% | ||
pavfed | 0 | 156,682,351 | 100% | ||
dsantrat | 0 | 1,143,196,661 | 100% | ||
fuel4fire | 0 | 0 | 100% | ||
hime.sama | 0 | 0 | 100% |
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!
author | petarjs |
---|---|
permlink | re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170915t230624886z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1"} |
created | 2017-09-15 23:06:24 |
last_update | 2017-09-15 23:06:24 |
depth | 1 |
children | 1 |
last_payout | 2017-09-22 23:06:24 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.035 HBD |
curator_payout_value | 0.011 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 2,677 |
author_reputation | 1,710,016,701,366 |
root_title | "Removing a Note: Day Seven of "The Complete Node.js Developer Course"" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 15,008,681 |
net_rshares | 17,730,650,968 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
matthewdavid | 0 | 17,730,650,968 | 100% |
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.
author | matthewdavid |
---|---|
permlink | re-petarjs-re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170915t235217261z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1"} |
created | 2017-09-15 23:52:18 |
last_update | 2017-09-15 23:52:18 |
depth | 2 |
children | 0 |
last_payout | 2017-09-22 23:52:18 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 204 |
author_reputation | 2,155,255,892,877 |
root_title | "Removing a Note: Day Seven of "The Complete Node.js Developer Course"" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 15,010,859 |
net_rshares | 0 |
<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></center>
author | sargento |
---|---|
permlink | re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170913t213106226z |
category | javascript |
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"} |
created | 2017-09-13 21:31:06 |
last_update | 2017-09-13 21:32:21 |
depth | 1 |
children | 0 |
last_payout | 2017-09-20 21:31:06 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.047 HBD |
curator_payout_value | 0.002 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 1,074 |
author_reputation | -270,084,212,179 |
root_title | "Removing a Note: Day Seven of "The Complete Node.js Developer Course"" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 14,801,526 |
net_rshares | 18,171,966,418 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
matthewdavid | 0 | 18,171,966,418 | 100% |
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
author | woz.software |
---|---|
permlink | re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170912t064326670z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1"} |
created | 2017-09-12 06:43:30 |
last_update | 2017-09-12 06:43:30 |
depth | 1 |
children | 2 |
last_payout | 2017-09-19 06:43:30 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.038 HBD |
curator_payout_value | 0.013 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 1,753 |
author_reputation | 2,321,910,395,519 |
root_title | "Removing a Note: Day Seven of "The Complete Node.js Developer Course"" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 14,629,234 |
net_rshares | 18,863,291,227 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
matthewdavid | 0 | 18,863,291,227 | 100% |
Thank you. This helps! I appreciate that you took the time to explain it.
author | matthewdavid |
---|---|
permlink | re-wozsoftware-re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170913t042749915z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1"} |
created | 2017-09-13 04:27:54 |
last_update | 2017-09-13 04:27:54 |
depth | 2 |
children | 1 |
last_payout | 2017-09-20 04:27:54 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 74 |
author_reputation | 2,155,255,892,877 |
root_title | "Removing a Note: Day Seven of "The Complete Node.js Developer Course"" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 14,723,475 |
net_rshares | 6,514,013,641 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
woz.software | 0 | 6,514,013,641 | 100% |
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 :)
author | woz.software |
---|---|
permlink | re-matthewdavid-re-wozsoftware-re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170913t095509874z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1"} |
created | 2017-09-13 09:55:09 |
last_update | 2017-09-13 09:55:09 |
depth | 3 |
children | 0 |
last_payout | 2017-09-20 09:55:09 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.038 HBD |
curator_payout_value | 0.012 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 237 |
author_reputation | 2,321,910,395,519 |
root_title | "Removing a Note: Day Seven of "The Complete Node.js Developer Course"" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 14,744,987 |
net_rshares | 18,567,009,166 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
matthewdavid | 0 | 18,567,009,166 | 100% |
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 ```
author | woz.software |
---|---|
permlink | re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170912t064629485z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1"} |
created | 2017-09-12 06:46:33 |
last_update | 2017-09-12 06:46:33 |
depth | 1 |
children | 1 |
last_payout | 2017-09-19 06:46:33 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.038 HBD |
curator_payout_value | 0.012 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 235 |
author_reputation | 2,321,910,395,519 |
root_title | "Removing a Note: Day Seven of "The Complete Node.js Developer Course"" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 14,629,439 |
net_rshares | 18,270,727,105 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
matthewdavid | 0 | 18,270,727,105 | 100% |
Good example :-)
author | matthewdavid |
---|---|
permlink | re-wozsoftware-re-matthewdavid-removing-a-note-day-seven-of-the-complete-node-js-developer-course-20170913t042850026z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1"} |
created | 2017-09-13 04:28:48 |
last_update | 2017-09-13 04:28:48 |
depth | 2 |
children | 0 |
last_payout | 2017-09-20 04:28:48 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 18 |
author_reputation | 2,155,255,892,877 |
root_title | "Removing a Note: Day Seven of "The Complete Node.js Developer Course"" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 14,723,532 |
net_rshares | 6,408,380,987 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
woz.software | 0 | 6,408,380,987 | 100% |