4. Function (функции)
- Называть функции исходя из задачи которую они выполняют
- Одна функция должна выполнять одну задачу
- Не рекомендуется изменять внешние относительно функции переменные, подробнее в разделе Объект как аргумент функции.
Функция - это блок кода который можно выполнять многократно.
let a = 5
let b = 3
let c
c = a + b
console.log(c) // 8
a = 8
b = 12
c = a + b
console.log(c) // 20
В примере выше 2 одинаковых блока кода что не оптимизировано, лучше записать так:
let a = 5
let b = 3
function sum(a, b) {
const c = a + b
console.log(c)
}
sum(a, b) // 8
a = 8
b = 12
sum(a, b) // 20
В JS функция так же является объектом и как у любого объекта есть св-ва. Это можно увидеть введя в браузере console.dir(myFn) - получим объект.
function myFn(a, b) {
let c
a = a + 1
c = a + b
return c
}
console.log(myFn(5, 4))
console.dir(myFn) // в браузере получим объект
Параметры функции ведут себя как переменные, и значения этих переменных определяются(мы их задаём) в момент вызова функции, но эти переменные действуют только внутри функции.
ВАЖНО: после выполнения return никакие другие инструкции не будут выполняться т.е. функция возвращает результат и заканчивает работу. Если нет инструкции return в функции, то она вернет UNDEFINED т.к. функция в любом случае вернёт какое-то значение.
Вызов функции
Параметры функции это переменные которые задаются при объявлении функции a и b
Аргументы функции это 10 и 3
Вызов функции происходит так myFn(10, 3) но при этом в консоли мы ничего не увидим, но можно например присвоить результату вызова этой функции переменную и её вывести в консоль.
function myFn(a, b) {
let c
a = a + 1
c = a + b
return c
}
myFn(10, 3) // 14
const resultFn = myFn(10, 3)
console.log(resultFn)
ВАЖНО:
- Любую функцию можно вызывать много раз и каждый раз результат её выполнения будет меняться если будут меняться аргументы.
- Опционально можно задавать или не задавать: параметры функции, инструкцию return, аргументы. Вот к примеру самая короткая функция:
function myFn() {}
myFn() // undefined
Внутри этой функции переменная person будет ссылаться на тот же объект что и переменная personOne, получается функция мутирует внешний объект когда меняет одно из его св-в.
ВАЖНО: внутри функции не рекомендуется мутировать внешние объекты.
const personOne = {
name: 'Bob',
age: 21
}
function increasePersoneAge(person) {
person.age += 1
return person
}
increasePersoneAge(personOne)
console.log(personOne.age) // 22
ВОПРОС: Что делать если нужно выполнять какие-то действия внутри функции с объектом?
Можно создать копию объекта!
const personOne = {
name: 'Bob',
age: 21
}
function increasePersoneAge(person) {
const updatedPerson = Object.assign({}, person)
updatedPerson.age += 1
return updatedPerson
}
const updatedPersonOne = increasePersoneAge(personOne)
console.log(personOne.age)
console.log(updatedPersonOne.age)
Это такая функция которая вызывает внутри себя другую функцию. Или функция которая передаётся как аргумент внутри другой функции. fnWithCallback(anotherFn)
function anotherFn() {
// любые произвольные действия
}
function fnWithCallback(callbackFn) {
callbackFn
}
fnWithCallback(anotherFn)
ПРИМЕР: вызовем глобальную функцию setTimeout а внутри неё свою функцию
function printMyName() {
console.log('Igor')
}
setTimeout(printMyName, 1000)
Объявленная функция vs Функциональное выражение
Единственное отличие на самом деле только отсутствие имени функции, поэтому функциональное выражение всегда анонимное.
Чаще всего передачу функции как аргумента другой функции (callback function) используется чаще всего.
ПРИМЕР 1: Тут мы создаём переменную myFn и в качестве значения передаём функциональное выражение.
const myFn = function(a, b) {
let c
a = a + 1
c = a + b
return c
}
myFn(5, 3)
ПРИМЕР 1: Как использовать функциональное выражение как callback function (тут мы используем как раз анонимное функциональное выражение)
setTimeout(function() {
console.log('отложенное сообщение')
}, 1000)
Это функции у которых нет имени и не используется ключевое слово function
Важно понимать что стрелочная функция это выражение и они всегда анонимные и как все функции может не иметь параметров.
Основной особенностью является это синтаксис =>
(a, b) => {
let c
a = a + 1
c = a + b
return c
}
ПРИМЕР 1: Как же дать имя стрелочной функции? Так же как и функциональному выражению, присвоить переменную
const myFn = (a, b) => {
let c
a = a + 1
c = a + b
return c
}
console.log(myFn(5, 3)) // 9
ВОПРОС: почему не использовать обычную функцию где сразу присваивается имя? В этом случае мы можем использовать const и потом эту переменную нельзя будет изменить.
ПРИМЕР 2: Стрелочную функцию можно использовать как callback function
setTimeout(() => {
console.log('delayed message')
}, 1000)
ПРИМЕР 1: Если у стрелочной функции один параметр то круглые скобки можно опустить, но лучше добавлять круглы скобки т.к. в таком формате сложно понять что это стрелочная функция.
a => {
// function body
// return
}
ПРИМЕР 2: Фигурные скобки можно опустить если тело функции состоит из одного выражения и в этом случае стрелочная функция неявно (implicit return) возвращает результат. Можно не писать return. Это очень популярный формат записи.
(a, b) => a + b
ПРИМЕР 1: В следующем примере мы используем значение 1 как default для параметра multiplier
function multByFactor(value, multiplier = 1) {
return value * multiplier
}
multByFactor(10, 2)
multByFactor(5)
ПРИМЕР 2:
- тут новый синтаксис
({})неявный возврат значения, конечно можно использовать обычные фигурные скобки и ключевое слово return. Если убрать круглые скобки то интерпретатор JS решит что это тело функции, а нужно вернуть объект, поэтому оборачиваем объект в круглые скобки. Это сокращенный формат записи. - А в момент вызова функции добавляется св-во addedAt в объект и дата берётся текущая.
const newPost = (post, addedAt = Date()) => ({ // тут addedAt значение по умолчанию будет вызываться в момент вызова функции.
...post,
addedAt, // это кстати тоже сокращенная запись addedAt: addedAt
})
const firstPost = {
id: 1,
author: 'Igor'
}
console.log(newPost(firstPost))
Перепишем этот пример на стандартную (не сокращенную) запись функции:
const newPost = (post, addedAt = Date()) => {
const newObj = ({
...post,
addedAt: addedAt
})
return newObj
}
const firstPost = {
id: 1,
author: 'Igor'
}
console.log(newPost(firstPost))