I am not familiar with new JavaScript ES6 coding conventions and have been given some code where I need it to be plain old JavaScript ES5.

I need to convert this JS code without the use of Babel or any other transpiler. I cannot use Babel as I am not allowed to use it at work.

I realise that all the const can be converted to var but unsure of new arrow functions and other items.

I have tried converting but getting:

Uncaught ReferenceError: line is not defined

The ES6 code that I would like converted to ES5 is:

const data = [{ rec: 1, region: LEFT, intrface: Line-1 },{ rec: 1, region: LEFT, intrface: Line-2 },{ rec: 1, region: RIGHT, intrface: Line-3 },{ rec: 1, region: RIGHT, intrface: Line-4 }];



const s = Snap(#svg);

const height = 40;

const canvasWidth = 400;

const lineWidth = 180;

const rightOffset = canvasWidth/2 - lineWidth;



const leftLines = data.filter((line) => !isRightLine(line));

const rightLines = data.filter(isRightLine);



leftLines.forEach(drawLine);

rightLines.forEach(drawLine);



const numberOfLines = Math.max(leftLines.length, rightLines.length);

const rectSize = 20;

const rectangles = [];



for (let i = 0; i < numberOfLines; i++) {

    rectangles.push(drawRect(i));

}



function drawLine(data, index) {

    const {intrface} = data;

    const isRight = isRightLine(data);

    const x = isRight ? canvasWidth/2 + rightOffset : 0;

  const y = height * (index + 1);

  const stroke = isRight ? 'red' : 'black';



    const line = s.line(x, y, x + 180, y);

  line.attr({

    stroke,

    strokeWidth: 1

  });



  const text = s.text(x + 10, y - 5, intrface);



  text.attr({

    fill: stroke,

    cursor: 'pointer'

  });



  text.click(() => {

    console.log('clicked', data);



    //window.location.href = http://stackoverflow.com/;

  });

}



function isRightLine({region}) {

    return region === 'RIGHT';

}



function drawRect(index) {

    const x = canvasWidth/2 - rectSize/2;

  const y = height * (index + 1) - rectSize/2;

    const rectangle = s.rect(x, y, rectSize, rectSize);



  rectangle.attr({

    fill: 'black'

  });



  console.log('rr', x, y);



  return rectangle;

}