logo

JS FUNdamentals:una descripción general esencial de JavaScript

Expresividad

Los lenguajes de programación como BASIC, Python, C tienen una naturaleza aburrida similar a una máquina que requiere que los desarrolladores escriban código adicional que no está directamente relacionado con la solución en sí. Piense en números de línea en BASIC o interfaces, clases y patrones en Java.

Por otro lado, JavaScript hereda las mejores características de las matemáticas puras, LISP, C#, lo que conduce a una gran expresividad (¡y diversión!).

Más sobre Expressive Power en esta publicación:¿Qué significa "expresivo" cuando se refiere a lenguajes de programación?

El ejemplo por excelencia de Hello World en Java (recuerde, Java es para JavaScript lo mismo que jamón para un hámster):

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

El mismo ejemplo en JavaScript:

console.log('Hello World')

o desde dentro de una página HTML:

<script>
document.write('Hello World')
</script>

JavaScript permite a los programadores centrarse en la solución/problema en lugar de saltar a través de aros y documentos API.

Escritura suelta

La conversión automática de tipos funciona bien la mayoría de las veces. ¡Es una gran característica que ahorra mucho tiempo y energía mental! Solo hay unos pocos tipos de primitivas:

  1. Cadena
  2. Número (tanto entero como real)
  3. Booleano
  4. Indefinido
  5. Nulo

Todo lo demás es un objeto, es decir, colecciones con claves mutables. Lea Stackoverflow en ¿Qué significa inmutable?

Además, en JavaScript hay objetos String, Number y Boolean que contienen ayudantes para las primitivas:

'a' === new String('a') //false

pero

'a' === new String('a').toString() //true

o

[Nota al margen]

Leer publicaciones de blog es bueno, pero ver cursos en video es aún mejor porque son más atractivos.

Muchos desarrolladores se quejaron de la falta de material de video de calidad asequible en Node. Es una distracción ver videos de YouTube y una locura pagar $ 500 por un curso de video de Node.

Visite Node University, que tiene cursos de video GRATUITOS en Node:node.university.

[Fin de la nota al margen]

'a' == new String('a') //true

Por cierto, == realiza conversión automática de tipos mientras === no.

Notación literal de objeto

La notación de objetos es súper legible y compacta:

var obj = {
   color: "green",
   type: "suv",
   owner: {
      ...
   }
}

¿Recuerdas que las funciones son objetos?

var obj = function () {
// do something
}; 
obj.a =1; 
console.log (obj.a); // prints 1

Otro patrón de apariencia muy similar (pero completamente diferente en comportamiento) es cuando usamos la función para construir/iniciar objetos:

var Obj = function (ops) {
  this.name = ops.name;
}
var obj = new Obj ({name: 'puppy'});
console.log(obj);

Funciones

Las funciones son ciudadanos de primera clase , y los tratamos como variables, ¡porque son objetos! Sí, las funciones pueden incluso tener propiedades/atributos.

Crear una función

var f = function f () {
   console.log('Hi');
   return true;
}

o

function f () {
  console.log('Hi');
  return true;
}

Función con una propiedad (recuerde que las funciones son solo objetos que se pueden invocar, es decir, inicializar):

var f = function () {console.log('Boo');}
f.boo = 1;
f(); //outputs Boo
console.log(f.boo); //outputs 1

Nota :la palabra clave de retorno es opcional. En caso de que se omita, la función devolverá undefined tras la invocación.

Pasar funciones como parámetros

var convertNum = function (num) {
 return num + 10;
}

var processNum = function (num, fn) {
   return fn(num);
}

processNum(10, convertNum);

Invocación vs Expresión

Definición de función:

function f () {};

Invocación:

f();

Expresión (porque se resuelve en algún valor que podría ser un número, una cadena, un objeto o un booleano):

function f() {return false;}
f();

Declaración:

function f(a) {console.log(a);}

Arreglos

Las matrices también son objetos que tienen algunos métodos especiales heredados del objeto global Array.prototype. Sin embargo, las matrices de JavaScript no matrices reales. En cambio, son objetos con claves enteras únicas (generalmente basadas en 0).

var arr = [];
var arr2 = [1, "Hi", {a:2}, function () {console.log('boo');}];
var arr3 = new Array();
var arr4 = new Array(1,"Hi", {a:2}, function () {console.log('boo');});

