YouTipJsref From
## JavaScript Array.from() Method
The `Array.from()` static method creates a new, shallow-copied `Array` instance from an array-like or iterable object.
This method is particularly useful for converting structures like Strings, Sets, Maps, NodeLists, or the `arguments` object into actual arrays, allowing you to use standard array methods (like `.map()`, `.filter()`, or `.forEach()`).
---
## Syntax
```javascript
Array.from(arrayLike, mapFunction, thisValue)
```
### Parameters
| Parameter | Required / Optional | Description |
| :--- | :--- | :--- |
| `arrayLike` | **Required** | An array-like object (an object with a `length` property and indexed elements) or an iterable object (such as a `Map` or `Set`) to convert to an array. |
| `mapFunction` | *Optional* | A map function to call on every element of the array. If provided, every value added to the array is first passed through this function. |
| `thisValue` | *Optional* | Value to use as `this` when executing the `mapFunction`. |
### Return Value
* **Type:** `Array`
* **Description:** A new `Array` instance containing the elements from the source object.
---
## Browser Support
The numbers in the table specify the first browser version that fully supports this method:
| Method | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `Array.from()` | 45.0 | 12.0 | 32.0 | 9.0 | 25.0 |
---
## Code Examples
### 1. Creating an Array from a String
A string is an iterable object, so `Array.from()` splits it into an array of individual characters.
```javascript
// Create an array from a string
const myArr = Array.from("YOUTIP");
console.log(myArr);
// Output: ["Y", "O", "U", "T", "I", "P"]
```
### 2. Creating an Array from a Set
You can easily convert a `Set` collection into a standard array.
```javascript
const setObj = new Set(["a", "b", "c"]);
const objArr = Array.from(setObj);
console.log(objArr === "b");
// Output: true
```
### 3. Using a Map Function (with Arrow Syntax)
You can pass a mapping function as the second argument to manipulate elements during the array creation process.
```javascript
// Double each number during array creation
const arr = Array.from([1, 2, 3], x => x * 10);
console.log(arr);
// Output: [10, 20, 30]
```
### 4. Generating a Sequence (Range) of Numbers
By passing an object with a `length` property, you can generate arrays of specific sizes.
```javascript
// Generate an array of numbers from 0 to 4
const range = Array.from({ length: 5 }, (value, index) => index);
console.log(range);
// Output: [0, 1, 2, 3, 4]
```
---
## Technical Details
* **ECMAScript Version:** ES6 (ECMAScript 2015)
* **Shallow Copy:** `Array.from()` creates a shallow copy. If the source object contains nested objects or arrays, references to those nested objects are copied, not the objects themselves.
* **Alternative to `Array.prototype.map()`:** Using `Array.from(obj, mapFn, thisArg)` is cleaner and more performant than creating an intermediate array and then calling `.map()`, because it does not build a temporary array that immediately gets discarded.