Javascript Arrow Function at IE

자바스크립트는 함수를 표현할 때 아래와 같이 표현하는 방법이 있다.

var f1 = function (a) {

}

var f1 = (a) => {

}

ES6 (ECMAScript standard 6)에서 함수 작성을 위한 새로운 구문을 도입했다. 바로 Arrow Function이다. 화살표 함수에 대한 자세한 내용은 여기서는 다루지 않고 하단 링크를 통해 추후 자세히 공부해보도록 한다.

화살표 함수 - JavaScript | MDN

ES6 In Depth: Arrow functions – Mozilla Hacks - the Web developer blog

웹소켓을 이용해 채팅을 구현하던 도중, IE 10부터는 WebSocket을 지원한다고 했지만, 그 하위버전은 WebSocket을 지원하지 않는다고 한다. 따라서 SockJS를 이용해 WebSocket Emulation을 하려고 했다.

 

그래서 여러 예제를 참조하며 코드를 작성해보았으나 왜인걸 WebSocket이던 Streaming, Polling 아무것도 되지 않는 것이다. 그렇게 삽질을 하던 도중 콘솔에 적힌 오류를 보았는데..

 

IE 11에서도 =>를 이용한 화살표 함수가 먹히지 않는 것이다. 단지 이것때문에 되지 않던 거였다.

이것을 그냥 function()으로 고치니 바로 적용되는 것을 확인할 수 있었다.

 

실제로 MDN에서 확인한 결과 브라우저 호환성은 다음과 같다. IE는 버전과 상관없이 지원하지 않는다.

정말 웹 개발에 있어 브라우저 간 호환성은 고질적인 문제인 것 같다.

 

(+추가)

IE 10부터는 WebSocket을 지원하기 때문에 IE 8, 9는 다른 기술로 (예를 들어 xhr/streaming 등) 잘 동작할 줄 알았는데 작동이 되지 않는 것을 확인했다.

원인은 바로 const와 let 키워드였다. 이것을 var로 변경하니 바로 잘 동작하였다.

 

망할 IE