A one-click cookie deleter

Are you sick of clearing your cookies and getting logged out of literally everything? Use this code snippet instead!

javascript:(()=>{document.cookie.split(";").map(o=>o.split("=")).map(o=>o[0]).forEach(o=>document.cookie =`${o}=;max-age=-100`);})();

Usage

1. Visit a random site and add it as a bookmark.
2. Control-click, right-click, tap with two fingers, whatever... click "edit" and paste the above code into the "Address" box. 2a. NOTE! Some browsers automatically strip the javascript: part from the beginning. Check to make sure that the bookmarklet address starts with javascript:. If it doesn't, this won't work.
3. Visit some site (like Glitch) and click on the bookmarklet. Poof! No more cookies. (You might get logged out).

How does this work? Here's the un-minified, readable version:

javascript: (() => {        
document.cookie.split(";")
  .map(o => o.split("="))
  .map(o => o[0])
  .forEach(o => document.cookie = `${o}=;max-age=-100`);
})();

How does each part work?

javascript:

This tells the browser that the link is a javascript script. Otherwise, you'll perform a search for "(()=>{....."

(() => {})()

These are very cool functions - they're Anonymous Self-Invoking Functions, or ASIFs.

• () => {} The above is the most concise form of a function possible, using ES6 arrow syntax. Before ES6, functions were:

const functionName = function(parameters) {
//do something...
}

With arrow functions, they became:

const functionName = (parameters) => {
//do something...
}

Note the A in ASIF - "anonymous". Just like people with no names, functions with no names are anonymous functions. So, this is an anonymous arrow expression.

• () (around function)
  The set of parentheses around the anonymous arrow function is called a "closure". As you can see in the article, the point of the closure is to avoid naming conflicts. This actually served me well - on sites like Google and Twitter, there were already variables called "a" and "b". 😂

• () (end of function)
  How does a function call its friends? With parentheses!
  Ok, not a funny joke. You should remember how to use functions with names:
  

const functionName = (parameters) => {
//do something...
}

functionName(params)

What happens if the function doesn't have a name and doesn't have parameters? That's right, it's just:

()

Simplicity is beautiful.

document.cookie.split(";");

If you go the console on some random site and run document.cookie, you'll see cookie syntax looks like this:
"key=value; key2=value2; ...".
By using the String#split method, we return an array of all the individual keys and values, like ["key=value", "key2=value"]

.map(o => o.split("="))

Using the .map array iterator method, we go through and split apart each key and value pair into two different values.
This line then produces an array of arrays:

[
 ["key", 
   "value"
 ], 
 ["key2", 
  "value"
 ]
]

.map(o => o[0])

Now, we need to get the cookie keys. (Trust me, there's an end to this!). Note that the key is the first position of each array element - we simply need to iterate through and grab that key, and then make a new array. Now c looks like ["key", "key2"].

1.forEach(o => document.cookie =${o}=;max-age=-100);`

Unlike the .map iterators which make new arrays, Array#forEach basically provides a compressed for... loop - it does something for each element. We're taking each array of the element (which is the key), setting it to nothing, and then making the max-age negative so the cookie expires immediately.

Thanks for reading! If you made it all the way to the end, a pat on the back and a free mask for you 🤿, and if you found any mistakes or have any thoughts, don't be afraid to comment!

Credits: Josh Wood for the tips on Twitter, and Javascript Minifier for cleaning up my code.