IT/Javascript

[Javascript] 숫자를 배열로 변경하는 2가지 방법 (Array.from(), split())

hi.anna 2022. 6. 4. 19:31

 

이번 포스팅에서는

Javascript에서 숫자를 배열로 바꾸는 2가지 방법을 소개합니다.

 

  1. Array.from()
  2. split(), map()

 

 

1. Array.from()

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

Array.from() 함수는

유사배열객체(array like object)나 반복가능한객체(iterable object)를

얕은 복사(shallow-copy)하여

새로운 Array 객체를 만들어서 리턴합니다.

 

  파라미터  

  • arrayLike
    • 필수 입력값
    • 배열로 변환하고자 하는 객체(array like object 또는 iterable object)를 입력합니다.
  • mapFn
    • 배열의 요소(element)들에 호출할 맵핑 함수.
  • thisArg
    • mapFn 내에서 this로 사용할 값

 

  리턴값  

  • 새로운 Array를 리턴한다.

 

  예제 1. 숫자 -> 배열[문자, 문자, 문자...]  

 

// 1. 문자열로 바꿀 숫자
const num = 12345;

// 2. 숫자를 유사배열객체(array like object)인
//    문자열로 변경해 줍니다.
const str = String(num);

// 3. 문자열을 배열로 변경합니다. Array.from()
const newArr = Array.from(str);

// 4. 결과 출력
// 4-1. 결과 출력
document.write(newArr); // [1, 2, 3, 4, 5]
document.write('<br>');
// 4-2. 결과가 배열 타입인지 확인
document.write(Array.isArray(newArr)); // true
document.write('<br>');
// 4-3. element의 타입 확인
document.write(typeof newArr[0]); // string

 

const str = String(num);

Array.from() 함수는 유사배열객체나 이터러블 객체를 배열로 변환하기 때문에

String() 메소드를 사용하여

숫자를 유사배열객체인 문자열로 변환하였습니다.

 

const newArr = Array.from(str);

위에서 변환한 문자열을 Array.from() 함수의 파라미터로 전달하여 호출하면

새로운 배열 객체(newArr)를 리턴합니다.

 

document.write(typeof newArr[0]);

이 때, Array.from() 함수는 문자열을 배열로 변경했기 때문에

생성된 배열의 각 element들은 string 타입입니다.

 

 

 

  예제 2. 숫자 -> 배열[숫자, 숫자, 숫자...]  

이번에는 예제1에 약간만 살을 붙여서

배열의 element 타입을 숫자로 변경해보겠습니다.

// 1. 문자열로 바꿀 숫자
const num = 12345;

// 2. 숫자를 유사배열객체(array like object)인
//    문자열로 변경해 줍니다.
const str = String(num);

// 3. mapfn 정의
// 배열의 모든 element를 숫자로 변경합니다.
const mapfn = (arg) => Number(arg);

// 4. 문자열을 배열로 변경합니다. Array.from()
// mapfn을 이용하여 element를 문자에서 숫자로 변경합니다.
const newArr = Array.from(str, mapfn);

// 5. 결과 출력
// 5-1. 결과 출력
document.write(newArr); // [1, 2, 3, 4, 5]
document.write('<br>');
// 5-2. 결과가 배열 타입인지 확인
document.write(Array.isArray(newArr)); // true
document.write('<br>');
// 5-3. element가 숫자 타입인지 확인
document.write(typeof newArr[0]); // number

 

const mapfn = (arg) => Number(arg);

이 함수는 입력받은 파라미터(arg)를

숫자로 변경하여 리턴합니다.

 

const newArr = Array.from(str, mapfn);

앞에서 생성한 mapfn을 Array.from()의 두번째 파라미터로 전달하였습니다.

Array.from()에서 생성한 배열의 element들이 

각각 mapfn의 파라미터로 전달되어 실행됩니다.

이제 배열의 각 element들은 모두 숫자타입으로 변환되어 리턴됩니다.

 

document.write(typeof newArr[0]);

리턴된 배열의 element들의 타입이 숫자임을 확인합니다.

 

 

2. split(), map()

  예제. 숫자 -> 배열[숫자, 숫자, 숫자...]  

// 1. 문자열로 바꿀 숫자
const num = 12345;

// 2. 숫자를 유사배열객체(array like object)인
//    문자열로 변경해 줍니다.
const str = String(num);

// 3. mapfn 정의
// 배열의 모든 element를 숫자로 변경합니다.
const mapfn = (arg) => Number(arg);

// 4. 문자열을 배열로 변경합니다 - split()
// 배열의 각 element를 숫자로 변경합니다. - map()
const newArr = str.split('').map(mapfn);

// 5. 결과 출력
// 5-1. 결과 출력
document.write(newArr); // [1, 2, 3, 4, 5]
document.write('<br>');
// 5-2. 결과가 배열 타입인지 확인
document.write(Array.isArray(newArr)); // true
document.write('<br>');
// 5-3. element의 타입확인
document.write(typeof newArr[0]); // number

 

const str = String(num);

숫자를 문자열로 변경합니다.

 

str.split('')

split() 함수를 사용하여

문자열을 잘라서 배열로 리턴받습니다.

이 때, 배열의 각 element의 타입은 문자열입니다.

 

map(mapfn)

split() 함수를 이용하여 생성한 배열의 각 element에

mapfn 함수를 적용하여

배열의 각 element를 숫자타입으로 변경합니다.

 

 

지금까지 Javascript에서

다음 2가지 방법으로

숫자를 배열로 변경하는 방법을 알아보았습니다.

  • Array.from()
  • split(), map()

 

 

 

반응형