{"id":25396,"date":"2024-04-12T14:30:36","date_gmt":"2024-04-12T13:30:36","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-javascript-ejemplos-avanzados-para-desarrolladores-pro\/"},"modified":"2024-06-03T17:41:04","modified_gmt":"2024-06-03T16:41:04","slug":"domina-javascript-ejemplos-avanzados-para-desarrolladores-pro","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-javascript-advanced-examples-for-pro-developers\/","title":{"rendered":"Master JavaScript: Advanced Examples for Pro Developers"},"content":{"rendered":"<p>JavaScript has grown from a language focused on the basic interactivity of web pages to an entire ecosystem full of sophisticated frameworks, libraries, and design patterns. Developers who have come a long way from the days of basic DOM scripting are now looking for challenges that test their expertise and increase their mastery. If that&#039;s you, prepare to delve into examples that require deep understanding and scalpel-sharp programming logic.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-javascript-advanced-examples-for-pro-developers\/#Ejemplo_1_Programacion_Funcional_con_JavaScript\" >Example 1: Functional Programming with JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-javascript-advanced-examples-for-pro-developers\/#Ejemplo_2_Patrones_de_Diseno_en_JavaScript\" >Example 2: Design Patterns in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-javascript-advanced-examples-for-pro-developers\/#Ejemplo_3_Asincronia_y_Promesas\" >Example 3: Asynchrony and Promises<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-javascript-advanced-examples-for-pro-developers\/#Ejemplo_4_Manipulacion_Avanzada_de_DOM\" >Example 4: Advanced DOM Manipulation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-javascript-advanced-examples-for-pro-developers\/#Ejemplo_5_Web_Components_y_Shadow_DOM\" >Example 5: Web Components and Shadow DOM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-javascript-advanced-examples-for-pro-developers\/#Ejemplo_6_Tecnicas_de_Memoizacion\" >Example 6: Memoization Techniques<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-javascript-advanced-examples-for-pro-developers\/#Ejemplo_7_Optimizacion_de_Rendimiento_y_Virtual_DOM\" >Example 7: Performance Optimization and Virtual DOM<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplo_1_Programacion_Funcional_con_JavaScript\"><\/span>Example 1: Functional Programming with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The functional programming paradigm may seem esoteric at first, but with the use of JavaScript ES6+, enormous expressive power is unlocked. A key concept is immutability; when you structure your data in such a way that it is never modified, but rather new versions of it are created. Consider it the act of preserving the original state for possible comparisons or rollback.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">\/\/ Using JavaScript&#039;s freeze function to ensure immutability const immutableObject = Object.freeze({ key: &#039;value&#039; }); \/\/ Deconstruction and functional mappings const arrayOriginal = [1, 2, 3, 4]; const newArray = arrayOriginal.map(item =&gt; item * 2);<\/code><\/pre>\n<p>You can also explore function composition, where small functions are combined to form more complex ones, following the philosophy that each function performs a single task and does it well. Here we could use the method <code>compose<\/code> o <code>pipe<\/code> that many functional frameworks offer.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">\/\/ Function composition for more complex operation const double = n =&gt; n * 2; const increment = n =&gt; n + 1; const doubleOfIncrement = number =&gt; double(increment(number));<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplo_2_Patrones_de_Diseno_en_JavaScript\"><\/span>Example 2: Design Patterns in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It&#039;s time to dive into design patterns, where elegance meets practicality. The boss <code>Module<\/code> It is one of the most used in JavaScript for code encapsulation.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">var MyModule = (function() { var private = &#039;I am a private variable&#039;; function privatemethod() { console.log(private); } return { publicmethod: function() { privatemethod(); } }; })( ); MyModule.PublicMethod(); \/\/ Execute the private method<\/code><\/pre>\n<p>On the other hand, the pattern <code>Observer<\/code> allows the creation of a subscription model for custom events where multiple objects listen and react to these events.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">class Observer { constructor() { this.subscribers = []; } subscribe(fn) { this.subscribers.push(fn); } notify(data) { this.subscribers.forEach(fn =&gt; fn(data)); } } \/\/ Example of use const obs = new Observer(); obs.subscribe(data =&gt; console.log(`Notified: ${data}`)); obs.notify(&#039;Event launched!&#039;);<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplo_3_Asincronia_y_Promesas\"><\/span>Example 3: Asynchrony and Promises<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Handling asynchronous operations is crucial in modern applications. The promises and <code>async\/await<\/code> have transformed the way of working with asynchrony, making it more readable and structured.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">async function getData() { try { const data = await fetch(&#039;https:\/\/api.mysite.com\/datos&#039;); const dataJson = await data.json(); console.log(jsondata); } catch (error) { console.error(&#039;There was an error obtaining the data&#039;, error); } } get information();<\/code><\/pre>\n<p>A useful pattern in this context is the <code>async loop<\/code>, which allows you to execute iterations asynchronously with <code>Promise.all()<\/code> or with a <code>for... of<\/code> next to <code>async\/await<\/code>.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">async function processArray(array) { for (const item of array) { await processItem(item); \/\/ Suppose processItem returns a promise } }<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplo_4_Manipulacion_Avanzada_de_DOM\"><\/span>Example 4: Advanced DOM Manipulation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You may already know how to select an element and change its text, but have you experimented with Mutation Observers? This allows you to react to changes in the DOM in an efficient way, without needing unnecessary eventListeners or constant polling.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const observer = new MutationObserver(mutations =&gt; { mutations.forEach(mutation =&gt; { console.log(mutation); }); }); const elementToObserve = document.querySelector(&#039;#myElement&#039;); observer.observe(itemToObserve, { childList: true });<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplo_5_Web_Components_y_Shadow_DOM\"><\/span>Example 5: Web Components and Shadow DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Raising your front-end game also means creating reusable web components. The Web Components API allows us to build new custom HTML elements that encapsulate their functionality and styles.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: &amp;#039;open&amp;#039; }); this.shadowRoot.innerHTML = `&lt;p&gt;Encapsulated style and content&lt;\/p&gt;`; } } customElements.define(&amp;#039;my-component&amp;#039;, MyComponent); document.body.append(new MyComponent());<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplo_6_Tecnicas_de_Memoizacion\"><\/span>Example 6: Memoization Techniques<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Memoization is an optimization technique that stores the results of expensive functions, so that the next time the function is called with the same arguments, the memorized result can be immediately returned without the need for recalculation.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const memoize = (fn) =&gt; { const cache = {}; return function(...args) { const key = JSON.stringify(args); if (!cache[key]) { cache[key] = fn.apply(this, args); } return cache[key]; }; }; const costlyoperation = memoize((x) =&gt; { \/\/ Complex calculations here });<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplo_7_Optimizacion_de_Rendimiento_y_Virtual_DOM\"><\/span>Example 7: Performance Optimization and Virtual DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The concept of Virtual DOM, popularized by libraries like React, can be applied in pure JavaScript to handle interface updates efficiently.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">function updateElement(realDom, newVirtualDom) { \/\/ Compare and update only the changes } \/\/ In a real project, you would have a virtual representation of your DOM \/\/ and functions to handle the differences efficiently.<\/code><\/pre>\n<p>Each of these examples represents a small part of what you can achieve with advanced JavaScript. The key is to keep practicing, experimenting and, above all, not fear failure. After all, the most valuable lessons are found in mistakes. If you want to share your experiences or have questions about these concepts, visit <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> and contact me through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">NelkoDev Contact<\/a>. Together we can delve into these challenges and take your JavaScript skills to new horizons.<\/p>","protected":false},"excerpt":{"rendered":"<p>JavaScript ha pasado de ser un lenguaje centrado en la interactividad b\u00e1sica de las p\u00e1ginas web a un ecosistema completo lleno de frameworks, bibliotecas y patrones de dise\u00f1o sofisticados. Los desarrolladores que han recorrido un largo camino desde los d\u00edas del DOM scripting b\u00e1sico, ahora buscan retos que pongan a prueba su pericia y aumenten [&hellip;]<\/p>","protected":false},"author":1,"featured_media":25397,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[1323,205,489,1473,977,185,60,1583],"class_list":["post-25396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-avanzados","tag-blog","tag-desarrolladores","tag-domina","tag-ejemplos","tag-javascript","tag-para","tag-pro"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=25396"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25396\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/25397"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=25396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=25396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=25396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}