Update from obsidian - thinkpad

Affected files:
.obsidian/core-plugins-migration.json
.obsidian/core-plugins.json
.obsidian/hotkeys.json
.obsidian/plugins/obsidian-omnivore/data.json
.obsidian/plugins/obsidian-tasks-plugin/data.json
.obsidian/plugins/update-time-on-edit/data.json
01. Projects/Página Personal/CI-CD.md
01. Projects/Página Personal/Components/Lightbox.md
01. Projects/Página Personal/Components/TOC.md
01. Projects/Página Personal/Components/Table.md
01. Projects/Página Personal/Global Apllication.md
01. Projects/Página Personal/Pages/About Me.md
01. Projects/Página Personal/Pages/Blog entry list.md
01. Projects/Página Personal/Pages/Blog entry.md
01. Projects/Página Personal/Pages/Games Entry.md
01. Projects/Página Personal/Pages/Games List.md
01. Projects/Página Personal/Pages/Landing Page.md
01. Projects/Página Personal/Pages/Portafolio List.md
01. Projects/Página Personal/README.md
01. Projects/Página Personal/board.md
01. Projects/Renuncia/README.md
02. Areas/Exersice/Misc.md
04. Periodic/01. Daily/2024-02-23.md
04. Periodic/05. Yearly/2024.md
99. Archives/Setup Obsidian/Foo.md
99. Archives/Setup Obsidian/Objective.md
99. Archives/Setup Obsidian/README.md
Read Later/2024-02-21 - How to Use the JavaScript Map and Set Objects – Explained with Code Examples.md
templates/Project Readme.md
templates/yearly.md
This commit is contained in:
Alexander Navarro 2024-02-24 13:44:11 -03:00
parent 2980070edc
commit 6f27cdc5e9
30 changed files with 758 additions and 31 deletions

View file

@ -8,7 +8,7 @@
"outgoing-link": true, "outgoing-link": true,
"tag-pane": true, "tag-pane": true,
"page-preview": true, "page-preview": true,
"daily-notes": true, "daily-notes": false,
"templates": true, "templates": true,
"note-composer": true, "note-composer": true,
"command-palette": true, "command-palette": true,

View file

@ -8,7 +8,6 @@
"tag-pane", "tag-pane",
"properties", "properties",
"page-preview", "page-preview",
"daily-notes",
"templates", "templates",
"note-composer", "note-composer",
"command-palette", "command-palette",

View file

@ -40,5 +40,14 @@
"key": "L" "key": "L"
} }
], ],
"editor:toggle-checklist-status": [] "editor:toggle-checklist-status": [],
"obsidian-tasks-plugin:edit-task": [
{
"modifiers": [
"Mod",
"Shift"
],
"key": "L"
}
]
} }

View file

@ -3,7 +3,7 @@
"dateSavedFormat": "yyyy-MM-dd HH:mm:ss", "dateSavedFormat": "yyyy-MM-dd HH:mm:ss",
"apiKey": "ec3bba50-4770-471b-99b1-9953ca523d8c", "apiKey": "ec3bba50-4770-471b-99b1-9953ca523d8c",
"filter": "ADVANCED", "filter": "ADVANCED",
"syncAt": "2024-02-23T11:52:54", "syncAt": "2024-02-24T13:34:52",
"customQuery": "in:archive has:highlights", "customQuery": "in:archive has:highlights",
"template": "# {{{title}}}\n\n{{# note }}\n## Notes\n\n{{{ note }}}\n{{/ note }}\n{{#highlights.length}}\n## Highlights\n\n{{#highlights}}\n{{{text}}} \n{{#note}}\n\n> [!note]\n> {{{note}}}\n{{/note}}\n\n[source]({{{highlightUrl}}}) {{#labels}} #{{name}} {{/labels}}\n\n---\n\n{{/highlights}}\n{{/highlights.length}}\n## Original\n\n{{{ content }}}", "template": "# {{{title}}}\n\n{{# note }}\n## Notes\n\n{{{ note }}}\n{{/ note }}\n{{#highlights.length}}\n## Highlights\n\n{{#highlights}}\n{{{text}}} \n{{#note}}\n\n> [!note]\n> {{{note}}}\n{{/note}}\n\n[source]({{{highlightUrl}}}) {{#labels}} #{{name}} {{/labels}}\n\n---\n\n{{/highlights}}\n{{/highlights.length}}\n## Original\n\n{{{ content }}}",
"highlightOrder": "LOCATION", "highlightOrder": "LOCATION",
@ -17,7 +17,7 @@
"version": "1.6.3", "version": "1.6.3",
"isSingleFile": false, "isSingleFile": false,
"frequency": 60, "frequency": 60,
"intervalId": 13, "intervalId": 14,
"frontMatterVariables": [], "frontMatterVariables": [],
"frontMatterTemplate": "id: {{{ id }}}\ntitle: >\n {{{ title }}}\nstatus: {{{ state }}}\ntags:\n - read-later\n{{#labels.length}}\n{{#labels}} - {{{name}}}\n{{/labels}}\n{{/labels.length}}\ndate_added: {{{ dateSaved}}}\nurl_omnivore: >\n {{{ omnivoreUrl}}}\nurl_original: >\n {{{ originalUrl}}}" "frontMatterTemplate": "id: {{{ id }}}\ntitle: >\n {{{ title }}}\nstatus: {{{ state }}}\ntags:\n - read-later\n{{#labels.length}}\n{{#labels}} - {{{name}}}\n{{/labels}}\n{{/labels.length}}\ndate_added: {{{ dateSaved}}}\nurl_omnivore: >\n {{{ omnivoreUrl}}}\nurl_original: >\n {{{ originalUrl}}}"
} }

