JavaScript Array.From() 메소드 쉽게 사용하기, 예제 소스 코드 제공

JavaScript Array.From() 메소드 쉽게 사용하기, 예제 소스 코드 제공

 

 

자바스크립트에서 배열 변환은 종종 필요한 작업 중 하나입니다. Array.from() 메소드는 유사 배열 객체나 이터러블(iterable) 객체를 배열로 간단하게 변환할 수 있는 강력한 도구입니다. 이 글에서는 Array.from() 메소드의 정의, 사용법, 그리고 예시 코드를 통해 이해해보겠습니다.

 

 

Array.from() 메소드란 무엇인가?

 

Array.from() 메소드는 ECMAScript 6(ECMAScript 2015)에서 도입되었으며, 배열로 변환하고자 하는 유사 배열 객체나 이터러블 객체를 입력으로 받아 새로운 배열을 반환합니다. 이 메소드는 이터러블한 모든 객체에 사용할 수 있으며, 자주 사용되는 유용한 배열 변환 기능을 제공합니다.

 

 

 

Array.from() 메소드의 사용법

 

Array.from() 메소드는 다음과 같이 사용합니다

 

Array.from(arrayLike[, mapFunction[, thisArg]])

 

• arrayLike: 배열로 변환하고자 하는 유사 배열 객체나 이터러블 객체.
• mapFunction (선택 사항): 배열의 각 요소에 적용할 함수.
• thisArg (선택 사항): mapFunction에서 사용할 this 값.

 

JavaScript Enter 누를 때 검색 기능 로직 - 활용 소스 코드 제공

 

Array.from() 메소드의 예시 코드

 

유사 배열 객체를 배열로 변환하기

var arrayLike = { 0: '사과', 1: '바나나', 2: '체리', length: 3 };

var arr = Array.from(arrayLike);
console.log(arr); // ['사과', '바나나', '체리']

 

위 코드에서 Array.from() 메소드는 유사 배열 객체인 arrayLike를 배열로 변환하고 있습니다.

 

이터러블 객체를 배열로 변환하기

var set = new Set(['사과', '바나나', '체리']);
var arr = Array.from(set);
console.log(arr); // ['사과', '바나나', '체리']

 

이 예시에서는 Set 객체를 Array.from() 메소드를 사용하여 배열로 변환했습니다.

 

 

mapFunction 활용

 

Array.from() 메소드의 두 번째 매개변수로 mapFunction을 전달할 수 있습니다. 이 함수를 사용하여 배열의 각 요소를 가공하거나 변환할 수 있습니다.

 

 

var numbers = [1, 2, 3, 4, 5];

var squaredNumbers = Array.from(numbers, x => x * x);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

 

위 코드에서 mapFunction은 배열의 각 요소를 제곱하여 새로운 배열을 생성합니다.

 

 

끝으로

 

Array.from() 메소드는 유사 배열 객체나 이터러블 객체를 간단하게 배열로 변환하는 데 사용됩니다. 이 메소드는 다양한 상황에서 유용하며, 배열을 다루는 작업을 더 편리하게 만들어줍니다. Array.from()을 활용하여 코드를 간결하게 작성하고, 다양한 데이터 형식을 배열로 변환할 수 있습니다.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 페이지 새로고침 후 검색 입력란에 커서 자동 위치시키기

 

JavaScript 콜백함수 사용법, 콜백 지옥, 에러 처리, 관련 소스 코드