8/7/2022 JavaScript I | Henry Prep Course

JavaScript I | Henry Prep Course

Intro Primeros Pasos Git Git y GitHub Conceptos JS I JS II JS III JS IV JS V JS VI HTML

CSS Calendario Glosario Challenge

Contenido de la clase Tiempo de lectura
23 min
Variables
var
Homework 📝
let
const
JavaScript I
Tipos de Datos
Strings
Introducción a
Numbers
JavaScript
Boolean
Operadores En esta lección cubriremos:
Precedencia de Operadores y
Introducción a Javascript
Asociatividad Variables
Math Strings, Numbers y Booleanos
Objetos Globales y métodos Math
Introducción a las Funciones
Introducción a las Funciones
Control de flujo y operadores de
Anatomía de una Función comparación
Argumentos Introducción a Node y NPM
Declaración “return” y Scope
Control de flujo y operadores
de comparación
Recursos adicionales
Homework

1:13:11

JavaScript es un lenguaje de programación que fue

creado originalmente para ser usado en el front-
end de una pǻgina web. La idea original era poder
dar dinamismo a las páginas webs, que en un
principio eran estáticas. La introducción del “motor
V8” de Google ha mejorado la velocidad y el
funcionamiento de JS. Haciendo que JS (javascript)
sea la lengua franca de la web, llegando inclusive al
Back-End a través de NodeJs.

Vamos a aprender los conceptos más básicos de

JS:

Variables
Una variable es una forma de almacenar el valor de
algo para usar más tarde. (Una nota para aquellos
con conocimientos previos de programación:
Javascript es un lenguaje de tipado dinámico, una
variable se puede configurar (y restablecer) a
cualquier tipo, no necesitamos declarar su tipo al
iniciar la variable).

Para crear una variable en JavaScript utilizamos la

Dejanos tu feedback! 👍 palabra clave var , seguida de un espacio y el

nombre de la variable (con este nombre podremos

https://prep.soyhenry.com/javascript_i/ 1/9
8/7/2022 JavaScript I | Henry Prep Course
hacer referencia a ella luego). Además de declarar
una variable, podemos asignarle un valor usando el JavaScript I | Henry Prep Course
signo = .

Nota: Las palabras claves o keywords son palabras

especiales que utiliza el lenguaje para indicar algo.
No podremos usas las palabras claves del lenguaje
cómo nombres de variables.
Contenido de la clase
Existen tres formas de declarar una variable:
Variables
var var
let
Es la forma declarar una variable en ES5 (ES5 es la
const versión de JS, hoy en día existe ES6 que es la
nueva versión, pero que todavía no es la más
Tipos de Datos usada). Esta es una palabra clave genérica para
Strings “variable”.
Numbers Las dos formas siguentes, si bien son válidas,
Boolean vamos a utilizarlas más adelante en la carrera,
cuando tengamos más claros otros conceptos:
Operadores
Precedencia de Operadores y
let
Asociatividad
Es una nueva palabra clave de ES6, esto asignará
Math
una variable muy similar a var , pero con un
Objetos Globales y métodos comportamiento un poco diferente. Lo más
Introducción a las Funciones notable es que difiere al crear un “nivel de scope”
(hablaremos sobre esto más adelante).
Anatomía de una Función
Argumentos
const
Declaración “return” y Scope
Control de flujo y operadores También es nuevo en ES6. Un const es una
variable que no se podrá cambiar. Esto es la
de comparación abreviatura de “constante”.
Recursos adicionales
Homework
var nombre = 'Juan'; // Vamos a usar principalement
let apellido = 'Perez';
const comidafavorita = 'Pizza';

console.log
Otro concepto del que hablaremos de inmediato
es

console.log();

Este método muy simple nos permitirá imprimir en

la consola todo lo que pongamos entre paréntesis.

Tipos de Datos
En ciencias de la computación, un tipo de dato
informático o simplemente tipo, es un atributo de
los datos que indica la clase de datos que se va a
manejar. Esto incluye imponer restricciones en los
datos, como qué valores pueden tomar y qué
operaciones se pueden realizar.

Los tipos de datos aceptados varían de lenguaje en

lenguaje.

Dejanos tu feedback! 👍 Los tipos de datos más básicos en Javascript son

Strings, Numbers, and Booleans.
https://prep.soyhenry.com/javascript_i/ 2/9
8/7/2022 JavaScript I | Henry Prep Course

Strings
JavaScript I | Henry Prep Course
Las “strings” son bloques de texto, siempre se
definirán entre comillas, ya sea simple o doble.
Cualquier texto entre comillas es una cadena o
string.

Contenido de la clase
var nombrePerro = 'firulais';

Variables
var
Numbers
let
const Los números son solo eso, números. Los números
NO se envuelven en comillas. Pueden ser negativos
Tipos de Datos también. Javascript tiene una limitación en el
Strings tamaño de un número (+/- 9007199254740991),
pero muy raramente aparecerá esa limitación en
Numbers nuestro uso diario.
Boolean
Operadores
var positivo = 27;
Precedencia de Operadores y var negativo = -40;
Asociatividad
Math
Objetos Globales y métodos
Boolean
Introducción a las Funciones Los booleanos provienen de la lógica de Boole. Es
un concepto que alimenta el código binario y el
Anatomía de una Función núcleo de las computadoras. Es posible que haya
Argumentos visto código binario en el pasado (0001 0110…),
esto es lógica booleana. Esencialmente significa
Declaración “return” y Scope que tiene dos opciones, activar o desactivar, 0 o 1,
Control de flujo y operadores verdadero o falso. En Javascript usamos booleanos
para significar verdadero o falso. Esto puede
de comparación parecer simple al principio, pero puede
Recursos adicionales complicarse más adelante.

Homework
var meEncantaJavascript = true;

Los valores posibles de un dato booleando en JS

son: true o false .

Operadores
Vamos a poder realizar operaciones en JavaScript a
través de los operadores. Básicamente son
símbolos que ya conocemos ( + , - , / , * ) que
indican al intérprete de JavaScript las operaciones
que debe realizar.

Por ejemplo: Para el intérprete al ver el signo + ,

sabe que tiene que ejecutar la función suma (que
tiene internamente definida), y toma como
parámetros los términos que estén a la izquierda y
la derecha del operador.

var a = 2 + 3; // 5
var b = 3 / 3; // 1

De hecho, esa forma de escribir tiene un nombre

particular, se llama notación notación infix o

Dejanos tu feedback! 👍 infija , en ella se escribe el operador entre los

operandos. Pero también existen otro tipos de

https://prep.soyhenry.com/javascript_i/ 3/9
8/7/2022 JavaScript I | Henry Prep Course

notación como la postfix o postfija y la

prefix o prefija . En estas última el operador JavaScript I | Henry Prep Course
va a la derecha de los operandos o a la izquierda
respectivamente.

Contenido de la clase

Variables
var
let
const
Tipos de Datos En fin, lo importante a tener en cuenta es que los
operadores son funciones.
Strings
Numbers
Boolean Precedencia de
Operadores
Operadores y
Precedencia de Operadores y
Asociatividad
Asociatividad
Math Esto parece aburrido, pero nos va a ayudar a saber
cómo piensa el intérprete y bajo qué reglas actúa.
Objetos Globales y métodos
Introducción a las Funciones La precedencia de operadores es básicamente el
orden en que se van a llamar las funciones de los
Anatomía de una Función operadores. Estás funciones son llamadas en orden
Argumentos de precedencia (las que tienen mayor precedencia
se ejecutan primero). O sea que si tenemos más de
Declaración “return” y Scope un operador, el intérprete va a llamar al operador
de mayor precendencia primero y después va a
Control de flujo y operadores
seguir con los demás.
de comparación
La Asociatividad de operadores es el orden en el
Recursos adicionales que se ejecutan los operadores cuando tienen la
Homework misma precedencia, es decir, de izquierda a
derecha o de derecha a izquierda.

Podemos ver la documentación completa sobre

Precedencia y Asociatividad de los operadores de
JavaScript acá

Por ejemplo: console.log( 3 + 4 * 5) Para

resolver esa expresión y saber qué resultado nos va
a mostrar el intérprete deberíamos conocer en qué
orden ejecuta las operaciones. Al ver la tabla del
link de arriba, vemos que la multiplicación tiene
una precedencia de 15, y la suma de 14. Por lo
tanto el intérprete primero va a ejecutar la
multiplicación y luego la suma con el resultado de
lo anterior -> console.log( 3 + 20 ) ->
console.log(23) .

Cuando invocamos una función en Javascript, los

argumentos son evaluados primeros (se conoce
como non-lazy evaluation), está definido en la
especificación.

No confundir el orden de ejecución con

asociatividad y precedencia, ver esta pregunta de
StackOverflow.

Ahora si tuvieramos la misma precedencia entraría

en juego la asociatividad, veamos un ejemplo:

var a = 1, b = 2, c = 3;

a = b = c;

Dejanos tu feedback! 👍 console.log(a, b, c);

https://prep.soyhenry.com/javascript_i/ 4/9
8/7/2022 JavaScript I | Henry Prep Course

JavaScript I | Henry Prep Course