View file

@ -1,5 +1,5 @@
{ {
"globalQuery": "", "globalQuery": "path does not include templates\ntags does not include #feat",
"globalFilter": "", "globalFilter": "",
"removeGlobalFilter": false, "removeGlobalFilter": false,
"taskFormat": "tasksPluginEmoji", "taskFormat": "tasksPluginEmoji",

View file

@ -22,7 +22,6 @@
"01. Projects/Obtener pasaporte/Obtener pasaporte.md": "f3c1769ca0f40f87c41954c48b4cc791cf77dc22422e15a7005a880d9b030de9", "01. Projects/Obtener pasaporte/Obtener pasaporte.md": "f3c1769ca0f40f87c41954c48b4cc791cf77dc22422e15a7005a880d9b030de9",
"02. Areas/Dotfiles/dotfiles tasks.md": "85c72a54844c201397a839d9394aa74896f3e76c2127b2325ce2e480a1fa15f9", "02. Areas/Dotfiles/dotfiles tasks.md": "85c72a54844c201397a839d9394aa74896f3e76c2127b2325ce2e480a1fa15f9",
"01. Projects/Renuncia/Renuncia.md": "088263e8c8b8719835e203690683861cd889b1c2a1bf17bdfa09243b8eadbe53", "01. Projects/Renuncia/Renuncia.md": "088263e8c8b8719835e203690683861cd889b1c2a1bf17bdfa09243b8eadbe53",
"01. Projects/Página Personal/board.md": "5ccecc6fd345d2e5361e6a55837716753426acbb020e4adcce89fc71c7d0b812",
"02. Areas/Food/recipes.md": "320958ea965e90d56fd07f79928b046ce07755df3c05fe965a115c305aac3b07", "02. Areas/Food/recipes.md": "320958ea965e90d56fd07f79928b046ce07755df3c05fe965a115c305aac3b07",
"notes/asd.md": "e791e564d80d7b1354ef6dc05dab000a6ac265518f348d18db855d51264a8671", "notes/asd.md": "e791e564d80d7b1354ef6dc05dab000a6ac265518f348d18db855d51264a8671",
"01. Projects/Electronic Mantainance/List of electronics.md": "cadf1bbd65c88be9d11f8992a4315c24e4a6d14b53b8f197159975217c2e347c", "01. Projects/Electronic Mantainance/List of electronics.md": "cadf1bbd65c88be9d11f8992a4315c24e4a6d14b53b8f197159975217c2e347c",
@ -35,7 +34,6 @@
"01. Projects/Playa/Movies-Series.md": "c4ae360a4806cc6ee14fa032f4f933543a10b4ff7e85bc5a03a28ce73912c819", "01. Projects/Playa/Movies-Series.md": "c4ae360a4806cc6ee14fa032f4f933543a10b4ff7e85bc5a03a28ce73912c819",
"03. Resources/Notetaking/Reuse previous work.md": "caed818e796535d10e59e5db1cafdcac763dc18cadcf5c55f5897cc4e6e000a5", "03. Resources/Notetaking/Reuse previous work.md": "caed818e796535d10e59e5db1cafdcac763dc18cadcf5c55f5897cc4e6e000a5",
"02. Areas/Exersice/Descansos Activos.md": "c3bfb608fd554d040cbd748517971656d7c7f3ffd6350f3c655a03d1c7960836", "02. Areas/Exersice/Descansos Activos.md": "c3bfb608fd554d040cbd748517971656d7c7f3ffd6350f3c655a03d1c7960836",
"04. Periodic/05. Yearly/2024.md": "7193ba0a3cec692d430ad0fb86f8ad9f210767f801c56a1bfbf7d18dbdbc3823",
"03. Resources/Notetaking/PARA method.md": "b21d759763f3fea2d76732e72c44fc19cdb7f4dfcfaee2ee42ccbadee9f8bbef", "03. Resources/Notetaking/PARA method.md": "b21d759763f3fea2d76732e72c44fc19cdb7f4dfcfaee2ee42ccbadee9f8bbef",
"03. Resources/Notetaking/Progresive Summarization.md": "77c48ce156a54beb923003f47f636fdcfdd9c0cc083a08ab22df7cc742db8151", "03. Resources/Notetaking/Progresive Summarization.md": "77c48ce156a54beb923003f47f636fdcfdd9c0cc083a08ab22df7cc742db8151",
"01. Projects/Playa/comida.md": "fd69a9aa693a2146a45db3a96d12dad07845c96ceaef7efb248431b2f1323fa8", "01. Projects/Playa/comida.md": "fd69a9aa693a2146a45db3a96d12dad07845c96ceaef7efb248431b2f1323fa8",
@ -63,8 +61,25 @@
"03. Resources/Notetaking/Project checklists.md": "bfe20c25bfdd6d89340744ab5d9cfa534d053489c2ea9f8406f8a7020fe2ec04", "03. Resources/Notetaking/Project checklists.md": "bfe20c25bfdd6d89340744ab5d9cfa534d053489c2ea9f8406f8a7020fe2ec04",
"03. Resources/Notetaking/Periodic reviews.md": "e680d48c5dfc3462af744c288e874f8823a6a67f880a001a9764e49263863f13", "03. Resources/Notetaking/Periodic reviews.md": "e680d48c5dfc3462af744c288e874f8823a6a67f880a001a9764e49263863f13",
"03. Resources/Notetaking/tags.md": "54a539795c0386ec0af9906428a5e08a0d6ce5cd726956f126cb71d791681862", "03. Resources/Notetaking/tags.md": "54a539795c0386ec0af9906428a5e08a0d6ce5cd726956f126cb71d791681862",
"01. Projects/Setup Obsidian/Objective.md": "9fde8bbc47587e36690dbf3a2c61e1c405224728663bb0400d2c89ab6646e197", "04. Periodic/01. Daily/2024-02-23.md": "9bf373d4dee7a4f3a88f7256e9c8eb4309b3345007e71db4a85ebd180af7065f",
"01. Projects/Setup Obsidian/Foo.md": "91a207af114d10d6808497e9ba4560f29cab32a51522e8a82d0adcd422d75b5d", "04. Periodic/05. Yearly/2024.md": "bd6f41cf36a26926af16cf4e176165261f7a3d6569bc67706ab481d93b5839e5",
"01. Projects/Setup Obsidian/README.md": "2c26f08dd2263d99607776d2fb475acfe196453500867d77bb823c5c82d358b5" "01. Projects/Renuncia/README.md": "e823afb3d153203aaeb308f5dff7cafa118a94fe7fdb32ef72729044f85d8345",
"99. Archives/Setup Obsidian/Foo.md": "91a207af114d10d6808497e9ba4560f29cab32a51522e8a82d0adcd422d75b5d",
"99. Archives/Setup Obsidian/Objective.md": "9fde8bbc47587e36690dbf3a2c61e1c405224728663bb0400d2c89ab6646e197",
"99. Archives/Setup Obsidian/README.md": "ea86a009119fb8eec4043e7a309b2e6cc149430046dbce923905299f3d0cdc56",
"01. Projects/Página Personal/README.md": "74e5e05cbf4dfc739bcb5f6e70add2267f3d9f6c9a1813d1bb4e136707694ecc",
"01. Projects/Página Personal/CI-CD.md": "47301f139c7ad4b6cb4adb39486808e4dc12e71c2f3d1a0d04b67b61880922a1",
"01. Projects/Página Personal/Components/Table.md": "39d18aeaee771d70d477c0627e1ac5d9006428b695edd527d3d12ce3edea756e",
"01. Projects/Página Personal/Pages/Landing Page.md": "418a3b2f5b67ba6babe1ace2ea5a0ebe651b3acae0a1147807dabcb01b5a3a01",
"01. Projects/Página Personal/Pages/Blog entry.md": "b29ce28c50f4a32647ef4a7ef492e60b62c3e9ea7ebe862814c8a5c4cdc62135",
"01. Projects/Página Personal/Pages/Blog entry list.md": "b29ce28c50f4a32647ef4a7ef492e60b62c3e9ea7ebe862814c8a5c4cdc62135",
"01. Projects/Página Personal/Pages/Portafolio List.md": "2ecba1c2632dac7515e2d1e7239370913e1f285189c082ae5f257c5226009aeb",
"01. Projects/Página Personal/Pages/Games List.md": "54d7128b91f2ba02054e69081e61163ab5bb47388b8baf08a48afbdb749848c7",
"01. Projects/Página Personal/Pages/Games Entry.md": "a78e4d98e2b8059e9c1a31468869d0ab8a341370170d029ef3a388e810f0d2e7",
"01. Projects/Página Personal/Pages/About Me.md": "295871c3a3af537575109a7fe3425085e737e470946a6c3cb89354871f2f14c3",
"01. Projects/Página Personal/Global Apllication.md": "9aee7ddf3b1499bc04421048934a5946e27e27284081104c376d4cca2524ba4b",
"01. Projects/Página Personal/Components/Lightbox.md": "bdcfa890e92e9bc82312e3d578025664738ef83b85daa410b07668dafbce9e75",
"01. Projects/Página Personal/Components/TOC.md": "172a80f929427b55617b3af3e4a8148961f8e2e21f7ede323baee0123daa97f3",
"02. Areas/Exersice/Misc.md": "1f94b19612f1e9dbccad4259c3e3be3d982e59cf844adac0515aaf351bb98f03"
} }
} }

