자바 스크립트 문자 배열 숫자 변환 - jaba seukeulibteu munja baeyeol susja byeonhwan

Question

숫자를 배열로 만드는 방법에는 두가지가 있다.

1. 숫자를 문자로 변환 후 배열로 만들기 ( split이용 )

2. 숫자를 do..while문을 이용하여 배열로 만들기

1번의 방법이 편하고 간단해서 보통 저렇게 사용하지만

속도 부분에서는 2번 방법이 훨씬 빠르다고 한다.

코드의 효율을 생각한다면 2번 방법을 사용하는게 좋을듯 하므로

두가지 방법을 아래에 정리해 보겠다.🥸

1. 숫자를 문자로 변환 후 배열로 만들기 ( split이용 )

타입이 숫자(number)인 경우 split을 사용할 수 없기 때문에

숫자에 ''을 더해 문자로 만들어주고,

split('')을 사용하여 배열로 만들어 주는 방법이다.

function numberToString1(n) {
  return (n + '').split('')
}

numberToString1(151)  // [ '1', '5', '1' ]

2. 숫자를 do..while문을 이용하여 배열로 만들기

빈 배열인 nums를 만든 뒤,

1번에 나오는 숫자는 맨 끝자리수 10으로 나눈 뒤 남은 값으로 num에 push되고

2번에 나오는 숫자는 n을 10 나눈 값을 버림한 값으로 맨 마지막 자리수를 뺀 값이 된다.

그 수를 다시 n에 할당하여 루프를 돌린다

( ❓ 이해가 어렵다면 아래에 풀어서 정리한 그림을 참고 )

이런식으로 숫자를 문자로 바꾸지않고 배열에 push 한다.

뭔가 생각해보지않은 신기한 방식이라 정리해보았다 🙂

function numberToString2(n) {
  let nums = [];
  do {
    nums.push(n % 10);  // 1
    n = Math.floor(n / 10);  // 2
  } while (n > 0);
  return nums
}

numberToString2(151)  // [ 1, 5, 1 ]

작동방식

잘 알려진 것처럼 자바스크립트에서 변수는 선언시에 타입을 지정하지 않는다. 어떤 형태의 값이든 담을 수 있지만 종종 담겨진 값을 특정 타입으로 변환할 필요가 생길 때도 있다.

최근 코딩 중에 문득 문자를 숫자로 바꾸는 가장 좋은 방법(혹은 깔끔한 스타일)은 무엇일까 궁금해졌다.

마침 http://jsperf.com/ 에 잘 설계되어 있는 벤치마크가 있어서 해당 내용을 정리해보려고 한다.

각 변환 방법들에 대한 브라우저별 속도 비교

http://jsperf.com/best-of-string-to-number-conversion-allowing-defaultnan

위의 링크에 가면 직접 브라우저상에서 속도 테스트를 수행해 볼 수 있다. 위의 테스트 결과 그래프는 브라우저들 중 일부의 결과를 인용했는데, 사실 다른 브라우저들에서도 엎치락 뒷치락하며 각 방법별로 큰 차이를 보여주지는 않는 것을 볼 수 있다.

최대 약 10% 정도 차이가 나는데, 테스트를 반복할 때마다 수치가 달라지고 느리고 빠른 방법이 자주 바뀌는 것으로보아 절대적으로 성능상 우위에 있는 방법은 따로 없다고 봐도 좋을 것 같다.

비트 연산을 활용하는 방법

//Bitwise Bitwise Right Shift
var num = "111" >>> 0

//Bitwise Right Shift
var num = "111" >> 0

//Bitwise Left Shift
var num = "111" << 0

//Bitwise OR
var num = 0 | "111"

//Bitwise XOR
var num = 0 ^ "111"

//Bitwise NOT NOT
var num = ~~"111"

비트 연산을 사용하는 방법은 위의 여섯 가지 정도로 요약된다. 대부분 0과 비트 연산을 수행할 경우 자동으로 숫자로 변환된다는 것을 알 수 있다.

비트 연산을 하게 될 경우 "123.001" 과 같이 소수점이 있는 숫자는 모두 정수로 변환된다는 점을 주의해야 한다. 소수점을 가진 숫자나 문자열을 정수로 변경해야한다면 위의 방법들로 간단하게 구현 가능하다.

함수를 활용하는 방법

//parseInt()
var num = parseInt("111")

//parseFloat()
var num = parseFloat("111")

//Number()
var num = Number("111")

자바스크립트에서 기본적으로 제공하는 함수를 활용하는 방법이다.

parseInt 함수를 사용하면 소수점을 포함하는 숫자나 문자열도 정수로 변환된다는 점을 주의해야 한다.

Number 함수는 자바스크립트에서 형변환을 위해 제공하는 함수이기 때문에 가장 의도를 잘 나타내는 코드를 작성할 수 있는 장점이 예상(?)된다.

