javascript - Function converted to arrow function - function not defined - Stack Overflow

admin管理员组

文章数量:1023827

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

Share Improve this question Follow edited Jan 7, 2019 at 13:42 froggomad asked Jan 7, 2019 at 13:17 froggomadfroggomad 1,93533 gold badges2121 silver badges4444 bronze badges 3

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

Share Improve this question Follow edited Jan 7, 2019 at 13:42 froggomad asked Jan 7, 2019 at 13:17 froggomadfroggomad 1,93533 gold badges2121 silver badges4444 bronze badges 3

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

本文标签：