Java Script Basico
Java Script Basico
Contenido
Variables .................................................................................................................................................. 2
Funciones ................................................................................................................................................. 4
Parámetros ........................................................................................................................................... 4
Funciones anónimas ............................................................................................................................ 5
Arrow functions (funciones flecha)..................................................................................................... 5
Estructuras y bucles ................................................................................................................................. 7
Estructura condicional: if ..................................................................................................................... 7
Estructura condicional: switch............................................................................................................. 7
Bucle while ........................................................................................................................................... 8
Bucle: for .............................................................................................................................................. 8
Bucle: for con contador ....................................................................................................................... 8
Tipos de datos básicos .......................................................................................................................... 10
Casting de variables ........................................................................................................................... 10
Number .............................................................................................................................................. 10
String .................................................................................................................................................. 11
Boolean .............................................................................................................................................. 12
Manejo de errores ................................................................................................................................. 14
Buenas prácticas .................................................................................................................................... 16
‘use strict’ ........................................................................................................................................... 16
Variables ............................................................................................................................................. 16
Otras ................................................................................................................................................... 16
Clean Code ............................................................................................................................................. 18
1
Sintaxis
Variables
Javascript es un lenguaje dinámicamente tipado. Esto significa que no se indica de qué tipo es una
variable al declararla e incluso puede cambiar su tipo a lo largo de la ejecución del programa.
Ejemplo:
Además es débilmente tipado, lo que significa que permite operaciones entre tipos de datos
diferentes. Ejemplo:
miVariable='23';
console.log(miVariable * 2); // mostrará 46 ya que convierte la cadena '23' a número
EJERCICIO: Ejecuta en la consola del navegador las instrucciones anteriores y comprueba el valor
de miVariable tras cada instrucción (para ver el valor de una variable simplemente ponemos en la
consola su nombre: miVariable
Ni siquiera estamos obligados a declarar una variable antes de usarla, aunque es recomendable
para evitar errores que nos costará depurar. Podemos hacer que se produzca un error si no
declaramos una variable incluyendo al principio de nuestro código la instrucción
'use strict'
Las variables de declaran con let (lo recomendado desde ES2015), aunque también pueden
declararse con var (nosotros NUNCA lo haremos). La diferencia es que con let el ámbito de la
variable es sólo el bloque en que se declara mientras que con var su ámbito es global (o global a
la función en que se declara):
Cualquier variable que no se declara dentro de una función (o si se usa sin declarar) es global.
Debemos siempre intentar NO usar variables globales.
Desde ES2015 también podemos declarar constantes con const. Se les debe dar un valor al
declararlas y si intentamos modificarlo posteriorment se produce un error. Sin embargo si la
variable es un objeto o array sí podemos modificar su contenido, aunque no vlarla a asignar. Se
recomienda usarla siempre que sea posible. Ejemplo:
2
Sintaxis
const PI=3.1416;
PI=3.14; // dará un error
NOTA: en la página de Babel podemos teclear código en ES2015 y ver cómo quedaría una vez
transpilado a ES5.
3
Sintaxis
Funciones
Se declaran con function y se les pasan los parámetros entre paréntesis. La función puede
devolver un valor usando return (si no tiene return es como si devolviera undefined).
Puede usarse una función antes de haberla declarado por el comportamiento de Javascript
llamado hoisting: el navegador primero carga todas las funciones y mueve las declaraciones de las
variables al principio y luego ejecuta el código.
EJERCICIO: Haz una función que te pida que escribas algo y muestre un alert diciendo ‘Has
escrito…’ y el valor introducido. Pruébala en la consola (pegas allí la función y luego la llamas
desde la consola)
Parámetros
Si se llama una función con menos parámetros de los declarados el valor de los parámetros no
pasados será undefined:
Podemos dar un valor por defecto a los parámetros por si no los pasan asignándoles el valor al
definirlos:
NOTA: Hasta ES6 para dar un valor por defecto a una variable se hacía
También es posible acceder a los parámetros desde el array arguments[] si no sabemos cuántos
recibiremos:
function suma () {
var result = 0;
4
Sintaxis
for (var i=0; i<arguments.length; i++)
result += arguments[i];
return result;
}
En Javascript las funciones son un tipo de datos más por lo que podemos hacer cosas como
pasarlas por argumento o asignarlas a una variable:
Al usar paréntesis () se llama a la función. Sin paréntesis sólo se hace referencia al objeto que
representa la función. La capacidad de Javascript de tratar las funciones como objetos le permite el
uso de funciones de Callback y la programación funcional, que veremos más adelante.
Funciones anónimas
Como acabamos de ver podemos definir una función sin darle un nombre. Dicha función puede
asignarse a una variable, autoejecutarse o asignarse a un manejador de eventos. Ejemplo:
Como vemos asignamos una función a una variable de forma que podamos “ejecutar” dicha
variable.
EJERCICIO: Haz una arrow function que devuelva el cubo del número pasado como parámetro y
pruébala desde la consola. Escríbela primero en la forma habitual y luego la “traduces” a arrow
function.
Las arrow function son muy útiles cuando se usan como parámetros de otras funciones (como
veremos en programación funcional) pero no tienen su propio contexto this por lo que no las
podremos usar como métodos de una clase u objeto).
6
Sintaxis
Estructuras y bucles
Estructura condicional: if
El if es como en la mayoría de lenguajes. Puede tener asociado un else y pueden anidarse varios
con else if.
if (condicion) {
...
} else if (condicion2) {
...
} else if (condicion3) {
...
} else {
...
}
Ejemplo:
switch(color) {
case 'blanco':
case 'amarillo': // Ambos colores entran aquí
colorFondo='azul';
break;
case 'azul':
color_lambda_Fondo='amarillo';
break;
default: // Para cualquier otro valor
colorFondo='negro';
}
Javascript permite que el switch en vez de evaluar valores pueda evaluar expresiones. En este caso
se pone como condición true:
switch(true) {
case age < 18:
console.log('Eres muy joven para entrar');
break;
case age < 65:
console.log('Puedes entrar');
break;
default:
console.log('Eres muy mayor para entrar');
7
Sintaxis
}
Bucle while
Podemos usar el bucle while…do
while (condicion) {
// sentencias
}
O el bucle do…while:
do {
// sentencias
} while (condicion)
let nota;
do {
nota=prompt('Introduce una nota (o cancela para finalizar)');
console.log('La nota introducida es: '+nota);
} while (nota)
EJERCICIO: Haz un programa para que el usuario juegue a adivinar un número. Obtén un número al
azar (busca por internet cómo se hace o simplemente guarda el número que quieras en una variable) y
ve pidiendo al usuario que introduzca un número. Si es el que busca le dices que lo ha encontrado y si no le
mostrarás si el número que busca el mayor o menor que el introducido. El juego acaba cuando el usuario
encuentra el número o cuando pulsa en ‘Cancelar’ (en ese caso le mostraremos un mensaje de que ha
cancelado el juego).
Bucle: for
Tenemos muchos for que podemos usar.
8
Sintaxis
Bucle: for…in
El bucle se ejecuta una vez para cada elemento del array (o propiedad del objeto) y se crea una
variable contador que toma como valores la posición del elemento en el array:
let profe={
nom:'Juan',
ape1='Pla',
ape2='Pla'
}
let nombre='';
Bucle: for…of
Es similar al for…in pero la variable contador en vez de tomar como valor cada índice toma cada
elemento. Es nuevo en ES2015:
EJERCICIO: Haz 3 funciones a las que se le pasa como parámetro un array de notas y devuelve la
nota media. Cada una usará un for de una de las 3 formas vistas. Pruébalas en la consola
9
Sintaxis
• NaN (Not a Number): indica que el resultado de la operación no puede ser convertido a un
número (ej. 'Hola'*2, aunque '2'*2 daría 4 ya que se convierte la cadena ‘2’ al número 2)
• Infinity y -Infinity: indica que el resultado es demasiado grande o demasiado pequeño
(ej. 1/0 o -1/0)
Casting de variables
Como hemos dicho las variables pueden contener cualquier tipo de valor y, en las operaciones,
Javascript realiza automáticamente las conversiones necesarias para, si es posible, realizar la
operación. Por ejemplo:
EJERCICIO: Prueba en la consola las operaciones anteriores y alguna más con la que tengas dudas de
qué devolverá
Number
Sólo hay 1 tipo de números, no existen enteros y decimales. El tipo de dato para cualquier número
es number. El carácter para la coma decimal es el . (como en inglés, así que 23,12 debemos
escribirlo como 23.12).
10
Sintaxis
• .toFixed(num): redondea el número a los decimales indicados.
Ej. 23.2376.toFixed(2) devuelve 23.24
• .toLocaleString(): devuelve el número convertido al formato local.
Ej. 23.76.toLocaleString() devuelve ‘23,76’ (convierte el punto decimal en coma)
Podemos forzar la conversión a número con la función Number(valor).
Ejemplo Number('23.12')devuelve 23.12
Otras funciones útiles son:
String
Las cadenas de texto van entre comillas simples o dobles, es indiferente. Podemos escapar un
caràcter con \ (ej. 'Hola \'Mundo\'' devuelve Hola ‘Mundo’).
Para forzar la conversión a cadena se usa la función String(valor) (ej. String(23) devuelve ‘23’)
El operador de concatenación de cadenas es +. Ojo porque si pedimos un dato
con prompt siempre devuelve una cadena así que si le pedimos la edad al usuario (por ejemplo 20)
y se sumamos 10 tendremos 2010 (‘20’+10).
Template literals
Desde ES2015 también podemos poner una cadena entre ` (acento grave) y en ese caso podemos
poner dentro variables y expresiones que serán evaluadas al ponerlas dentro de ${}. También se
respetan los saltos de línea, tabuladores, etc que haya dentro. Ejemplo:
let edad=25;
Mostrará en la consola:
El usuario tiene:
25 años
Boolean
Los valores booleanos son true y false. Para convertir algo a booleano se
usar Boolean(valor) aunque también puede hacerse con la doble negación (!!). Cualquier valor se
evaluará a true excepto 0, NaN, null, undefined o una cadena vacía (‘’) que se evaluarán a false.
Para comparar valores tenemos == y ===. La triple igualdad devuelve true si son igual valor y del
mismo tipo. Como Javascript hace conversiones de tipos automáticas conviene usar la === para
evitar cosas como:
• '3' == 3 true
• 3 == 3.0 true
• 0 == false true
• '' == false true
• ' ' == false true
12
Sintaxis
• [] == false true
• null == false false
• false
undefined == false
• undefined == null true
También tenemos 2 operadores de diferente: != y !== que se comportan como hemos dicho
antes.
Los operadores relacionales son >, >=, <, <=. Cuando se compara un número y una cadena ésta
se convierte a número y no al revés (23 > '5' devuelve true, aunque '23' > '5' devuelve false)
13
Sintaxis
Manejo de errores
Si sucede un error en nuestro código el programa dejará de ejecutarse por lo que el usuario tendrá
la sensación de que no hace nada (el error sólo se muestra en la consola y el usuario no suele
abrirla nunca). Para evitarlo es crucial capturar los posibles errores de nuestro código antes de que
se produzcan.
En javascript (como en muchos otros lenguajes) el manejo de errores se realiza con sentencias
try {
...
}
catch(error) {
...
}
Dentro del bloque try ponemos el código que queremos proteger y cualquier error producido en
él será pasado al bloque catch donde es tratado. Opcionalmente podemos tener al final un
bloque finally que se ejecuta tanto si se produce un error como si no. El parámetro que
recibe catch es un objeto de tipo Error con propiedades como name, que indica el tipo de error
(SyntaxError, RangeError, … o el genérico Error), o message, que indica el texto del error producido.
En ocasiones podemos querer que nuestro código genere un error. Esto evita que tengamos que
comprobar si el valor devuelto por una función es el adecuado o es un código de error. Por
ejemplo tenemos una función para retirar dinero de una cuenta que recibe el saldo de la misma y
la cantdad de dinero a retirar y devuelve el nuevo saldo, pero si no hay suficiente saldo no debería
restar nada sino mostrar un mensaje al usuario. Sin gestión de errores haríamos:
Se trata de un código poco claro que podemos mejorar lanzando un error en la función. Para ello
se utiliza la instrucción throw:
if (saldo < cantidad) {
throw 'Saldo insuficiente'
}
Por defecto al lanzar un error este será de clase Error (el código anterior es equivalente a throw new
Error('Saldo insuficiente')) aunque podemos lanzarlo de cualquier otra clase (throw new
RangeError('Saldo insuficiente')) o personalizarlo.
14
Sintaxis
Siempre que vayamos a ejecutar código que pueda generar un error debemos ponerlo dentro de
un bloque try por lo que la llamada a la función que contiene el código anterior debería estar
dentro de un try. El código del ejemplo anterior quedaría:
Podemos ver en detalle cómo funcionan en la página de MDN web docs de Mozilla.
15
Sintaxis
Buenas prácticas
Javascript nos permite hacer muchas cosas que otros lenguajes no nos dejan por lo que debemos
ser cuidadosos para no cometer errores de los que no se nos va a avisar.
‘use strict’
Si ponemos siempre esta sentencia al principio de nuestro código el intérprete nos avisará si
usamos una variale sin declarar (muchas veces por equivocarnos al escrbir su nombre). En concreto
fuerza al navegador a no permitir:
• Elegir un buen nombre es fundamental. Evitar abreviaturas o nombres sin significado (a, b,
c, …)
• Evitar en lo posible variables globales
• Usar let para declararlas
• Usar const siempre que una variable no deba cambiar su valor
• Declarar todas las variables al principio
• Inicializar las variables al declararlas
• Evitar conversiones de tipo automáticas
• Usar para nombrarlas la notación camelCase
También es conveniente, por motivos de eficiencia no usar objetos Number, String o Boolean sino
los tipos primitivos (no usar let numero = new Number(5) sino let numero = 5) y lo mismo al crear
arrays, objetos o expresiones regulares (no usar let miArray = new Array() sino let miArray = []).
Otras
Algunas reglas más que deberíamos seguir son:
• Debemos ser coherentes a la hora de escribir código: por ejemplo podemos poner
(recomendado) o no espacios antes y después del = en una asignación pero debemos
hacerlo siempre igual. Existen muchas guías de estilo y muy
buenas: Airbnb, Google, Idiomatic, etc. Para obligarnos a seguir las reglas podemos usar
alguna herramienta linter.
• También es conveniente para mejorar la legibilidad de nuestro código separar las líneas de
más de 80 caracteres.
• Usar === en las comparaciones
• Si un parámetro puede faltar al llamar a una función darle un valor por defecto
16
Sintaxis
• Y para acabar comentar el código cuando sea necesario, pero mejor que sea lo
suficientemente claro como para no necesitar comentarios
17
Sintaxis
Clean Code
Estas y otras muchas recomendaciones se recogen el ibro Clean Code de Robert C. Martin y en
muchos otros libros y articulos. Aquí tenéis un pequeño resumen traducido al castellano:
• https://github.com/devictoribero/clean-code-javascript
18