Qué veriamos en el console.log? Para eso tenemos
que revisar la tabla por la asociatividad del
operador de asignación = . Este tiene una
precedencia de 3 y una asociatividad de right-
to-left , es decir que las operaciones se realizan
Contenido de la clase primero de derecha a izquierda. En este caso,
primero se realiza b = c y luego a = b (en
Variables realidad al resultado de b = c , que retorna el
var valor que se está asignando). Por lo tanto al final
de todo, todas las variables van a tener el valor 3 .
let
Si la asociatividad hubiese al revés, todos las
const variables tendrían el valor 1 .
Tipos de Datos
Strings
Numbers Math
Boolean
Los operadores matemáticos trabajan en
Operadores JavaScript tal como lo harían en su calculadora.
Precedencia de Operadores y
Asociatividad +-*/=
Math
Objetos Globales y métodos
1 + 1 = 2
Introducción a las Funciones 2 * 2 = 4
Anatomía de una Función 2 - 2 = 0
2 / 2 = 1
Argumentos
Declaración “return” y Scope
Control de flujo y operadores %
de comparación Algo que quizás no haya visto antes es el Módulo
Recursos adicionales ( % ), este operador matemático dividirá los dos
números y devolverá el resto.
Homework

21 % 5 = 1;
21 % 6 = 3;
21 % 7 = 0;

Objetos Globales y
métodos
Javascript tiene una serie de objetos integrados
para que los usemos. Ya hemos visto, y hemos
estado usando, el objeto de consola y su método
log . Otro de estos objetos es Math . Éste tiene
varios métodos, al igual que console tiene
log . Para agregar a esto, algunos de nuestros
tipos de datos también tienen métodos
incorporados.

Math.pow

Podemos usar el método pow en Math para

devolver un número elevado a un exponente.
Tomará dos números.

Math.pow(2,2) = 4;

👍
Math.pow(3,2) = 9;
Dejanos tu feedback! Math.pow(3,3) = 27;

https://prep.soyhenry.com/javascript_i/ 5/9
8/7/2022 JavaScript I | Henry Prep Course
Math.round, Math.floor, Math.ceil
JavaScript I | Henry Prep Course
Math también tiene métodos que redondearán
los números para nosotros. .round redondeará
un número al número entero más cercano.
.floor siempre redondeará un número al
número entero más cercano hacia abajo. .ceil
Contenido de la clase siempre se redondeará al número entero más
cercano hacia arriba.
Variables
var
Math.round(6.5) = 7;
let Math.round(6.45) = 6;
const Math.floor(6.999) = 6;
Math.ceil(6.0001) = 7;
Tipos de Datos
Strings
Numbers .length
Boolean El tipo de datos “string” tiene un método
Operadores incorporado llamado .length . Cualquier cadena
Precedencia de Operadores y que llamemos a esto devolverá la cantidad de
caracteres en esa cadena.
Asociatividad
Math
var nombreGato = 'felix';
Objetos Globales y métodos
console.log(nombreGato.length); // 5
Introducción a las Funciones
Anatomía de una Función
Argumentos Veremos muchos otros métodos integrados en
otros tipos de datos a lo largo de este curso.
Declaración “return” y Scope
Control de flujo y operadores
de comparación Introducción a las
Recursos adicionales
Funciones
Homework
Las funciones son una parte muy importante de
todo lenguaje de programacion y sobre todo en
JavaScript. Són tipos particulares de objetos,
llamados callable objects u objetos invocables, por
lo que tienen las mismas propiedades que
cualquier objeto.

Ahora que tenemos un conjunto de variables,

necesitamos funciones para calcularlas, cambiarlas,
hacer algo con ellas. Hay tres formas en que
podemos construir una función.

function miFuncion() {}
var otraFuncion = function () {};
var yOtra = () => {};

Usaremos la primera forma en esta lección y

hablaremos sobre las otras formas en próximas
lecciones.

Anatomía de una Función

function miFuncion() {}

Una función comenzará con la palabra clave

function , esto le dice a lo que sea que esté
Dejanos tu feedback! 👍 ejecutando tu programa que lo que sigue es una
función y que debe tratarse como tal. Después de
https://prep.soyhenry.com/javascript_i/ 6/9
8/7/2022 JavaScript I | Henry Prep Course
eso viene el nombre de la función, nos gusta dar
nombres de funciones que describan lo que hacen. JavaScript I | Henry Prep Course
Luego viene un paréntesis abierto y uno cercano. Y
finalmente, abra y cierre los corchetes. Entre estos
corchetes es donde irá todo nuestro código a
ejecutar.

Contenido de la clase function logHola() {

console.log('hola!');
Variables }
var
let logHola();

