JavaScript Cheat Sheet

Verificar si una variable esta inicializada

if (typeof a !== "undefined")

Console

console.log() -> representacion en string de algo
console.dir() -> devuelve un arbol de lo que realmente "es" lo que se pasa como parametro
e.currentTarget -> retorna el elemento original al que se le attach el evento. Esto es por ejemplo cuando dentro de un link ponemos texto y una imagen. Si utilizamos e.target nos va a deolver span o img como elemnto.
e.currentTarget = $(this) de Jquery

Event bubbling

    1. Cuando hacemos click en un elemento HTML. Causamos un evento Click.
    2. Supongamos que el click lo hacemos en un elemento de este tipo
      <a href="#">
          <span>LINK</span>
      </a>
    3. Al hacerle click en realidad estamos haciendo click en el elemento SPAN. Entonces:
      1. Si existe algun listener de un evento click adjuntado a ese elemento se ejecuta.
      2. Luego el navegador sube un nivel, en este caso se encuentra con un tag A. Entonces realiza la misma acción: Si existe algun listener de un evento click adjuntado a ese elemento se ejecuta.
      3. El paso 2 se repite hasta llegar al elemento BODY

e.preventDefault() y e.stopPropagation()

Otra cosa que podemos hacer es modificar el comportamiento del navegador ante un evento

$table.find('.some-class').on('click', function (e) {
    e.preventDefault();  // no realizar el comportamiento por defecto del navegador
    e.stopPropagation(); // no "bubble" el evento a elementos superiores

   //la siguiente linea realiza las mismas acciones que las 2 anteriores
   //return false;
});

e.target()

Es una propiedad del evento que apunta al elemento que fue clickeado.
Es un objeto del tipo DOM Element

e.target() vs e.currentTarget() 

<a class="link" href="#">
    <span><img src="image.png" /> LINK</span>
</a>

Cuando hacemos click en la imagen e.target sera igual al elemento img, y cuando hacemos click en el text link, e.target será igual al elemento span. Pero si utilizamos e.currentTarget nos devolverá el elemento al cual le adjuntamos el evento que esn este caso es el elemento A

$table.find('.some-class').on('click', function (e) {
    //nos muestra el elemento clickleado
    console.log(e.target); 
    //nos muestra el elemento al cual se le adjunto el evento sin importar a cual de sus elementos
    //se les hizo click
    console.log(e.currentTarget); 
});

Node

