¿Qué es Vanilla JavaScript?

En este artículo vamos a sumergirnos en el mundo de Vanilla JavaScript, o como muchos le llaman, Vanilla JS. Te contaremos qué es, por qué es tan valioso, y cómo puedes comenzar a usarlo para mejorar tus habilidades de programación. ¡Prepárate para desentrañar los secretos de este lenguaje y descubrir cómo puede cambiar tu enfoque hacia el desarrollo web!

¿Qué es exactamente Vanilla JavaScript?

Vanilla JavaScript no es más que JavaScript puro, sin añadidos ni ingredientes extra. Esto quiere decir que no involucra librerías o frameworks como jQuery, React, o Vue.js. Cuando utilizas Vanilla JS significa que estás trabajando directamente con las funciones nativas y las capacidades que el lenguaje JavaScript ofrece. Lo que sucede es que este enfoque ayuda a los desarrolladores a comprender mejor la base del lenguaje, logrando así que optimicen su código y eviten las dependencias innecesarias.

¿Cómo usarlo?

Para empezar a usar Vanilla JS comienza por seleccionar elementos del DOM utilizando métodos como document.getElementById(), document.querySelector() o document.querySelectorAll() para interactuar con los elementos HTML. Para manipular el contenido y los atributos de estos elementos, usa propiedades como textContent, innerHTML y métodos como setAttribute(). Añade o elimina clases CSS con classList.add() y classList.remove(). Finalmente, maneja eventos del usuario con addEventListener() para responder a acciones como clics o cambios en el formulario. Este enfoque puro y directo te permitirá escribir código JavaScript eficiente y compatible con todos los navegadores, fortaleciendo tus habilidades fundamentales como desarrollador.

Ventajas de usar Vanilla JavaScript

• Rendimiento mejorado: Es muy importante que sepas que al trabajar con Vanilla JS, tus aplicaciones tienden a ser más rápidas debido a la ausencia de bibliotecas pesadas o código innecesario. Esto se traduce en una carga más rápida de las páginas y una mejor experiencia de usuario.
• Mejor comprensión del lenguaje: Como ya te lo comentamos, aprender y utilizar Vanilla JS te obliga a entender cómo funciona JavaScript en su esencia. Esto mejora tus habilidades de resolución de problemas y te prepara para trabajar con cualquier biblioteca o framework en el futuro, ya que tendrás una base sólida.
• Compatibilidad universal: Ahora bien, el código escrito en Vanilla JS es altamente compatible con todos los navegadores, ya que no depende de soluciones externas que puedan no ser soportadas en ciertos entornos.

Ejemplos prácticos del uso de Vanilla JavaScript

Como es realmente importante que entiendas cómo se usa Vanilla JavaScript, hemos decidido brindarte unos ejemplos prácticos para enriquecer tus conocimientos. Entonces, para ilustrarte cómo Vanilla JS puede ser igualmente poderoso, vamos a ver cómo realizar tareas comunes sin usar jQuery.

Selección y manipulación de elementos

Con jQuery:

const mensaje = $('#container #title').text();
$('#container #salida').text(mensaje);

Con Vanilla JS:

const mensajeVanilla = document.getElementById('title').textContent;
document.getElementById('salida').textContent = mensajeVanilla;

Como puedes ver, document.getElementById() y document.querySelector() son herramientas de Vanilla JS para seleccionar elementos. Son claras y directas, permitiendo realizar las mismas tareas sin la sobrecarga de jQuery.

Iteración sobre listas de elementos

Con jQuery:

$('#lista li').each(function(indice, valor){
     console.log('Hola soy el índice -> '+ indice + " hay este valor: " + valor);
});

Con Vanilla JS:

const list = document.querySelectorAll('#lista li');
list.forEach(function(currentValue, indice){
   console.log("En el índice " + indice + " hay este valor: " + currentValue);
});

La función forEach en Vanilla JS es una manera eficiente de iterar sobre listas, proporcionando acceso al valor y al índice de cada elemento, similar a jQuery pero sin necesidad de una librería adicional.

Trabajo con clases CSS

Vanilla JS también te ofrece métodos sencillos para manipular clases CSS:

const el = document.querySelector('#container');
el.classList.add('newClass');
el.classList.remove('otherClass');
// Verificamos si existen esas clases
alert(el.classList.contains("newClass")); 
alert(el.classList.contains("otherClass"));

Esto demuestra cómo puedes agregar, remover y verificar la presencia de clases sin necesidad de jQuery, simplificando el trabajo con CSS desde JavaScript.

Dominar Vanilla JavaScript te abre las puertas a un mundo de posibilidades en el desarrollo web. Entender JavaScript puro es esencial para cualquier desarrollador que aspire a crear aplicaciones web eficientes y escalables. Y aquí es donde KeepCoding te puede llevar al siguiente nivel.

Nuestro Bootcamp de Programación Full Stack Jr. es el lugar perfecto para transformar tu vida profesional. Aprenderás no solo Vanilla JavaScript, sino también las tecnologías más demandadas en la industria. Imagina conseguir un empleo en el sector tecnológico, donde los salarios son altos y la estabilidad laboral supera a muchos otros sectores. ¡No esperes más para dar el salto hacia el éxito y cambiar tu vida para siempre!