그 밖의 방법

//implicit
var num = +"111"

var num = 1 * "111"

var num = "111" / 1

그 밖에도 더하기나 곱하기, 나누기 등의 연산을 시도하면 자동 형변환이 되는 특징을 사용할 수도 있다.

마치며

지금까지 자바스크립트에서 문자를 숫자로 바꾸는 방법에 대해서 알아봤다. 사실 시작은 성능상 가장 이점이 있는 방법을 찾기 위함이었지만, 살펴본 것처럼 각 방법들간에 큰 성능차는 확인할 수 없었다.

형변환을 위해 자바스크립트에서 제공하는 Number 함수를 사용하는 것이 읽기 좋은 코드를 작성하는데 그나마 도움이 될 수 있을 것 같고, 그 외의 방법은 기호에 따라 적절히 선택해서 사용해도 큰 문제는 없을 것으로 보인다.

웹 페이지에서 자주 사용하는 것 중 하나가 형변환입니다. 언어에 상관없이 문자열을 숫자로 바꾸거나 숫자를 문자로 바꿔서 사용해야할 일이 생깁니다.

1. 문자형을 숫자형으로 변환하는 법

<!doctype html>
<html lang="ko">
  <head></head>
  <body>
    <script>
    
      var x = "100";
      var y = "100";
      
      console.log(x + y); //100100
      console.log(Number(x) + Number(y)); //200
      
      var x1 = "100";
      var x2 = "100.21";
      
      console.log(parseInt(x1)); //100
      console.log(parseInt(x2)); //100

      console.log(parseFloat(x1)); //100
      console.log(parseFloat(x2)); //100.21
      
      console.log(Number(x1)); //100
      console.log(Number(x2)); //100.21
      
    </script>
  </body>
</html>

위 코드를 참고하면 다양한 숫자형으로 변경해주는 함수를 보실 수 있습니다. parseInt()는 문자를 정수형 숫자로 변환해주고 parseFloat()는 문자를 실수형 숫자로 변환해줍니다. Number()는 문자의 타입에 따라 정수형이나 실수형 숫자로 변환해주는 함수입니다.

2. 숫자형을 문자형으로 변환하는 법

<!doctype html>
<html lang="ko">
  <head></head>
  <body>
    <script>
    
      var x = 100;
      var y = 100;
      
      console.log(x + y); //200
      console.log(x + "" + y); //100100
      console.log(String(x) + String(y)); //100100
      
      var x1 = 100;
      var x2 = 100.123456;
      
      console.log(String(x1)); //"100"
      console.log(String(x2)); //"100.123456"

      console.log(x1.toString()); //"100" : 10진수
      console.log(x1.toString(2)); //"1100100" : 2진수
      console.log(x1.toString(8)); //"144" : 8진수
      console.log(x1.toString(16)); //"64" : 16진수
      
      console.log(x2.toFixed()); //"100"
      console.log(x2.toFixed(1)); //"100.1"
      console.log(x2.toFixed(4)); //"100.1235"
      console.log(x2.toFixed(6)); //"100.123456"
      console.log(x2.toFixed(7)); //"100.1234560"
      
    </script>
  </body>
</html>

문자형을 숫자형으로 바뀌는 사용하는 대표적인 함수는 String() 이 있습니다. String 함수를 사용하면 정수형이나 실수형 숫자를 그대로 문자형으로 변환할 수 있습니다.

Javascript에서는 String 함수를 사용하지 않더라도 문자형이 숫자형보다 우선이기 때문에 100 +""+ 100 처럼 값을 더할 경우에도 숫자형들이 자동으로 문자형으로 변환되어 100100 로 값이 표현됩니다.

toString() 이나 toFixed() 함수는 각각 진수 표현을 하거나 소수점을 수정해서 표현해야 할 경우 사용할 수 있습니다.

toString()은 인자값이 없는 상태로 사용하면 기본 10진수값으로 문자형 변환이 됩니다. 인자값이 들어갈 경우에는 2진수나 8진수 값으로 변환된 문자형으로 변환이 됩니다.

toFixed()는 인자값이 없는 상태로 사용하면 실수인 경우 소수점 첫째 자리에서 반올림을 한 값이 문자형으로 변환됩니다. 인자값을 1로 넣으면 소수점 첫째 자리까지 나타내라는 의미이기 때문에 소수점 둘째 자리에서 반올림을 해서 문자형 변환이 됩니다. 소수점 6자리까지 있는 실수에 인자값 7을 넣게 되면 0으로 자릿수를 채워준 상태로 문자형 변환을 해줍니다.

js 숫자를 문자로 자바스크립트 배열 형변환 자바스크립트 배열을 숫자로 문자를 숫자로 변환 자바스크립트 int 변환