Lo básico de JavaScript

Este es el primer post de la serie Mis apuntes JavaScript. En esta serie iremos repasando desde lo más básico hasta lo más avanzado sobre JavaScript. Todo lo necesario para futuros tutoriales sobre Vuejs, React, Angular u otros Frameworks que están de moda y me gustaría aprender.

En este primer post aprenderemos lo más básico que debes conocer sobre JavaScript.

La verdadera ignorancia no es la ausencia de conocimientos, sino el hecho de negarse a adquirirlos. Karl Popper

1. Lo más básico de JavaScript

Comencemos imprimiendo algo en pantalla, para eso usamos el siguiente código.

console.log("Hola mundo");

En JavaScript podemos declarar una variable usando var o let y una constante usando const. En este articulo Tipos de datos en JavaScript explico la diferencia entre estos tipos de datos.

let name = "Andy";
var last_name = "Geek";
const page = "AndyGeek";

En Javascript podemos declarar varias variables al mismo tiempo usando una coma.

let name = "Andy",
  age = 25,
  city = "Lima";

El nombre de las variables pueden contener $ al inicio como por ejemplo.

let $name = "Andy";

Para saber el tipo de variable usamos typeof. Esta puede ser number, string, boolean u object, que son los tipos de datos que reconoce JavaScript.

let name = "andy";
console.log(typeof name); //string

2. Comparando variables

En Javascript tenemos dos operadores para comparar variable. Estos son el doble igual == y el triple igual ===.

El doble igual == convierte los valores a un mismo tipo de dato, por lo que la siguiente comparación resulta verdadera.

var x = 4;
var y = "4";
console.log(x == y); // true

Mientras que el triple igual === deja a los valores tal y como están y los compara por lo que la misma comparación resultaría falsa.

var x = 4;
var y = "4";
console.log(x === y); // false

En JavaScript también tenemos un tipo de comparación usando != y !==. Al igual que en el doble y triple igual en el primer caso hay conversión de tipo, mientras que en el segundo caso no se da la conversión de tipos.

console.log(5 != "5"); // false, ya que seria como igualar 5 != 5 y es falso
console.log(5 !== "5"); // true, ya que seria como igualar 5 != '5' y es verdad uno es un int y el otro un string

3. Operadores aritméticos

Al igual que en la mayoría de lenguajes de programación Javascript acepta las operaciones de adición +, sustracción -, multiplicación *, división / y modulo o residuo %.

let number = 3;
let number2 = 2;
console.log(number % number2); // 1 (El residuo de dividir 3/2 es 1)

4. Operadores de incremento y decremento

A veces hay la necesidad de agregar 1 o disminuir en 1 el valor de una variable por eso existe los operadores de incremento ++ y decremento --.

let number = 5;
number++;
console.log(number); // 6

Sin embargo, podemos colocar este operador al inicio o final de una variable y esto nos permitiría hacer distintas cosas. Cuando usamos varible-- primero ejecuta el código de la línea que lo llamó y luego recién la variable disminuye en 1. Mientras que en --varible primero disminuye 1 y luego ejecuta la línea de código que lo llamó.

let number = 13;
console.log(number--); // 13
console.log(number); // 12

let number = 13;
console.log(--number); //  12
console.log(number); //  12

5. Operadores de asignación

Este tipo de operador ya lo estuvimos utilizando. Es el igual = y sirve para asignar un valor a una variable.

let name = "Andy";

Sin embargo, hay operadores de asignación que sirven como atajo a operaciones más complejas que requieren de una asignación estos son el adición asignación +=, sustracción asignación -=, multiplicación asignación *= y el división asignación /=.

var num = 100;
num += 2;
console.log(num);
//Es igual a num = num + 2

var num1 = 100;
num1 -= 10;
console.log(num1);
//Es igual a num1 = num1 - 10

var num2 = 10;
num2 *= 10;
console.log(num2);
//Es igual a num2 = num2 * 10

var num3 = 100;
num3 /= 2;
console.log(num3);
//Es igual a num2 = num2 / 2

6. Operaciones con Strings

Para saber el tamaño de un string usamos length.

var name = "Andy";
console.log(name.length);

Para convertir de número a string usamos toString().

let number = 55;
console.log(typeof number); // string

Para convertir de string a number usamos Number.parseFloat(numero). El number será de tipo float.

let strNum = "55.56";
let number = Number.parseFloat(strNum);
console.log(typeof number); // number

Para obtener una letra especifica de un string usamos varString[index] o charAt(index)

let name = "AndyGeek";
console.log(name[2]); // d
console.log(name.charAt(2)); // d

Para eliminar los espacios en blanco del inicio y final de un string usamos el método trim() de la siguiente manera.

let name = "   Andy Geek     ";
console.log(name.trim()); // Andy Geek

Podemos usar este método para verificar si un string vacío. Si hay texto el trim() devolvera un valor true, mientras que si no hay texto devolverá un valor false. Esto solo es posible de verificar cuando usamos el trim() dentro de una estructura if else.

Para cortar un string usamos el método slice(n), donde n indica a partir de donde se debe cortar hacia adelante.

let name = "AndyGeek";
console.log(name.slice(2)); // dyGeek

Para pasar de minúscula a mayúscula usamos toUpperCase(). y para pasar de mayúscula a minúscula usamos toLowerCase().

let name = "AndyGeek";
console.log(name.toLowerCase()); // andygeek
console.log(name.toUpperCase()); // ANDEGEEK

Podemos convertir un número a string y redondearlo a la vez con un número determinado de decimales usando toFixed(n). Donde n indica el número de decimales que deberá tener el resultado.

let number = 55.5691;
let redNumber = number.toFixed(2);
console.log(redNumber); // 55.57
console.log(typeof redNumber); // string

7. La diferencia entre null y undefined

Undefined sucede cuando una variable no ha sido inicializada, mientras que null es usado por los programadores para limpiar el espacio de memoria que ocupa una variable.

8. Qué es EcmaScript 6

EcmaScript es el otro nombre que tiene JavaScript. La versión 6 fue liberada en junio del 2015 y agrega muchos cambios en la sintaxis de las anteriores versiones. Uno de estas mejoras es el llamado literal template o template string que nos permite incrustar código Js dentro de un string.

let name = "Andy";
let apellido = "Eulogio";
let completo = `${name} ${apellido.toUpperCase()}`;
console.log(completo);

En los siguiente post de esta serie iremos aprendiendo muchos más elementos que trajo esta y posteriores versión de EcmaScript.