🧠 ¿Qué es JavaScript? 🧠
Tags: javascript, webdev
Published: 2020-07-20 23:08:25

Es un lenguaje de programación que añade dinamismo e interactividad a una página Web.

# Mini Intro a JavaScript

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b2gytccwwqjj1ggyfh9l.png)

JavaScript es un lenguaje de programación, se dice de él que es multiparadigma y es débilmente tipado. Es multiplataforma, ya que se puede utilizar en Windows, Linux o Mac. Se puede usar en cualquier navegador. Se puede usar en ambientes de cara al usuario y del lado del servidor.

JavaScript permite la manipulación de cualquier elemento del documento (DOM) y tambien permite la manipulación de los estilos (CSSOM).

Es sencillo de aprender y en esta mini guía voy a contarte algunas caracteristicas sobre él.

## Historia de JavaScript

JavaScript es un lenguaje creado por Netscape, en sus inicios fue llamado LiveScript. En 1995 Netscape y Sun Microsystems crearon JavaScript. En 1997 el ECMA, organismo internacional creo la primera edición de la norma ECMAscript, que inicio a normalizar el lenguaje. Desde ese momento JavScript se convirtio en el lenguaje más usado.

## Insertar JS en el documento HTML
‌
Hay dos formas de incluir nuestro código JavaScript en nuestro documento HTML.

* Insertar JavaScript en HTML utilizando la etiqueta:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/skjj5gzly6vbwr5buqih.png)

* Agregar código JavaScript a un archivo separado

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b3tszcir2fg3ltdpkzbl.png)

## Variables

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wl8tlbff1x8jbjnqrc0t.png)

Una variable es un recurso de memoria reservado para alojar información. Podemos declarar una variable mediante la palabra reservada «var» seguida del nombre de la variable.

Nota: Las palabras reservadas, son palabras que usa JavaScript las cuales tienen una función particular y nosotros no podemos sobreescribir, solo usarla para lo que fue creada.

Podemos almacenar cualquier tipo de dato en las variables.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xj3t8sqwbqd3nifz4rgp.png)


Desde la versión del ECMA2015, es posible crear nuestras variables usando la palabra reservada “const” y “let”.

«let» permite hacer la reasignación de variables.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k6jz7f6rhz6kqpqzalmb.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c4suzd828fjqof3x9wb2.png)

«const» es una constante y no permite la reasignación de los valores a las variables.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9urjp5phdvmg0yih9w1y.png)
‌
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tcmvkfe5w5fw6j3mjxsy.png)

## Tipos de Datos

Los tipos de datos en JavaScript se dividen en dos grupos primitivos y objetos.

### Primitivos: los tipos de datos primitivos no tienen propiedades y métodos, y podemos encontrar los siguientes tipos de datos:

* Boolean: Es un tipo de dato lógico, puede tener un valor “true” o “false”
* Null: Es un tipo de dato nulo.
* Undefined: Es una variable a la que no se le ha asignado ningun valor.
* Number: Es tipo de dato númerico
* BigInt: Es tipo que sirve para representar números grandes.
* String: Es una cadena de texto.
 Symbol: Es utilizado como claves en objetos y mapas de datos. Cuando creamos un simbolo, obtenemos un valor único.

‌
### Objetos: Es un tipo de dato que puede ser llamado colección de propiedades y tiene propiedades y métodos.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4w35jsstmjs3tqx6r4o.png)

### typeof
typeof es un operador que permite identificar el tipo de dato de las variables.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w8oot3nwlngru16l8xea.png)

## Operadores

Los operadores permiten manipular las variables, realizar operaciones matemáticas, comparaciones lógicas o asignaciones.

Existen varios tipos de Operadores.

### Operador de Asignación‌

Este operador nos permite asignar un valor a nuestras variables, como por ejemplo:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/46bozbsagfkq4ydebar7.png)
‌
### Operador de Incremento y Decremento

Este operador permite incrementar o decrementar en una unidad el valor de la variable.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1pe0zlaljj17s54y9211.png)

Para mostrar el resultado de una variable o una sentencia o expresión, podemos usar una función que tiene JavaScript que se llama “console”, en este caso estamos usando la propiedad “log”. Esta función nos mostrará en la consola del navegador el resultado de lo que incluyamos en los paréntesis.

### Operadores lógicos

Nos permite tomar decisiones sobre las instrucciones, incluso nos permite negar una instrucción.

#### Negación ( ! )

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u61udp4odtpuag8yfvp6.png)

#### AND ( && )

Para usar este operador se tiene en cuenta la tabla de verdad.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c6z8r4ijyh41a6io9k11.png)

