JavaScript 3 ( Tipos de datos compuestos )

 

object = {}

array = []

function ()

Class {}

ARREGLOS

Un Arreglo es una colección de elementos. Estos elementos pueden ser de diferentes tipos numeros, boolean, cadenas, incluso objetos como otro arreglo. La primera posición de un arreglo siempres 0. Si tengo un arreglo de 4 elementos las posiciones del arreglo son  0, 1, 2 y 3.

 
 //TENEMOS DIFERENTES MANERAS DE DECLARAR ARREGLOS
 
 const miArray = [];  //Arreglo vacío
 const a = [1, "Texto", true,  ["A","B","C"]]; //AREGLO CON DIFERENTES TIPOS DE DATOS
 
 //Veamos cuantas posiciones tiene nuestro arreglo b con la propiedad length
 console.log(miArray_2.length);
 
 //Un Array es un objeto compuesto, en estos objetos accedemos a la referencia del valor
 //y no al valor directamente, así para saber que valor tiene la posición 3 de mi array haría:
 console.log(b[2])  //recuerda que la primera es 0
 
 //Cuando tengo un array dentro de otro como en el caso del aposición 3 de
 //mi array b, para acceder a los valores de ese segundo array, imaginemos que
 //quiero ver la posición 2 de mi segundo array donde está la letra B:
 console.log(b[3][1]); //donde 3 es el la cuarta posición del primer array y 1 la segunda del segundo array
 
//NUEVAS FORMAS DE CREAR ARRAYS ES6 Array.of
 
const c = Array.of("X", "Y", "Z", 1, 2, 3);
console.log(c);
 
//MÉTODO QUE PERMITE INICIALIZAR UN ARREGLO Y ASIGNAR UN VALOR A TODAS SUS POSICIONES
//ejemplo creo un array de 20 posiciones con el valor 2 en todas sus posiciones
 const d = Array(20).fill(2);
 console.log(d);
 
 //MÉTODOS PARA ARREGLOS
 const colores =["Rojo", "Verde", "Azul"];

 // PUSH Añadir un elemento a un array al final
 colores.push("Negro");
 console.log(colores);

 //POP QUITA EL ÚLTIMO ELEMENTO
 colores.pop();
 console.log(colores);

 //METODO QUE PERMITE EJECUTAR UNA FUNCIÓN POR CADA ELMENTO DEL ARRAY
 colores.forEach(function(el){
     console.log(`<li>${el}</li>`);
 })
 /*
 LO ANTERIOR ME GENERA LO SIGUIENTE:
 <li>Rojo</li>
 <li>Verde</li>
 <li>Azul</li>
 */
 //LOS ARREGLOS POSEEN MUCHOS MÉTODOS, LO MEJOR ES REVISAR LA DOCUMENTACIÓN:
 //https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array

OBJETOS

Es muy adecuado declarar los objetos con const, ya que al declararlos como constantes evitamos que otras declaraciones de objetos cambien  nuestro objeto por error. Un objeto es una colección de llaves valores (similar a CSS)

 DECLARACIÓN DE UN OBJETO

 - {} esto ya es un objeto para Javasacript

 - Prototipo Object (no recomendado) const o = new Object()

 
 const juan = {
     nombre: "Juan",
     apellidos: "Lopez",
     edad: 30,
     aficiones: ["Programar", "Musica Tecno", "Deporte"],
     soltero: false,

     //UN OBJETO TAMBIÉN PUEDE CONTENER OTRO OBJETO
     contacto: {
         email: "juan@gmail.com",
         telefono: "55555555"
     },

     //UN OBJETO PUEDE CONTENER UNA FUNCIÓN
     saludar: function(){
        console.log("Hola :)")
     },

     //O una función que muestra propiedades con this (scope el objeto entero)
     decirMiNombre: function(){
         console.log(`Hola me llamo ${this.nombre} ${this.apellidos}`);
     }
 }
 
 console.log(juan);

 //COMO ACCEDEMOS A LOS VALORES DE ESTE OBJETO ATRIBUTOS Y MÉTODOS
 console.log(juan["nombre"]);  //estamos accediendo a la propiedad nombre con corchetes, pero es mejor práctica con el punto
 console.log(juan.apellidos);  //con el punto en vez de los parentesis es valido
 
//accedemos a las aficiones que es un array
//todo el array
console.log(juan.aficiones);
//por separado
console.log(juan.aficiones[0]);
console.log(juan.aficiones[1]);
console.log(juan.aficiones[2]);
 
//Accedemos al objeto contacto
console.log(juan.contacto);
//Accedemos a las propiedades de contacto de forma individual
console.log(juan.contacto.email);
console.log(juan.contacto.telefono);
 
//final mente la función (método) saludar
juan.saludar();
juan.decirMiNombre();
 

_ALGUNOS MÉTODOS PARA OBJETOS

 
//keys crea un array iterable con todas la llaves del objeto
console.log(Object.keys(juan));
 
//Values forma un arreglo con los valores
console.log(Object.values(juan));
 
//hasOwnProperty evalua si el objeto posee una propiedad dada, devuelve true o false
console.log(juan.hasOwnProperty("nombre"));

 FUNCIONES

Una función es un bloque de código autocontenido (independiente del scope globalque se define una sola vez y que se puede ejecutar en cualquier momento las veces que sean necesarias.

Una función puede recibir parámetros, separando estos por comas y también pueden devolver valores en función de lo que se requiera.

 Las funciones, como casi todo en JavaScript también se consideran objetos, se dice que sonciudadanos de primera clase

  
 
  //DECLARACIÓN DE UNA FUNCIÓN
    //Funciones declaradas
    function miFuncion(){
        console.log("Uno");
        console.log("Dos");
        console.log("Tres");
    }
 
    //INVOCACIÓN DE FUNCIONES
     miFuncion();
 
     //FUNCIONES QUE DEVUELVEN VALORES
     //Una función puede devolver cualquier tipo de dato ya sea primitivo o compuesto
     //o también puede devolver la ejecución de otra función
     function devuelveValor(){
         return "La función devuelve esta cadena de texto"
     }
     //Ahora invovoco mi función y esta devuelve la cadena de texto
     console.log(devuelveValor);

     //También puedo asignar la ejecución de mi función a una variable 
     let resultado = devuelveValor();
     console.log(resultado);
 
     //El return debe ir siempre al final, ya que todo lo que quede por debajo no
     //será retornado o en otras palabras será ignorado.
 
     //FUNCIÓN QUE RECIBE VALORES
     function recibeValor(nombre, mensaje){
       console.log(`Hola mi nombre es ${nombre} y mi mensaje es ${mensaje}`);
     }
 
     recibeValor("Juan", "Feliz Navidad");
 
     /*FUNCIONES DECLARADAS VS FUNCIONES EXPRESADAS
     No importa donde declaremos una función, es decir podemos invocar una función 
     que está declarada más abajo en el documento, JS hace un Whoisting y no tirar
     error. esto es una función declarada*/
 
     /*
     Otra forma sería la declaración de una función expresada, esto es crear una 
     función y asignarla a una variable. En este caso ya no es necesario dar nombre
     a la función despues de function, ya que el nombre de la variable es el que le
     hemos dado a la cosntante (FUNCIÓN ANÓNIMA)
      */
    //funcionExpresada(); NO PUEDO INVOCAR UNA FUNCIÓN EXPRESADA ANTES DE SU DECLARACIÓN
 
      

const funcionExpresada = function(){
         console.log("Esto es una función expresada");
      }
 
      funcionExpresada();