Si está leyendo esto, es probable que recientemente haya comenzado a aprender Desarrollo Web.
Es posible que ya tenga algunos conocimientos de HTML y de la hoja de estilo en cascada (CSS). Usted sabe que su viaje hacia el desarrollo web implica aprender a manipular mediante programación las cosas en una página web mediante el uso de JavaScript (JS). Es posible que incluso haya escuchado sobre bibliotecas y marcos como jQuery, React, Angular y Vue y le gustaría familiarizarse con ellos. Cualquiera sea la razón, es casi seguro que necesitará tener conocimiento y experiencia con JavaScript si planea trabajar en Desarrollo Web.
Con eso en mente, ¡es hora de que lleves las cosas al siguiente nivel aprendiendo JavaScript!
Algunas palabras sobre la curva de aprendizaje para JavaScript
Hay una razón fundamental por la que aprender JavaScript es más difícil que aprender HTML y CSS. Esto se debe a que HTML y CSS son lenguajes de marcado, mientras que JavaScript es un lenguaje de programación *.
* En realidad, JavaScript es un lenguaje de secuencias de comandos, que es un subconjunto de la familia de lenguajes de programación, pero por ahora, el hecho de que el lenguaje de marcado y el lenguaje de programación son diferentes es lo importante, así que sigamos y expliquemos la diferencia …
Los lenguajes definidos como lenguaje de marcado son aquellos que representan y proporcionan un mecanismo para descifrar y usar datos estructurados en un formato de texto. Si eliminamos eso un par de muescas para que sea más fácil de entender, un lenguaje de marcado es básicamente una herramienta que podemos usar para describir cosas y proporcionar valores de manera consistente.
Por ejemplo, si tuviera que elegir algo de ropa para usar y tuviera las siguientes tres prendas de vestir, una camiseta roja, una camiseta blanca y un jersey azul, podría imaginar que usted, la persona, es el cosa a la que necesitamos dar valores. Si tenía un elemento / clave de ‘ropa’ que necesitaba un valor, las opciones disponibles para usted se convierten en los tres elementos mencionados anteriormente. En nuestro ejemplo, nuestro lenguaje de marcado puede ser algo como esto:
clothing=”white t-shirt".Los lenguajes definidos como lenguaje de programación son aquellos que se pueden usar para codificar una secuencia de pasos necesarios para realizar una acción determinada. Un ejemplo de esto en la vida real podría ser los pasos que una persona toma desde el momento en que se despierta, hasta el momento en que sale de la casa para ir a la escuela o al trabajo. Por ejemplo, una persona se despierta en la cama, abre los ojos, levanta la cabeza y la parte superior del cuerpo en posición vertical, y así sucesivamente.
Con un lenguaje de programación, podríamos escribir un conjunto de instrucciones iterativas, de manera similar a la persona que se despierta en nuestro ejemplo, para decirle a nuestra computadora qué queremos que haga, cómo queremos que reaccione en una situación dada, qué queremos permitir / no permitir y así sucesivamente. ¿Qué pasaría si nuestra persona se despertara pero se diera cuenta de que era mucho antes de lo que necesitaban estar despiertos? ¿Cerrarían los ojos y tratarían de volver a dormir? Este es el tipo de escenarios que podría usar para controlar un lenguaje de programación.
Para resumir, los lenguajes de marcado proporcionan una forma de describir valores, los lenguajes de programación proporcionan una forma de crear acciones.
Regresar a JavaScript
Ningún artículo de lenguaje de programación para principiantes absolutos sería útil sin explicar los bloques de construcción fundamentales de ese lenguaje de programación. En el caso de JavaScript, creo que son los siguientes: valores, variables, aritmética, estructuras de datos, igualdad, condicionales y funciones .
No me malinterpreten, hay otras cosas en JavaScript que son útiles, pero un conocimiento decente de nivel básico de estas siete cosas lo colocará en una buena posición para comenzar su viaje, no solo con la programación en JavaScript, sino también con la programación en general.
Entonces, suficiente conversación, ¡comencemos!
Valores
A partir de 2020, hay ocho tipos diferentes de valor en JavaScript. Siete de estos son lo que llamamos Primitivos. Estos siete son: booleano, nulo, indefinido, número, BigInt, cadena y símbolo. El octavo tipo de valor en JavaScript es Object. Para esta parte, solo nos centraremos en los tres primitivos más utilizados, que son cadenas, números y booleanos.
Nota de trivia: todo lo creado en JavaScript es primitivo o un objeto. Por lo tanto, si no es una de esas siete primitivas, es un objeto.
1. Cuerdas
Las cadenas son valores que se han incluido entre un par de marcas de voz o apóstrofes. Puede usarlo libremente al crear una cadena.
Ejemplos de Cuerda:
“hello” , “1966”, 'Liverpool F.C.‘.Si lo envuelve en apóstrofes o marcas de voz, se convierte en una cadena.
2. Números
¿Adivina cuáles son estos? ¡Sí, son números! Esto incluye números enteros como el número 5 y números decimales – flotantes – como 10.5.
Ejemplos Nº:
29 , 3.5, 1, 55555555.Al llamar a números, estos no van en apóstrofes o marcas de voz. Si coloca un número dentro de una marca de voz, como por ejemplo
“29”, se convertirá en una cadena. Hacerlo puede causar problemas si luego intentas usar ese número para hacer aritmética.3. booleanos
Estas son básicamente declaraciones verdaderas o falsas, que se muestran como
trueo false.De acuerdo, pero ¿de qué sirven estos? Aférrate a ese pensamiento porque volveremos a él cuando echemos un vistazo a Igualdad y condicionales.
Si tiene curiosidad por saber más sobre los otros tipos de datos que no se han cubierto aquí, consulte los documentos de MDN .
Variables
Las variables le permiten mantener los datos etiquetándolos con un nombre. Por ejemplo, Pi es un número infinitamente largo. Digamos que desea recordar los primeros diez números en Pi porque lo necesita para encontrar el área y la circunferencia de un círculo. En lugar de tratar de recordar y anotar esos diez números cada vez, puede almacenarlos en una variable llamada
pi. De hecho, sigamos adelante y creemos eso:var pi = 3.1415926535;
Ves aquí que creamos una variable escribiendo
vary luego el nombre que queremos darle a nuestra variable, en este caso pi,. Luego usamos el =signo igual y luego escribimos cualquier valor que queramos al final. Finalmente, terminamos de asignar nuestra variable poniendo un punto y coma ;al final.¡Ahora tenemos una manera de almacenar todos esos valores de los que estábamos hablando antes! Las variables tienen muchos usos y realmente depende de usted qué tan expansivo desea ir con estas.
Otro punto que vale la pena mencionar es que las variables distinguen entre mayúsculas y minúsculas. Por ejemplo, digamos que escribí:
saludo var = "hola";
Y luego escribí:
Saludo var = "hola";
El segundo
var Greetingno sobrescribirá al primero var greeting. Estas serían dos variables separadas y, por lo tanto, podrían tener valores diferentes. Lo que hay que recordar aquí es que el nombre que les das debe ser memorable y fácil de entender. Por lo tanto, crear variables con nombres similares podría no ser una buena idea.Algunas palabras sobre el uso de varpara crear variables
En realidad, hay otras dos formas en que podemos crear variables, intercambiando el uso de
varuno letu otro const. JavaScript se originó con solo varpero más tarde agregado lety consten la actualización de 2015 del lenguaje, oficialmente conocido como ES2015 (y anteriormente conocido como ES6, que te he mencionado porque casi definitivamente volverás a escuchar ES2015 referido como ES6 en algún momento).De hecho, la mayoría de la comunidad de JavaScript en realidad alienta el uso de
lety en constlugar de var, debido a las diferencias en algo conocido como ‘ alcance ‘ y el posible impacto que esto puede tener en su código. Sin embargo, por ahora, estamos aferrados a la enseñanza, varya que todavía funciona en la última versión y, como principiante, la diferencia entre var, let y const puede ser un poco confusa.Durante su viaje de aprendizaje, escuchará a algunas personas gritar que nunca debe usar var y que solo debe usar let o const. Incluso puede escuchar a la gente decirle que nunca debe usar var o let y solo debe usar const. Si bien existen niveles de validez de estos argumentos, gran parte se debe a preferencias personales y filosofía de programación. Tómelo todo con una pizca de sal. Forma tu propia filosofía a medida que acumules experiencia en codificación: puedes adornarla con esas pizcas de sal en el camino.
Para cualquier persona interesada en mi pizca de sal, personalmente recomendaría usar cualquiera de ellos en
letlugar de varsi quiero poder actualizar el valor de vez en cuando, por ejemplo, con un total de carrito de compras. Lo usaría en constlugar de varen casos en los que no tengo intención de actualizar un valor, por ejemplo, si tuviera una variable como const christmasDay = “December 25th".Si bien este uso de
lety constpara mí probablemente sea más una señal visual en cuanto al estado de una variable, mi razón para esto se basa más en ayudar a evitar recrear accidentalmente variables con el mismo nombre, ya que eso es posible cuando se usa var. El problema aquí es que si ya tengo una variable con, por ejemplo, el nombre billque se usa para fines de facturación, y luego creo lo que creo que es una nueva variable llamada bill, esta vez en referencia a una persona llamada Bill, el segundo billsobrescribirá el primero bill. Es muy probable que esto cause problemas en mi aplicación, y JavaScript no necesariamente me avisará de esto. Usando letoconstsolucionará esto ya que no puede recrear variables con el mismo nombre. Esto, como problema, es algo que no debería suceder si sigues el uso de nombres semánticos para tus variables como se mencionó anteriormente. Por esa misma razón, vamos a comenzar a usar lety constbajo las razones indicadas anteriormente.Ah, y una nota final sobre
const. La razón por la que se introdujo fue para ayudar a definir valores que no pueden reasignarse, es decir. ser actualizado con un nuevo valor. Esto, como una declaración, no es del todo cierto. Probablemente valga la pena leer en algún momento más adelante a medida que se familiarice con JavaScript. Sin embargo, si está ansioso, haga una búsqueda en Google de “es constante inmutable en JavaScript” .
Aritmética
¿Alguna vez usaste una calculadora? Los operadores hacen exactamente eso. Estos son los cuatro principales:
+ (adición)- (sustracción)* (multiplicación)/ (división)También está el operador de módulo%, que en JavaScript proporciona el resto obtenido al dividir dos números. Esto no es lo mismo que su operador restante en aritmética tradicional, por lo que sugeriría leer sobre cómo funciona el operador de módulo en JavaScript si planea usarlo.
Ejemplos aritméticos:
5 + 74 — 59 * 810 / 2En estos casos, no tenemos que usar estrictamente los números reales. Si tenemos valores que son números que han sido asignados a variables, también podemos usarlos. Por ejemplo:
dejar que moneyInBank = 100;
deje que shoppingBill = 40;dejar restantesBalance = moneyInBank - shoppingBill;
El
remainingBalanceaquí sería, por supuesto, igual 60.Algunas palabras sobre puntos decimales en JavaScript
Voy a mantener este breve: no confíe en la aritmética para que siempre funcione como lo esperaría si calcula valores con puntos decimales. Los decimales o flotantes, como puede oírlos llamar, no calculan en JavaScript de la misma manera que lo haría un humano. A veces puede funcionar. Por ejemplo:
0.2 + 0.3volverá 0.5. Pero 0.4 + 0.3 + 0.2 + 0.1regresará 0.9999999999999999en JavaScript, mientras que un humano podría esperar que regrese 1. Si planea crear algo en JavaScript que se base en cálculos precisos, lea sobre algunas bibliotecas JS que están diseñadas para manejar esto.Estructuras de datos
Las estructuras de datos nos proporcionan formas más complejas de mantener valores. Por ejemplo, imagine que desea almacenar una lista de compras llena de artículos que planea comprar en la tienda de comestibles. Sería engorroso tratar de almacenar cada elemento en su propia variable, por ejemplo,
let item 1 = “banana”; let item2 = “cereal”;etc.O tal vez hay una compañía que tiene múltiples direcciones, puede que no sea óptimo hacer esto creando una variable para la dirección. Lo siguiente nos mostrará dos formas en que podríamos abordar ambos.
1. Matrices
Si bien las variables generalmente solo contienen una información *, una matriz puede contener tantas como desee. Puede pensar en una matriz como una estructura de datos que nos permite mantener listas de información, lo que lo hace ideal para usar con nuestro ejemplo de lista de compras, así que probémoslo:
let groceryList = ["plátanos", "cereal", "leche"];
Notará que envolvemos la lista de elementos dentro de corchetes []. No hay palabras especiales para recordar aquí, simplemente usamos esos corchetes y eso crea la matriz.
Además de ser una forma novedosa de almacenar listas de información, las matrices también proporcionan varios métodos útiles que nos brindan formas fáciles de leer elementos en nuestra matriz, así como formas igualmente fáciles de agregar y eliminar elementos. Estos se conocen como métodos de matriz. Por ejemplo, si quisiéramos agregar naranjas a nuestra
groceryList, podríamos escribir groceryList.push("oranges"). Nuestro groceryListahora se vería así:let groceryList = ["plátanos", "cereal", "leche", "naranjas];
Por ahora, no cubriremos más de estos, pero recomiendo leer más adelante sobre ‘ métodos de matriz ‘.
Algunas palabras sobre nombres de variables
Es posible que haya notado que los nombres de variables compuestos por más de una palabra se han escrito en un formato extraño, con la primera palabra sin mayúscula, pero las palabras después de tener una letra mayúscula. Esta forma de escribir nombres de variables se conoce como camelCase y es una práctica bastante estándar al escribir cualquier cosa en JavaScript que contenga más de una palabra.
Existen otros formatos, como snake_case y PascalCase, entre otros. Aunque camelCase es más común, usar cualquier otro no dañará su código. Y aunque no dañará su código, tratar de mantener la coherencia con su base de código y su formato de carcasa elegido reducirá los dolores de cabeza futuros para usted y sus posibles compañeros de trabajo.
También vale la pena darle a sus nombres de variables algo significativo y semántico. Por ejemplo, imagine que está ocupado codificando y desea utilizar la variable de la lista de compras que creó anteriormente. ¿Es más probable que recuerde el nombre de la variable si fue
groceryListo si fue grocListo glo g? En una aplicación simple, es posible que recuerde si su lista de compras se llamaba cualquiera de estos. Pero, ¿qué pasa si tu aplicación crece y tienes 100 variables diferentes flotando? ¿Qué crees que tendrá más sentido para ti para leer y que te sea más fácil de recordar?Recuerde, el código es tanto para humanos como para computadoras. Sin embargo, de nuevo, esto es puramente filosofía de programación, por lo que si darle nombres más cortos a sus variables funciona para usted, entonces eso es todo lo que importa.
2. Objetos
Los objetos proporcionan una forma de almacenar una serie de valores en una única estructura de datos, cada valor tiene su propia clave, que es como crear una variable interna dentro de un objeto. Tomemos nuestro ejemplo anterior de almacenar una serie de direcciones y convertirlo en un objeto.
const companyAddresses = {londres: “1 Live Street”, berlín: “Hedemannstasse 50”, italia: "Via Santa Teresa 95"};
Al igual que con las matrices, puede almacenar diferentes valores allí, como números y booleanos. De hecho, incluso puede almacenar matrices dentro de objetos y objetos dentro de matrices. Con eso en mente, también puede almacenar matrices dentro de matrices y objetos dentro de objetos. Una cosa que vale la pena señalar acerca de los objetos es que las teclas deben ser alfanuméricas y, aunque pueden comenzar con un número, no debe hacerlo sin una buena razón.
La forma en que escribe un objeto en JavaScript no se limita a la forma en que se escribió anteriormente. También puede escribir el objeto en un formato más fácil de leer, como:
const companyAddresses = {
londres: “1 Live Street”,
berlín: “Hedemannstasse 50”,
italia: "Via Santa Teresa 95"
};
Una vez que haya creado un objeto, puede acceder a las propiedades cuando lo necesite. Por ejemplo, si quisiera acceder a la dirección de Londres, podría escribir
companyAddresses.londono companyAddresses["london"]. Ambos funcionarían y hay razones por las que es posible que desee usar uno sobre el otro. Siéntase libre de leer sobre esto más tarde en su propio tiempo libre.Algunas palabras en el espacio en blanco
Los espacios y los saltos de línea no son importantes para el funcionamiento de su código. Podrías haber escrito ese mismo objeto con una extensión de 100 líneas si realmente quisieras, no lo harías, ¡pero podrías! La razón por la que no lo escribiría en 100 líneas es probablemente la misma razón por la que no podría escribir un objeto con muchos valores en 1 línea: legibilidad. El código que escribes está escrito para humanos, por lo que el espacio que colocas en tu código está diseñado para que sea más fácil de leer. En el ejemplo de código anterior, utilicé dos espacios para sangrar cada clave: par de valores y también puse un espacio entre la clave y el valor. Lo hice, ya que fue mi elección escribirlo de esa manera. Escuchará (y puede que ya haya escuchado) discusiones sobre si debe usar dos espacios, cuatro espacios o pestañas al sangrar. Principalmente es solo ruido blanco y hace poca o ninguna diferencia.
Igualdad
Medidas de igualdad y desigualdad, se relacionan estrechamente con valores booleanos, si hasta ahora que una medida de la igualdad devolverá o bien
trueo falsecomo una salida. Pero, ¿qué es incluso una medida de igualdad y cómo lo hacemos?Bueno, imaginemos que tenemos una persona llamada Bruce. Bruce afirma que tiene los ojos azules y tiene 20 años. Creemos un objeto para Bruce basado en lo que nos ha dicho:
const bruceInput = {
edad: 20,
eyeColor: "Blue"
};
Ahora imaginemos que también tenemos un registro de Bruce que hemos extraído de una base de datos. Ese registro se ve así:
const bruceDatabase = {
edad: 31,
eyeColor: "Blue"
};
¿Notan algo diferente entre lo que Bruce nos ha dicho y lo que dice su registro? Si quisiéramos confirmar si lo que Bruce nos ha dicho es cierto, podríamos escribir algo como:
bruceInput.age === bruceDatabase.age
Esto volvería
truesi ambas edades son iguales y falsesi no lo son. En este caso, volvería falsecomo la edad bruceInputera 20mientras que la edad bruceDatabaseera 31. Si hiciéramos la misma verificación de igualdad eyeColor, volvería true, ya que ambos registros tienen el eyeColorindicado como "Blue".Volviendo a la verificación de edad, ¿qué pasaría si los dos valores que estuviéramos verificando fueran
31y "31"? ¿Qué crees que pasaría aquí? Bueno, si tratamos de verificarlo así:31 == "31"
En realidad volvería
true. La razón aquí es porque estamos usando el operador de doble igual ==que verifica los valores iguales, pero no le importa demasiado si los tipos son diferentes, que en este caso lo son, porque el primer valor es un número y el segundo valor es una cuerda. En realidad, hay un operador para verificar tanto el valor como el tipo, que es lo que habíamos usado anteriormente. Este es el operador triple igual ===. Entonces si tuviéramos lo siguiente:31 === "31"
Volvería
false.Hay muchos tipos diferentes de igualdad que podemos verificar. Aquí hay un resumen de los más comunes:
== (valor igual)=== (valor igual Y tipo)!= (valor no igual)!== (valor no igual o tipo)> (es mayor que)< (es menos que)>= (es mayor o igual a)<= (es menor o igual que)Haremos uso de algunos más de estos en la siguiente sección.
Condicionales
Los condicionales nos permiten procesar datos entrantes y determinar qué paso queremos que nuestro programa tome a continuación. Es posible que haya oído hablar de este concepto antes en matemáticas o electrónica, en forma de una puerta lógica. Existen algunas variaciones en los condicionales, cada uno con sus propios casos de uso por separado. Por ahora vamos a abordar la forma más común de condicional, que es la declaración if / else.
¿Recuerdas cuando dijimos que los booleanos son útiles? Bueno, se vuelven súper útiles cuando se combinan con condicionales. Por ejemplo, imaginemos que estamos creando un sitio web al que solo queremos que accedan los usuarios si tienen al menos 18 años de edad. Aquí podríamos usar un condicional para determinar si dejar entrar al usuario o no. Echemos un vistazo a un ejemplo de cómo podría funcionar esto:
dejar edad = 20;if (age> = 18) {
// deja entrar al usuario
} else {
// no deja entrar al usuario
}
Ah, por cierto, también podemos escribir comentarios para nosotros mismos en nuestro código. Lo hacemos escribiendo
//seguido de lo que queramos escribir. Esto puede ser útil para ayudarnos a documentar lo que está sucediendo en nuestro código, sin exponer esa misma información a nuestros usuarios.Volviendo al ejemplo, hemos utilizado una declaración if / else. La primera parte, la
if, se parece mucho a una función regular, en términos de sintaxis utilizada y estructura general. Toma un parámetro y realiza una verificación en función de lo que queremos verificar. En nuestro caso, queremos ver si el usuario tiene al menos 18 años. Entonces aquí escribimos age >= 18. Esto es en realidad lo mismo que escribir age >= 18 === true, ya que los condicionales verifican la “veracidad” por defecto.Un breve desvío a la igualdad
Quizás se pregunte qué sucedería si quisiéramos verificar si algo era falso, ¿tendríamos que escribir
=== falseal final? La respuesta es sí y no. Depende de lo que queramos verificar y de cómo hayamos construido nuestro control de igualdad. Tome el siguiente ejemplo:dejar edad = 16;if (age> = 18 === false) {
// haz algunas cosas
}
Básicamente hemos dicho lo siguiente: ¿Es la persona mayor de 18 años? Si no lo están, haga lo que esté dentro del
ifbloque. Curiosamente, lo que hemos escrito aquí sigue siendo una verificación de veracidad, ya que es cierto que la edad aquí no es superior a 18. ¿Podríamos haber escrito esta verificación de igualdad de una mejor manera que muestre la veracidad sin la necesidad explícita de poner === trueo === falseal ¿final? ¿Qué pasa si simplemente escribimos esto en su lugar?dejar edad = 16;if (edad <18) {
// hacer algunas cosas
}
Esto funcionaría exactamente de la misma manera. Espero que pueda ver la diferencia aquí en cómo se construyeron las dos comprobaciones, y aún así devolver el mismo resultado.
Recuerdo que me confundí un poco con lo que era verdadero y lo que era falso cuando comencé a codificar. Solo quédese con él e intente muchas variaciones para ayudar a dominarlo.
Ahora de vuelta a condicionales
Si desea verificar si un usuario tiene más de 18 años, puede escribir algo que verifique la edad del usuario, luego realice una acción si el usuario tiene 18 años o más y otra si tiene menos de 18 años. Veamos otra vez nuestro ejemplo de antes:
dejar edad = 20;if (age> = 18) {
// deja entrar al usuario
} else {
// no deja entrar al usuario
}
Aquí estamos diciendo que si
agees igual o mayor que 18 >=, vamos a ejecutar algún código que permita a nuestro usuario entrar. Por supuesto, no hemos escrito ningún código allí, pero imaginemos que hay algún código que permite acceso a un sitio web. Entonces, ese cheque age >= 18devolverá lo que esté dentro del ifbloque si el cheque regresa true. Si no regresa true, es decir, regresa false, continuará y ejecutará lo que esté dentro del elsebloque. ¡Simple como eso!Pero, ¿y si necesitáramos más condicionales? Tal vez queremos que se verifique algo más o tal vez queremos decirle algo a nuestro usuario si tenía 17 años. Podemos manejar esto escribiendo un
else ifbloque. Echemos un vistazo a un ejemplo:dejar edad = 10;if (age> = 18) {
// deja entrar al usuario
} else if (age === 17) {
// dile al usuario que intente nuevamente en un año
} else {
// no dejes entrar al usuario
}
Entonces, nuestra verificación se ejecuta de manera normal, si revisa lo que esté dentro del primer
ifbloque. Si eso regresa true, procede con cualquier código que esté dentro del ifbloque. Si devuelve falso, pasa al else ifcheque. Si eso regresa true, ejecuta lo que esté dentro de eso. Si eso regresa false, pasa al elsebloque. Puede agregar tantos else ifbloques como sea necesario. También puede anidar if/elsebloques dentro de otros if/elsebloques. También puede usarlo ifsolo si no necesita un elserespaldo.Las funciones
Las funciones son uno de los bloques de construcción clave de cualquier lenguaje de programación. Por lo tanto, es muy importante que puedas entender por qué existen y por qué las usamos. Una función es básicamente un conjunto de declaraciones que realiza una tarea o calcula un valor.
Para comenzar a entender cómo escribimos y usamos funciones, echemos un vistazo a una función simple que calcula dos números juntos:
función addTogether (x, y) {
return x + y;
}
Hay muchas maneras en que podemos crear una función en JavaScript, pero por ahora, solo nos vamos a centrar en el método más común y conocido de hacerlo, que es el que se utilizó en el
addTogether()ejemplo anterior.En JavaScript, cada vez que queremos crear una función, usamos la
functionpalabra clave al principio. Esto le dice a JavaScript que vamos a crear una función. La segunda parte es el nombre de la función. Al igual que las variables, generalmente es una buena idea dar nombres semánticos a estas funciones. En nuestro caso, hemos llamado a nuestra función addTogetherporque eso es lo que va a hacer nuestra función: sumar dos números juntos. La tercera parte son los corchetes ()que aparecen inmediatamente después del nombre de la función. Dentro de esos corchetes podemos colocar valores que se conocen como parámetros (o params para abreviar).Estos funcionan de manera un poco diferente a cómo funcionan las variables y también a cómo funcionan los valores típicos. Básicamente, proporcionan un mecanismo que nos permite poder transmitir valores a nuestras funciones siempre que lo necesitemos. Son opcionales, en el sentido de que puede escribir una función que no tome ningún parámetro; todo depende del propósito de su función. En nuestro caso, queremos que nuestra función pueda sumar dos números juntos. Queremos que estos dos números sean números que el usuario pueda pasar. Echemos otro vistazo a nuestra función:
función addTogether (x, y) {
return x + y;
}
Entonces aquí hemos llamado nuestros dos parámetros,
xy y. No es particularmente semántico, pero bueno, ¡nadie dijo que tuvieras que tratar tu filosofía como una religión! Si continuamos por un momento, verá que luego tenemos una llave de apertura que contiene {algo de contenido, que en nuestro caso es return x + y;y luego una llave de cierre }. Entonces, nuestra función toma esos dos parámetros y devuelve el valor de esos dos parámetros agregados juntos. Entonces, si esos dos parámetros fueran 10 y 20, nuestra función devolvería 30. Avancemos y expliquemos cómo podríamos usar esa función.Si más adelante en nuestra aplicación, queremos hacer uso de esa función, escribiríamos lo siguiente:
addTogether(). Esto se conoce como llamar a una función, lo que hacemos escribiendo el nombre de la función, seguido inmediatamente por paréntesis (). Sin embargo, en nuestro caso, si solo escribiéramos addTogether(), aunque nuestra función sería llamada / ejecutada, realmente no estaríamos haciendo nada ya que la función que escribimos requiere dos parámetros. Entonces intentemos eso de nuevo:addTogether (10,6);
Esto generaría el valor de 16.
Las funciones pueden manejar tantos parámetros como desee pasarle. También puede hacer muchas cosas con ellos, como que una función haga uso de otra función. Por ejemplo:
dejar total = 0;
deje que shoppingCart = [];función CalculateTotal (itemPrice) {
total = total + itemPrice;
}función addItemToShoppingCart (item) {
shoppingCart.push (item);
CalculateTotal (item.price);
}
Vemos aquí que tenemos una función que calcula el precio total para un cliente, y una segunda función que agrega artículos al carrito de compras del usuario. Hipotéticamente, podríamos tener una configuración donde cada vez que nuestro usuario agrega un artículo a su carrito de compras,
addItemToShoppingCartse llama a la función. Esto, a su vez, llama a la calculateTotalfunción.Realmente hay mucho más que aprender sobre las funciones y cuán poderosas son como herramienta en su kit de herramientas de programación. Recomiendo leer la guía Mozilla Developer Network (MDN) cuando esté listo.
¡Y ahí lo tienes! 🎉
Llegaste como un principiante absoluto. Te vas con siete nuevos conceptos de programación en tu haber, y un montón de conocimiento extracurricular incluido en buena medida. Pero no te detengas allí, comienza a escribir un código JavaScript de inmediato. Después de todo, ¡la mejor manera de guardar cosas en la memoria es a través de la práctica!