#### OR ( || )
‌
Para usar este operador se tiene en cuenta la tabla de verdad.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rbuelnrpurszd92x5i4c.png)

### Operadores Relacionales
‌
Estos operadores son los que usamos para evaluar expresiones; en ellos podemos usar el mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que (==) diferente de (!=), estrictamente igual (===), y estrictamente diferente (!==).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wbd3ejj6qs4pptoz0gjb.png)
‌
### Operadores de igualdad
‌
En JavaScript hay dos tipos de operadores de igualdad: estricta y no-estricta. En la estricta es aquella en la que se evalua la expresión que sea igual o diferente, el tipo y el valor, en esta se usan los triples iguales: ‘===’ o diferente y dobles iguales: ‘!==’; y en la no-estricta se evalua solo el valor, y se usan los dobles iguales: ‘==’ o el diferente: ‘!=’.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/thtw1qsm30q79jc28mk1.png)


### Operadores Aritmeticos
‌
Estos operadores nos permiten realizar operaciones artimeticas, evaluan la expresión y devuelven un único resultado.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yggczhhf9w2mcbuf66e8.png)

### Orden de prioridad, prelación y precedencia.
‌
Los operadores lógicos, de igualdad y matemáticos tienen un orden de prioridad, prelación o precedencia al evaluar las expresiones o realizar las diferentes operaciones.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dgbh0ikypil7qg1gk1hh.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n09pwnspj1pcx2bacrnr.png)

## Estructuras de control de Flujo
‌
Las estructuras de control de flujo, son intrucciones que nos permiten evaluar si se puede cumplir una condición o no, incluso nos puede ayudar a evaluarla n cantidad de veces.

### Condicionales
‌
Los condicionales nos permiten evaluar si una condición cumple o no con lo que estemos evaluando. Su sintaxis es muy sencilla, podemos evaluar si la condición es verdadera o falsa. Incluso añadir una condición intermedia en el caso de que no se cumpla la primera condición y se deban evaluar más.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mlblfj4ia670hfpjetvf.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/omdm6ckyq6qtcd4nrup3.png)

### Ciclos, Bucles o Loops
‌
Se le pueden llamar, ciclos, bucles o loops, en ellos se evalua una condición n veces hasat que esta se cumpla. En estos podemos encontrar los for, while, entre otros.‌

* for
‌
Un bucle for se repite como mencione hasta que la condición que se esta evaluando se cumpla.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3iqalb4xancz3jzsab15.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z0or0fhpemnuyx3elzly.png)

* while
‌
Ejecuta una sentencia mientras la condición que este evaluando sea verdadera.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kjm1l1fah17ws7jalmve.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jsurt1qo8j8ga3t3t8f8.png)

### Switch
‌
Permite evaluar una expresión e intenta igual el valor de esa expresión a una etiqueta llamada case, que es el caso a evaluar. En el caso de que la condición se cumpla o lo que tiene el case, se ejecuta la sentencia que este en ese caso.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2rhd46lf0xodsifhu7ic.png)

En el switch se usa una sentencia llamada “break”, esta nos permite salir de la condición que se esta evaluando.

## Funciones
‌
Las funciones son pequeñas recetas que nos permiten reutilizar operaciones, sentencias de una forma mucho más legible y nos permite reutilizar el código que hayamos hecho.‌

Existen dos tipos principales de funciones: las funciones llamadas declaradas y las funciones expresadas.

### Declaradas o Declarativas
‌
Las funciones declaradas inician con la palabra reservada function, seguido del nombre de la función, una lista de parámetros que puede ser opcional y ván entre parentesis, seguida de unas llaves donde van a ir nuestras sentencias.

Las funciones se declaran pero para poder usarlas, se deben hacer el llamado de ellas. Cuando creamos una función pasandole los parámetros entre los parentesis, al llamar la función debemos incluirle los argumentos.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ipvszcp0ulddfp33inon.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/12g3xugodx0pdig0xt96.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q39j4rzultmfeo0bx4vg.png)

Habras notado que cuando se crea una función podemos pasarle parámetros, asi se llaman a estos valores cuando creamos la función; pero al invocar o llamar la función los valores que le pasamos a esta función se llaman argumentos.

### Expresadas
‌
La estructura de estas funciones es similar a la anterior, pero no inician con la palabra reservada function y no es obligatorio que tengan nombre. Esta función se puede almacenar en una variable o constante.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p2e79m54ahqwmpv10fwm.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6v66gnssffnadu2lxkss.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aa0tm0kwyr01kf6m1u0i.png)