Instalar nvm

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
$ export NVM_DIR="$HOME/.nvm"
$ [ -s "$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh"
$ [ -s "$NVM_DIR/bash_completion" ] && \.   "$NVM_DIR/bash_completion"
$ nvm --version

//instalar versión
nvm install 8.16.0
//Cambiar versión
$ nvm use 8.16.0

Yarn

Instalar Yarn

//falta


$ yarn init //inicializa un package.json
//Babel convierte solo las nuevas construcciones y sintaxis de los nuevos lenguajes de JS a versiones anteriores
//Si hay nuevas funciones u objetos necesitamos Polifill 
$ yarn add babel-cli --dev
$ yarn add babel-preset-env --dev
$ touch .babelrc 
//agrega lo sigueinte
{
    presets: ["env"]
}
$./node_modules/bin/babel filte/path/to/transpile -o filte/path/transpiled

ES6

Arrow Functions

//before
function(data) {};

//ES6
(data) => {};
data => {};

Si la funcion solo un solo return, se puede usar de las siguientes maneras

() => {
    return 'hola';
};

() => 'hola';


Importante:
Arrow functions anónimas preservan el valor de this, dentro de ellas
En Jquery con Arrow functions
() => {
    $row.fadeOut('normal', () => {
        //Antes
        $(this).fadeOut();
        //ES6
        $row.fadeOut();
    })
}

() => {
    //Antes
    $row.find('div').each(function() {
        $(this).val(2);
    });
    //ES6
    $row.find('div').each((index, element) => {
        $(element).val(2);
    })
}

var, let y const

var: permite reasignar el valor de la variable, tiene scope de funcion, hace variable "hoisting"
let: permite reasignar el valor de la variable, tiene scope de bloque (if por ejemplo), no hace variable "hoisting"
const: no permite reasignar el valor de la variable.
Ejemplo:
const myVar = 1;
myVar = 2; //nos devuelve un error

const myObj = { name: 'Joe'};
myObj.name = 'Doe' //esta permitido

Object literals y Optional Args


cont url = 'http://mydomain.com';
const myObj = { url: url};
const myObj = { url }; //Si la key y el value son iguales se puede usar solo una vez

//Métodos dentro de objetos

const obj = {

    //Antes
    updateRow: function() {
        //update
    }
    //ES6
    updateRow() {
        //update
    }
    //Ademas se pueden establecer parametros opcionales
    updateRow(max = 400) {
        //update
    }
}

Clases

class Helper {
    constructor(maxValue) {
        this.maxValue = maxValue;
        //code
    }

    //La nueva sintaxis get nos permite definir esta especie de propiedad
    // que luego la podemos llamar como Helper._rows
    // tambien existe "set"
    get _rows() {
        //return rows
    }
    //Si esta "propiedad" no usa this adentro, la podemos declarar como estática
    static get _someConst() {
        //return a const value
    }
    //Y la llamamos como Helper._someConst


    static  _utility() {
        //return a calculation
    }
    //Y la llamamos como Helper._utility

    //metodo comun
    getDetails() {
        //code
    }

}

//Herencia

class CustomHelper extends Helper {
    
    //sobreescribir
    getDetails() {
       //new code
    }

    //llamar al metodo de la clase padre
    getParentDetails() {
        super.getDetails()
    }

    //sobre escribir el constructor
    constructor(maxValue, otherValue) {
        super(maxValue);
        this.otherValue = otherValue;
    }


}

const custom = new CustomHelper(100);

Destructuring

const obj = {name: 'Joe', lastName: 'Doe', age: '28'};
//crea tres variables con los valores de obj
let {name, lastName, age} = obj;
//admás se pueden agregar keys que no existan y ponerles valores por defecto
let {name, lastName, age, citizenship = 'spain'} = obj;

//con Arrays: es por posición
const carsArray = ['audi', 'vw', 'ferrari'];
let [car1, car2] = carsArray;

Spread Operator

//con Arrays
const carsArray = ['audi', 'vw', 'ferrari'];

let printCars = (car1, car2, car3) => {
    console.log(car1, car2, car3);
}

//Funciona como si completaran 1 a 1 los argumentos
printCars(...carsArray);

// tambien sirve para array merge
let newCarsArray = ['fiat', 'opel', ...carsArray];

//tambien sirve para copiar un array y agregar nuevos valores solo a la copia 

let copyOfCarsArray = newCarsArray;
copyOfCarsArray.push('porshe');
//esto nos da como resultado que   copyOfCarsArray y newCarsArray poseen porshe
//Por que los arrays se pasan por referencia
let copyOfCarsArray = [...newCarsArray];
copyOfCarsArray.push('porshe');
//esto nos da como resultado que copyOfCarsArray solamente contiene a porshe


Template Strings

//Antes
var nombre = 'Joe';
var mensaje = "Hola mi nombre es: "+ nombre;

//ES6
var nombre = 'Joe';
var mensaje = `Hola mi nombre es: ${nombre}`;

//Además permite tener string con line breaks
var mensaje = 
`Hola mi nombre es: 
Joe Doe
`;

For Loop

//for para colecciones menos objetos
for (let names of data.names) {
}
//for para objetos
for (let names in data.names) {
}

Funciones

// look up the name
// of the item based on the "id" argument.
const { name } = this.props.items.find(i => i.id === id);


this.props.items.map(({ id, name }) => (
    
  • {name}
  • ))}

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *