- 📔 Giorno 7
- Funzioni
- Dichiarare una Funzione
- Funzione senza parametro e valore di ritorno
- Funzione con valore di ritorno
- Funzione con un parametro
- Funzione con due parametri
- Funzione con molti parametri
- Funzione con numero illimitato di parametri
- Anonymous Function
- Expression Function
- Self Invoking Functions
- Arrow Function
- Funzioni con parametri di default
- Dichiarazione di funzione vs Arrow function
- 💻 Esercizi
- Funzioni
📔 Giorno 7
Funzioni
Finora abbiamo visto molte funzioni JavaScript integrate. In questa sezione ci concentreremo sulle funzioni personalizzate. Che cos'è una funzione? Prima di iniziare a creare funzioni, cerchiamo di capire cos'è una funzione e perché ne abbiamo bisogno.
Una funzione è un blocco riutilizzabile di codice o di istruzioni di programmazione progettato per eseguire un determinato compito. Una funzione è dichiarata da una parola chiave seguita da un nome, seguita da parentesi (). Una parentesi può contenere un parametro. Se una funzione accetta un parametro, verrà chiamata con un argomento. Una funzione può anche accettare un parametro predefinito. Per memorizzare un dato in una funzione, questa deve restituire determinati tipi di dati. Per ottenere il valore si chiama o si invoca una funzione. Le funzioni rendono il codice
- pulito e facile da leggere
- riutilizzabile
- facile da testare
Una funzione può essere dichiarata o creata in due modi:
- Declaration function
- Expression function
- Anonymous function
- Arrow function
Dichiarare una Funzione
Vediamo come dichiarare una funzione e come chiamare una funzione.
//declaring a function without a parameter
function functionName() {
// code goes here
}
functionName() // calling function by its name and with parentheses
Funzione senza parametro e valore di ritorno
Le funzioni possono essere dichiarate senza parametri.
Esempio:
// function without parameter, a function which make a number square
function square() {
let num = 2
let sq = num * num
console.log(sq)
}
square() // 4
// function without parameter
function addTwoNumbers() {
let numOne = 10
let numTwo = 20
let sum = numOne + numTwo
console.log(sum)
}
addTwoNumbers() // a function has to be called by its name to be executed
function printFullName (){
let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let space = ' '
let fullName = firstName + space + lastName
console.log(fullName)
}
printFullName() // calling a function
Funzione con valore di ritorno
Le funzioni possono anche restituire valori; se una funzione non restituisce valori, il valore della funzione è indefinito. Scriviamo le funzioni di cui sopra con il ritorno. D'ora in poi, restituiremo il valore a una funzione invece di stamparlo.
function printFullName (){
let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let space = ' '
let fullName = firstName + space + lastName
return fullName
}
console.log(printFullName())
function addTwoNumbers() {
let numOne = 2
let numTwo = 3
let total = numOne + numTwo
return total
}
console.log(addTwoNumbers())
Funzione con un parametro
In una funzione si possono passare come parametri diversi tipi di dati (numero, stringa, booleano, oggetto, funzione).
// function with one parameter
function functionName(parm1) {
//code goes her
}
functionName(parm1) // during calling or invoking one argument needed
function areaOfCircle(r) {
let area = Math.PI * r * r
return area
}
console.log(areaOfCircle(10)) // should be called with one argument
function square(number) {
return number * number
}
console.log(square(10))
Funzione con due parametri
// function with two parameters
function functionName(parm1, parm2) {
//code goes her
}
functionName(parm1, parm2) // during calling or invoking two arguments needed
// Function without parameter doesn't take input, so lets make a function with parameters
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo
console.log(sum)
}
sumTwoNumbers(10, 20) // calling functions
// If a function doesn't return it doesn't store data, so it should return
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo
return sum
}
console.log(sumTwoNumbers(10, 20))
function printFullName(firstName, lastName) {
return `${firstName} ${lastName}`
}
console.log(printFullName('Asabeneh', 'Yetayeh'))
Funzione con molti parametri
// function with multiple parameters
function functionName(parm1, parm2, parm3,...){
//code goes here
}
functionName(parm1,parm2,parm3,...) // during calling or invoking three arguments needed
// this function takes array as a parameter and sum up the numbers in the array
function sumArrayValues(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
return sum;
}
const numbers = [1, 2, 3, 4, 5];
//calling a function
console.log(sumArrayValues(numbers));
const areaOfCircle = (radius) => {
let area = Math.PI * radius * radius;
return area;
}
console.log(areaOfCircle(10))
Funzione con numero illimitato di parametri
A volte non sappiamo quanti argomenti l'utente ci passerà. Pertanto, dobbiamo sapere come scrivere una funzione che può accettare un numero illimitato di argomenti. Il modo in cui lo facciamo presenta una differenza significativa tra una dichiarazione di funzione (funzione regolare) e una funzione freccia (arrow function). Vediamo alcuni esempi di dichiarazione di funzione e di funzione freccia.
Numero illimitato di parametri nelle funzioni regolari
Una dichiarazione di funzione fornisce un array di argomenti con ambito di funzione come un oggetto. Qualsiasi cosa passata come argomento nella funzione può essere accessibile dall'oggetto argomenti all'interno delle funzioni. Vediamo un esempio
```js // Let us access the arguments object function sumAllNums() { console.log(arguments) }
sumAllNums(1, 2, 3, 4) // Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
```js
// function declaration
function sumAllNums() {
let sum = 0
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173
Numero illimitato di parametri nelle arrow function
La funzione Arrow non ha l'oggetto argomenti con ambito di funzione. Per implementare una funzione che accetta un numero illimitato di argomenti, in una funzione freccia si utilizza l'operatore spread seguito da un qualsiasi nome di parametro. Qualsiasi cosa passata come argomento nella funzione può essere accessibile come array nella funzione freccia. Vediamo un esempio
```js // Let us access the arguments object const sumAllNums = (...args) => { // console.log(arguments), arguments object not found in arrow function // instead we use a parameter followed by spread operator (...) console.log(args) }
sumAllNums(1, 2, 3, 4) // [1, 2, 3, 4]
```js
// function declaration
const sumAllNums = (...args) => {
let sum = 0
for (const element of args) {
sum += element
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173
Anonymous Function
Funzione anonima o senza nome
const anonymousFun = function() {
console.log(
'I am an anonymous function and my value is stored in anonymousFun'
)
}
Expression Function
Le Expression Function sono funzioni anonime. Dopo aver creato una funzione senza nome, la assegniamo a una variabile. Per restituire un valore dalla funzione, dobbiamo chiamare la variabile. Guardate l'esempio seguente.
Self Invoking Functions
Le funzioni Self Invoking sono funzioni anonime che non hanno bisogno di essere chiamate per restituire un valore.
(function(n) {
console.log(n * n)
})(2) // 4, but instead of just printing if we want to return and store the data, we do as shown below
let squaredNum = (function(n) {
return n * n
})(10)
console.log(squaredNum)
Arrow Function
La Arrow function è un'alternativa per scrivere una funzione, tuttavia la dichiarazione di funzione e la Arrow function presentano alcune piccole differenze.
La Arrow function utilizza la freccia invece della parola chiave function per dichiarare una funzione. Vediamo la dichiarazione di funzione e la funzione freccia.
// This is how we write normal or declaration function
// Let us change this declaration function to an arrow function
function square(n) {
return n * n
}
console.log(square(2)) // 4
const square = n => {
return n * n
}
console.log(square(2)) // -> 4
// if we have only one line in the code block, it can be written as follows, explicit return
const square = n => n * n // -> 4
const changeToUpperCase = arr => {
const newArr = []
for (const element of arr) {
newArr.push(element.toUpperCase())
}
return newArr
}
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
console.log(changeToUpperCase(countries))
// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
const printFullName = (firstName, lastName) => {
return `${firstName} ${lastName}`
}
console.log(printFullName('Asabeneh', 'Yetayeh'))
La funzione di cui sopra ha solo l'istruzione return, quindi possiamo restituirla esplicitamente come segue.
const printFullName = (firstName, lastName) => `${firstName} ${lastName}`
console.log(printFullName('Asabeneh', 'Yetayeh'))
Funzioni con parametri di default
A volte si passano dei valori predefiniti ai parametri; quando si invoca la funzione, se non si passa un argomento, verrà utilizzato il valore predefinito. Sia la dichiarazione di funzione che la funzione freccia possono avere uno o più valori predefiniti.
// syntax
// Declaring a function
function functionName(param = value) {
//codes
}
// Calling function
functionName()
functionName(arg)
Esempio:
function greetings(name = 'Peter') {
let message = `${name}, welcome to 30 Days Of JavaScript!`
return message
}
console.log(greetings())
console.log(greetings('Asabeneh'))
function generateFullName(firstName = 'Asabeneh', lastName = 'Yetayeh') {
let space = ' '
let fullName = firstName + space + lastName
return fullName
}
console.log(generateFullName())
console.log(generateFullName('David', 'Smith'))
function calculateAge(birthYear, currentYear = 2019) {
let age = currentYear - birthYear
return age
}
console.log('Age: ', calculateAge(1819))
function weightOfObject(mass, gravity = 9.81) {
let weight = mass * gravity + ' N' // the value has to be changed to string first
return weight
}
console.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 gravity at the surface of Earth
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // gravity at surface of Moon
Vediamo come scrivere le funzioni di cui sopra con le funzioni a freccia
// syntax
// Declaring a function
const functionName = (param = value) => {
//codes
}
// Calling function
functionName()
functionName(arg)
Esempio:
const greetings = (name = 'Peter') => {
let message = name + ', welcome to 30 Days Of JavaScript!'
return message
}
console.log(greetings())
console.log(greetings('Asabeneh'))
const generateFullName = (firstName = 'Asabeneh', lastName = 'Yetayeh') => {
let space = ' '
let fullName = firstName + space + lastName
return fullName
}
console.log(generateFullName())
console.log(generateFullName('David', 'Smith'))
const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear
console.log('Age: ', calculateAge(1819))
const weightOfObject = (mass, gravity = 9.81) => mass * gravity + ' N'
console.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 gravity at the surface of Earth
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // gravity at surface of Moon
Dichiarazione di funzione vs Arrow function
Verrà trattato in un'altra sezione.
🌕 Sei una stella nascente, ora conosci le funzioni. Sei super carico del potere delle funzioni. Hai appena completato le sfide del 7° giorno e sei a 7 passi dalla strada verso la grandezza. Ora fai qualche esercizio per il cervello e per i muscoli.
💻 Esercizi
Esercizi: Livello 1
- Dichiarare una funzione fullName e stampare il proprio nome completo.
- Dichiarare una funzione fullName che prenda come parametro firstName e lastName e restituisca il nome completo.
- Dichiarate una funzione addNumbers che prende due parametri e restituisce la somma.
- L'area di un rettangolo si calcola come segue: area = lunghezza x larghezza. Scrivete una funzione che calcoli l'area del rettangolo.
- Il perimetro di un rettangolo si calcola come segue: perimetro= 2x(lunghezza + larghezza). Scrivete una funzione che calcoli il perimetro del rettangolo.
- Il volume di un prisma rettangolare si calcola come segue: volume = lunghezza x larghezza x altezza. Scrivete una funzione che calcoli il volume del prisma rettangolare.
- L'area di un cerchio si calcola come segue: area = π x r x r. Scrivere una funzione che calcoli areaOfCircle.
- La circonferenza di un cerchio si calcola come segue: circonferenza = 2πr. Scrivere una funzione che calcoli circonferenza.
- La densità di una sostanza si calcola come segue:densità= massa/volume. Scrivete una funzione che calcoli la densità.
- La velocità si calcola dividendo la distanza totale coperta da un oggetto in movimento per il tempo totale impiegato. Scrivete una funzione che calcoli la velocità di un oggetto in movimento, velocità.
- Il peso di una sostanza si calcola come segue: peso = massa x gravità. Scrivete una funzione che calcoli il peso.
- La temperatura in oC può essere convertita in oF utilizzando questa formula: oF = (oC x 9/5) + 32. Scrivete una funzione che converta oC in oF convertCelsiusToFahrenheit.
-
L'indice di massa corporea (BMI) si calcola come segue: bmi = peso in Kg / (altezza x altezza) in m2. Scrivete una funzione che calcoli il bmi. L'IMC viene utilizzato per definire in modo generale diversi gruppi di peso negli adulti di 20 anni o più.Verificate se una persona è sottopeso, normale, sovrappeso o obesa sulla base delle informazioni fornite di seguito.
- Gli stessi gruppi si applicano sia agli uomini che alle donne.
- Sottopeso: L'IMC è inferiore a 18,5
- Peso normale: L'IMC è compreso tra 18,5 e 24,9
- Sovrappeso: IMC compreso tra 25 e 29,9
- Obesità: IMC pari o superiore a 30
-
Scrivete una funzione chiamata checkSeason, che prende un parametro mese e restituisce la stagione: autunno, inverno, primavera o estate.
-
Math.max restituisce il suo argomento più grande. Scrivete una funzione findMax che prenda tre argomenti e restituisca il loro massimo senza usare il metodo Math.max.
Esercizi: Livello 2
- L'equazione lineare è calcolata come segue: ax + by + c = 0. Scrivete una funzione che calcola il valore di un'equazione lineare, solveLinEquation.
-
L'equazione quadratica si calcola come segue: ax2 + bx + c = 0. Scrivete una funzione che calcoli il valore o i valori di un'equazione quadratica, solveQuadEquation.
-
Dichiarare una funzione chiamata printArray. Prende un array come parametro e stampa ogni valore dell'array.
-
Scrivete una funzione di nome showDateTime che mostra l'ora in questo formato: 08/01/2020 04:08 utilizzando l'oggetto Date.
-
Dichiarare il nome della funzione swapValues. Questa funzione scambia il valore di x con quello di y.
-
Dichiarare una funzione chiamata reverseArray. Prende un array come parametro e restituisce l'inverso dell'array (non usare il metodo).
-
Dichiarare il nome della funzione capitalizeArray. Prende l'array come parametro e restituisce l'array - maiuscolo.
- Dichiarare una funzione di nome addItem. Prende come parametro un elemento e restituisce un array dopo l'aggiunta dell'elemento.
- Dichiarare una funzione di nome removeItem. Richiede un parametro indice e restituisce un array dopo la rimozione di un elemento.
- Dichiarare una funzione di nome sumOfNumbers. Richiede un parametro numero e somma tutti i numeri in quell'intervallo.
- Dichiarare una funzione di nome sumOfOdds. Prende come parametro un numero e somma tutti i numeri dispari in quell'intervallo.
- Dichiarare una funzione di nome sumOfEven. Prende come parametro un numero e somma tutti i numeri pari in quell'intervallo.
-
Dichiarare il nome di una funzione EvensAndOdds. Prende come parametro un numero intero positivo e conta il numero di pari e dispari nel numero.
-
Scrivere una funzione che accetta un numero qualsiasi di argomenti e restituisce la somma degli argomenti.
-
Scrivere una funzione che generi un randomUserIp.
- Scrivere una funzione che generi un randomMacAddress.
-
Dichiarare il nome di una funzione randomHexaNumberGenerator. Quando questa funzione viene chiamata, genera un numero esadecimale casuale. La funzione restituisce il numero esadecimale.
-
Dichiarare il nome della funzione userIdGenerator. Quando questa funzione viene chiamata, genera un id di sette caratteri. La funzione restituisce l'id.
Esercizi: Livello 3
-
Modificare la funzione userIdGenerator. Dichiarare il nome della funzione userIdGeneratedByUser. Non accetta alcun parametro, ma prende due input tramite prompt(). Uno di questi è il numero di caratteri e il secondo è il numero di ID che devono essere generati.
-
Scrivete una funzione chiamata rgbColorGenerator che genera i colori rgb.
-
Scrivere una funzione arrayOfHexaColors che restituisca un numero qualsiasi di colori esadecimali in un array.
- Scrivete una funzione arrayOfRgbColors che restituisca un numero qualsiasi di colori RGB in una matrice.
- Scrivere una funzione convertHexaToRgb che converta il colore hexa in rgb e restituisca un colore rgb.
- Scrivere una funzione convertRgbToHexa che converta il colore rgb in hexa e restituisca un colore hexa.
-
Scrivere una funzione generateColors che possa generare un numero qualsiasi di colori hexa o rgb.
-
Chiamare la funzione shuffleArray, che prende un array come parametro e restituisce un array mescolato.
- Chiamate la vostra funzione factorial, che prende un numero intero come parametro e restituisce un fattoriale del numero
- Chiamate la funzione isEmpty, che prende un parametro e controlla se è vuoto o meno.
- Chiamate la funzione sum, che accetta un numero qualsiasi di argomenti e restituisce la somma.
- Scrivete una funzione chiamata sumOfArrayItems, che accetta un parametro dell'array e restituisce la somma di tutti gli elementi. Verificare se tutti gli elementi dell'array sono di tipo numero. In caso contrario, restituire un feedback ragionevole.
- Scrivete una funzione chiamata media, che accetta un parametro di array e restituisce la media degli elementi. Verificate se tutti gli elementi dell'array sono di tipo numero. In caso contrario, restituire un feedback ragionevole.
-
Scrivere una funzione chiamata modifyArray che prenda come parametro un array e modifichi il quinto elemento dell'array e restituisca l'array. Se la lunghezza dell'array è inferiore a cinque, restituisce "elemento non trovato".
-
Scrivere una funzione chiamata isPrime, che verifichi se un numero è un numero primo.
- Scrivete una funzione che verifichi se tutti gli elementi sono unici nell'array.
- Scrivete una funzione che verifichi se tutti gli elementi dell'array sono dello stesso tipo di dati.
- Il nome della variabile JavaScript non supporta caratteri speciali o simboli, tranne \$ o _. Scrivete una funzione isValidVariable che controlli se una variabile è valida o non valida.
-
Scrivete una funzione che restituisca un array di sette numeri casuali in un intervallo compreso tra 0 e 9. Tutti i numeri devono essere unici. Tutti i numeri devono essere unici.
-
Scrivere una funzione chiamata reverseCountries, che prenda un array di paesi e prima copi l'array e restituisca l'inverso dell'array originale.
🎉 CONGRATULAZIONI ! 🎉