서론:

forEach, filter, map, some과 같은 배열 메서드를 사용하여 비배열 데이터 유형을 처리해야 하는 경우가 종종 있습니다. 이러한 시나리오에서는 비배열을 배열로 변환해야 하며, 이를 위해 Array.from(), Array.of(), 그리고 전개 연산자(spread operator)를 사용할 수 있습니다. 이 세 가지 변환 방법은 각각 다른 변환 대상을 가집니다.

•Array.from():

Array.from() 메서드는 객체를 실제 배열로 변환할 수 있습니다. 여기에는 두 가지 유형의 객체가 포함됩니다: 유사 배열 객체(iterable-like object)와 반복 가능한 객체(iterable object)

>>유사 배열 객체 변환 예시

유사 배열 객체는 0, 1과 같은 숫자를 키로 사용하는 형태의 객체입니다. Array.from()을 사용하면 해당 값이 배열 형태로 변환됩니다.

　　let listLikeObj = {
    　　"0":"사용자A",//키는 0부터 시작해야 하며, length는 키의 개수와 같아야 합니다
     　 "1":"사용자B",
    　　"2":"사용자C",
    　　length:3
　　};

    let realArray = Array.from(listLikeObj)
    console.log(realArray) //["사용자A","사용자B","사용자C"]

>>유사 배열 객체 변환 활용

개발 과정에서 DOM을 조작할 때 노드 목록(node list)을 사용하게 되는데, document.querySelectorAll()을 통해 가져온 것은 유사 배열 객체입니다. 다음 예시에서 볼 수 있듯이, 노드 목록은 유사 배열 객체이므로 forEach나 filter와 같은 배열 메서드를 직접 사용할 수 없습니다.

let elements = document.querySelectorAll("div")
console.log(elements)
//NodeList(10) [div, div, div, div, div, div, div, div, div, div]
typeof elements //object
//Array.from을 사용해야 실제 배열로 변환됩니다
let realElements = Array.from(elements)
//[div, div, div, div, div, div, div, div, div, div]

>>반복 가능한 객체 변환 예시

Array.from()은 문자열, Map, Set과 같은 반복 가능한 객체도 실제 배열로 변환할 수 있습니다.

let text = '안녕하세요'
let charArray = Array.from(text)
console.log(charArray)//['안','녕','하','세','요']

>>Array.from()의 두 번째 매개변수

두 번째 매개변수는 배열의 map 메서드와 유사하며, 변환된 데이터의 각 요소를 처리하는 콜백 함수로 사용될 수 있습니다.

let text = "JavaScript"
let processedText = Array.from(text, (char) => {
    return char + '✨'
})
console.log(processedText) // [ 'J✨', 'a✨', 'v✨', 'a✨', 'S✨', 'c✨', 'r✨', 'i✨', 'p✨', 't✨' ]

위 예시에서는 문자열 처리를 시뮬레이션했으며, 이 방식을 사용하여 사용자 입력을 처리하거나 악의적인 입력을 방어하는 데 활용할 수 있습니다.

****•Array.of()

Array.of()는 일련의 값을 배열로 변환합니다. 실제 응용 분야는 배열 초기화입니다.

let sampleArray = Array(4, 5, 6)
console.log(sampleArray)   //[4,5,6]<br></br>　<strong>위에서 본 Array()도 동일한 작업을 수행하지만, Array.of()는 배열 생성자(Array constructor)의 한계를 보완합니다</strong><br></br>let emptyArray = new Array(3) console.log(emptyArray) // [ <3 empty items> ]<br></br>let anotherArray = new Array(7, 8, 9); console.log(anotherArray); // [ 7, 8, 9 ] <br></br>Array.of()<br></br>const singleElement = Array.of(10) //[10]

****•전개 연산자 (Spread Operator)

전개 연산자를 사용하여 반복 가능한 객체를 실제 배열로 변환할 수 있습니다.

[...document.querySelectorAll("li")]
//(15) [li, li, li, li, li, li, li, li, li, li, li, li, li, li, li]