프로그래머스 정수 내림차순으로 배치하기 JS ( sort()와 리액트 불변성유지 )

🧷 링크

문제 설명

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

 

 

 

 

🙋‍♀️ 내 생각

문제를 보고 숫자를 거꾸로 뒤집기위해서 sort()를 써야겠다고 생각했다.

매개변수 n은 숫자이다. 그런데 sort()는 배열에만 사용할 수 있는 메서드이다.

그래서 sort()를 사용하기 위해서는 형변환이 먼저 이루어져야한다. 

이 문제는 sort()메서드만 안다면, 풀기 어렵지 않은 문제이다. 

다만, sort()를 사용하고 다시 결괏값을 숫자로 변환하는 등의 여러번의 형변환을 거치는 과정을 잘 생각해야한다.

 

 

 

 

✅ 내 코드

function solution(n) {
  return Number(n.toString().split('').sort((a,b)=>b-a).join(''))
}

우선 숫자값으로 들어온 매개변수 n을 toString()통해서 문자열로 변환한다.

n.toString()을 콘솔창에 찍어서 값을 보면, 아래와 같은 값이 나온다. 

숫자값으로 들어왔던 값이 하나의 문자열로 변환되었다.

 

sort()는 배열에만 사용할 수 있기때문에, 하나의 과정을 더 거쳐야한다.

하나의 통으로 된 문자열로 되어있는 n.toString()을 배열로 먼저 바꿔야한다.

이를 위해서 split()메서드를 사용하였다.

 

 

🔎 split()

split()은 string객체를 지정한 구분자를 이용하여 여러개의 문자열로 나눈다.

 

 

n.toString().split('')를 콘솔창을 통해서 확인해보면, 아래와 같이 배열안에 ''를 구분자로 하여 나뉘어진 값이 담겨있는 것을 확인할 수 있다.

 

이제야 비로소 sort()를 통해서 값을 정렬할 수 있게 되었다.

각 자릿수를 큰것부터 작은순으로 정렬해야하기 때문에 sort((a,b)=>b-a)를 한다.

 

sort()만 쓰면 작은것부터 큰순으로 정렬된다. 

큰것부터 작은것으로 정렬하려면 b-a로 적어야한다.

 

정렬하면 아래와 같이 나온다.

 

 

값들이 각각 담겨있기때문에 값들을 붙이기위해서 join('')을 사용한다. 

콘솔을 통해서 보면 아래와 같이 하나로 이루어진 문자열이 나온것을 볼 수 있다.

 

 

이제 마지막으로 숫자로 변경해준다. 

숫자로 변경하기 위해서 Number()를 사용한다.

Number(n.toString().split('').sort((a,b)=>b-a).join(''))

 

 

 

 

 

 

🙋‍♀️ 내 생각

리액트에서는 배열의 불변성을 유지하면서 state를 업데이트해야한다. 

그런데 sort()는 배열의 원본자체를 변경하기 때문에 불변성을 유지할 수 없다. 

그래서 리액트에서 코드를 짠다면 어떻게 짜야할까를 생각해보아야겠다고 생각했다.

 

 

 

 

✅ 내 코드 2

function solution(n) {
    const newN = n.toString().split('')
    return Number(newN.sort((a,b)=>b-a).join(''))
}

리액트에서 짰다고 가정하고 코드를 다시 짜보았다.

 

sort()는 원본을 훼손한다.

이러한 이유때문에 리액트 공식문서에서도 이러한 방법을 피하는 코드를 사용하도록 장려한다.

 

따라서 불변성을 지키면서 sort()를 사용하기 위해서, newN이라는 이름으로 새로운 변수를 만들어 저장한 뒤에 sort()를 사용한다.

이렇게하면 원본인 n은 그대로이고 새로 만든 newN만 변경하는 것이기 때문에 리액트의 불변성을 지킬 수 있다.

console을 통해서 n의 값을 확인할 수 있다.

 

function solution(n) {
    const newN = n.toString().split('')
    console.log(n)
    return Number(newN.sort((a,b)=>b-a).join('')) 
}

이렇게 콘솔을 통해 n의 값을 확인하면, 아래와 같이 n의 값은 변경되지 않은 것을 확인할 수 있다.

이렇게 함으로써 원본은 훼손하지 않고 문제만을 해결할 수 있다.

 

물론 굳이 이렇게 풀어야할 필요는 없지만 문제가 어렵지 않기때문에 리액트에서 사용한다면 어떻게해야할까까지 생각해보았다.

코테문제이지만, 실제로 리액트에서 사용하는 것까지 생각해보면 좋을 것 같아서 코드2의 방법으로도 풀어보았다.

sort()뿐만아니라, push()나 pop()과 같은 메서드로 배열을 변경할때도 불변성이 훼손되기 때문에 위와 같은 방법을 사용해야하므로 이런식으로 푸는 것도 익숙하게 연습해두면 좋을 것 같다.