title: Convert ES6 JavaScript to ES5 without transpiler
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>I realise that all the "const" can be converted to "var" but unsure of new arrow functions and other items. </p>
  
  <p>I have tried converting but getting:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: line is not defined</p>
  </blockquote>
  
  <p>The ES6 code that I would like converted to ES5 is:</p>
  
  <pre><code>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) =&gt; !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 &lt; 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(() =&gt; {
      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;
  }
  </code></pre>