Array.from()

console.log(Array.from("foo"));
// : Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x));
// : Array [2, 4, 6]

Array.from(items)
Array.from(items, mapFn)
Array.from(items, mapFn, thisArg)

Array.from("foo");
// [ "f", "o", "o" ]

const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]

const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([
  ["1", "a"],
  ["2", "b"],
]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

// DOM 
const images = document.querySelectorAll("img");
const sources = Array.from(images, (image) => image.src);
const insecureSources = sources.filter((link) => link.startsWith("http://"));

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

// 
// 
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// 
//  `undefined` 
//  `v`  `undefined` 
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

// Python  Clojure  "range" 
const range = (start, stop, step) =>
  Array.from(
    { length: Math.ceil((stop - start) / step) },
    (_, i) => start + i * step,
  );

// 0  5 1 
range(0, 5, 1);
// [0, 1, 2, 3, 4]

// 1  10 2 
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// 
range("A".charCodeAt(0), "Z".charCodeAt(0) + 1, 1).map((x) =>
  String.fromCharCode(x),
);
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

function NotArray(len) {
  console.log("NotArray called with length", len);
}

// 
console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"])));
// NotArray  length  undefined 
// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 }

// 
console.log(Array.from.call(NotArray, { length: 1, 0: "foo" }));
// NotArray called with length 1
// NotArray { '0': 'foo', length: 1 }

console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ]