ВВЕДЕНИЕ

Полное понимание вышеупомянутых концепций в JavaScript в значительной степени поможет вам в вашем продвижении в программировании. Вы поймете, что их понимание улучшит более чистый и ясный код, который будет легко отлаживать, а также сократит их. Эта статья направлена ​​на то, чтобы разбить эти три концепции на возможные части для облегчения понимания.

ФУНКЦИИ

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

Как объявить функцию

function showGreeting (Parameter ) {
  // function body 
};
showGreeting()

Чтобы объявить функцию, вы начинаете с ключевого слова функции (функция), затем имени function(showGreeting()), затем параметра, который должен быть заключен в круглые скобки ((Параметр)). У вас может быть список параметров, но они должны быть разделены запятыми. Тело функции будет заключено в фигурные скобки {}, как показано выше. Затем будет вызвано имя функции для выполнения функции, как показано (showGreeting()).

Локальные и внешние переменные

Локальные переменные относятся к переменным, объявленным внутри функции. Например;

function showGreeting () {
  let welcomeNote = 'Hello, You Are Most Welcome!';
  alert(welcomeNote);
};
showGreeting()

Важно отметить, что переменная “let welcomeNote”, содержащая строку «Здравствуйте, приветствуем вас!», может выполняться только внутри вызываемой функции, поскольку она была объявлена ​​локально.

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

let name = "Grace";
  function showGreeting () {
  name = "Constance";
  let welcomeNote= `Hello ${name}, You Are Most Welcome!`;
  alert(welcomeNote);
}
showGreeting();

Приведенная выше функция вернет «Здравствуйте, Констанс, добро пожаловать!» ’. Внешняя переменная используется только тогда, когда нет локальной. Когда есть локальная, она переопределяет глобальную переменную.

Примечание: Функция является ЧИСТОЙ, когда она принимает свои входные данные, используйте ТОЛЬКО их для вычисления выходных данных, а затем возвращайте их. Следовательно, для более чистого и всеобъемлющего кода желательно, чтобы ваши отдельные функции имели свои собственные параметры, локальные переменные, а не внешние переменные, которые работают и возвращают свой собственный результат.

Параметры

Они просто используются для передачи данных функциям. Их также называют Аргументы. Например;

function showGreeting ( firstName, lastName ) {
    let welcomeNote = 'Hello ';
    alert (welcomeNote + firstName + lastName);
}
showGreeting ('Ajuzie', ' Constance')

Из вышеизложенного переменной (firstName, lastName) были присвоены значения (‘Ajuzie’, ‘ Constance’). Поэтому при выполнении он вернет «Hello Ajuzie Constance».

Параметры по умолчанию

Если параметр не указан, значение остается неопределенным, поскольку изначально оно не было передано в качестве параметра. Например, если «showGreeting (‘Ajuzie’)» была вызвана для выполнения ее функции, она вернет “ Hello Ajuzie undefined”, поскольку переменной ‘lastName’ не было присвоено значение. Итак, чтобы присвоить значение по умолчанию этой конкретной переменной, переданной в качестве параметра, это следует сделать следующим образом;

function showGreeting ( firstName, lastName= ' Constance' ) {
let welcomeNote = 'Hello ';
alert (welcomeNote + firstName + lastName);
}
showGreeting ('Ajuzie');

Приведенный выше код выведет « Hello Ajuzie Constance». Это означает, что, за исключением того, что для ‘(lastName)’ назначено другое значение, его значение по умолчанию равно (‘Constance’).

СФЕРА

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

В JavaScript в основном есть два типа областей видимости, а именно;

• Global Scope (These are variables that can be accessed everywhere)
  
• Functional/Local Scope (These are variables that can be accessed in the boundaries of the function in which they are declared.)

Например;

const globalScope = 'I am global scope';
function getScope () {
const globalScope = 'I am function/ local scope';
console.log(globalScope); // ’I am a function/ local scope’
}
getScope();
console.log (globalScope); //’I am a global scope’

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

const globalScope = 'I am a global scope';
const secondGlobalScope = 'I am also a global scope';
const thirdGlobalScope = ' I am another global scope';
function getScope () {
  const globalScope = 'I am a function scope';
  const secondGlobalScope = 'I am equally a function scope';
  function getAnotherScope () {
    const fourthGlobalScope = 'I am a child function scope';
    console.log(globalScope); // 'I am a function scope'
    console.log(thirdGlobalScope); // 'I am another global scope'
  }
  getAnotherScope();
}
getScope();
console.log(fourthGlobalScope); // Reference Error
console.log(globalScope); // 'I am a function scope'
console.log(thirdGlobalScope); // 'I am another global scope'

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

ФУНКЦИИ СТРЕЛКИ

В своей базовой форме стрелочная функция представляет собой новый способ написания более коротких функций. Эта функция была представлена ​​в ES6.

СИНТАКСИС:

Let checkArr = (arr) => {
    if (arr = ['fish', 'meat']) {
    return 'there is an arr';
    } else {
        return 'arr not found'
    }
}

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

let checkArr = (arr) => 'there is an array'

Как видите, фигурные скобки и ключевое слово return не нужны.