Published
Edited
Sep 14, 2022
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const a = 5;
const b = 10;
return `Fifteen is ${a + b} and not ${2 * a + b}.`;
}
Insert cell
Insert cell
Object.assign({ a: 1, b: 41 }, { a: 2, c: 30 })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
123 ** 2
Insert cell
Insert cell
{
const list = ["oscar", "David", "Ana"];
// case sensible
return list.includes("Oscar"); // false
}
Insert cell
{
let numbers = [1, 3, 4, 6, 7, 8];
return numbers.includes(7); // true
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
async function f() {
return Promise.resolve(1);
}

return await f();
}
Insert cell
Insert cell
Object.entries(obj)
Insert cell
Insert cell
Object.keys(obj)
Insert cell
Insert cell
Object.values(obj)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
/* Operador de reposo / Rest Operator */
const obj = {
name: "santiago",
age: 19,
country: "CO"
};

let { name, ...all } = obj;
return name, all; // santiago { age: 19, country: 'CO' }
}
Insert cell
Insert cell
Insert cell
Insert cell
{
const map = new Map([
["a", 1],
["b", 2],
["c", 3]
]);
const obj = Object.fromEntries(map);

return obj;
}
Insert cell
Insert cell
{
const saludo = " hola ";
const result1 = saludo.trim();
const result2 = saludo.trimStart();
const result3 = saludo.trimEnd();

return {
result1,
result2,
result3
};
}
Insert cell
Insert cell
Insert cell
Insert cell
{
const adventurer = {
name: "Alice",
cat: {
name: "Dinah"
}
};

const dogName = adventurer.dog?.name;
dogName;
// expected output: undefined

adventurer.someNonExistentMethod?.();
// expected output: undefined

return adventurer?.cat;
}
Insert cell
Insert cell
Insert cell
{
const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);
// ↪ 9007199254740991n

const maxPlusOne = previousMaxSafe + 1n;
// ↪ 9007199254740992n

const theFuture = previousMaxSafe + 2n;
// ↪ 9007199254740993n, this works now!

const multi = previousMaxSafe * 2n;
// ↪ 18014398509481982n

const subtr = multi - 10n;
// ↪ 18014398509481972n

const mod = multi % 10n;
// ↪ 2n

const bigN = 2n ** 54n;
// ↪ 18014398509481984n

return bigN * -1n;
// ↪ -18014398509481984n
}
Insert cell
Insert cell
Insert cell
Insert cell
{
let [a, b] = [null, 4];
// "Or Or Equals" (or, the Mallet operator :wink:)
// a || (a = b);
return [(a ||= b), (b ||= a)];
}
Insert cell
{
let [a, b] = [true, 4];
// "And And Equals"
// a && (a = b);
return (a &&= b);
}
Insert cell
{
let [a, b] = [2, 4];
// "QQ Equals"
// a ?? (a = b);
return (a ??= b);
}
Insert cell
Insert cell
Insert cell
Insert cell
["apple", "orange", "strawberry"].at(0)
Insert cell
Insert cell
{
const response = await fetch("https://api.escuelajs.co/api/v1/products");
const products = await response.json();

return { products };
}
Insert cell
Insert cell
{
const array = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }];

array.find((n) => n.value % 2 === 1); // { value: 1 }
array.findIndex((n) => n.value % 2 === 1); // 0

// ======== Before the proposal ===========

// find
[...array].reverse().find((n) => n.value % 2 === 1); // { value: 3 }

// findIndex
array.length - 1 - [...array].reverse().findIndex((n) => n.value % 2 === 1); // 2
array.length - 1 - [...array].reverse().findIndex((n) => n.value === 42); // should be -1, but 4

// ======== In the proposal ===========
// find
return array.findLast((n) => n.value % 2 === 1); // { value: 3 }

// findIndex
array.findLastIndex((n) => n.value % 2 === 1); // 2
array.findLastIndex((n) => n.value === 42); // -1
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more