JavaScript Essentials: Функции веселые (и VIP) - если вы понимаете их

Автор оригинала: FreeCodeCamp Community Member.

Zell Liew

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

Вам нужно нарисовать воду из этого, несколько раз в день. Это хлопот, чтобы сказать: «Я собираюсь взять пустое ведро, пойти в колодец, нарисуйте воду и вернуть ее домой» каждый раз, когда вы объясняете, что вы делаете.

Чтобы сократить его, вы можете сказать, что вы собираетесь «нарисовать воду».

И, мой друг, вы создали функцию.

Объявление функций

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

Это можно определить со следующим синтаксисом:

function functionName (parameters) {   // Do stuff here }

Функция это ключевое слово, которое говорит JavaScript, вы определяете функцию.

Функциональное значение это название функции. В приведенном выше примере имя функции может быть приостановка .

Имя функции может быть чем угодно, пока следует то же правила, что и Объявление переменных Отказ Другими словами, необходимо следовать этим правилам:

Это должно быть одно слово
Он должен состоять только из букв, цифр или подчеркиваний (0-9, A-Z, A-Z, _ )
Это не может начать с числа
Это не может быть ни одного из этих Зарезервированные ключевые слова

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

Использование функций

Как только вы объявили свою функцию, вы можете использовать (или Inзов или Call , или Execute ) Это путем написания названия функции, а затем скользящие скобки () .

Вот пример, где Сайхелло Функция объявляется и используется.

// Declaring a function

function sayHello () {  console.log('Hello world!')}

// using a functionsayHello()

Отступ

Код в блоке (что-либо в пределах фигурных скобок {} ) должен быть с отступом вправо. Это важная практика, которая помогает вам легче прочитать код. Это позволяет вам рассказать о том, что Console.log («Hello World») является частью Сайхелло Отказ

function sayHello () {     // This console.log statement is a part of sayHello       console.log('Hello world!') }

Вы можете выбрать отступ с двумя пробелами или с ключом вкладок. Некоторые люди предпочитают пробелы, другие предпочитают вкладку. Оба в порядке, пока вы сохраняете его последовательным.

Параметры

Большинство функций принимают параметры. Это Разделенный запятой список переменных Вы хотите объявить для вашей функции.

Вы можете иметь любое количество параметров.

function functionName(param1, param2, param3) {   // Do stuff here }

Чтобы назначить значения ваших параметрах, вы проходите значения (называемые аргументами), написав их как значения, разделенные запятыми в скобках.

Первый аргумент будет назначен первому параметру, второй аргумент второго параметра и т. Д.

functionName('arg1', 'arg2')

Давайте сделаем это понятнее с примером.

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

function sayName(firstName, lastName) {   console.log('firstName is ' + firstName)   console.log('lastName is ' + lastName) }

Zell – мое имя, Liew – моя фамилия. Чтобы правильно работать функцию, я передаю мой Zell. , как первый аргумент, а Liew Как второй аргумент:

sayName('Zell', 'Liew') // firstName is Zell // lastName is Liew

Если вы объявили параметр, но не пропустил аргумент к нему, ваш параметр будет неопределенный .

sayName() // firstName is undefined // lastName is undefined

Обратный оператор

Функции могут иметь оператор возврата, который состоит из ключевого слова возврата и значения:

function functionName () {   return 'some-value' }

Когда JavaScript видит это оператор возврата, он останавливается выполнение остальной части функции и «возвраты» (передает значение обратно на вызов функции).

function get2 () {   return 2   console.log('blah') // This is not executed }

const results = get2() console.log(results) // 2 // Note: You would not see 'blah' in the console

Если возвращаемое значение является выражением, JavaScript оценивает выражение перед возвратом значения.

Помните, JavaScript может пройти только вокруг примитивов (как строка, цифры, логические значения) и объекты (Как функции, массивы и объекты) в качестве значений. Все остальное нужно оценить .

Поток функции

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

Вот код, который мы рассекаем:

function add2 (num) {   return num + 2 }

const number = add2(8) console.log(number) // 10

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

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

Далее, JavaScript видит, что вы объявляете переменную под названием Номер и назначить его в результате Add2 (8) Отказ

Поскольку правая часть (RHS) – это вызов функции (выражение), JavaScript должен оценить значение Add2 (8) прежде чем он сможет назначить его Номер Переменная. Здесь он устанавливает параметр оставлять к 8 , так как вы проходили в 8 в качестве аргумента, когда вы звоните Add2 (8) .

В Add2 Функция, JavaScript видит оператор возврата, который говорит Num + 2 Отказ Это выражение, поэтому он должен оценить его, прежде чем двигаться дальше. С Num 8, Num + 2 должно быть 10.

Однажды Num + 2 Оценивается, JavaScript возвращает значение вызова функции. Он заменяет вызов функции с возвращенным значением. Итак, Add2 (8) становится 10.

Наконец, как только RHS оценивается, JavaScript создает переменную, Номер и назначает значение 10 к нему.

Вот как вы читаете поток функции.

Подъемность

Когда функции объявлены с помощью объявления функции (то, что вы узнали выше), они поднимаются на вершину вашего Область Отказ Это означает, что следующие два набора кода являются точно такими же.

function sayHello () {   console.log('Hello world!') } sayHello()

// This is automatically converted to the above code sayHello() function sayHello () {   console.log('Hello world!') }

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

Объявление функций с функциональными выражениями

Второй способ объявления функций – это выражение функции. Здесь вы объявляете переменную, а затем назначьте функцию без имени (анонимную функцию) к ней.

const sayHello = function () {   console.log('This is declared with a function expression!') }

Обратите внимание, что функции, объявленные с выражениями функций, не зависят автоматически на вершину вашего объема.

sayHello () // Error, sayHello is not defined const sayHello = function () {   console.log('this is a function!') }

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

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

Упаковка

Вы вызываете функции, добавив () до конца имени функции. Когда вы делаете это, вы можете добавить дополнительные значения в качестве аргументов к функции.

Каждая функция может иметь оператор возврата, который «возвращает» значение для вызова функции.

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

Эта статья является уроком образца от изучения JavaScript – Курс, который помогает вам изучить JavaScript на реальные, практические компоненты с нуля. Вы будете любить изучать JavaScript, если вы нашли эту статью полезную. Если вы любили эту статью, я приглашаю вас на Узнайте больше о изучении JavaScript Отказ

(О, кстати, если вам понравилась эта статья, я был бы признателен, если бы вы могли поделиться этим .?)

Первоначально опубликовано zellwk.com .

Оригинал: “https://www.freecodecamp.org/news/javascript-essentials-functions-are-fun-and-vip-if-you-understand-them-29da2d4c9641/”