从另一个函数内部调用变量很糟糕？

Question

I want to make my JS code to be less repetitive with an organized look. But I don't know if calling a function from inside another function is a bad practice, like Global Variables.

I share a piece of the code here.

thanks.

 function getEx() { return document.getElementById('example') } function getExTwo() { return document.getElementById("exampleTwo"); } function getTheValue() { let getExValue = getEx(); let getExTwoValue = getExTwo(); }

Answer 1

Calling a function from within another function is absolutely not bad coding. That's part of what functions are for, really -- breaking up logical processes into smaller pieces.

Here's an example of how this can work.

// Note: This is new ES6/ES7 syntax for writing JavaScript functions.
// I'm using it here because it's very terse.

const add = (a, b) => a + b;

const multiply = (a, b) => a * b;

const square = (a) => multiply(a, a);

const sumOfSquares = (arr) => {
  let sum = 0;
  arr.forEach(number => sum += square(number));
  return sum;
};

In the (simplified) example above, we use different functions to break up the distinct logical pieces of the problem into smaller, more manageable problems. For example, to calculate the sum of the squares of the array [1, 10, 12] , we want to be able to add things and we want to be able to square things, so it's a good idea to create functions for performing each of those steps. We might even want to use other functions within those functions (eg calling multiply from within square ).

Now, is it possible to go overboard with creating new functions? Yes. Try to avoid writing multiple functions that are basically the same. But otherwise... go nuts!

Answer 2

Calling a function from within another function is not bad. It is a recommended way of reducing repetition by breaking your code into smaller pieces, each handling some specific logic. Here is a simplified version of your code:

// ps: $ is not from jquery it is just a normal variable.
const $ = document.querySelector

const getValues = () => {
  const firstVal = $('#example')
  const secondVal = $('#exampleTwo')
}