[RAILS] Summary of what we did to make JavaScript compatible with IE11

Suddenly asked for IE11 support

I will summarize the parts that I, a JavaScript beginner, struggled with when asked to support IE11. I have posted the code before and after the correction, so I hope it will be helpful.

Arrow function

Corresponding code

$button.click((event) => {
    alert('I pressed the button');
});

// => SCRIPT1002:Syntax error.

Modified code

$button.click(function(event) {
    console.log('I pressed the button');

// =>I pressed the button
});

Template literal

The one that expands variables in a string enclosed in back quotes

Corresponding code

const age = 20
console.log(`My age is${age}is.`);

// => SCRIPT1014:The characters are incorrect.

Modified code

const age = 20;
console.log('My age is' + age + 'is.');

// =>My age is 20

isNaN It seems to be a method that evaluates whether the argument is non-number

Corresponding code

const int = 1000;
console.log(Number.isNaN(int));

// => SCRIPT438:The object is'isNaN'Does not support properties or methods.

Modified code

const int = 1000;
console.log(isNaN(int));

// => false

.find()

Corresponding code

const fruits = ['Apple', 'Orange', 'Banana']
if(fruits.find(function (fruit) {return fruit === 'Grape'})) {
  console.log('It's an apple!');
}else {
  console.log('It's not an apple!');
}

// => SCRIPT438:The object is'find'Does not support properties or methods.

Modified code

function sample(arg) {
    const fruits = ['Apple', 'Orange', 'Banana']
    if(fruits.filter(function (fruit) {return fruit === arg})[0]) {
      console.log('It's a crap!');
    }else {
      console.log('It's not a crap!');
    }
}

sample('Banana')
sample('Tomato')

// =>It's a crap!
// =>It's not a crap!

2020/11/12 postscript

indexOf is easier to write

function sample(arg) {
    const fruits = ['Apple', 'Orange', 'Banana']
    if(fruits.indexOf(arg) !== -1) {
      console.log('It's a crap!');
    }else {
      console.log('It's not a crap!');
    }
}

sample('Banana')
sample('Tomato')

// =>It's a crap!
// =>It's not a crap!

@ il9437 Thank you for pointing out m (_ _) m

version information

IE: 11.418.18362.0

Please comment if you have any advice, such as "I should do this more!" Or "There is also such a way of writing!" M (_ _) m