07.12.2022 в 14:16

Функции JavaScript: Простое руководство

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

Функции JavaScript определяются с помощью ключевого слова function, за которым следует имя функции и пара круглых скобок, содержащих ноль или более параметров (или аргументов), разделенных запятыми. Список параметров функции будет находиться между этими круглыми скобками (). Параметры являются необязательными, и мы могли бы называть их переменными внутри функций. Тело функции заключено в фигурные скобки {}, которые могут содержать внутри себя один или несколько операторов.

Каков пример функции в JavaScript?

function Name (parameter1, parameter2) {
statements;
return value;
}

Давайте разберем это на:

Ключевое слово function
Имя после ключевого слова
Необязательные параметры
Statements, которые несут в себе задачи
Return (вернуть) ключевое слово, чтобы получить некоторый результат

Теперь давайте создадим реальный пример, давайте начнем с функции, которая может складывать два числа:

function add(num1, num2) {

  let result = num1 + num2

  console.log(result)

return result

}

Эта функция может добавить два значения, но сначала нам нужно вызвать функцию с двумя значениями, которые мы хотим, чтобы они были добавлены (аргумент 1, аргумент 2):

add(2, 3)

// output: the return statement should return : 5

Еще одна хорошая особенность JavaScript заключается в том, что он позволяет сохранять выходные данные функции в переменной, поэтому вместо add(2,3) мы можем написать:

const addOutput = add(2,3)

// output: the return statement should return the addOutput's variable with : 5

При этом сохраняется значение функции в переменной, и нам не нужно каждый раз вызывать функцию с одними и теми же переданными аргументами, чтобы получить один и тот же результат. Вместо этого используйте только переменную addOutput, в которой будет храниться возвращаемое значение функции add.

Это нужно иметь в виду:

Имена переменных чувствительны к регистру. addoutput отличается от addOutput, мы используем camel case в JavaScript. Начните с более низкого стула, чем с каждого другого слова, мы переходим к верхнему только для первого символа.
Используя описательные имена, избегайте имен x, y или z для имен параметров и функций.
Написание функции, вызываемой объявлением функции
Вызов функции, вызываемой вызовом или вызовом функции

Заявления

Объявить функцию, которая вызвала выражение

Точно так же, как мы использовали объявление переменной для хранения значений, возвращаемых из функции выше, мы можем использовать тот же метод для объявления функции, и он называется выражением функции (function expression).

Пример:

const add = function(num1, num2) {

  let result = num1 + num2

  console.log(result)

  return result

}


add(2,3)

// output: 5

Функция, которая вызвала IIFE (Immediately invoked function expression)

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

(function (num1, num2) {

let result = num1 + num2

console.log(result)

})(2,3)

// output: 5
// Notice we didn't have to call the function by a name, also notice the function has no name!

Что следует иметь в виду при использовании выражения function:

Выражения анонимны, поэтому позже в этом посте мы увидим, почему важно, чтобы мы были знакомы с различными типами функций.
IIFE - это также тип выражения функций

Параметры в javascript:

Мы называем параметр аргументом только тогда, когда он содержит значение. По умолчанию Javascript имеет аргументы объекта, подобные массиву, чтобы вы могли получить доступ ко всем параметрам, передаваемым функции, без необходимости называть или использовать их по одному.

function add() {

let argsTotal = 0

for (let i = 0; i < arguments.length; i++) {

// Here we see that javascript give us an access to the object like array called arguments

argsTotal += arguments[i]

}

return argsTotal

}

const output = add(2,3,1)

console.log(output) // 6

С последней версией JavaScript мы получили еще один подарок под названием rest operator. Это в основном дает нам то, что делают аргументы (массивоподобный объект), но в лучшем виде. И, говоря лучше, я имею в виду, что теперь у меня есть массив, с которым я могу использовать все методы массива, такие как sort(), filter(), map() или reduce().

function add (...args) {

let argsTotal = args.reduce(function(sum, value) {

return (sum + value)

})

return argsTotal

}

const output = add(2,3,1)

console.log(output)
// output: 6

Что следует иметь в виду о параметрах:

Этот массивоподобный объект не имеет доступа к некоторым методам массива, таким как map, filter или sort
Более поздняя версия javascript позволяет использовать оператор rest с в качестве последних параметров внутри функции: function add(num1, num2, ...args) {} - или просто для простоты: function add(...args) {}
Эти параметры rest могут принимать бесконечное число аргументов, и они всегда должны быть в конце списка параметров
В то время как объект Arguments не является реальным массивом, остальные параметры являются, и вы могли бы использовать с ним все методы массива
Когда мы передаем объект в качестве аргумента? когда нам нужно передать значение по ссылке, и меня не волнует порядок аргументов

Scope

Чтобы понять область действия, нам нужно взглянуть на переменную. Вам нужно знать, где декларируется?, чем декларируется?. Где имеется в виду, в каком блоке {} или в какой строке. Под чем имеется в виду под каким ключевым словом (ключевые слова var, let или const) или если это обычное объявление или выражение. Скажем так, никогда не используйте ключевое слово «var».

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

var nerdLevel = "nerd"

function doStudy() {

nerdLevel = "not nerd"

console.log(nerdLevel)

}

doStudy()
//output: not nerd

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

В следующем примере мы используем переменную nerdLevel в области видимости функции, используя "var":


function doStudyNerd() {

var nerdLevel = "Not Nerd"

console.log(nerdLevel)

}

doStudyNerd()

//output Not Nerd

Давайте теперь посмотрим на единственные объявления переменных ключевых слов области видимости блока: let и const. В следующем примере мы можем изменить let на const, и мы получим тот же результат. Однако нам нужно использовать const только в том случае, если мы знаем, что его значение не изменится. Отсюда и название const от constant. Или мы можем использовать его для передаваемых объектов ссылок, таких как массивы и функции.

let nerdLevel= "nerd"

function doStudy() {

let nerdLevel = "not nerd"

console.log(nerdLevel)

}

doStudy() // output: not nerd

console.log(nerdLevel) // output: nerd

Эти две переменные с одинаковым именем не должны быть разрешены, но если вы заметили одно и то же имя, да, но оно отображается в разных случаях. Следовательно, область применения другая, и это не одно и то же. Когда он появился в первый раз, он был в глобальной области видимости, поэтому, когда вы вызываете его в глобальной области видимости, он показывает значение “nerd”.

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

Что следует иметь в виду о scope:

Если вы не использовали ключевое слово объявления, такое как let, var или const, javascript предположит, что вы хотите использовать var

Hoisting

Hoisting - это процесс перемещения объявления переменной в верхнюю часть содержащей его области видимости, чтобы сделать ее доступной как можно скорее.

Если у вас есть функция, объявленная в строке под номером 300, но вы фактически вызвали ее или вызываете ту же самую функцию в строке под номером 100.

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

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

Что нужно иметь в виду при размещении:

Ключевое слово const совпадает с ключевым словом let, но const используется, если мы хотим использовать постоянное значение или использовать выражение объявления.
Обычные объявления функций подобны var· Они будут подняты, в то время как функции выражения этого не сделают.

Методы

Методы - это одна из процедур и действий, которые могут быть выполнены над объектом в JavaScript. В следующих примерах мы рассмотрим, как создать и вызвать метод внутри объекта.

Ключевое слово this

Всякий раз, когда мы используем ключевое слово this в коде JavaScript, мы имеем в виду объект. Вот почему всегда полезно посмотреть контекст, в котором вы используете ключевое слово this, поскольку ответ всегда зависит от этого.

const nerdsInfo = {

social: {

blog: "nerdleveltech.com",

twitter: "twitter.com/NerdLevelTech",

reddit: "www.reddit.com/user/NerdLevelTech"

},

printSocial: function(data) {

console.log(`${data.blog} ${data.twitter} ${data.reddit}`)

}

}

nerdsInfo.printSocial(nerdsInfo.social)

// output: nerdleveltech.com twitter.com/NerdLevelTech www.reddit.com/user/NerdLevelTech

Но с помощью ключевого слова this мы можем сделать это вместо этого:

const nerdsInfo = {

social: {

blog: "nerdleveltech.com",

twitter: "twitter.com/NerdLevelTech",

reddit: "www.reddit.com/user/NerdLevelTech"

},

printSocial: function(data) {

console.log(`${this.social.blog} ${this.social.twitter} ${this.social.reddit}`)

}

}

nerdsInfo.printSocial()

// output: nerdleveltech.com twitter.com/NerdLevelTech www.reddit.com/user/NerdLevelTech

И если мы не хотим немного улучшить код и сделать его более практичным примером, мы можем написать следующее:

const nerdsInfo = {

social: {

blog: "nerdleveltech.com",

twitter: "twitter.com/NerdLevelTech",

reddit: "www.reddit.com/user/NerdLevelTech"

},

printSocial: function() {

for (const key in this.social){

console.log(`${key} ${this.social[key]}`)

}

}

}

nerdsInfo.printSocial()

// output:

// blog nerdleveltech.com

// twitter twitter.com/NerdLevelTech

// reddit www.reddit.com/user/NerdLevelTech

Что следует иметь в виду при использовании этого ключевого слова:

Если мы используем ключевое слово this в пределах области действия функции, мы имеем в виду глобальный объект в это время
Если мы используем ключевое слово this в пределах области видимости объекта, мы имеем в виду этот объект в то время

Оператор возврата

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

function add (num1, num2) {

return console.log('Add Results: '),

num1 + num2

}

console.log(add(2,3))

// output: Add Results: 5

Что, если мы возьмем новую строку после возвращения? как бы вы думали, какими были бы результаты работы кода?

function add (num1, num2) {

return

console.log('Add Results: '),

num1 + num2

}

console.log(add(2,3))

// output: undefined

Причина неопределенного результата заключается в том, что компилятор автоматически ставит в конце каждой строки точку с запятой “;“

Поэтому, когда компилятор предполагает, что это конец строки, это будет только return; и это, конечно, return undefined.

Теперь вам нужно включить круглые скобки следующим образом:

function add (num1, num2) {

return(

console.log('Add Results: '),

num1 + num2

)

}

console.log(add(2,3))
// output: Add Results: 5

Что следует иметь в виду в отношении заявления о возврате:

Несколько возвратов могут быть в одной и той же функции с условными операторами, как только любое из возвращаемых значений будет истинным, функция вернется в этот момент, и функция завершится
Если при вызове функция не возвращает значение, функция вернет значение undefined

#JavaScript #Начинающим

670

Войти на сайт