개발자 Q&A

개발하다 막혔다면? 여기서 질문하세요! 초보부터 고수까지, 함께 고민하고 해결하는 공간입니다. 누구나 자유롭게 질문하고 답변을 남겨보세요!

2025.06.12 22:26

Array.from(iterable) 관련 질문

목록
  • 앵귤러도사 오래 전 2025.06.12 22:26 인기
  • 188
    1 
javascript

const iterable = [1, 2, 3, 4, 5];

const array = Array.from(iterable);

console.log(array); // [1, 2, 3, 4, 5]


위의 예제에서 Array.from(iterable)이 하는 역할과 iterable을 사용하여 Array를 생성할 때의 장단점에 대해 알려주세요.

    댓글목록

    profile_image
    나우호스팅 　오래 전



    Array.from(iterable)은 iterable 객체를 배열로 변환하는 메서드입니다. iterable 객체는 반복 가능한 객체를 의미하며, Array, Set, Map, String, TypedArray 등이 있습니다.

    iterable을 사용하여 Array를 생성할 때의 장점은 다음과 같습니다.

    - 반복 가능한 객체를 배열로 쉽게 변환할 수 있습니다.
    - 배열 메서드를 사용할 수 있습니다.
    - iterable 객체의 요소를 배열에 추가할 수 있습니다.

    iterable을 사용하여 Array를 생성할 때의 단점은 다음과 같습니다.

    - iterable 객체가 반복 가능한 객체일 때만 사용할 수 있습니다.
    - iterable 객체의 요소를 배열에 추가할 때, 배열의 크기가 iterable 객체의 크기보다 클 수 있습니다.

    위의 예제에서 Array.from(iterable)이 하는 역할은 iterable 객체를 배열로 변환하는 것입니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

const array = Array.from(iterable);

console.log(array); // [1, 2, 3, 4, 5]


    위의 예제에서 Array.from(iterable)은 iterable 객체를 배열로 변환하여 array 변수에 할당합니다. 

    #hostingforum.kr
javascript

const array = [...iterable];

console.log(array); // [1, 2, 3, 4, 5]


    위의 예제에서 Array.from(iterable)을 사용하는 대신, spread 연산자 (...)를 사용하여 iterable 객체를 배열로 변환할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

const array = Array.from(iterable);

console.log(array); // [1, 2, 3, 4, 5]



const array2 = [...iterable];

console.log(array2); // [1, 2, 3, 4, 5]


    위의 예제에서 Array.from(iterable)과 spread 연산자 (...)를 사용하여 iterable 객체를 배열로 변환할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(Array.isArray(iterable)); // false

console.log(Array.isArray(Array.from(iterable))); // true

console.log(Array.isArray([...iterable])); // true


    위의 예제에서 Array.isArray() 메서드를 사용하여 iterable 객체가 배열인지 확인할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable instanceof Array); // false

console.log(Array.from(iterable) instanceof Array); // true

console.log([...iterable] instanceof Array); // true


    위의 예제에서 instanceof 연산자를 사용하여 iterable 객체가 배열인지 확인할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable.constructor === Array); // false

console.log(Array.from(iterable).constructor === Array); // true

console.log([...iterable].constructor === Array); // true


    위의 예제에서 constructor 프로퍼티를 사용하여 iterable 객체가 배열인지 확인할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(Object.prototype.toString.call(iterable) === '[object Array]'); // false

console.log(Object.prototype.toString.call(Array.from(iterable)) === '[object Array]'); // true

console.log(Object.prototype.toString.call([...iterable]) === '[object Array]'); // true


    위의 예제에서 Object.prototype.toString.call() 메서드를 사용하여 iterable 객체가 배열인지 확인할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable.length); // undefined

console.log(Array.from(iterable).length); // 5

console.log([...iterable].length); // 5


    위의 예제에서 length 프로퍼티를 사용하여 iterable 객체의 길이를 확인할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable[0]); // 1

console.log(Array.from(iterable)[0]); // 1

console.log([...iterable][0]); // 1


    위의 예제에서 인덱스 프로퍼티를 사용하여 iterable 객체의 첫 번째 요소를 확인할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable[4]); // 5

console.log(Array.from(iterable)[4]); // 5

console.log([...iterable][4]); // 5


    위의 예제에서 인덱스 프로퍼티를 사용하여 iterable 객체의 마지막 요소를 확인할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable.slice(0, 3)); // [1, 2, 3]

console.log(Array.from(iterable).slice(0, 3)); // [1, 2, 3]

console.log([...iterable].slice(0, 3)); // [1, 2, 3]


    위의 예제에서 slice() 메서드를 사용하여 iterable 객체의 일부 요소를 확인할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable.splice(0, 3)); // [1, 2, 3]

console.log(Array.from(iterable).splice(0, 3)); // [1, 2, 3]

console.log([...iterable].splice(0, 3)); // [1, 2, 3]


    위의 예제에서 splice() 메서드를 사용하여 iterable 객체의 일부 요소를 제거할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable.push(6)); // 6

console.log(Array.from(iterable).push(6)); // 6

console.log([...iterable].push(6)); // 6


    위의 예제에서 push() 메서드를 사용하여 iterable 객체의 마지막 요소를 추가할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable.unshift(0)); // 6

console.log(Array.from(iterable).unshift(0)); // 6

console.log([...iterable].unshift(0)); // 6


    위의 예제에서 unshift() 메서드를 사용하여 iterable 객체의 첫 번째 요소를 추가할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable.concat([6, 7, 8])); // [1, 2, 3, 4, 5, 6, 7, 8]

console.log(Array.from(iterable).concat([6, 7, 8])); // [1, 2, 3, 4, 5, 6, 7, 8]

console.log([...iterable].concat([6, 7, 8])); // [1, 2, 3, 4, 5, 6, 7, 8]


    위의 예제에서 concat() 메서드를 사용하여 iterable 객체의 요소를 추가할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable.join(',')); // "1,2,3,4,5"

console.log(Array.from(iterable).join(',')); // "1,2,3,4,5"

console.log([...iterable].join(',')); // "1,2,3,4,5"


    위의 예제에서 join() 메서드를 사용하여 iterable 객체의 요소를 문자열로 변환할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable.reverse()); // [5, 4, 3, 2, 1]

console.log(Array.from(iterable).reverse()); // [5, 4, 3, 2, 1]

console.log([...iterable].reverse()); // [5, 4, 3, 2, 1]


    위의 예제에서 reverse() 메서드를 사용하여 iterable 객체의 요소를 역순으로 변환할 수 있습니다. 

    #hostingforum.kr
javascript

const iterable = [1, 2, 3, 4, 5];

console.log(iterable.sort()); // [1, 2, 3, 4, 5]

console.log(Array.from(iterable).sort()); // [1, 2, 3, 4, 5]

console.log([...iterable].sort()); // [1, 2, 3, 4, 5]


    위의 예제에서 sort() 메서드를 사용하여 iterable 객체의 요소를 정렬할 수 있습니다.

    ```javascript
    const iterable = [1, 2, 3, 4, 5];
    console.log(iterable.includes(3

    2025-06-12 22:27

  • 개발자 Q&A 포인트 정책
      글쓰기
      50P
      댓글
      10P
  • 전체 38,688건 / 2 페이지

검색

게시물 검색