[오삽완] for…in 내부에서 slice 쓸 때 주의할 점 😱

🔍 삽질

for (let idx in string) {
  const char = string[idx];
  if (char === '(') leftCount += 1;
  if (char === ')') rightCount += 1;

  u += char;

  if (leftCount === rightCount) { // for문 종료 조건
    return [u, string.slice(idx + 1)]; // 💣
  }
}

for문 종료 조건을 만족할 경우, idx를 기준으로 앞 문자열과 뒷 문자열로 구분해 두 문자열을 배열 형식으로 리턴하는 코드를 짰다.

그런데 idx가 string.length의 범위 안에 있음에도 string.slice(idx + 1) 코드가 자꾸 빈 문자열을 리턴했다.

string.slice(idx); // 출력: '(()'
string.slice(idx + 1); // 출력: '' // 왜 '()'를 리턴하지 못하는거니 !!

🚀 해결

내 코드에서는 진짜 틀린 게 전혀 없다고 생각하다가 설마 idx가 문자열? 이라는 생각이 들었다.

그래서 mdn을 살폈더니 idx는 문자열이 맞다더라…

덤으로 배열은 for…in 보다 for문을 권장한다는 것도 알게 되었다.

따라서 내 코드의 idx + 1을 수행하면 문자열 concatenate가 되어 범위가 length를 넘어가기 때문에 빈 문자열을 리턴할 수 밖에 없었던 것임.

그래서 for in 문을 for 문으로 바꿔줌으로써 해결했다.

for (let idx = 0; idx < string.length; idx++) {
  const char = string[idx];
  if (char === '(') leftCount += 1;
  if (char === ')') rightCount += 1;

  u += char;

  if (leftCount === rightCount) {
    return [u, string.slice(idx + 1)];
  }
}

처음에 for of 썼다가 인덱스가 필요하게 되어 for 문으로 바꾸긴 귀찮아가지고 for in문으로 변경한 거였는데..!

덕분에 삽질하다가 덤으로 지식을 얻게 되었다.