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