TIL _ Code Kata _ Array.reverse() 메소드의 함정

❓문제

• 숫자를 인자로 받았을 때, 뒤집은 모양이 원래의 숫자와 일치하는지 판단하는 로직 구현
• 예를 들어
  -1234를 입력했을 때, 뒤집으면 4321- 이므로 불일치(false)
  12321을 입력했을 때, 뒤집으면 12321 이므로 일치(true)

const sameReverse = (num) => { }

1. 해결 방안

• 사고 과정

🔓 (문제 파악) 인자로 받은 숫자와 뒤집은 숫자를 비교한다.
🔑 (해결 방안) 먼저 숫자를 배열로 변환한 뒤, 배열의 순서를 뒤집어서 원본과 비교한다.

🔓 (문제 파악) 숫자를 배열로 변환해야 한다.
🔑 (해결 방안)

1. 숫자를 먼저 문자열로 변환한 뒤 → String() 생성자를 활용

const numIntoString = String(num);

2. 문자열을 배열로 변환한다 → String.split() 메소드를 활용

const stringIntoArr = numIntoString.split('')
/* string.split(seperator) → seperator가 빈 문자열('')일 경우,
   string의 모든 문자를 원소로 가지는 배열을 반환 */

🔓 (문제 파악) 변환된 배열의 순서를 뒤집어야 한다.
🔑 (해결 방안) Array.reverse() 메소드를 활용한다

const reversedArr = stringIntoArr.reverse();

🔓 (문제 파악) 뒤집은 배열과 원본의 배열이 일치하는지 확인한다.
🔑 (해결 방안) 반복문과 조건문을 통해서 각 배열의 동일한 인덱스 값이 일치하는지 검토한다.

for(i=0; i=stringIntoArr.length; i++){
  if(stringIntoArr[i] !== reversedArr[i]) {
    return false;
  }
}
return true;

🚨 문제 발생

🔓 (문제 파악) -1234를 입력했을 때, false값이 나오기를 기대했으나 true가 반환된다.
🚨 (문제 원인) Array.reverse() 메소드를 사용할 경우, 원본 배열을 뒤집고 그 배열의 참조값을 반환한다는 사실을 간과했던 것!

• 출처: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

🔑 (해결 방안) spread syntax를 활용하여 원본 배열을 복사한 뒤, 복사한 배열과 뒤집은 배열을 비교한다.

const copiedArr = [...stringIntoArr];
const reversedArr = stringIntoArr.reverse();

for(i=0; i<copiedArr.length; i++){
  if(copiedArr[i] !== reversedArr[i]) {
    return false;
  }
}
return true;

2. 결과

const sameReverse = num => {
  const stringIntoArr = String(num).split('');
  const copiedArr = [...stringIntoArr];
  const reversedArr = stringIntoArr.reverse();
  
  for(i=0; i<copiedArr.length; i++){
    if(copiedArr[i] !== reversedArr[i]) {
      return false;
    }
  }
  return true;
}

const number1 = -1234;
const number2 = 12321;

console.log(sameReverse(number1)); // false;
console.log(sameReverse(number2)); // true;

"작성 내용 중 오류나 오타가 있다면, 댓글로 알려주시면 감사하겠습니다. 주니어 개발자에게 남겨주시는 작은 피드백이 큰 도움이 될 것 같습니다. 고맙습니다 :)"