문자열을 숫자로, 명시적 형 변환

히스토리가 참 많은 오늘의 TIL.
코드카타 문제를 풀면서 다른 사람의 풀이를 확인했고 그 풀이에서 알게 된 방법에 대해 튜터님께 자세히 질문을 드렸다. 이런저런 말씀을 많이 해주시며 이렇게 형 변환에 대해 알게 됐으니 Number()와 parseInt() 에 대한 차이도 학습해보라고 추천해주셨다.
대충 무슨 느낌인지는 알지만 정확하게 몰랐던 것 같아 이번 기회에 공부하기로!

[오늘의 문제 / 정수 내림차순으로 배치하기]

---

함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다.

• 나의 풀이

  function solution(n) {
    var newArray = [];
    newArray = (n + "").split("").sort(function (a, b) {
      return b - a;
    });
  
    return Number(newArray.join(""));
  }
  

  • sort()를 사용한 뒤 return b-a를 사용해 내림차순으로 정렬했다.
  • 선 sort() 후 reverse()를 사용할 수도 있지만 sort()만으로 내림차순을 만들어내고 싶었다.
  • 문자열로 처리하여 join()한 뒤 Number() 를 사용해 Number 타입으로 형 변환을 해주었다.
  
  

• 다른 사람의 풀이

  function solution(n) {
    const newN = n + "";
    const newArr = newN.split("").sort().reverse().join("");
  
    return +newArr;
  }

  • 배열의 요소들을 join("")해 string 타입의 newArr를 return 하기 전에 앞에 +를 붙여 양수의 정수, 즉 Number 타입이 되도록 암시적으로 형 변환을 해준 풀이법이다.
  • 이 부분에 대해 튜터님께 자세히 여쭤봤는데, 이런 식으로 암시적 형 변환을 통한 풀이는 코드가 간단해질 수 있다는 장점이 있지만 다른 협업자가 보기에는 코드가 명확하고 직관적이지 않다는 단점이 있다고 한다.
  • 말 그대로 '암시적' 형 변환이기 때문에 제 3자의 입장에서 보기엔 solution() 함수에서 return 되는 값의 타입이 Number 타입임을 의도한 것인지 한 번 더 콘솔로 확인해주는 작업이 필요하기 때문에 가독성적인 측면에서 좋지 않다고 하셨다.
  • 처음 내가 풀었던 방식대로 Number() 혹은 parseInt() 등을 사용해 return 되는 값이 Number 타입이 되도록 의도했다는 사실이 드러나게 '명시적으로' 변환하는 것이 좋다고 해주셨다.

Number() 와 parseInt()의 차이?

---

특성	Number()	parseInt()
기본 동작	값을 가능한 숫자로 변환	문자열에서 정수 부분만 추출하여 변환
소수점 처리	실수 그대로 변환 (e.g. "3.14" → 3.14)	소수점 이하를 무시하고 정수만 변환
문자열 처리	문자열이 숫자 형식일 경우 변환, 그렇지 않으면 NaN	문자열의 앞부분에 숫자가 있으면 그 숫자만 변환
공백 처리	앞뒤 공백도 무시하고 변환	앞쪽의 공백은 무시하고 숫자만 변환

• Number()는 보다 포괄적인 숫자 변환을 위한 함수이며, 문자열이나 다른 값들을 숫자로 변환하려고 할 때 사용된다.
• parseInt()는 문자열에서 정수만 추출할 때 사용되며, 문자열에서 숫자와 그 외 문자가 섞여있는 경우에 유용하다.

console.log(Number("42"));           // 42 (문자열이 숫자 형태이므로 숫자로 변환)
console.log(Number("3.14"));         // 3.14 (실수 형태의 문자열이므로 숫자 3.14로 변환)
console.log(Number("abc"));          // NaN (숫자로 변환할 수 없으므로 NaN 반환)
console.log(Number(""));             // 0 (빈 문자열은 0으로 변환)
console.log(Number(true));           // 1 (true는 1로 변환)
console.log(Number(false));          // 0 (false는 0으로 변환)
console.log(Number(null));           // 0 (null은 0으로 변환)
console.log(Number(undefined));      // NaN (undefined는 NaN으로 변환)

console.log(parseInt("42"));        // 42 (정수로 변환)
console.log(parseInt("3.14"));      // 3 (소수점은 무시하고 정수 부분만 변환)
console.log(parseInt("abc"));       // NaN (문자열이 숫자로 시작하지 않으면 NaN 반환)
console.log(parseInt("  42"));      // 42 (공백을 무시하고 숫자 변환)
console.log(parseInt("42px"));      // 42 (숫자 부분만 변환, 문자열의 나머지는 무시)
console.log(parseInt("0x10"));      // 16 (16진법으로 해석하여 16을 반환)
console.log(parseInt("101", 2));    // 5 (이진법(2진법)로 변환하여 5를 반환)
console.log(parseInt("101", 8));    // 65 (8진법으로 변환하여 65를 반환)
console.log(parseInt("101", 16));   // 257 (16진법으로 변환하여 257을 반환)