I'm just learning ES6 and learned about arrow functions. I'm going through an existing file and converting functions one by one. I've converted numerous functions and all have worked as they did previously with the exception of 1.

Doing this, I can call page to get the current filename

let textArr = getPage.textArr;
let headingArr = getPage.headingArr;
const page = getPage.filename;

function getPage() {
  const url = window.location.pathname,
    fileWithExtension = url.substring(url.lastIndexOf('/')+1),
    filename = fileWithExtension.split('.').slice(0, -1).join('.')    
  ;    
  if (filename == "foo") {
    textArr = [ 
      `Text`,
      `Text`
    ];
    headingArr = null;
    return {filename, textArr, headingArr}
  }
}

Leaving everything as is, converting to an arrow function, then calling page in console, I get:

getPage is not defined at line 1

const getPage = () => {
        const url = window.location.pathname,
    fileWithExtension = url.substring(url.lastIndexOf('/')+1),
    filename = fileWithExtension.split('.').slice(0, -1).join('.')    
  ;    
  if (filename == "foo") {
    textArr = [ 
      `Text`,
      `Text`
    ];
    headingArr = null;
    return {filename, textArr, headingArr}
  }
}

I'm just learning ES6 and learned about arrow functions. I'm going through an existing file and converting functions one by one. I've converted numerous functions and all have worked as they did previously with the exception of 1.

Doing this, I can call page to get the current filename

let textArr = getPage.textArr;
let headingArr = getPage.headingArr;
const page = getPage.filename;

function getPage() {
  const url = window.location.pathname,
    fileWithExtension = url.substring(url.lastIndexOf('/')+1),
    filename = fileWithExtension.split('.').slice(0, -1).join('.')    
  ;    
  if (filename == "foo") {
    textArr = [ 
      `Text`,
      `Text`
    ];
    headingArr = null;
    return {filename, textArr, headingArr}
  }
}

Leaving everything as is, converting to an arrow function, then calling page in console, I get:

getPage is not defined at line 1

const getPage = () => {
        const url = window.location.pathname,
    fileWithExtension = url.substring(url.lastIndexOf('/')+1),
    filename = fileWithExtension.split('.').slice(0, -1).join('.')    
  ;    
  if (filename == "foo") {
    textArr = [ 
      `Text`,
      `Text`
    ];
    headingArr = null;
    return {filename, textArr, headingArr}
  }
}

• javascript
• ecmascript-6
• arrow-functions

• 2 You need to have the balanced bracket. You are missing one closing bracket in the posted question. – Hassan Imam Commented Jan 7, 2019 at 13:19
• getPage is a function, not a property. Call the function. getPage.filename is undefined (as per your first code block), while getPage().filename (probably) isn't. – nbokmans Commented Jan 7, 2019 at 13:19
• 1 While dealing with arrow functions, you have to define getPage first then call it. Otherwise it will throw error – Karan Commented Jan 7, 2019 at 13:23

4 Answers 4

It's a hoisting problem. Functions are hoisted by default. That is not happening to arrow functions assigned to a variable. If you want that to work, you need to move the const definition before you call it. Like this:

const getPage = () => {
        const url = window.location.pathname,
    fileWithExtension = url.substring(url.lastIndexOf('/')+1),
    filename = fileWithExtension.split('.').slice(0, -1).join('.')    
  ;    
  if (filename == "foo") {
    textArr = [ 
      `Text`,
      `Text`
    ];
    headingArr = null;
    return {filename, textArr, headingArr}
  }
}

let textArr = getPage().textArr;
let headingArr = getPage().headingArr;
const page = getPage().filename;

You are actually not calling your function, i.e. const page = getPage.filename; should be replaced by const page = getPage().filename;

For all three variables you could do something like:

let {textArr, headingArr, textArr} = getPage();

Add 1 more braces then it will work.

const getPage = () => {
    const url = window.location.pathname,
fileWithExtension = url.substring(url.lastIndexOf('/')+1),
filename = fileWithExtension.split('.').slice(0, -1).join('.');    
if (filename == "foo") {
   textArr = [ 
    `Text`,
    `Text`
   ];
   headingArr = null;
   return {filename, textArr, headingArr}
  }
}

If you run into this problem and you're using jQuery , remove the function definition from $(document).ready() function.

Regards