### Arrow function
‌
Apartir del estandar ES6, se introdujo esta nueva forma de crear las funciones. Esta es solo una forma abreviada de crear una función. Estas son anónimas, no poseen un nombre de función.
‌
Para crearlas podemos definir una lista de parámetros , pueden tenerles o no; seguido del flat arrow o flecha y en el caso de que sea solo una sentencia o instrucción que se va a realizar o ejecutar, se pueden omitir las {}, sin tienen varias sentencias se deben incluir las {}.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vwdei8v2kp9mi9jpm3mh.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/glisp41fttgsknc5uk7c.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/glih2qvpskim2xe6a7sy.png)


## Array
‌
Los arrays son listas o colecciones de datos. Los arrays son del tipo de datos de objetos, y nos permiten almacenar cualquier tipo de dato. Cada dato se llama elemento y se le asigna un indice, que sirve para identificarlo. Los arrays inician desde el indice o posición 0.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hm6vmxd7sdgl11q2wd0g.png)

‌
Creamos un array de dos formas:
‌
* Haciendo uso de los corchetes. En los corchetos podemos especificar los datos que va a tener nuestro array o declararlo vacío.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/be8g8656d2xqxtuqwqa2.png)

* Haciendo uso de la palabra reservada newArray(). En los paréntesis podemos asignarle los datos que va a tener nuestro array o declararlo vacío.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5zz21nv5k2c720jm7d33.png)

Para obtener los datos del array, podemos hacer referencia a su indice si deseamos obtener la data de una posicion especifica, así:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b9mxpix2t7n77u8np2ho.png)

Es posible hacer operaciones con los arrays, para ordenarlos, filtrar sus resultados, para añadir un elemento al inicio, al final, en una posición determinada, entre otras operaciones.

## Objetos
‌
Los objetos son colecciones de propiedades. Una propiedad se reconoce porque tiene un nombre (o clave), que será igual a un valor. Un apropiedad puede ser como lo mencione tener un nombre y un valor o ser una propiedad de tipo función, donde podemos ejecutar sentencias o instrucciones.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c9ilrun3w8l07i5fzhe8.png)
‌
Hay dos tipos de Objetos: Objeto literal o declarativo y el constructor.

### Objeto literal o declarativo
‌
Este objeto se crea usando las llaves {} y dentro de ellas, podeos incluir una lista de propiedades con sus respectivos valores asociados.

La clave (key) o nombre de la propiedad, puede tener un valor que puede ser de cualquier tipo de dato.‌

Los objetos se pueden crear a una constante se le asignan unas llaves, donde se crearia un objeto vacio, o se le asigna a la constante un objeto con las propiedades. Para crear un objeto vacio tambien se puede hacer mediante la palabra reservada new Object()

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1q7bk3o6aq3e399332p3.png)

Para obtener los valores de un objeto, podemos hacerlo colocando el nombre del objeto seguido de un punto (.)y luego la propiedad, o podemos al nombre del objeto, colocarle luego de este entre corchetes el nombre de la propiedad.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jzqm4da0saqfwnypyz8y.png)

Para incluir una nueva propiedad podemos al nombre del objeto seguido del punto colocarle la nueva propiedad y hacerla igual al valor.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/31cdbat9p5ki90gcq8ex.png)

Para eliminar una propiedad podemos hacer uso de una palabra reservada que se llama “delete”, que permite borrar las propiedades de los objetos.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0oxshl106ar4friap3z7.png)

### Objeto Constructor
‌
Para estos objetos se usa una función llamada constructora, en esta el nombre de la función será el nombre del objeto y se le colocará este nombre usando la primera letra en mayuscula inicial, para hacer uso de esta función se deberá instancia el objeto usando la palabra reservada new (u operador).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xo19duwub03bn5iosrvs.png)

Dentro de la función constructura se hace uso de la palabra reservada this, la cual va ahacer referencia al objeto.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0cli1ro2b42j9iziwiun.png)


## Prototipos

Los objetos de JavaScript provienen de Object y tienen en su interior un -proto- o prototype (prototipo), que nos permite heredar propiedades y métodos. Si necesitamos extender o sobreescribir el comportamiento de los objetos lo hacemos mediante prototype.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1w0j5het8t7p4frf1pjn.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/177wmpimdf5ifawm77t0.png)

‌
Clases (Class)
‌
Las clases son conjunto de elementos con caracteristicas comunes. Una Clase como un objeto contiene métodos y entre sus métodos se haya una función constructora, la cual recibe unos argumentos que se asignan como propiedades del this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j5kzganky9o00yullr1e.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sytdx9s7mab7gn6i9omp.png)

Existen mucha información sobre JavaScript, funciones, tipos de datos, declaraciones, etc; que puedes ampliar en mdn, que es una gran guía para consultar todas las dudas conceptuales que tengamos sobre este gran lenguaje de programación.