[JAVASCRIPT] IE에서 안되는 문법, 함수 (람다식, includes) - JAVASCRIPT1002 : Syntax Error

이번 포스팅에서는 JavaScript 웹 개발 중 브라우저 간의 문법 차이에 대해서 알아봅니다.

IE (Internet Explorer)와 Chrome이 가장 많이 사용되면서 차이가 있는 브라우저라고 생각됩니다.

이 두 브라우저 간에 발생하는 문제는 크게

1. 람다식의 사용, 
2. Array 객체의 Includes 함수 

정도가 있습니다.

아래 글에서는 그 두 가지 문제점과 해결방법에 대해 다룹니다.

1. 람다식 (=>)

1) 함수 선언

 JavaScript에는 여러 가지 함수 선언 방식이 있지만 람다식 형태로 선언하는 방법이 있습니다.

이 경우 Chorme에서는 동작하지만, IE에서는 동작하지 않습니다. (MicroSoft Edge 사용가능)

다음은 람다식을 사용한 함수 정의와 호출 예제입니다.

[예제 코드]

var Func1 = (text => console.log(text));
Func1("Test");

[결과]

위 코드를 실행 시켰을 때 'SCRIPT1002' 오류를 보실 수 있습니다. 해당 오류를 만난다면 위에서 설명한 대로 브라우저 호환성을 고려하셔야 합니다.

 2) 함수 호출의 조건부에서의 람다식 사용 (.filter 함수)

  함수선언과 마찬가지로 "=>" 문구 자체를 인식하지 못하기 때문에 기본적으로 제공하는 함수를 호출할 때의 람다식 사용도 제한됩니다.

  아래 정의한 Array에서 사용된 filter 함수 예제를 통해 알아봅시다.
  예제는 정의된 Array중 "key"값이 "phone"인 요소를 반환하는 filter함수의 사용입니다.

[예제코드]

var memberInfos = new Array();

memberInfos.push({
 key: "name",
 value: "kim",
 priority: "1"
});

memberInfos.push({
 key: "address",
 value: "Seoul XXXX - XXXX",
 priority: "2"
});

memberInfos.push({
 key: "phone",
 value: "010-XXXX-XXXX",
 priority: "3"
});

var temp = memberInfos.filter(memberInfos => memberInfos.key == "phone");

[결과 - IE]

마찬가지로 "SCRIPT1002" 오류가 발생하였습니다.
그렇다면 Chrome에서는 정상적인 결과가 나올까요?

[결과 - Chrome]

Chrome에서는 정상적으로 값을 가져온 모습을 볼 수 있습니다.

그럼 람다식으로 사용한 조건부 filter사용은 어떻게 개선할 수 있을 까요?

[람다식 filter 개선안]

var temp = memberInfos.filter(function (memberInfos) {
 return memberInfos.key == "phone";
});

조금 지저분해 보이지만 위와 같은 방식으로 사용하면 IE, Chrome 모두 해결할 수 있습니다.

2. includes 함수 사용

우선 Array의 특정요소가 포함되어 있는 지 여부를 알 수 있는 함수입니다.
자세한 설명은 이곳에서 먼저 확인해봅시다.

먼저 아래 사진을 보면 IE에서는 지원하지 않는 것을 확인할 수 있습니다.

예제를 통해 결과를 확인해 봅시다.

[예제코드]

var arr = ['apple', 'banana', 'mango'];

var result = arr.includes('apple');

[결과 - IE]

결과는 역시나 지원하지 않는 오류 메시지 출력.
그렇다면 Chrome은 어떨까요.

[결과 - Chrome]

'apple' 요소를 찾아 "true"값을 제대로 리턴해준 모습입니다.
그렇다면 IE에서도 같은 기능을 수행하려면 어떻게 해야 할까요?

개선안으로 사용할 함수는 indexOf 함수입니다.
사용법은 같으나, 탐색하지 못한다면 "-1"을 리턴하고 찾아낸다면 해당 index를 반환합니다.
아래 예제를 통해 확인해봅시다.

[예제코드]

var arr = ['apple', 'banana', 'mango'];

var result = (arr.indexOf('apple') > -1) ? true : false;

[결과 - IE]

IE에서도 같은 결과를 유도할 수 있음을 보였습니다.


IE를 지원하지않고 Chrome 기반의 MicroSoft Edgt를 권장하는 추세이긴 하나,

아직 많은 곳에서 IE를 표준으로 삼고있으니 웹 개발간에 이번 포스팅에서 다뤘던 주제에 대해서 주의해야할 것 같습니다.