A one-click cookie deleter
Tags: javascript, tutorial, cookie, storage
Published: 2020-10-23 00:08:33

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 **A**nonymous **S**elf-**I**nvoking **F**unctions, 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"](https://tensor-programming.com/anonymous-functions-in-javascript/).  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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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`](https://www.w3schools.com/jsref/jsref_map.asp) 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`](https://www.w3schools.com/jsref/jsref_forEach.asp) 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](https://twitter.com/jcurtiswood) for the tips on Twitter, and [Javascript Minifier](https://javascript-minifier.com) for cleaning up my code.