Naturaleza Prototípica

No hay ninguna clase en JavaScript porque los objetos heredan directamente de otros objetos, lo que se denomina herencia prototípica:Hay algunos tipos de patrones de herencia en JS:

  • Clásica
  • Pseudoclásico
  • Funcional

Ejemplo del patrón de herencia funcional:

var user = function (ops) {
  return { firstName: ops.name || 'John'
         , lastName: ops.name || 'Doe'
         , email: ops.email || '[email protected]'
         , name: function() { return this.firstName + this.lastName}
         }
}

var agency = function(ops) {
  ops = ops || {}
  var agency = user(ops)
  agency.customers = ops.customers || 0
  agency.isAgency = true
  return agency
}

Convenios

La mayoría de estas convenciones (con la excepción de los puntos y comas) son estilísticas, altamente preferenciales y no afectan la ejecución.

Punto y coma

Puntos y comas opcionales, excepto en dos casos:

  1. En la construcción del bucle for:for (var i=0; i++; i<n)
  2. Cuando una nueva línea comienza con paréntesis, por ejemplo, expresión de función invocada inmediatamente (IIFE):;(function(){...}())

Caso camello

cameCase, a excepción de los nombres de clase que son CapitalCamelCase, por ejemplo,

var MainView = Backbone.View.extend({...})
var mainView = new MainView()

Nombramiento

_ ,$ son caracteres perfectamente legítimos para los literales (las bibliotecas jQuery y Underscore los usan mucho).

Los métodos y atributos privados comienzan con _ (¡no hace nada por sí mismo!).

Comas

Enfoque de coma primero

var obj = { firstName: "John"
          , lastName: "Smith"
          , email: "[email protected]"
          }

Sangría

Por lo general, es una tabulación, una sangría de 4 o 2 espacios y los campamentos de sus seguidores se dividen casi religiosamente entre las opciones.

Espacios en blanco

Por lo general, hay un espacio antes y después de = , + , { y } simbolos No hay espacio en la invocación, por ejemplo, arr.push(1); , pero hay un espacio cuando definimos una función anónima:function () {} .

Sin módulos

Al menos hasta ES6, todo está en el ámbito global, también conocido como window e incluido a través de <script> etiquetas Sin embargo, existen bibliotecas externas que permiten soluciones alternativas:

  • JS común
  • AMD y Require.js

Node.js usa una sintaxis similar a CommonJS y tiene soporte integrado para módulos.

Para ocultar su código del alcance global, haga que los atributos/métodos privados usen cierres y expresiones de función invocadas inmediatamente (o IIFE).

Expresiones de funciones invocadas inmediatamente (IIFE)

(function () {
window.yourModule = {
...
};
}());

Este fragmento muestra un ejemplo de un objeto con atributo privado y método:

(function () {
  window.boo = function() {
    var _a = 1;
    var inc = function () {
      _a++; 
      console.log(_a);
      return _a;
    };
    return {
      increment: inc
    }; 
  }
}());
var b = window.boo();
b.increment();

Ahora prueba esto:

b.increment();
b.increment();
b.increment();

palabra clave "esto"

¡Muta/cambia mucho (especialmente en jQuery)!
La regla general es reasignar a una variable de alcance local antes de intentar usar this dentro de un cierre:

var app = this
$('a').click(function(e){
  console.log(this) //most likely the event or the      target anchor element
  console.log(app) //that's what we want!
  app.processData(e)
 })

En caso de duda:¡console.log!

Trampas

JS es el único lenguaje que los programadores creen que no deberían aprender. Cosas como === contra == , la fuga de alcance global, el DOM, etc. pueden generar problemas en el futuro. Por eso es importante entender el lenguaje o usar algo como CoffeeScript, que soluciona la mayoría de los problemas.

Más aprendizaje

Si te gustó este artículo y te gustaría explorar más JavaScript, echa un vistazo a este increíble gratis recurso:JavaScript elocuente:una introducción moderna a la programación.

Por supuesto, para los entusiastas y profesionales de JavaScript más avanzados, está mi libro Creación rápida de prototipos con JS y la escuela de programación intensiva HackReactor, donde enseño a tiempo parcial.