const
Tipos de Datos En este ejemplo declaramos una función
Strings logHola y la configuramos en
console.log('hola') . Entonces podemos ver
Numbers
que para ejecutar esta función, necesitamos
Boolean escribir el nombre y los paréntesis. Esta es la
Operadores sintaxis para ejecutar una función. Una función
siempre necesita paréntesis para ejecutarse.
Precedencia de Operadores y
Asociatividad
Argumentos
Math
Ahora que podemos ejecutar una función básica,
Objetos Globales y métodos
vamos a comenzar a pasarle argumentos.
Introducción a las Funciones
Anatomía de una Función
function logHola(nombre) {
Argumentos
console.log('Hola, ' + nombre);
Declaración “return” y Scope }
Control de flujo y operadores
logHola('Martin');
de comparación
Recursos adicionales
Homework Si agregamos una variable a los paréntesis cuando
declaramos la función, podemos usar esta variable
dentro de nuestra función. Iniciamos el valor de
esta variable pasándola a la función cuando la
llamamos. Entonces en este caso nombre =
'Martin' . También podemos pasar otras
variables a esto:

function logHola(nombre) {
console.log( `Hola, ${nombre}`);
}

var miNombre = 'Antonio';

logHola(miNombre);

Podemos agregar múltiples argumentos colocando

una coma entre ellos:

function sumarDosNumeros(a, b) {
var suma = a + b;
return suma;
}

sumarDosNumeros(1, 5); // 6

Declaración “return” y Scope

Dejanos tu feedback! 👍
https://prep.soyhenry.com/javascript_i/ 7/9
8/7/2022 JavaScript I | Henry Prep Course
En el ejemplo anterior presentamos la declaración
return . No vamos a usar console.log con JavaScript I | Henry Prep Course
todo lo que salga de una función. Lo más probable
es que queramos devolver algo. En este caso es la
suma de los dos números. Piense en la declaración
de retorno (“return”) como la única forma en que
los datos escapan de una función. No se puede
acceder a nada más que a lo que se devuelve fuera
Contenido de la clase de la función. También tenga en cuenta que
cuando una función golpea una declaración de
Variables retorno, la función detiene inmediatamente lo que
está haciendo y “devuelve” lo especificado.
var
let
const function dividirDosNumeros(a, b) {
var producto = a / b;
Tipos de Datos
return producto;
Strings }
Numbers
dividirDosNumeros(6, 3); // 2
Boolean
console.log(producto); // undefined
Operadores
Precedencia de Operadores y
Asociatividad Si intentamos console.log algo que declaramos
dentro de la función, devolverá undefined
Math
porque no tenemos acceso a él fuera de la función.
Objetos Globales y métodos Esto se llama Scope (“alcance”). La única forma de
acceder a algo dentro de la función es devolverlo.
Introducción a las Funciones
Anatomía de una Función También podemos establecer variables para igualar
lo que devuelve una función.
Argumentos
Declaración “return” y Scope
Control de flujo y operadores function restarDosNumeros(a, b) {
var diferencia = a - b;
de comparación
return diferencia;
Recursos adicionales }
Homework
var diferenciaDeResta = restarDosNumeros(10, 9);
console.log(diferenciaDeResta); // 1
console.log(diferencia); // undefined

Podemos ver que la diferencia se establece dentro

de la función. La variable dentro de la función solo
pertenece dentro de la función.

Control de flujo y
operadores de
comparación
En este ejemplo, vamos a utilizar operadores de
control de flujo y comparación. El flujo de control
(“control flow”) es una forma de que nuestra
función verifique si algo es true , y ya sea
ejecutando el código suministrado si es así o
avanzando si no lo es. Para esto usaremos la
palabra clave if :

function puedeManejar(edad) {
if (edad > 18) {
return true;
}

Dejanos tu feedback! 👍 }
return false;

https://prep.soyhenry.com/javascript_i/ 8/9
8/7/2022 JavaScript I | Henry Prep Course

puedeManejar(22); // true JavaScript I | Henry Prep Course

Aquí estamos tomando un número ( edad ) y

verificando si la declaración es true ( 22>18 ), lo
Contenido de la clase es, por lo que devolveremos true , y la función se
detendrá. Si no es así, omitirá ese código y la
función devolverá false .
Variables
var El símbolo “mayor que” ( > ) que ve en el último
let ejemplo se llama Operador de comparación. Los
operadores de comparación evalúan dos
const elementos y devuelven verdadero o falso. Estos
Tipos de Datos operadores son: < , <= , > , > = , === , !
Strings == . Aprenderemos más sobre estos operadores en
la próxima lección.
Numbers
Boolean
Operadores
Recursos adicionales
Precedencia de Operadores y
Asociatividad Codecademy: Learn Javascript
Udacity: Intro to Javascript
Math
MDN: Official Javascript Documentation
Objetos Globales y métodos
Introducción a las Funciones
Anatomía de una Función
Argumentos
Declaración “return” y Scope
Homework
Control de flujo y operadores
Completa la tarea descrita en el archivo README
de comparación
Recursos adicionales
Homework Si tienes dudas sobre este tema, puedes
consultarlas en el canal 02_js-i de Slack

Hecho con 💛 por alumnos de Henry

Dejanos tu feedback! 👍
https://prep.soyhenry.com/javascript_i/ 9/9