<script>
console.log("Hola Mundo 🔥")
</script>
<script src="..."></script>
<script defer src="..."></script>
<noscript>
JavaScript desactivado ⚠️
</noscript>
var favorito // Declaracióm
favorito = 66 // Inicialización
favorito = "Juan" // Reasignación
console.log(nombre) // 🤔
var nombre = "Juan"
saludar() // "Hola 👋"
function saludar() {
console.log("Hola 👋")
}
var nombre = "Juan"
function saludar() {
console.log("Hola " + nombre)
}
saludar() // "Hola Juan"
{
let nombre = "Juan"
}
console.log(nombre) // nombre is not defined
for (let i = 0; i <= 100; i++) {
console.log(i)
}
console.log(i) // i is not defined
// Cannot access 'nombre' before initialization
console.log(nombre)
let nombre = "Juan"
const edad = 77
const persona = "Juan"
persona += " Núñez" // 🤔
{
const nombre = "Juan"
}
console.log(nombre) // ⚠️
function saludar() {
console.log("Hola me llamo Juan")
}
const saludar = function () {
console.log("Hola me llamo Juan")
}
const saludar = () => {
console.log("Hola me llamo Juan")
}
function saludar(nombre) {
console.log("Hola me llamo " + nombre)
}
function saludar(nombre, apellido = "Núñez") {
console.log(`Soy ${nombre} ${apellido}`);
}
function checkOut(...prices) {
Array.isArray(prices) // 💪
const total = prices.reduce((acc, curr) => acc + curr)
console.log(total)
}
function checkOut(...prices) {
Array.isArray(prices) // 💪
return prices.reduce((acc, curr) => acc + curr)
}
const total = checkOut("Juan", 13, 343, 123, 432) // 911
function soyUnClosure() {
const variableLocal = "Juan"
return function() {
return variableLocal.toUpperCase()
}
}
function pedirPizzaUID(UID) {
const ID = `${UID}-${Math.random()}`
return function (pizza) {
return `${ID}_${pizza}`
}
}
function pedirPizzaUID(UID) {
let cantidadPizzas = 0
const ID = `${UID}-${Math.random()}`
return function (pizza) {
cantidadPizzas++
return `${ID}_${pizza}_${cantidadPizzas}`
}
}
(function() {
// Haz cosas...
})()
for(var i = 0; i < 10; i++) {
console.log(i);
setTimeout(function() {
console.log('El número es ' + i);
},1000);
}
const Person = (function(person){
const name = person || "Juan"
let distance = 0;
function greet() {
console.log("Hola me llamo " + name)
}
function run() {
distance++
console.log(`${name} ran ${distance} km`)
}
return {
greet, run
}
})("Andrés")
function miFuncion(fn) {
// Callback
fn()
}
[1, 2, 3, 4, 5].forEach(recorrer)
// Función declarada que se usa como
// callback
function recorrer(numero) {
console.log(numero)
}
setTimeout(saludar, 2000)
// Función declarada que se usa como
// callback
function saludar() {
console.log("HOLA")
}
var nombre = "Juan"
function saludar() {
console.log(this.nombre) // 🤔
}
saludar()
var nombre = "Juan"
const persona = { nombre: "Andrés"}
function saludar() {
console.log(this.nombre) // 🤔
}
saludar.call(persona)
var nombre = "Juan"
const objeto = {
nombre: "Andrés",
saludar() {
console.log(this.nombre)
}
}
const funcion = objeto.saludar
funcion() // 🤔
var nombre = "Juan"
const objeto = {
nombre: "Andrés",
saludar() {
setTimeout(function() {
console.log(this.nombre)
}.bind(this), 1000
}
}
objeto.saludar() // 🤔
const dias = ["lunes", "martes", "miércoles"]
const dias = ["lunes", "martes", "miércoles"]
const diasCopia = dias
console.log(dias === diasCopia) // true
console.log([] === []) // 🤔
const tags = ["terror", "aventura", "suspense"]
tags[0] = "horror"
tags[tags.length - 1] = "scifi"
// [ 'horror', 'aventura', 'suspense', '-1': 'scifi' ]
const tags = ["terror", "aventura", "suspense"]
tags = [] // Error de reasignación a constante
tags.length = 0
tags.splice(0, tags.length)
const libros = [["IT", 7], ["El Terror", 9], ["El Exorcista", 10]]
// Acceder a "El Terror"
const titulo = libros[1][0]
const precio = libros[1][1]
// Otra forma
const libro = libros[1]
const titulo = libro[0]
const precio = libro[1]
const libros = [["IT", 7], ["El Terror", 9], ["El Exorcista", 10]]
// Acceder a "El Terror"
const [ , libro] = libros
const [titulo, precio] = libro
// Otra forma
const [ , [titulo, precio] ] = libros
const libros = [["IT", 7], ["El Terror", 9], ["El Exorcista", 10]]
// Acceder a "IT"
const [ IT, ...resto ] = libros
// IT = [ 'IT', 7 ]
// resto = [ [ 'El Terror', 9 ], [ 'El Exorcista', 10 ] ]
const colores = ["rojo", "verde", "azul"]
colores.unshift("turquesa")
// [ 'turquesa', 'rojo', 'verde', 'azul' ]
const colores = ["rojo", "verde", "azul"]
const colores2 = ["turquesa", ...colores]
// [ 'turquesa', 'rojo', 'verde', 'azul' ]
const colores = ["rojo", "verde", "azul"]
colores.push("turquesa")
// [ 'rojo', 'verde', 'azul', 'turquesa' ]
const colores = ["rojo", "verde", "azul"]
const colores2 = [...colores, "turquesa"]
// [ 'rojo', 'verde', 'azul', 'turquesa' ]
const colores = ["rojo", "verde", "azul"]
const nuevoColor = "amarillo"
colores.splice(2, 0, nuevoColor)
// [ 'rojo', 'verde', 'amarillo', 'azul' ]
const colores = ["rojo", "verde", "azul"]
const nuevoColor = "amarillo"
const colores2 = [
...colores.slice(0, 2), // rojo, verde
nuevoColor,
...colores.slice(2) // azul
]
// [ 'rojo', 'verde', 'amarillo', 'azul' ]
const colores = ["rojo", "verde", "azul"]
const rojo = colores.shift()
// [ 'verde', 'azul' ]
const colores = ["rojo", "verde", "azul"]
const colores2 = [...colores.slice(1)]
// [ 'verde', 'azul' ]
const colores = ["rojo", "verde", "azul"]
const azul = colores.pop()
// [ 'rojo', 'verde' ]
const colores = ["rojo", "verde", "azul"]
const colores2 =
[...colores.slice(0, colores.length -1)]
// [ 'rojo', 'verde' ]
const colores = ["rojo", "verde", "azul"]
const index = 1
const colores2 =
[...colores.slice(0, index),
...colores.slice(index +1)]
// [ 'rojo', 'azul' ]
const colores = ["rojo", "verde", "azul"]
const indice = colores.indexOf("verde") // 1
const colores = ["rojo", "verde", "azul"]
const esRojo = colores.includes("verde") // true
const colores = [
{ id: 1, nombre: "rojo"},
{ id: 2, nombre: "verde"},
{ id: 3, nombre: "azul"},
]
const indice = colores
.findIndex(color =>
color.nombre === "verde")
const colores = [
{ id: 1, nombre: "rojo"},
{ id: 2, nombre: "verde"},
{ id: 3, nombre: "azul"},
]
const azul = colores.find(
color => color.nombre === "azul")
const original = ["rojo", true, 99]
const copia = [...original]
copia[1] = false
//[ 'rojo', true, 99 ] [ 'rojo', false, 99 ]
const original = [
{ id: 1, nombre: "rojo"},
{ id: 2, nombre: "verde"},
{ id: 3, nombre: "azul"},
]
const copia = Array.from(original)
original[0].id = 666
const cats = ['Nino', 'Guizmo', 'Milo'];
const moreCats = ['Tina', 'Moma', 'Mila'];
const allCats = [...cats, ...moreCats]
const allCats = cats.concat(moreCats)
const evenMoreCats
= [].concat(cats, moreCats, ["Milo"]);
const array = []
typeof array // object 😅
array instanceof Array // ✅
Array.isArray(array) // ✅
const cat = {
name: "Guizmo",
color: "black"
}
const cat = {
...
address: {
city: "Valencia",
postacolde: 42157
}
}
const address = {
city: "Valencia",
postacolde: 42157
}
console.log(address.city)
const user = {
rol: 'Developer',
team: 'FE',
};
// "Deprecated"
const person = new Object({ name: 'Juan' });
const user = { rol: 'Developer' };
const userReference = user;
userReference.name = 'Juan';
console.log(user) 🤔
const person = {
name: "Juan"
}
person.surname = "Andrés"
...
person.sayHello = function() {
console.log(`Hi, I'm ${this.name}`)
}
const person = {
name: 'Juan',
sayHello: function () {
console.log(`Hi, I'm ${this.name}`);
},
};
person.sayHello();
const person = {
name: 'Juan',
'skill 1': 'JavaScript',
sayHello: function () { ... },
};
person['skill 1'];
const person = {
name: 'Juan',
sayHello() {
console.log(`Hi I'm ${this.name}`)
}
};
const user = {
name: 'Juan',
greet() {
console.log(this.name);
},
};
user.greet.call({ name: 'Guizmo' });
const user = {
name: 'Juan',
greet: () => console.log(this.name),
};
user.greet() // undefined
const persona = {
nombre: 'Juan',
profesion: 'Dev',
ciudad: 'Valencia',
};
Object.keys(persona)
.forEach((key) => console.log(key));
const persona = {
nombre: 'Juan',
profesion: 'Dev',
};
for (const value of Object.values(persona)) {
console.log(value);
}
const persona = {
nombre: 'Juan',
profesion: 'Dev',
};
for (const [key, value] of Object.entries(persona)) {
console.log(key, value);
}
const product = {
id: 785679,
name: "PlayStation 5",
color: "white",
price: {
sale: 499,
full: 599,
},
};
const color = product.color;
const sale = product.price.sale; // 🫠
const product = {
id: 785679,
name: "PlayStation 5",
color: "white",
price: {
sale: 499,
full: 599,
},
};
const { id, color } = product;
const product = {
id: 785679,
name: "PlayStation 5",
color: "white",
price: {
sale: 499,
full: 599,
},
};
const { price: { sale, full } } = product;
const product = {
id: 785679,
name: "PlayStation 5",
color: "white",
...
};
const id = "Another ID"
const { id:productId, color } = product;
const product = {
id: 785679,
name: "PlayStation 5",
color: "white",
...
};
const { color, id, price: { sale }, ...rest } = product
const product = {
id: 785679,
name: "PlayStation 5",
color: "white",
};
const price = {
sale: 499,
full: 599,
};
const merged = Object.assign({}, product, price)
const product = {
id: 785679,
name: "PlayStation 5",
color: "white",
};
const price = {
sale: 499,
full: 599,
};
const merged = {...product, ...price}
const product = {
name: "PlayStation 5",
data: {
color: "white",
},
};
const price = { sale: 499 };
const merged = { ...product, ...price };
merged.data.color = "red";
console.log(product.data.color); // red ⚠️
const product = {
name: "PlayStation 5",
data: {
color: "white",
},
};
const price = { sale: 499 };
const merged = { ...product, ...price };
const deepCloned = JSON.parse(JSON.stringify(merged));
a > b, b > a // Mayor o menor que
c >= d, c <= d // Mayor o igual que
e = f // Asignación
g == h // Comparación
i != j // Distinto
150 >= 100 // true
"Juan" == "Juan"; // true
"Juan" < "Joan"; // false
"Juan" < "juan"; // true 🤔
"122" == 122; // true
12 > "11" // true
0 == false // true
'' == false // true
"122" === 122; // false
0 === false // false
'' === false // false
null == undefined // 🤔
undefined == 0 // 😢