JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing
Recursos
- 📺 Project Code Rush - The Beginnings of Netscape / Mozilla Documentary
- 📺 Download:The True Story of the Internet: La Guerra de los Navegadores Subtitulada
- Browser Wars: La historia de la guerra de navegadores y la historia de los userAgents
- Wikipedia | Guerra de navegadores
- PC Mag | Browsers: A Brief History
- The Telegraph | Web browsers: a brief history
- A Brief History of Web Browsers and How They Work
- Wikipedia | History of the web browser
Browser Engine
- Activos
- Discontinuados
El Motor JavaScript (JavaScript Engine)
- V8 Engine de Google
- Chakra de Microsoft
- SpiderMonkey de Mozilla
- JavaScriptCore de Apple
- Carakan de Opera (Inactivo)
- Comparativa de Motores
Recursos
Recursos
- How JavaScript works in browser and node?
- HTML5 Rocks! | How Browsers Work: Behind the scenes of modern web browsers
- Philip Roberts: What the heck is the event loop anyway? | JSConf EU
- Behind the scenes of modern web browsers
- Does JavaScript use stack or heap for memory allocation or both?
- How JavaScript works: the rendering engine and tips to optimize its performance
- An overview of the engine, the runtime, and the call stack
- Inside Google’s V8 engine + 5 tips on how to write optimized code
- Memory management + how to handle 4 common memory leaks
- The event loop and the rise of Async programming + 5 ways to better coding with async/await
Recursos
- 📺 Douglas Crockford: The JavaScript Programming Language
- 📺 The Post JavaScript Apocalypse - Douglas Crockford
- 📺 dotJS 2012 - Brian Leroux - WTFJS
- 📺 What the... JavaScript?
// Classic
(function(){})();
// Crockford's favorite
(function(){}());
// Unary versions
+function(){}();
// Facebook version
!function(){}();
// Crazy version
!1%-+~function(){}();
Recursos
- La gestión de argumentos es muy pocos restrictiva
- EL úmero de argumentos es variable, por defecto su valor es siempre
undefined
arguments
no es un array y tendremos que manejarlo con cuidado o convertirlo usandoprototype
function func(arg1, arg2, arg3) {
console.log("arg1:", arg1)
console.log("arg2:", arg2)
console.log("arg3:", arg3)
console.log("Arguments:" arguments)
console.log("Arguments eres una Array?", Array.isArray(arguments))
}
func(2); //arg1: 2
//arg2: undefined
//arg3: undefined
Recursos
function func() {}
var func = function (){}
var obj = {
func(){}
}
var func = new Function('arg1', 'arg2', 'console.log(arg1, arg2)');
function func() {console.log("Soy una función", typeof(func))}
func.metodo = function() {console.log("Soy un método", typeof(func.metodo))}
func.propiedad = "Dato almacenado..."
console.log("Tengo propiedades", typeof(func.propiedad)) //Tengo propiedades string
func.metodo() //Soy un método function
func() //Soy una función function
function funcAsincrona (dato, callback) {
return callback(dato+5);
}
funcAsincrona(5, data => console.log) //10
function funcEspecial () {
console.log("Una sola vez...")
return function () {
console.log("Muchas veces...")
}
}
var nuevaFunc = funcEspecial(); //Una sola vez...
nuevaFunc(); //Muchas veces...
nuevaFunc(); //Muchas veces...
Recursos
Partes
- Caso base: es el caso más simple y determina la salida de la función
- Caso recursivo: vamos reduciendo la causistica y llamando a la propia función
Ejemplo
// Sin recursión
let counter = 100;
while(counter > 0) {
console.log(counter--);
}
// Con recursión
const cuentaAtras = function(value) {
if (value > 0) {
console.log("Valor actual:", value);
cuentaAtras(value - 1);
} else {
console.log("Fin de la historia:", value);
}
};
cuentaAtras(100);
Recursos
- Recursion in Functional JavaScript
- JS-Challenges/recursion-prompts
- Understanding Recursion in JavaScript
- Recursion in JavaScript
- Learn and Understand Recursion in JavaScript
- Stackoverflow | Calling a javascript function recursively
- Programming with JS: Recursion
- ¿Qué es la recursividad o recursión? - Un ejemplo con JavaScript
- Understanding Recursion in JavaScript with Confidence
Global
const global = "Dato global";
function func() {
console.log(global);
}
func(); // Dato global
Local clásico
function func() {
const local = 5;
}
console.log(local); // undefined.
Local con ES6
- Usando
var
el scope se define por la función donde se declaró,function-level scope
- Usando
let
yconst
el scope también se define enif
,while
,for
oswitch
,block-level scope
.
var uno = 1;
var diez = 10;
if (uno === 1) {
let uno = 3; // El alcance es dentro del bloque if
var diez = 5; // El alcance es dentro de la función
console.log(uno); // 3
console.log(diez); // 5
}
console.log(uno); // 1
console.log(diez); // 5
Un closure o clausura es la combinación de una función y el ámbito léxico en el que se declaró dicha función. Es decir los closures o clausuras son funciones que manejan variables independientes. En otras palabras, la función definida en el closure "recuerda" el ámbito en el que se ha creado. MDN
Claves
- Simplemente: la función definida en el closure "recuerda" el ámbito en el que se ha creado
- En resumen nos permite encapsular código pero con acceso a su contexto
- Todo ese contexto que recuerda ataca a la memoria RAM
- No debemos abusar de este hack por temas de rendimiento
- Es muy útil para emular métodos privados entre otras cosas
Ejemplo clásico
function creaSumador(x) {
return function(y) {
return x + y;
};
}
var suma5 = creaSumador(5);
var suma10 = creaSumador(10);
console.log(suma5(2)); // muestra 7
console.log(suma10(2)); // muestra 12
Ejemplo aplicado
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
Ejemplo ES5.1 vs ES6
//ES5
(function () {
if(true) {
var ifScope = "data"
}
for(var forScope = 0; forScope < 3; forScope += 1) {
console.log(forScope);
}
console.log("forScope ?", forScope); // 3
console.log("ifScope ?", ifScope); // data
}());
// ES6
(function () {
if(true) {
let ifScope = "data"
}
for(let forScope = 0; forScope < 3; forScope += 1) {
console.log(forScope);
}
console.log("forScope ?", forScope); // Uncaught ReferenceError: forScope is not defined
console.log("ifScope ?", ifScope); // Uncaught ReferenceError: ifScope is not defined
}());
Recursos
- JavaScript Closures Demystified
- MDN | Closures
- JavaScript Closure y su funcionamiento
- Stackoverflow | How do JavaScript closures work?
- Understand JavaScript Closures With Ease
- Understanding JavaScript Closures: A Practical Approach
- Understanding JavaScript: Closures
- Understanding JavaScript Closures
- Closures en JavaScript (ES5)
- JavaScript. ¿Para qué sirven los closures?
- Closures in Javascript for beginners
- CSS-Tricks | JavaScript Scope and Closures
- Entendiendo closures en JavaScript
- I never understood JavaScript closures
- Definiendo conceptos: Closure y Scope en JavaScript
- Antes de ejecutar el código, las variables se mueven al inicio del contexto de ejecución
- Declarar una variable en cualquier parte es lo mismo que declararla al inicio
- Las variables pueden usarse antes de ser declaradas
console.log("fn1", fn1()); // Uncaught TypeError: fn1 is not a function
console.log("fn2", fn2()); // 2
//function expression
var fn1 = function() { return 1; };
//function declaration
function fn2() { return 2; }
console.log("fn1", fn1()); // 1
console.log("fn2", fn2()); // 2
Recursos
- Understanding Hoisting in JavaScript
- Bitácora del desarrollador: Hoisting en JavaScript
- JavaScript Scoping and Hoisting
- JavaScript Hoisting Explained
- Diferencia entre let y var en ES6 y TypeScript
La programación defensiva (defensive programming en inglés) es una forma de diseño defensivo aplicada al diseño de software que busca garantizar el comportamiento de todo elemento de una aplicación ante cualquier situación de uso por incorrecta o imprevisible que ésta pueda parecer. En general, esto supone multiplicar las comprobaciones que se realizan en todos los módulos programados, con la consiguiente penalización en carga de procesador, tiempo y aumento en la complejidad del código. Las técnicas de programación defensiva se utilizan especialmente en componentes críticos cuyo mal funcionamiento, ya sea por descuido o por ataque malicioso, podría acarrear consecuencias graves o daños catastróficos. Wikipedia
Recursos
- Wikipedia | Programación defensiva
- The Art of Defensive Programming
- Defensive Programming In JavaScript
- Defensive coding examples
- Defensive JavaScript? Yes, Please!
- Defensive programming: the good, the bad and the ugly
- What is “Defensive Programming”?
- An In-Depth Look at Defensive Programming
Un lenguaje de programación dinámico es un lenguaje de programación en el que las operaciones realizadas en tiempo de compilación pueden realizarse en tiempo de ejecución. Por ejemplo, en JavaScript es posible cambiar el tipo de una variable o agregar nuevas propiedades o métodos a un objeto mientras el programa está en ejecución. MDN
Recursos
Si parece un pato, nada como un pato, y grazna como un pato, entonces probablemente sea un pato.
Conceptos
- Podemos saber si un objeto es una instancia de otra por las propiedades que hereda o no...
typeof
es muy limitado para saber que es algo, especialmento con objetosInstanceof
es útil cuando evaluamos nuestras propias construcciones
El problema de typeof
//@see: http://www.etnassoft.com/2011/02/07/duck-typing-en-javascript-chequeando-los-tipos-de-datos/
console.log( typeof new String( 'Fictizia' ) ); //object
console.log( typeof new Number( 1 ) ); //object
console.log( typeof [ "platano", true, "coche", 4 ] ); //object
console.log( typeof new Array( "platano", true, "coche", 4 ) ); //object
El problema de instanceof
// @see: http://www.etnassoft.com/2011/02/07/duck-typing-en-javascript-chequeando-los-tipos-de-datos/
// construciones propias:
function constructor(){}
function otro_constructor(){}
constructor.prototype = otro_constructor;
console.log( new constructor() instanceof constructor ); // true
console.log( new otro_constructor() instanceof otro_constructor ); // true
console.log( new otro_constructor() instanceof constructor ); // false
// construciones del lenguaje:
console.log( new String( 'Fictizia' ) instanceof String ); // true
console.log( new String( 'Fictizia' ) instanceof Object ); // true
console.log( 'Fictizia' instanceof String ); // false
console.log( 'Fictizia' instanceof Object ); // false
console.log( new Array( 1, true, "banana" ) instanceof Array ); // true
console.log( new Array( 1, true, "banana" ) instanceof Object ); // true
console.log( [ 1, true, "banana" ] instanceof Array ); // true
console.log( [ 1, true, "banana" ] instanceof Object ); // true
Entendiendo la validación
// https://github.com/jashkenas/underscore/blob/master/underscore.js#L1315
function isArray( obj ){
return toString.call( obj ) === '[object Array]';
}
// Aproximación como Duck Typing
function isArray( obj ){
return obj && typeof obj === "object" && "push" in obj;
}
//@see: http://www.etnassoft.com/2011/02/07/duck-typing-en-javascript-chequeando-los-tipos-de-datos/
// Aproximación como Duck Typing en modo paranoico
function isArray( obj ){
return obj &&
typeof obj === "object" &&
"splice" in obj &&
"join" in obj &&
"push" in obj;
}
Recursos
- Wikipedia | Test del pato
- Wikipedia | Duck Typing
- Duck Typing en Javascript Chequeando los tipos de datos
instanceof
considered harmful (or how to write a robustisArray
)- All about types in Javascript – Type detection
- Stackoverflow | Duck Typing in Javascript
- JavaScript and Duck Typing
- Duck Typing in JavaScript
- Using Duck Typing to Avoid Conditionals in JavaScript
- branneman/javascript-duck-typing.js
- JavaScript permite cambiar los tipos de datos de las variables de forma mas o menos automatica (sumar cadena a un numero..)
- Ofrece mucha flexibilidad pero también hace el codigo potencialmente inestable
- Es importnate tener controlado esto cuando manejamos datos externos (Ajax/JSON)
Ejemplo
var txt = "Cadena";
var num = 100;
var bol = false;
var otroNum = "10"
console.log(typeof(txt)) //string
console.log(typeof(num)) //number
console.log(typeof(bol)) //boolean
console.log(typeof(otroNum)) //string
Problema Típico: Ajax/Json
- Inconsistencia de datos
- Inconsistencia en el tipo de datos
[
{
'id': 1,
'name': 'Dr. Evil',
'role': 'Evil Boss',
'external_agency': false,
'security_level': 5
'started_at': 'unknown'
}, {
'id': "N1001",
'name': 'Mr. Hacker',
'role': 501,
'security_level': "TOP SECRET"
'external_agency': "Evil Mega Corp",
'started_at': 125869547
}
];
Solución (Programación defensiva) con tipos primarios
// @see: http://www.etnassoft.com/2016/10/17/tipado-seguro-en-javascript/
//Closure
var typeOf = ( type ) => ( x ) => {
if ( typeof x === type ) return x;
throw new TypeError( "Error: " + type + " expected, " + typeof x + " given." );
};
var str = typeOf( 'string' );
// Correct
console.info( str( 'Hello World' ) ); // Hello World
// Error / Exception
console.info( str( 123 ) ); // Error: string expected, number given
/* --- Ejemplo Real ---*/
function sum ( x, y ) {
return num( x ) + num( y );
}
console.info( sum( 2, 4 ) ); // 6
console.info( sum( 2, '3' ) ); // Error: number expected, string given
Solución (Programación defensiva) con Objetos
//@see: http://www.etnassoft.com/2016/10/17/tipado-seguro-en-javascript/
const objectTypeOf = name => obj => {
let toType = ( {} ).toString.call( obj ).match( /\s([a-z|A-Z]+)/ )[ 1 ].toLowerCase();
if ( toType === name ) return obj;
throw new TypeError( "Error: " + name + " expected, " + toType + " given." );
}
const obj = objectTypeOf( 'object' ),
arr = objectTypeOf( 'array' ),
date = objectTypeOf( 'date' );
// Correct
console.info( obj( {} ) ); // Object {}
console.info( arr( [] ) ); // []
console.info( date( new Date() ) ); // Date { ... }
// Error / Exception
console.info( obj( [] ) ); // Error: object expected, array given.
console.info( arr( {} ) ); // Error: array expected, object given.
console.info( date( '13/11/2016' ) ); // Error: date expected, string given.
/* --- Ejemplo Real ---*/
const map = function( fn, a ) {
return arr( a ).map( func( fn ) );
}
map( String.toUpperCase, [ 'foo', 'bar' ] ); // [ 'FOO', 'BAR' ]
map( String.toUpperCase, 'Hello World' ); // Error: array expected, string given
Recursos
- Tipado seguro en Javascript
- The Shocking Secret About Static Types
- JavaScript’s type system
- Reddit | How do you deal with weak typing?
- Quora | How is Javascript typed?
- Understanding Loose Typing in JavaScript
- Introducing Type Safety To Your JavaScript Project? Think Again
- Wikipedia | Strong and weak typing
- Strong and weak typing
Importante
- Se fuerza a que un elemento cambie su comportamiento y se comporte como otro de forma temporal
- Es dificil recordar todas las reglas
- Jugar con esto es complejo y peligroso, deberias de evitarlo de forma consciente
- Javascript hace mucho juego de coerción por debajo y es necesario controlarlo
- La coercion SOLO aplica a los Tipos primitivos (Primitive Types):
Boolean
,Number
,String
,Null
,Undefined
,Symbol
. - La coercion JAMAS aplica en Objetos ni funciones, a excepción de
null
porqueobject == object
siempre es false
Coerción implicita vs. Explicita
- Explicita es cuando lo gestionamos directaente
Boolean()
,Number()
,String()
,parseloat()
, etc... - Implicita es cuando delegamos esa conversion con operadores como
+
,==
,!=
,-
, etc... ===
NO implica una coerción de tipos ya que valida por tipo primero (comparación estricta)
Solo existen tres tipos de coerciones
+dato
y-dato
fuerza la coercion a númeroalgo + string
oalgo - string
fuerza a coerción de cadena!value
,if(value)
fuerzan a la coerción boolena,Boolean(x)
Ámbitos del Juego
cualquier cosa -> boolean
numbero -> string
string -> number
boolean -> number
null or undefined -> number
null or undefined -> string
Lógica aceptable
- Una cadena que no pueda representar un número será
NaN
- Todo es True, a excepción de las cosas sin valor real (
0
,-0
,false
,null
,undefined
,""
) - Undefined es NaN,
isNaN(undefined)
//Un clasico
Array(16).join( 'hero'-1) + "Batman";
// NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNBatman
//@see: https://wtfjs.com/
//@see: https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch4.md#edge-cases
console.log('+true:', +true); //1
console.log('-true:', -true); //-1
console.log('true + false:', true + false); // 1
console.log('12 / "6":', 12 / "6"); // 2
console.log('"number" + 15 + 3:', "number" + 15 + 3); //number153
console.log('15 + 3 + "number":', 15 + 3 + "number"); //18number
console.log('[1] > null:', [1] > null); //true
console.log('"foo" + + "bar":', "foo" + + "bar"); //fooNaN
console.log('"true" == true:', "true" == true); //false
console.log('false == "false":', false == "false"); //false
console.log('null == "":', null == ""); //false
console.log('!!"false" == !!"true":', !!"false" == !!"true"); //true
console.log('["x"] == "x":', ["x"] == "x"); //true
console.log('[] + null + 1:', [] + null + 1); //null1
console.log('[1,2,3] == [1,2,3]:', [1,2,3] == [1,2,3]); //false
console.log('{}+[]+{}+[1]:', {}+[]+{}+[1]); //[object Object][object Object]1
console.log('!+[]+[]+![]:', !+[]+[]+![]); //truefalse
console.log('new Date(0) - 0:', new Date(0) - 0); //0
console.log('new Date(0) + 0:',new Date(0) + 0); //Thu Jan 01 1970 01:00:00 GMT+0100 (hora estándar de Europa central)0
Recursos
- Coerción de datos en Javascript
- Coercion en JavaScript
- Understanding JS: Coercion
- JavaScript type coercion explained
- What exactly is Type Coercion in Javascript?
- Understanding Javascript Coercion in 5 Easy Steps
- You Don't Know JS: Types & Grammar. Chapter 4: Coercion
Importante
this
es uno de los conceptos peor entendidos y más odiadosthis
se establece en tiempo de ejecuciónthis
es dinámico y varia constantementethis
es una de las herramientas más potentes del lenguajethis
es extensamente usando en la Programación Orientada a Objetos (POO) en JavaScript
Dominando los Contextos de this
- Window:
console.log( this === window );
function prueba(){
console.log( this === window);
}
prueba();
- Otro Contexto:
var usuario = {
nombre : 'Yo',
apellido : 'Mismo',
nombreCompleto : this.nombre + this.apellido,
metodoNombre: function(){
return this.nombre + " " + this.apellido
},
valorThis: function (){
console.log(this);
}
}
console.log(usuario.nombreCompleto); // ERROR - Undefined -> this=window
console.log(usuario.metodoNombre()); // this=usuario
usuario.valorThis(); // this=usuario
Recursos
- Entendiendo de verdad
this
en Javacript con Jorge Barrachina - MDN | This
- La palabra clave this en JavaScript
- Entendiendo el significado de ‘this’ en JavaScript
- La palabra this y el contexto en Javascript
- Why THIS is so powerful in JavaScript
Usando this
correctamente
var objeto = {
valor: 0,
incrementar: function(incremento){
this.valor += incremento;
}
};
objeto.incrementar(6);
console.log("objeto.valor:", objeto.valor) //6
Empiezan los problemas con this
por el scope
var objeto = {
valor: 0,
incrementar: function(incremento){
function otraFuncion(unValor){
this.valor += unValor;
}
otraFuncion(incremento);
}
};
objeto.incrementar(6);
console.log("objeto.valor:", objeto.valor) //0!!
_self
al rescate
var objeto = {
valor: 0,
incrementar: function(incremento){
var _self = this;
function otraFuncion(unValor){
_self.valor += unValor;
}
otraFuncion(incremento);
}
};
objeto.incrementar(6);
console.log("objeto.valor:", objeto.valor) //6
Recursos
- Nos permite hacer un código muy modular
- Nos permite crear mucho código reutilizable
- Existen tres formas de modificar el contexto
call()
Nos devuelve la ejecución con el contexto cambiado (this), documentaciónapply()
Nos devuelve la ejecución con el contexto cambiado (this), documentaciónbind()
Nos devuelve una nueva funcion con el contexto modificado (this), documentacióncall()
yapply()
se diferencian por como se pasan los argumentos a la función que modificamos
Ejemplo Sencillo
var objeto = {
multiplicador: 2,
sumatorio: function(num1, num2){
return (num1 + num2) * this.multiplicador;
}
};
var objeto_de_cambio = {
multiplicador: 5
};
var resultado = objeto.sumatorio(2,2);
console.log(resultado); // 8
/* -- Tres formas de lograr lo mismo -- */
var resultado_call = objeto.sumatorio.call(objeto_de_cambio, 5, 5);
var resultado_apply = objeto.sumatorio.apply(objeto_de_cambio, [5,5]);
var cambiandoFuncion = objeto.sumatorio.bind(objeto_de_cambio);
console.log(resultado_call); // 50
console.log(resultado_apply); // 50
console.log(cambiandoFuncion(5, 5)); // 50
Ejemplo más real
var usuarios = [{
nombre: "Yo",
apellido: "Mismo",
user: "me"
}, {
nombre: "Doctor",
apellido: "Maligno",
user: "MrEvil"
}];
function nombreCompleto (){
console.log( this.nombre + ' ' + this.apellido + ' (@'+this.user+')' );
}
function premium (isPremium, until) {
var user = '@'+this.user;
console.log( isPremium ? user + " es premium hasta "+ until : user + " NO es premium");
}
nombreCompleto() //Error (window...) // undefined undefined (@undefined)
nombreCompleto.apply(usuarios[1]) // Doctor Maligno (@MrEvil)
premium.apply(usuarios[1], [true, 'Mayo']) // @MrEvil es premium hasta Mayo
premium.call(usuarios[0], true, 'Enero') // @me es premium hasta Enero
premium.call(usuarios[0], false) // @me NO es premium
Las claves
- Puede ser complejo de entender si vienes de lenguajes Orientados a Objetos
- Todo es prototype de algo, incluido el propio core de JavaScript
- Nunca debes modificar metodos de objetos nativos
- La modificación del prototipo se extiende a todo el sistema
Uso de prototype
var elementosDom = document.querySelectorAll('div');
var elementos = Array.prototype.slice.call(elementosDom);
Extensión de objetos nativos
var amigosOriginales = ["Charlie", "Marco", "Oscar"];
amigosOriginales.coincidencias("Jose"); //amigosOriginales.coincidencias is not a function
Array.prototype.coincidencias = function(palabra) {
var coincidencias = 0;
//
for (var i=0; i<this.length; i++) {
if (this[i] == palabra) {
coincidencias++;
}
}
console.warn("Se encontraron "+coincidencias+" coincidencia(s) de la palabra");
};
var amigos = ["Charlie", "Marco", "Luis", "Jose", "Miguel", "Jose", "Luis", "Oscar"];
amigos.coincidencias("Jose"); // Se encontraron 2 coincidencia(s) de la palabra
amigosOriginales.coincidencias("Jose"); // Se encontraron 0 coincidencia(s) de la palabra
Recursos
- Wikipedia | Programación basada en prototipos
- MDN | Herencia y la cadena de prototipos
- MDN | Inheritance in JavaScript
- Decoding the Prototypal Inheritance in JavaScript: Everything you need to know!
- Javascript inheritance behind the scene proto, [[prototype]] and prototype
- Stackoverflow | proto VS. prototype in JavaScript
- JavaScript Prototype Explained By Examples
- Quora | What is the difference between "proto" and "prototype"?
- JavaScript's Pseudo Classical Inheritance diagram
- Master the JavaScript Interview: What’s the Difference Between Class & Prototypal Inheritance?
- Prototypal inheritance
- Understanding JavaScript: Prototype and Inheritance
- Demystifying ES6 Classes And Prototypal Inheritance
- A Definitive Guide to JavaScript Prototypes
Importante saber
- La variables primitivas (Undefined, Null, Boolean, Number y String) se copian por valor.
- Los objetos se copian por referencia (shallow copy), no es una copia real.. solo otra forma de llamarlo
- Para clonar objetos, necesitaremos hacer una recreación completa (deep copy) desde cero.
El problema de los punteros
var primitivo1 = "BANANA";
var primitivo2 = primitivo1;
primitivo2 = "MANDARINA";
console.log(primitivo1); //"BANANA"
console.log(primitivo2); //"MANDARINA"
// ¯\_(ツ)_/¯
var array1 = [1, 2, 3];
var array2 = array1;
array2.push("MANDARINA");
console.log(array1); //[1, 2, 3, "MANDARINA"]
console.log(array2); //[1, 2, 3, "MANDARINA"]
El problema de las estructuras circulares
var kom256 = {
nombre: "Ulises",
rol: "profesor",
curso: "Master de JS y Node",
amigos: []
};
var codingCarlos = {
nombre: "Carlos",
rol: "profesor",
curso: "Master de JS y Node",
amigos: []
};
var josheriff = {
nombre: "José Manuel",
rol: "profesor",
curso: "Curso de JS",
amigos: []
}
codingCarlos.amigos = [kom256, josheriff];
kom256.amigos = [codingCarlos, josheriff];
josheriff.amigos = [kom256, codingCarlos];
Posibles Soluciones
- Iterando propiedades con bucles, las propiedades de tipo objeto sera copiadas por referencia
JSON.parse
ignora funciones y objetos con estructuras circulares- En ES6 con
Object.assign()
, spread operator(...), etc... - Librerias:
$.extend
,_.CloneDeep
,_.Clone
var array1 = [1, 2, 3];
var array2 = JSON.parse(JSON.stringify(array1));
array2.push("MANDARINA");
console.log(array1); //[1, 2, 3]
console.log(array2); //[1, 2, 3, "MANDARINA"]
Recursos