5 #JavaScript “Bad” Parts That Are Fixed In #ES6

ECMAScript 6 (ES6) features can be divided into features that are pure syntactic sugar (like: class), features that enhance JavaScript (like import) and features that fix some of JavaScript’s “bad” parts (like the let keyword). Most blogs and articles combine all three types, and can overwhelm newcomers.

Link: https://medium.freecodecamp.com/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81

JavaScript Rounding

Very often calculations in javascript produce results that don’t quite fall within the ranges we want, or generate numbers that need to be “cleaned up” before use. Exactly what happens to those numbers – rounding up or down, set within a range, or being “clipped” to a certain number of decimal places – depends on what you want to use them for.

Link: http://thenewcode.com/895/JavaScript-Rounding-Recipes

Patrón Modular en Javascript

El patrón modular es algo que todo desarrollador Front-End debe saber. Una de las mejores practicas a la hora de escribir código es usar patrones de diseño y en este post explicaremos el patron modular para Javascript.

En javascript el patron modular emula el concepto de clases, de manera que somos capaces de incluir métodos públicos/privados y propiedades dentro de un único objeto, protegiendo las datos particulares del ámbito global, lo que ayuda a evitar la colisión de nombres de funciones y variables ya definidas a lo largo de nuestro proyecto, o API’s de terceros, a continuación unos conceptos previos para poder entender mejor el patrón modular.

Objeto Literal

EL patron modular se basa en parte en los objetos literales por ende es importante entenderlo.
Un objeto literal es descrito como cero o más pares nombre/valor, separados por comas entre llaves.
Los nombres dentro del objeto pueden ser cadenas o identificadores que son seguidas por 2 puntos, dichos objetos también pueden contener otros objetos y funciones.


var objetoLiteral = {
    /* los objetos literales pueden contener propiedades y métodos */
    saludo : "soy un objeto literal",
    miFuncion : function(){
      // código
    }
};
/* accediendo a una propiedad de nuestro objeto literal persona */
objetoLiteral.saludo

Un ejemplo de un modulo usando un objeto literal.


var persona = {
    /* definiendo propiedades */
    nombre : "adan",
    edad   : 33,
    /* método simple */
    comer  : function(){
        console.log(this.nombre + " esta comiendo.");
    }
};
/* accediendo al método comer de nuestro objeto literal persona */
persona.comer();

Módulo

Un módulo es una unidad independiente funcional que forma parte de la estructura de una aplicación.
Podemos usar funciones y closures(cierres) para crear módulos.


var modulo = (function(){
    ...
});

Un ejemplo más completo:


var automovil = (function(colorDeAuto){
    var color = colorDeAuto;
    return{
        avanzar : function(){
            console.log("el auto "+ color +" esta avanzando");
        },

        retroceder : function(){
            console.log("el auto "+ color +" esta retrocediendo");
        }
    }
})("azul");
/* accediendo los metodos retroceder y avanzar de nuestro módulo */
automovil.retroceder();
automovil.avanzar();

Función Anónima

Las funciónes anónimas son funciónes sin nombre, comúnmente asociados a una variable.


var miFuncionAnonima = function(){
    alert("Hola mundo!");
};
miFuncionAnonima();

Funciones Auto-Ejecutables (IIFE)

Estas funciónes una vez declaradas se llaman a sí mismas para inicializarse, los primeros paréntesis encierran el contenido, los segundos paréntesis asumen que el interior de los primeros paréntesis es una función y la ejecuta inmediatamente.


/* 01 */
(function(){
    alert("Hola mundo!");
})();

/* 02 */
var miFuncionAnonima = function(){
    alert("Hola mundo!");
};

/* 03 */
var miFuncionAnonima = (function(mensaje){
    alert(mensaje);
})("Hola mundo");
// todo lo que le precede a los 2 últimos paréntesis se ejecuta inmediatamente

Closure

Los clousures son funciones definidas dentro de otras funciones, así mismo dicha función interna tiene acceso al ámbito de la función contenedora.


function ejemploClousure(arg1, arg2){
    var localVar = 8;
    function multiplicador(interArg){
        return arg1 * arg2 * interArg * localVar;
    }
    /* retornar una referencia de la función interna definida como:
       multiplicador 
    */
    return multiplicador;
}

/* la función devuelve una función, por lo tanto necesita asignación */
var globalVar = ejemploClousure(2,4);
/* y luego llamar a */
globalVar(8);

Métodos Privados

Los métodos privados son funciones que no pueden ser llamados desde fuera del ámbito donde han sido declarados, dichos métodos podrán ser invocados en nuestros métodos públicos.


var modulo = (function () {
    var privateMethod = function (message1) {
        console.log(message1);
    };
    var publicMethod = function (mensaje2) {
        privateMethod(mensaje2);
    };
    return {
        publicMethod: publicMethod
    };
})();

/* pasando datos a un método privado */
modulo.publicMethod("mi mensaje");

Entendiendo el Retorno

Comúnmente los módulos retornan un objeto, la cual los métodos ligados a dicho objeto serán accesibles desde fuera del módulo.


var module = (function(){
    /* simple método privado */
    var privateMethod = function(){
        console.log("soy un método privado");
    };
  
    /* retornando un objeto literal */
    return{
        publicMethod : function(){
            privateMethod();
            console.log("soy un método publico");
        }
    }
})();
/* accediendo nuestro método publico */
module.publicMethod();

Ventajas del Patron Modular

  • Código limpio , separado y organizado.
  • Soportan datos privados.
  • Código Escalable.

Referencia: Learning JavaScript Design Patterns

How and why to avoid global variables in JavaScript

Global variables and function names are an incredibly bad idea. The reason is that every JavaScript file included in the page runs in the same scope. If you have global variables or functions in your code, scripts included after yours that contain the same variable and function names will overwrite your variables/functions.

Link: http://goo.gl/nOm9S2