Рефакторинг кода в модулях

Функция — это фрагмент кода для выполнения определенного действия. Функция — это способ определить кусок кода под именем, которое можно использовать в любое время, когда это необходимо.

Функции можно легко определить по следующим ключевым точкам…

  1. Функции позволяют нам писать многоразовый и модульный код.
  2. Функция определяет фрагмент кода под именем, которое можно использовать позже.

Использование функций — двухэтапный процесс

Создание и использование функций — это двухэтапный процесс…

  1. Определение функции
  2. Запуск функции

Запуск функции

Если у вас мало опыта работы с JS, то вы уже знаете, что существует большой набор встроенных функций, разделенных на разные категории, такие как Math функции, String функции, Array функции и многие другие…

Чтобы выполнить действие через любую функцию, нам просто нужно выполнить функцию. Давайте посмотрим на некоторые примеры встроенных функций…

Example-1:
const name = 'ishwar'
name.toUpperCase() // String function
Example-2:
Math.pow(2,5) // Math function
Example-3:
const colors = ['Red','Green','Blue']
colors.push('Yellow') // Array function

Как вы можете видеть в приведенном выше примере, за каждым именем function следует пара parenthesis (), которая может иметь некоторое количество argument.

Для выполнения некоторой задачи нам нужны входные данные от пользователя, и это input может быть задано comma separated list of arguments в function.

Создание функции

JS предоставляет вам богатый набор библиотек предопределенных функций для выполнения наиболее распространенных действий, но в большинстве случаев пользователям нужны свои собственные пользовательские функции. Таким образом, JS позволяет вам создавать собственный набор пользовательских функций.

Чтобы создать пользовательскую функцию, сначала напишите фрагмент кода, который выполняет нужное действие.

Например, если вы хотите создать функцию, которая желает вам «Доброе утро», код должен быть таким, как написано ниже…

Step-1: // Write a chunk of code to perform action
console.log('Good Morning')
Step-2: // Give a name to the code block
sayGoodMorning()
{
   console.log('Good Morning')
}
Step-3: // Use function keyword to make this function
function sayGoodMorning() 
{   
     console.log('Good Morning')
}

Ключевые моменты, на которые следует обратить внимание

  1. За каждым именем функции должна следовать пара parenthesis ().
  2. Для создания блока кода используются curly braces {}.
  3. Имена функций могут быть записаны двумя способами, например say_good_morning (разделенные символом подчеркивания) и sayGoodMorning (camel Case). В наши дни camel case соглашение более популярно.

Гид по стилю

При написании функции есть два популярных стиля написания функции…

// 1. New line style
function sayGoodMorning()
{
    console.log('Good Morning')
}
// 2. Inline style
function sayGoodMorning() {
   console.log('Good Morning')
}

Если вы новичок в программировании, вы можете использовать New line style, но большинство опытных программистов предпочитают писать inline style.

Получение входных данных с параметрами

Как мы уже говорили, при создании function необходимо иногда получать inputs. Итак, чтобы получить inputs, мы используем parameters в функциях…

Example-1:
function sayGoodMorning(name) {
   console.log(`Good Morning ${name}`)
}
Example-2:
function greet(name,msg) {
   console.log(msg+" "+name)
}

Давайте запустим Example-1, чтобы пожелать 3-м разным людям...

sayGoodMorning('Alex') // Good Morning Alex
sayGoodMorning('Jhon') // Good Morning Jhon
sayGoodMorning('Trilok') // Good Morning Trilok

В Example-2 мы также настроили greet msg. См. пример ниже, который демонстрирует, как greet 3 разных человека с разными желаниями.

greet('Avi','Happy Birthday') // Happy Birthday Avi
greet('Trilok','Good Morning') // Good Morning Trilok
greet('Justin','Bye Bye!!!') // Bye Bye!!! Justin

Возврат вывода

Functions — это действия, и некоторые действия могут генерировать output, которые можно использовать в дальнейшем. Таким образом, мы можем отправить сгенерированные значения output вне оператора function with return.

Example-1:
function sum(a,b) {
   return a + b
}
Example-2:
function arraySum(arr) {
   let sum = 0;
   for(let i = 0; i < arr.length; i++) {
        sum += arr[i]
   }
  return sum;
}

Как показано в приведенных выше примерах, первый пример показывает, что функция sum() возвращает сумму двух чисел a и b.
Аналогичным образом функция arraySum находит сумму элементов массива и возвращает результат.
Давайте посмотрим, как мы можно запускать и использовать вывод вышеперечисленных функций в приведенном ниже фрагменте кода…

Example-1:
console.log(sum(5,10)) // 15
console.log(sum(10,20) + 30) // 60
console.log(sum(sum(10,20),30)) // 60
Example-2:
let x = sum(3,4) * 2 
console.log(x) // 14
Example-3:
const nums = [10,20,30,40]
let sum = arraySum(nums)
console.log(sum) // 100

Пример использования: имитация броска костей

function rollDice() {
    return Math.floor(Math.random() * 6) + 1;
}
Execution:
rollDice() // 2
rollDice() // 6
rollDice() // 4

Избегать!!! Недостижимый код

Недостижимый код представляет собой строку кода, которая написана, но никогда не выполняется. См. пример ниже, чтобы понять факты.

function sqr(x) {
   return x * x
   console.log(x) // Unreachable code
}
sqr(5) // 25

Как показано в приведенном выше примере, return сразу передает управление из функции, поэтому console.log(x) никогда не выполняется, поэтому мы должны удалить этот код.

Некоторые языки программирования, такие как Java, генерируют код errors для кода unreachable, но JS не показывает код warning и error для кода unreachable. Так что будьте бдительны!!!.

Оптимизация возврата

Операторы возврата немедленно передают управление из функции всякий раз, когда они выполняются, а операторы после возврата никогда не выполняются. Таким образом, мы можем разумно оптимизировать использование операторов return, чтобы сделать ваш код компактным. Посмотрите несколько примеров, чтобы понять этот факт…

function max(a,b) {
   let result
   if(a > b) {
     result = a
   } else {
     result = b
   }
  return result
}

Как и в приведенном выше примере, сначала мы сохраняем вывод в переменной с именем result и, наконец, возвращаем значение result. мы можем напрямую вернуть result без сохранения в переменной, чтобы сделать код простым и компактным. См. пример ниже…

function max(a,b) {
   if(a > b) {
      return a
   } else {
      return b
   }
}

В приведенном выше фрагменте кода, если условие a > b оценивает true, будет выполнено return a, иначе будет выполнено return b. Как мы знаем, если выполняется return, то оператор, написанный после return, никогда не будет выполнен, поэтому мы можем сделать приведенный выше пример более компактным. См. фрагмент кода ниже…

function max(a,b) {
  if(a > b) {
     return a
  }
  return b
}

Практический пример — 1: Среднее значение массива

Найдите среднее значение элементов массива с помощью функции.

function avg(arr) {
   let sum = 0
   for(let i = 0; i < arr.length; i++) {
       sum += arr[i]
   }
   return sum / arr.length
}

Практический пример — 2: Является ли предложение панграмом??

Напишите функцию isPangram для проверки того, является ли данное предложение pangram или нет. pangram — это предложение, которое содержит все буквы алфавита, например:
A quick brown fox jumps over the dog.

function isPangram(sentence) {
   let lowerCaseSentence = sentence.toLowerCase()
   for(let char of 'abcdefghijklmnopqrstuvwxyz') {
      if(lowerCaseSentence.indexOf(char) === -1) {
          return false
      }
   }
  return true
}

цикл for..of

Цикл for…of используется для итерации коллекции, такой как array, которая перебирает array и возвращает элементы массива один за другим.

В приведенном выше примере цикл for…of используется для повторения string, который возвращает один за другим символ из string.

let nums = [10,20,30]
for(let item of nums) {
    console.log(item)
}
Output:
10
20
30

для... в цикле

Цикл for…in в основном используется как цикл for…of и похож на него. Разница между циклом for…in заключается в том, что он перебирает коллекцию (array и object) и возвращает значение key, а не item. См. пример ниже…

let nums = [10,20,30]
for(let item in nums) {
    console.log(item)
}
Output:
0
1
2

Чтобы получить доступ к значению с помощью цикла for…in, используйте оператор subscript [] со значением индекса. см. пример ниже…

let nums = [10,20,30]
for(let index in nums) {
    console.log(nums[index])
}
Output:
10
20
30

Практический пример — 3: выберите карту

Создайте карту выбора функции, которая имитирует карточную игру и выбирает карту для вас и возвращает объект, например:
{ value: 'k', suit: 'clubs' }

Выберите случайное значение из набора {1,2,3,4,5,6,7,8,9,10,J,Q,K,A} и выберите случайную масть из {clubs, spades, hearts, diamonds}

function pickCard() {
   const values = [2,3,4,5,6,7,8,9,10,J,Q,K,A];
   const suits = ['clubs','spades','hearts','diamonds'];

   const valueIndex = Math.floor(Math.random() * values.length);
   const pickedValue = values[valueIndex];
   const suitIndex = Math.floor(Math.random() * suits.length);
   const pickedSuit = suits[suitIndex]
   return {value: pickedValue, suit: pickedSuit}
}

Если вам понравился пост, не забудьте подписаться на меня:

Канал: https://medium.com/@maheshshittlani
Github: https://github.com/maheshshittlani
LinkedIn: https://in.linkedin.com/in/mahesh-shittlani-638b7429