map에 대해서는 알고 있지만 Array.from()는 생소하기도 했고 map과의 차이가 궁금해 공부하면서 배운 내용을 정리
Array.from()
Array.from() 메소드는 유사 배열 객체나 반복 가능한 객체를 얕게 복사하여 새로운 배열을 생성하고, 배열 형태의 객체나 이터러블 객체를 받아서 새로운 배열을 만들어 반환합니다.
• Array.from(arrayLike)
arrayLike - 배열로 변환할 순회 가능 또는 유사 배열 객체.
• Array.from(arrayLike, mapFn)
mapFn - 배열의 모든 요소에 대해 호출할 함수.
이 함수는 다음 인수를 사용하여 호출됩니다.
element
배열에서 처리 중인 현재 요소.
index
배열에서 처리 중인 현재 요소의 인덱스.
• Array.from(arrayLike, mapFn, thisArg)
thisArg - mapFn 실행 시에 this로 사용할 값.
기본 사용법
// 문자열을 배열로 변환
const str = 'hello';
const strArray = Array.from(str);
// 결과: ['h', 'e', 'l', 'l', 'o']
// 유사 배열 객체를 배열로 변환
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const newArray = Array.from(arrayLike);
// 결과: ['a', 'b', 'c']
// 이터러블 객체를 배열로 변환
const iterable = new Set([1, 2, 3]);
const setArray = Array.from(iterable);
// 결과: [1, 2, 3]
두 번째 매개변수(mapFn)인 변환 함수로 각 요소를 변환
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const newArray = Array.from(arrayLike, (value) => value.toUpperCase());
// 결과: ['A', 'B', 'C']map과의 차이
map과 Array.from은 비슷한 역할을 하는 것처럼 보일 수 있지만, 각각의 주요 목적과 동작 방식에는 몇 가지 차이가 있다.
-
Array.from()은 유사 배열이나 이터러블 객체를 배열로 변환하는데 주로 사용.
-
map()은 배열 내의 각 요소에 함수를 적용하여 새로운 배열을 생성하는 데 주로 사용.
-
Array.from()은 변환 함수 및 컨텍스트를 사용하여 더 복잡한 변환을 수행할 수 있다.
-
map()은 배열에만 사용할 수 있다.
map()과 Array.from() 둘다 ES6 문법이고
• Array.from()은 배열과 유사 배열 객체, 이터러블 객체를 배열로 변환하기 위한 메서드로 사용
• map()은 기존 배열의 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성하는데 사용
