인터넷 익스플로어(IE)에서 지원안되는 javascript 문법, 함수

비록 익스플로어가 지원 종료가 되었지만 지금 진행하는 프로젝트에서는 익스플로어까지 지원되는게 좋겠다는 의견이 있어서 크로스 브라우징을 진행 했습니다. 크로스 브라우징을 진행하던 도중 익스플로어에서 지원되지 않은 javascript 코드들과 scc등이 있었어서 해당 문제에 대해서 알아보게 되었습니다.

익스프로워에서는 ES6이후에 지원되기 시작한 문법이나 함수들은 지원되지 않는 경우가 있습니다. 따라서 해당 문법과 함수는 대체 될 수 있는 코드로 바꿔야합니다.

1. fetch -> XMLHttpRequest

fetch API를 지원 하지 않기 때문에 XMLHttpRequest로 변경해서 쓸수 있습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

↓

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.send();

2. 람다표현식 -> 일반 함수

람다 표현식을 사용할 수 없기때문에 일반 함수로 바꿔야 합니다.

var add = (a, b) => a + b;

↓

var add = function(a, b) {
  return a + b;
};

3. 템플릿리터럴 -> 문자열 결합으로 연결

템플릿 리터럴이 지원 되지 않을 수 있기 때문에 문자열 결합으로 표현해야합니다.

var name = 'John';
console.log(`Hello, ${name}!`);

↓

var name = 'John';
console.log('Hello, ' + name + '!');

4. const, let -> var

변수를 선언할때 var외에 다른 것들이 지원되지 않을 수 있습니다 변수를 선언할때는 var을 사용하는것이 좋습니다.

const x = 10;
let y = 20;

↓

var x = 10;
var y = 20;

5. 클래스 -> 프로토타입으로 비슷하게 구현

클래스가 제대로 동작하지 않기 때문에 프로토타입을 이용하여 비슷하게 작성가능합니다.

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

const person = new Person('John');
person.sayHello();

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name + '!');
};

var person = new Person('John');
person.sayHello();

Under the Sea Otter