View file

@ -0,0 +1,7 @@
---
created: 2024-02-24 12:58
updated: 2024-02-24 12:59
---
## Tasks
- [ ] Disable test on submodule update

View file

@ -0,0 +1,7 @@
---
created: 2024-02-24 13:20
updated: 2024-02-24 13:24
---
## Tasks
- [ ] Investigar cómo realizar este componente ⏫

View file

@ -0,0 +1,8 @@
---
created: 2024-02-24 13:24
updated: 2024-02-24 13:25
---
A floating box with the headings of an article, can use the intersector observer API to display progress on the page.
- [ ] Crear outline de tareas para este componente

View file

@ -0,0 +1,9 @@
---
created: 2024-02-24 13:00
updated: 2024-02-24 13:30
---
## Tasks
- [ ] Create design for this component
- [ ] Prevent layout shift when the filters and pagination change
- [ ] Add _component test_

View file

@ -0,0 +1,8 @@
---
created: 2024-02-06 22:52
updated: 2024-02-24 13:32
---
- [ ] Add _theme switcher_
- Load a bunch of CSS color scheme and create a theme switcher
- [ ] Evaluar Git Based CMS alternative (posibilidad de construir uno propio)
- [ ] #someday Create docker deployment version

View file

@ -0,0 +1,7 @@
---
created: 2024-02-24 13:17
updated: 2024-02-24 13:18
---
## Tasks
- [ ] Design page

