forEach() IE 11 호환 오류 문제 대응하기

‘forEach()’는 IE 11에 ‘fully supported’ 되는 메소드로 기재가 되어 있습니다. 다만 ‘querySelectorAll’로 여러 요소를 선택하는 경우 정상적으로 작동을 하지 않습니다. 그 이유는 ‘querySelectorAll’은 ‘NodeList’를 반환하며, ES5에서 ‘forEach()’는 ‘Array’에만 작동하도록 되어 있기 때문입니다. ‘NodeList’는 ES6부터 적용 대상으로 포함이 됩니다.

이 이슈는 ‘babel’로 ‘IE 11’을 타겟으로 잡고 트랜스파일링을 진행해도 수정이 되지 않습니다. ‘NodeList’ 등 배열이 아닌 요소를 대상으로 ‘forEach()’를 적용하기 위해서는 해당 요소들을 배열화하여 활용해 줘야 합니다.

var alltable = document.querySelectorAll('*[id^="table_"]'); //Select all elements with the id starting by "table_"
var alltableArray= Array.prototype.slice.call(alltable);
    alltableArray.forEach(function(element) {
                // Do some code
    });

위 예제 코드처럼 ‘querySelector’로 선택된 요소들을 Array.prototype.slice.call() 을 활용해서 배열화해 줍니다. 해당 테크닉은 ‘forEach()’, ‘map()’, ‘filter()’와 같은 배열과 함께 사용되는 메소드들을 ‘NodeList’ 요소에도 활용할 수 있게 해 줍니다. ‘call()’의 인자로 ‘slice()’를 실행해 주는 기능을 하며, 0을 패러미터로 받기 때문에 기존 array-like의 요소를 그대로 배열로 만들어 주는 기능을 한다고 볼 수 있습니다.

// Array.prototype.slice.call()
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
console.log(Array.prototype.slice.call(arrayLike, 1, 3));

// slice()
var originalArray = [1, 2, 3];
var copiedArray = originalArray.slice();

console.log(copiedArray); // Output: [1, 2, 3]

// call()
var person1 = {
  name: 'John',
  sayHello: function () {
    console.log('Hello, ' + this.name);
  }
};

var person2 = {
  name: 'Jane'
};

person1.sayHello(); // Output: Hello, John

person1.sayHello.call(person2); // Output: Hello, Jane

참고문서

• Javascript - forEach() loops not working on IE11
• Explanation of [].slice.call in javascript?
• Calling slice() on non-array objects