JavaScript: cosas que debe saber antes de comenzar

No hay duda de que JavaScript es un extenso lenguaje de programación con muchas bibliotecas de ayuda, marcos, bases de datos y otras funcionalidades adicionales. La acumulación de nueva información puede resultar intimidante para el programador novato. Como kyle simpson dice en «No sabes JavaScript»: “Primero escribes el código en JS y luego descubres cómo funciona.“

He trabajado en proyectos creados en JS puro y también he trabajado con C# durante varios años. En mi tiempo libre, también entreno y enseño a nuevos desarrolladores y doy presentaciones en conferencias de TI. Y basándome en mi experiencia, te ayudaré a descubrir cómo aprenderlo.

En este artículo, me gustaría resaltar las cosas que el Los estudiantes novatos de JS necesitan saber al principio del proceso de aprendizaje. Estos consejos podrían aliviar la curva de inclinación e incluso pueden hacer que sea interesante para usted comenzar con JS

Entonces, avancemos.

Jerga de JavaScript: 10 términos que debe conocer

No hay duda de que JavaScript es un extenso lenguaje de programación con muchas bibliotecas de ayuda, marcos, bases de datos y otros extras. Leer más

Infórmate poco a poco

A primera vista, la hoja de ruta de un desarrollador le mostrará cuán extenso es el ecosistema JS y cuánto debe comprender. Al ver tal variedad de información, muchos desarrolladores novatos se atrapan a sí mismos y piensan erróneamente que necesitan saberlo todo de una vez.

Intentan dar sentido a todo el ecosistema de JS sin profundizar en JS en sí. Terminan entendiendo muchas cosas en la superficie mientras saltan entre temas. Estos desarrolladores no se convertirán en especialistas en ningún campo si toman esta estrategia.

A pesar de que JavaScript es un lenguaje de programación de rápida evolución y expansión, se basa en una serie de ideas fundamentales y temas subyacentes. Cualquier proyecto de cualquier complejidad se puede facilitar utilizando estos métodos.

Desde mi perspectiva, una hoja de ruta para un nuevo desarrollador de JS debería verse así:

Este es el método que usamos para entender los fundamentos:

Cómo funciona Internet – No creo que necesite explicar por qué necesitas saber esto.
Disposición – sí, el desarrollador de JS también debe lidiar con esto con frecuencia
JS básico – debe comprender no solo cómo declarar una variable, sino también todos los matices del lenguaje
Git – trabajar en proyectos sin una comprensión adecuada de Git puede generar una pérdida de tiempo significativa
marco S – Comenzaría con React, pero recomiendo revisar todas las opciones y seleccionar la más atractiva. Por supuesto, hay más en camino.

Cada etapa de este proceso está respaldada por una gran cantidad de datos. Determine las distinciones entre cliente y servidor, profundice en HTML y CSS, y decida qué marco JS (Angular, React o Vue) se adapta mejor a sus objetivos profesionales y comience a aprender sabiamente.

Esta experiencia aumentará sus posibilidades de conseguir un trabajo. Además, un dominio sólido de los fundamentos de JavaScript te acompañará por el resto de tu vida. En consecuencia, la primera regla es para abordar JavaScript metódicamente, en lugar de dispersar su atención con el objetivo de aprender todo a la vez.

Profundizar en los temas básicos

Puede encontrar cuellos de botella incluso en los temas básicos que no se notan de inmediato, pero que se hacen evidentes en el código de su proyecto real. Y en este punto, debe comprender lo que está sucediendo y cómo lidiar con eso. Aquí hay un gran ejemplo de una pregunta de entrevista para un novato:

const resultA = 40 && 2 || 33;
const resultB = (4 * 2) && (3 * 6);
const resultC = 0 && 2

A menudo, la mitad de los desarrolladores novatos cometen errores al responder a la pregunta de qué sucederá con las variables. a, b, c. Muchos creen que los valores booleanos deberían devolverse aquí: true o false.

Pero en este código, si todos los valores son truese devolverá el último valor verdadero, o el primero false valor, si al menos uno de ellos es falso. En nuestro caso, 2, 18, 0, respectivamente. Aquí hay otro ejemplo de la tarea más convencional del mundo JS:

for (var i = 0; i < 10; i++) {
	setTimeout ( function ()  {
	console.log(i);
} ,  1000) ;

Si comprende completamente solo los conceptos de este ejemplo, también comprenderá:

Zonas de visibilidad
Cierres
La diferencia en cómo funcionan las variables
Variables emergentes
Cómo funcionan setTimeout y JS asíncrono.

Esto lleva a la segunda regla: mientras interpreta tales casos, investigue más profundamente las respuestas proporcionadas.

Cuidado con los «estándares»

En varios recursos, con frecuencia hay una distinción entre «estándar JS antiguo» y «estándar JS nuevo». Las funciones de ES6, ES7 y las siguientes versiones de JavaScript son supuestamente herramientas nuevas que se pueden aprender al formar parte de un equipo.

Los programadores principiantes tienen la creencia incorrecta de que se pueden aprender por separado, sin embargo, este no es el caso. La desestructuración, las funciones de flecha, los operadores de propagación, las promesas y las clases son características que se han utilizado durante mucho tiempo como un estándar de lenguaje moderno. Es fundamental entender cómo trabajar con ellos.

Sin práctica, JS es como una hoja en el viento

Supongamos que obtuvo su primera entrevista para un puesto de desarrollador de JavaScript junior y mostró una comprensión teórica excepcional. Está empleado para una pasantía en el equipo y se le asigna su primera tarea.

¡Entonces te das cuenta de que no puedes escribir una sola línea de código por ti mismo! Ahora es un buen momento para mencionar una tercera regla crucial: poner en práctica sus conocimientos teóricos en todo momento. No solo aprenderá cómo realizar tareas de aplicaciones rápidamente, sino también cómo navegar en los principios fundamentales de JavaScript, a través de una práctica rigurosa. Esta es una habilidad útil para los clientes potenciales.

Intente abordar el desafío, que puede cumplir en cualquier tarea de prueba. Hay una lista de objetos, cada uno con su precio único. Envía al usuario el total final de los bienes en el carrito de compras que ha seleccionado.

const  goodsAddedToCart - [ {
	name:  'JavaScript' ,
	price:  20
} ,  {

name:  'React' ,
	price:  30
} ,  {

name: 'HTML/CSS' ,
	price:  202
} ] ;

Estoy seguro de que muchos novatos describirán fácilmente la solución creando el for bucle y el result variable con un valor nulo asignado. No se ve muy elegante, pero funciona, ¿verdad?

var result = 0;
for  (i = 0;  i  <  goodsAddedToCart.length;  i++)  {
	result = result +  goodsAddedToCart[i].price;
} ;

Pero, ¿cómo podemos reutilizar este método para una secuencia diferente de productos seleccionados? Aparentemente, todo tiene que estar envuelto en una función, pero ¿por qué haríamos eso cuando JS ha estado proporcionando herramientas para tales tareas durante mucho tiempo? Aquí hay un ejemplo con reduciendo:

goodsAddedToCart.reduce ( (accumulator, ( price } ) => accumulator + price,  0);

Un ejemplo más:

const getAllPeople = async  () => {
  const response = await fetch('https://swapi.dev/api/people/'};
  const result = await  response.json( );
  return result.results;
} ;

const displayPersonData = ( person, elementToDisplay) => {
const personWrapper = document.createElement ( 'div') ; 
elementToDisplay. appendChild (personWrapper) ;
personWrapper. style. margin = '10 px' ;

for (let [key, value] of Object. entries (person)) {
  const personInfoField = personWrapper. appendChild (document createElement( 'div')) ;
  personInfoField.innerHTML = 'S { key} : $ {value} : ' ; 
}

const displayPeople  =  async  ( ) => {
  const  people  =  await  getAllPeople( ) ;
  const  documentBody  =  document.querySelector( 'body' ) ;

document.Body.innerHTML  =  ' ' ;

people. forEach ( (person)  =>  {
   displayPersonData(person,  documentBody) ;
} ) ;
} ;

Por supuesto, este código se puede mejorar aún más. Aun así, es suficiente practicar el trabajo con búsquedas, arreglos y objetos. Existen numerosas API gratuitas disponibles en Internet que le permitirán practicar el manejo de este tipo de funcionalidad. Por ejemplo, considere los siguientes recursos:

La API de Star Wars: SWAPI
alexwohlbruck/cat-hechos
jikan.docs.apiario.io
Google.

La importancia de un código claro y conciso

Otro error cometido por Juniors es no nombrar las variables en su código. El principal requisito para ser entendido por otros programadores de tu equipo o después de unos meses de pausa, incluido tú mismo, es la legibilidad. Como ejemplo, considere una matriz de usuarios, cada uno con un nombre y una edad:

const  users  = [ {
	name: 'John' , 
	age: 20
	} , { 
	name: 'Alex' , 
	age: 30
	} , { 
	name: 'Thanos' , 
	age: 32432
} ] ;

Imagina que usaste el método de procesamiento Map cuando trabajas con esta matriz, lo que tendría sentido, pero por alguna razón, nombraste el parámetro de la función anónima como itm:

users.map ( (itm)  =>  {
// There are 100 lines of code 
} ) ;

¿Por qué debería considerarse esto como un error en este contexto, cuando todo funcionará con este u otro nombre de variable? Por supuesto, el error aquí es más lógico que programático. ¿Por qué no llamar a cada elemento de una matriz «usuario» si está trabajando con una matriz de usuarios de datos?

De esta manera, no recibirá comentarios enojados de otros ingenieros que simplemente no comprenden lo que realiza esta o aquella variable en su código.

Aquí hay otro ejemplo de código hinchado:

const getPersonAppearance  =  (object) => { 
	const personShortDescription  =  object. name + " " +  object. surname +             
	" in his " + object. age + "looks awesome";

	// There are 100 lines of code 
	return { 
		personShortDescription, 
		...
	} 
};

Simplemente desestructurando los objetos de la matriz (nombre, apellido, edad) puede obtener un texto conciso y comprensible para todos los programadores:

const getPersonAppearance  = ( person ) => { 
	const { name, surname, age} = person;
	const personShortDescription  =  ' S {name} S {surname} in his {age} looks awesome ' ;

	// There are 100 lines of code  
	return {   
		personShortDescription, 
		...
	} 
};

Así que aquí está la cuarta regla: al desarrollar buenos hábitos durante el entrenamiento, no tendrá que ajustarlos en el lugar de trabajo.

ser un aprendiz

Es crítico en la programación nunca terminar ahí. La industria de TI está evolucionando rápidamente, con la aparición de nuevos marcos y medidas para trabajar con datos.

Si no los dominas gradualmente, corres el riesgo de quedar atrapado en tareas repetitivas y monótonas durante un período prolongado de tiempo. No es por eso que te metiste en la profesión, ¿verdad?

Una vez que tenga habilidades fundamentales de programación JS, dése una palmadita en la espalda, respire profundamente y vuelva a estudiar una hoja de ruta completa de JavaScript.