View file

@ -0,0 +1,7 @@
---
created: 2024-02-24 13:12
updated: 2024-02-24 13:12
---
## Tasks
- [ ] Add E2E tests

View file

@ -0,0 +1,7 @@
---
created: 2024-02-24 13:12
updated: 2024-02-24 13:12
---
## Tasks
- [ ] Add E2E tests

View file

@ -0,0 +1,8 @@
---
created: 2024-02-24 13:15
updated: 2024-02-24 13:17
---
## Tasks
- [ ] Design Layout
- [ ] Add E2E tests

View file

@ -0,0 +1,7 @@
---
created: 2024-02-24 13:15
updated: 2024-02-24 13:15
---
## Tasks
- [ ] Add E2E tests

View file

@ -0,0 +1,16 @@
---
created: 2024-02-24 12:48
updated: 2024-02-24 13:16
---
## TODO
- [ ] Cambiar componente lightbox para remover Lightgallery
- LightGallery es de pago realmente, por lo que necesito una licencia
- [ ] Buscar ejemplos de animaciones que podría integrar
- [ ] Aplicar [View Transition](https://docs.astro.build/en/guides/view-transitions/)
- [ ] Redesign page
- hide lists
- hide blog and games from navbar
- [ ] Redactar _"about me page"_
- [ ] Conseguir una foto decente mía
- [ ] Add E2E tests

View file

@ -0,0 +1,8 @@
---
created: 2024-02-24 13:13
updated: 2024-02-24 13:27
---
## Tasks
- [ ] Design this page ⏫
- [ ] Add E2E tests

View file

@ -0,0 +1,52 @@
---
created: 2024-02-24 12:29
updated: 2024-02-24 13:07
status: Backlog
---
# Página Personal
## Tasks
```tasks
(path includes 01. Projects/Página Personal) AND (filename does not include {{query.file.filename}})
group by function task.file.pathWithoutExtension.split('/').slice(2).join("/")
sort by urgency
hide backlink
```
## Resources
- Cool websites for inspiration:
- [Noel Berry](https://noelberry.ca/)
- [Heidy Motta](https://www.heidy.page/)
- [Zea Slosar](https://zeaslosar.com/)
- [Harrison Gibbins](https://harrisongibbins.com)
- [The Messenger Game](https://themessengergame.com/)
- [Sabotage Studio](https://sabotagestudio.com/)
## [Kickoff](Project%20checklists.md#Kickoff)
### Completion Criteria
This project will be completed when:
- [ ] #feat Have a cool homepage with an "about me" section 📅 2024-03-25
- [ ] #feat Have a _portafolio project list_ 📅 2024-03-25
- [ ] #feat Have a _project overview_ 📅 2024-03-25
### Brainstorm
- Item
## [Outtakes](Project%20checklists.md#Completion)
### Was the goal archived?
Yes/No, because of...
### What did go well?
- Item
### What did go wrong?
- Item

View file

@ -1,6 +0,0 @@
---
created: 2024-02-06 22:52
updated: 2024-02-18 15:29
---
- [ ] Arreglar problema de compilación debido a lightgallery
- [ ] Evaluar Git Based CMS alternative (posibilidad de construir uno propio)

View file

@ -1,16 +1,16 @@
--- ---
created: 2024-02-23 12:48 created: 2024-02-23 20:47
updated: 2024-02-23 13:27 updated: 2024-02-23 20:54
status: Backlog status: Backlog
--- ---
# Setup Obsidian # Renuncia
## Tasks ## Tasks
```tasks ```tasks
path includes 01. Projects/Setup Obsidian (path includes 01. Projects/Renuncia) AND (filename does not include {{query.file.filename}})
group by filename group by filename
sort by urgency sort by urgency
sort by status
hide backlink hide backlink
``` ```
@ -22,7 +22,10 @@ hide backlink
### Completion Criteria ### Completion Criteria
This project will be completed when... This project will be completed when:
- [x] #feat Renunciar Usercode ✅ 2024-01-15
- [ ] #feat Cobrar seguro de cesantía 📅 2024-03-31
### Brainstorm ### Brainstorm

View file

@ -0,0 +1,7 @@
---
created: 2024-02-24 13:34
updated: 2024-02-24 13:35
---
## Tasks
- [ ] Crear plataforma para ejercicio (ver foto plaza humedal de cartagena)

View file

@ -0,0 +1,12 @@
---
created: 2024-02-23 14:37
updated: 2024-02-23 14:42
---
## Tasks completed today
```tasks
done
done on today
group by function task.file.folder.split('/').at(1)
hide done date
```

View file

@ -1,8 +1,17 @@
--- ---
created: 2024-02-06 22:35 created: 2024-02-23 20:46
updated: 2024-02-18 15:29 updated: 2024-02-23 20:46
--- ---
## Archivments ## Goals
- Renunciar - Item
- Completar Mario & Luigi: Partners in Time
## Feats
```tasks
done
tags includes #feat
group by folder
sort by urgency
hide tags
hide backlinks
```

View file

@ -0,0 +1,51 @@
---
created: 2024-02-23 12:48
updated: 2024-02-23 21:44
status: Done
---
# Setup Obsidian
## Tasks
```tasks
(path includes 01. Projects/Setup Obsidian) AND (filename does not include {{query.file.filename}})
group by filename
sort by urgency
sort by status
hide backlink
```
## Status
I created some layout, templates and work material so I can start using some projects with more structure, the next steps would be:
- Create more templates for the areas and resources of the PARA method
- Integrate the periodic reviews more properly
## Resources
- Item
## [Kickoff](Project%20checklists.md#Kickoff)
### Completion Criteria
This project will be completed when...
- [ ] #feat Item
### Brainstorm
- Item
## [Outtakes](Project%20checklists.md#Completion)
### Was the goal archived?
Yes/No, because of...
### What did go well?
- Item
### What did go wrong?
- Item

View file

@ -0,0 +1,462 @@
---
id: 75f0d58e-d13c-11ee-abe1-23b9fd5ced9a
title: |
How to Use the JavaScript Map and Set Objects Explained with Code Examples
status: ARCHIVED
tags:
- read-later
- RSS
date_added: 2024-02-21 18:39:50
url_omnivore: |
https://omnivore.app/me/how-to-use-the-java-script-map-and-set-objects-explained-with-co-18dcf1d24bb
url_original: |
https://www.freecodecamp.org/news/javascript-map-and-set-objects-explained/
---
# How to Use the JavaScript Map and Set Objects Explained with Code Examples
## Highlights
Under the hood, the `Map` object performs better when you need to add and remove keys, so you might consider using it when your data changes frequently.
Also, the Map object has many useful methods for data manipulation, such as `has()` to see if the Map contains a specific key, `keys()` to get all keys defined in the `Map`, `values` to get all values, and `entries()` to get all key/value pairs.
[source](https://omnivore.app/me/how-to-use-the-java-script-map-and-set-objects-explained-with-co-18dcf1d24bb#9c807b39-b9c0-49de-895e-1d7f6b095ab4)
---
The `Set` object allows you to store a collection of elements, just like an Array. The differences between a `Set` and an array are:
* A `Set` requires all elements to be unique
* A `Set` has fewer methods for data manipulation
[source](https://omnivore.app/me/how-to-use-the-java-script-map-and-set-objects-explained-with-co-18dcf1d24bb#52f87526-14bc-40fb-b821-493da97dd7e3)
---
Aside from the regular methods above, `Set` also has composition methods that you can use to perform various set theory operations such as difference, union, and intersection.
[source](https://omnivore.app/me/how-to-use-the-java-script-map-and-set-objects-explained-with-co-18dcf1d24bb#cb2eebdd-f9f4-4a83-b298-f65c5556f842)
---
## Original
![How to Use the JavaScript Map and Set Objects Explained with Code Examples](https://proxy-prod.omnivore-image-cache.app/1280x720,sp6PB7t-iiwqHUxBcJgrDBxMVwkBEE45zHsnUKE3V87c/https://www.freecodecamp.org/news/content/images/size/w2000/2024/02/javascript-mat-and-set-objects-introduction.png)
Map and Set are two JavaScript data structures you can use to store a collection of values, similar to Objects and Arrays. They are specialized data structures that can help you store and manipulate related values.
In this tutorial, we will see how Map and Set work in detail and when to use them. We will also explore the Set object composition methods that were recently added to the JavaScript standard.
## Table of Contents
* [The Map Object Explained](#the-map-object-explained)
* [How to Create a Map Object](#how-to-create-a-map-object)
* [Map Object Methods and Properties](#map-object-methods-and-properties)
* [Other Ways to Create a Map Object](#other-ways-to-create-a-map-object)
* [Iterate Over Map Object Data](#iterate-over-map-object-data)
* [When to Use the Map Object](#when-to-use-the-map-object)
* [Set Object Explained](#set-object-explained)
* [How to create a Set Object](#how-to-create-a-set-object)
* [Set Object Methods and Properties](#set-object-methods-and-properties)
* [Set Composition Methods](#set-composition-methods)
* [Iterate Over a Set Object](#iterate-over-a-set-object)
* [When to Use the Set Object](#when-to-use-the-set-object)
* [Conclusion](#conclusion)
## The Map Object Explained
The `Map` object stores data in a key/value pair structure, just like an Object. The main differences between a regular object and a `Map` are:
* A `Map` can have any type of data as the key value
* A `Map` maintains the order of data added to the object
### How to Create a Map Object
To create a `Map` object, you can call the `Map()` constructor as follows:
```dart
const myMap = new Map();
```
Create a Map object in JavaScript
The code above creates a new empty `Map` object.
### Map Object Methods and Properties
A `Map` object has the following methods and properties:
* `set(key, value)` Adds a key/value pair to a Map
* `get(key)` Retrieves a value from a Map (returns `undefined` if key doesn't exist)
* `has(key)` Checks if a Map has a specific key
* `delete(key)` Removes a specific key from a Map
* `clear()` Removes all items from a Map
* `keys()` Returns all keys in a Map
* `values()` Returns all values in a Map
* `entries()` Returns all keys and values in a Map
* `size` Returns the number of items in Map
To insert data into the `Map` object, you can use the `set()` method:
```dart
const myMap = new Map();
myMap.set(1, 'Jack');
myMap.set(2, 'Jill');
myMap.set('animal', 'Elephant');
```
Inserting values to the Map object
The code above creates a `Map` object with 3 entries as follows:
```dart
Map(3)
0: {1 => "Jack"}
1: {2 => "Jill"}
2: {"animal" => "Elephant"}
```
The Map object entries
To retrieve a value from the `Map` object, you need to use the `get()` method and pass the key as its argument:
```livecodeserver
console.log(myMap.get(1)); // Jack
console.log(myMap.get('animal')); // Elephant
```
Retrieving Map object values
To see how many key/value pairs a `Map` has, you can access the `size` property:
```arduino
myMap.size; // 3
```
Accessing the Map.size property
To see if a certain key exists in a `Map` object, you can use the `has()` method. See the example below:
```angelscript
myMap.has(1); // true
myMap.has(10); // false
```
Using the Map.has() method
To remove a key/value pair from a `Map` object, you can use the `delete()` method and pass the key of the pair you want to remove as follows:
```awk
myMap.delete(1);
console.log(myMap);
// 0: {2 => "Jill"}
// 1: {"animal" => "Elephant"}
```
Deleting an entry from the Map object
If you want to remove all key/value pairs, you can use the `clear()` method instead:
```arduino
myMap.clear();
console.log(myMap); // Map(0) {size: 0}
```
Clearing a Map object
### Other Ways to Create a Map Object
You can also create a `Map` object from an Array as follows:
```prolog
const myMap = new Map([
[1, 'Jack'],
[2, 'Jill'],
['animal', 'Elephant'],
]);
```
Creating a Map from an Array
When creating a `Map` from an Array, you need to create a two-dimensional array and specify two elements in each array.
The first element will be the key, the second element will be the value. Any extra value in the array will be ignored.
In the example below, the value 'Johnson' from the first array will be ignored by the `Map()` constructor:
```dart
const myMap = new Map([
[1, 'Jack', 'Johnson'], // the value 'Johnson' is ignored
[2, 'Jill'],
['animal', 'Elephant'],
]);
```
Creating a Map from an array with more than two values
Because you can create a `Map` object from an array, you can also create one from an object. You need to transform the object into an array first using the `Object.entries()` method.
The following example shows how to use an object to create a `Map`:
```javascript
const person = {
'name': 'Jack',
'age': 20,
}
const myMap = new Map(Object.entries(person));
console.log(myMap); // Map(2) { 'name' => 'Jack', 'age' => 20 }
```
Creating a Map from an object
### Iterate Over Map Object Data
To iterate over a `Map` object data, you can use either the `forEach()` method or the `for .. of` loop:
```javascript
const myMap = new Map([
[1, 'Jack'],
[2, 'Jill'],
['animal', 'Elephant'],
]);
// iterate using the forEach() method
myMap.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
// or using the for .. of loop
for (const [key, value] of myMap) {
console.log(`${key}: ${value}`);
}
```
Both methods give the same output:
```http
1: Jack
2: Jill
animal: Elephant
```
### When to Use the Map Object
You can think of the `Map` object as an upgraded version of the regular Object. It can use any type of data as the key value, while an object can only use string values as keys.
==Under the hood, the== `==Map==` ==object performs better when you need to add and remove keys, so you might consider using it when your data changes frequently.==
==Also, the Map object has many useful methods for data manipulation, such as== `==has====()==` ==to see if the Map contains a specific key,== `==keys====()==` ==to get all keys defined in the== `==Map==`==,== `==values==` ==to get all values, and== `==entries====()==` ==to get all key/value pairs.==
But if you only want to create an object without further manipulation, then you don't need to use the `Map` object.
One example is when you send a network request using the `fetch()` method. You would create an object and convert it into a JSON string, so using a `Map` object won't give any benefit.
## Set Object Explained
==The== `==Set==` ==object allows you to store a collection of elements, just like an Array. The differences between a== `==Set==` ==and an array are:==
* ==A== `==Set==` ==requires all elements to be unique==
* ==A== `==Set==` ==has fewer methods for data manipulation==
### How to Create a Set Object
To create a new `Set` object, you need to call the `Set()` constructor as follows:
```dart
const mySet = new Set();
```
Creating a new Set object
The code above will create a new empty set.
### Set Object Methods and Properties
A `Set` object has the following methods and properties:
* `add(value)` Adds a value to a Set
* `has(value)` Checks if a Set contains a specific value
* `delete(value)` Removes a specific value from a Set
* `clear()` Removes all items from a Set
* `keys()` Returns all values in a Set
* `values()` Returns all values in a Set
* `entries()` Returns all values in a Set as `[value, value]` array
* `size` Returns the number of items in Set
Note that the `keys()` and `values()` methods in a Set object return the same output.
There's also the `entries()` method which returns an array as follows:
```javascript
const mySet = new Set(['Jack', 'Jill', 'John']);
console.log(mySet.entries());
```
Running Set entries() method
Output:
```prolog
[Set Entries] {
[ 'Jack', 'Jack' ],
[ 'Jill', 'Jill' ],
[ 'John', 'John' ]
}
```
Output of Set entries() method
Notice how the values are repeated once in each array above. The `entries()` method is created to make `Set` similar to the `Map` object, but you probably don't need it.
There are extra methods that you can use to interact with another `Set` object. We'll discuss them in the next section.
To add an element to the Set object, you can use the add method:
```processing
const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);
console.log(mySet); // [1, 2, 3]
```
Adding new elements to the Set object
To get all values stored in a `Set`, call the `values()` method:
```pgsql
mySet.values(); // [Set Iterator] { 'Jack', 'Jill', 'John' }
```
Getting all values from a Set object
To check if the `Set` has a specific value, use the `has()` method:
```elixir
mySet.has('Jack'); // true
mySet.has('Michael'); // false
```
Check if a Set has a specific value
To remove a single value, call the `delete()` method. To remove all values, use the `clear()` method:
```less
mySet.delete('Jill');
mySet.clear();
```
Delete a single value or clear all from Set
### Set Composition Methods
==Aside from the regular methods above,== `==Set==` ==also has composition methods that you can use to perform various set theory operations such as difference, union, and intersection.==
The following table is from [MDN Set documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global%5FObjects/Set#set%5Fcomposition):
![set-composition-methods](https://proxy-prod.omnivore-image-cache.app/1585x2050,sPVCo_5Ndwww9ovUzsJnG9IGeZKON-MOiMv_9bax5rNk/https://www.freecodecamp.org/news/content/images/2024/02/set-composition-methods.png)
A List of Set Composition Methods
For example, you can get a set containing the differences between two other sets as follows:
```angelscript
const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([4, 5, 6, 7, 8]);
const diffsA = setA.difference(setB); // Set(3) {1, 2, 3}
const diffsB = setB.difference(setA); // Set(3) {6, 7, 8}
```
Example of using the Set difference() method
Here, the `setA.difference(setB)` returns a `Set` containing values unique to the `setA` object.
The opposite values are returned when you run `setB.difference(setA)` method.
Note that these methods are new additions to the JavaScript standard, and as of this writing, only Safari 17 and Chrome 122 support these methods.
Most likely, these methods will be included in Node.js soon.
### Iterate Over a Set Object
To iterate over a `Set` object, you can use either the `forEach()` method or the `for .. of` loop:
```pgsql
const mySet = new Set(['Jack', 'Jill', 'John']);
// iterate using the forEach() method
mySet.forEach(value => {
console.log(value);
});
// or using the for .. of loop
for (const value of mySet) {
console.log(value);
}
```
Output:
```mipsasm
Jack
Jill
John
```
### When to Use the Set Object
You can think of the `Set` object as the alternative version of the regular Array.
Because a `Set` object ignores duplicate values, you can use this object to purge duplicates from an Array, then turn the `Set` object back to an Array:
```angelscript
const myArray = [1, 1, 2, 2, 3, 3];
const uniqueArray = [...new Set(myArray)];
console.log(uniqueArray); // [ 1, 2, 3 ]
```
Creating a unique array with the help of Set
Another reason you may want to use a `Set` is when you need to compose multiple set objects using the composition methods, such as `union()` and `difference()`. These methods are not available in an Array.
## Conclusion
In this article, you've learned how the Map and Set objects work and when to use them in your code.
If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book __Beginning Modern JavaScript_ [here](https://codewithnathan.com/beginning-modern-javascript).
[![beginning-js-cover](https://proxy-prod.omnivore-image-cache.app/2000x1667,s6cLBb9obr-IvLwhkHZ_9YW6u9bvhxbOp3iAu4nsV6tM/https://www.freecodecamp.org/news/content/images/2024/01/beginning-js-cover.png)](https://codewithnathan.com/beginning-modern-javascript)
The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic web application.
Here's my promise: __You will actually feel like you understand what you're doing with JavaScript._
See you later!
---
---
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started](https://www.freecodecamp.org/learn/)

View file

@ -8,8 +8,8 @@ status: Backlog
## Tasks ## Tasks
```tasks ```tasks
path includes <% tp.file.folder(true) %> (path includes <% tp.file.folder(true) %>) AND (filename does not include {{query.file.filename}})
group by filename group by function task.file.pathWithoutExtension.split('/').slice(2).join("/")
sort by urgency sort by urgency
hide backlink hide backlink
``` ```
@ -22,7 +22,9 @@ hide backlink
### Completion Criteria ### Completion Criteria
This project will be completed when... This project will be completed when:
- [ ] #feat item
### Brainstorm ### Brainstorm

View file

@ -0,0 +1,13 @@
## Goals
- Item
## Feats
```tasks
done
tags includes #feat
group by folder
sort by urgency
hide tags
hide backlinks
```