Array.splice()의 두 번째 인자를 생략했을 때

발생일: 2012.05.08

문제:

배열 데이터를 잘라서 처리하는 로직을 구현해야 했다.

아래와 같이 짧은 코드를 구현했는데,

크롬에서는 잘 동작하지만 IE8 이하에서 제대로 동작하지 않는 걸 발견했다.

  var a = [1, 2, 3, 4, 5];

  var result = a.slice(1);

이상하다. 특별히 문제될 부분이 없는데...

왜 이런 걸까...

해결책:

음메.

slice를 splice로 잘못 썼던 게 문제였다... -_-;

splice는 배열에서 특정 인덱스의 아이템을 추가하거나 삭제하는 메서드이고,

아래와 같은 형태로 호출한다.

  splice(index, howmany, itemToAdd, itemToAdd, ...)

표준에는 두 번째 파라미터인 howmany 값이 필수라고 정의해뒀지만,

만약 이 값을 생략하는 경우, IE 하위 버전과 모던 브라우저 간의 동작 방식이 다르다.

두 번째 인자를 생략할 경우,

크롬에서는 해당 인덱스부터 끝까지 삭제하지만, IE8 이하 버전에서는 삭제하지 않는 것이 그 차이점이다.

삭제한 엘리먼트를 배열에 담아 리턴하는 동작은 동일하다.

예를 들어,

  var a = [1, 2, 3, 4, 5];

  var result = a.splice(1);

와 같은 작업을 수행하면.

  // IE9, Chrome, FF, Safari

  a ==> [1]

  result ==> [2, 3, 4, 5]

  // IE8 이하

  a ==> [1, 2, 3, 4, 5]

  result ==> []

와 같은 결과가 나온다.

즉, a.splice의 두 번째 인자를 생략하고 호출하는 액션은,

  a.splice(1);

  // IE9, Chrome, FF, Safari

  a.splice(1, a.length - 1);

  // IE8 이하

  a.splice(1, 0);

를 호출하는 것과 같다.

단순히 리턴받은 결과를 놓고 본다면,

모던 브라우저에서는 array.splice(1) 과 array.slice(1)의 값은 동일하다.

그래서 쉽게 눈치채지 못했던 것이다.

여튼, 결론은...

철자를 주의깊게 확인하자. -_-;;