"Unexpected identifier" error for first object (Safari only)

Question

When I run the following code in Safari (and only Safari), the Javascript won't load in the browser:

$(document).ready(function() {
  let dataX = {
    last: 100
  };
  let quotes = [{
    quote: "I find it fascinating that... 

and I get an error message: SyntaxError: Unexpected identifier 'dataX'

When I comment out the dataX object, the next object creates the same error: SyntaxError: Unexpected identifier 'quotes' It seems that no matter what the first object is, it will throw an error in Safari.

The page displays a random quote in a simple Bootstrap container. You can find a link to the CodePen here.

What I've tried so far:

• Check the inspector and Google the error message
• Load the CodePen in Chrome and Firefox (it works)
• Validate the HTML, and use a linter for the JS
• Open the index.html locally in Safari, with the proper <header> and <meta> tags, as well necessary Bootstrap and jQuery files.
• Google the issue both in and beyond Stack Overflow
• Comment out different functions and objects to see if it makes the page work

I suspect that the problem is not the object to which the error message refers; I also suspect the solution may be trivial. However, I am completely stumped. Any leads would be greatly appreciated.

Answer 1

The let keyword is not supported in Safari before version 10.