- 📔 7. Gün
- Functions - Fonksiyonlar
- Klasik fonksiyon Tanımlama
- Anonymous Function - İsimsiz fonksiyon
- Expression Function
- Parametresiz ve dönüş değeri olmayan fonksiyon
- Fonksiyonlarda return kullanımı
- Bir parametreli fonksiyon
- İki parametreli fonksiyon
- Çok parametreli fonksiyon
- Sınırsız sayıda parametreyle çalışan fonksiyon
- Kendi kendine çağırılan fonksiyon - Self Invokinf function
- Arrow Function
- Arrow function'da sınırsız sayıda parametre
- Default parametre ile fonksiyon kullanımı
- Function declaration versus Arrow function
- 💻 Exercises
- Functions - Fonksiyonlar
📔 7. Gün
Functions - Fonksiyonlar
Şimdiye kadar birçok JavaScript fonksiyonu yazdık. Bu bölümde, custom fonksiyonlara odaklanacağız. Fonksiyon yazmaya başlamadan önce, fonksiyonun ne olduğunu ve neden fonksiyona ihtiyacımız olduğunu bakalım.
Bir fonksiyon, belirli bir görevi gerçekleştirmek üzere tasarlanmış ve yeniden kullanılabilir bir kod bloğu veya programlama tanımıdır.
Bir fonksiyon, function anahtar kelimesi ardından gelen o fonksiyona ait fonksiyon ismi ve parantezler ile tanımlanır. Bu paranteler fonksiyona parametre atayabilmemizi sağlar. Şayet fonksiyon parametre alırsa bu parametre fonksiyon scope'u içerisinde geçerli olan bir değişkendir. Farklı bir kullanım olarak da bu parametreye default değerler atayabiliriz. Eğer bir fonksiyon yardımı ile veri taşımak istiyorsak söz konusu fonksiyonun belirli bir veri türünü geriye değişken olarak döndürmesi gerekir. Daha sonra dönen bu değişkeni bir başka değişkene atayarak kullanabilir.
Fonksiyon kullanmanın avantajları:
- temiz ve okunması kolay
- yeniden kullanılabilir
- kolay test edilir
Bir fonksiyon birkaç şekilde tanımlanabilir:
- Klasik Declaration function
- Expression function
- Anonymous function
- Arrow function
Klasik Fonksiyon Tanımlama
Bir fonksiyonun nasıl tanımlanacağını ve çağırılacağını görelim.
//parametresiz fonksiyon tanımıı
function functionName() {
// istenilen kod parçası
}
functionName() // fonksiyon, fonksiyon adı ve parantezler ile çağırılır
Anonymous Function - İsimsiz Fonksiyon
const anonymousFun = function() {
console.log(
'İsimsiz bir fonksiyonum ve değerim anonim olarak saklanıyor'
)
}
Expression Function
Expression function, isimsiz fonksiyonlardır. İsimsiz bir fonksiyon oluşturduktan sonra bir değişkene atayarak kullanırız. Fonksiyondan bir değer geri döndürmek için değişkeni çağırmalıyız. Örnek vemrek gerekirse.
// Function expression
const square = function() {
console.log("Bu bir expression function türünde fonksiyondur")
}
Parametresiz ve dönüş değeri olamayan fonksiyon
Fonksiyon, parametre olmadan tanımlanabilir. (Şu ana kadar tanımladıklarımız zaten parametresizdi)
Example:
function square() {
let num = 2
let square = num * num
console.log(square)
}
square() // 4
// parametresiz fonksiyon örnek 2:
function addTwoNumbers() {
let numOne = 10
let numTwo = 20
let sum = numOne + numTwo
console.log(sum)
}
addTwoNumbers() // fonksiyon, kendisine verilen isim ile çağırılmalı
function printFullName (){
let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let space = ' '
let fullName = firstName + space + lastName
console.log(fullName)
}
printFullName() // fonksiyon çağırımına bir örnek
Bir değer döndüren fonksiyon
Fonksiyonlar geriye bir değer döndürebilir. bu işlemi return anahtar kelimesini kullanarak sağlarız. Normal fonksiyondan farklı olarak bir field'a atanabilir veya bir metot içerisinde parametre olarak kullanılabilir.
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())
Parametreli fonksiyon
Bir fonksiyonda farklı veri türlerini (number, string, boolean, object, function) parametre olarak geçebiliriz.
// bir parametreli fonksiyon
function functionName(parm1) {
// istenilen kod parçası
}
functionName(parm1) // fonksiyonu çağırma sırasında parantezler arasına bir parametreye ihtiyaç duyar
function areaOfCircle(r) {
let area = Math.PI * r * r
return area
}
console.log(areaOfCircle(10)) // bağımsız bir değişkenle çağırılmalı
function square(number) {
return number * number
}
console.log(square(10))
İki parametreli fonksiyon
// iki parametreli fonksiyon
function functionName(parm1, parm2) {
//istenilen kod parçası
}
functionName(parm1, parm2) //fonksiyonu çağırma sırasında parantezler arasında iki tane parametreye ihtiyaç duyar
// Parametresiz fonksiyon giriş yapmaz, bu nedenle parametrelerle bir fonksiyon yapalım
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo
console.log(sum)
}
sumTwoNumbers(10, 20) // fonksiyon çağırımı
// Bir fonksiyon değer döndürmezse veri depolayamaz, bu nedenle değer döndürmelidir.
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'))
Çok parametreli fonksiyon
// çok parametreli fonksiyon
function functionName(parm1, parm2, parm3,...){
//istenilen kod parçası
}
functionName(parm1,parm2,parm3,...) // fonksiyon çağırımı sırasında birden çok parametreye ihtiyaç duyar
// bu fonksiyon, bir diziyi parametre olarak alır ve dizideki sayıları toplar
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];
//fonksiyon çağırımı
console.log(sumArrayValues(numbers));
const areaOfCircle = (radius) => {
let area = Math.PI * radius * radius;
return area;
}
console.log(areaOfCircle(10))
Sınırsız sayıda parametreyle çalışan fonksiyon
Fonksiyonlarla çalışırken kaç tane parametre gerekebileceğini bilemeyebiliriz. Javascript'te bu durumda bize sınırsız sayıda parametre alan fonksiyon yazabilme imkanı tanır. Bu şekilde bir fonksiyon tanımlamanın iki yolu vardır.
Klasik fonksiyonda sınırsız sayıda parametre
A function declaration provides a function scoped arguments array like object. Any thing we passed as argument in the function can be accessed from arguments object inside the functions. Let us see an example
Bu fonksiyonun tanımlanmasını fonksiyon scope'nda object temelli arguments anahtar kelimesi ile erişilir. Parametre olarak atanan her öğeye arguments üzerinden ulaşabiliriz. Bir örneğine bakmak gerekirse;
```js // arguments nesnesine erişelim function sumAllNums() { console.log(arguments) }
sumAllNums(1, 2, 3, 4) // Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
```js
// fonksiyon tanımı
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
Arrow function'da sınırsız sayıda parametre konusunu Arraw fonksiyonu gördükten sonra görebilirsiniz.
Kendi kendine çağırılan fonksiyon
JavaScript sözdiziminde birçok ilginç şey vardır, bunlardan biri kendi kendine çalışan (kendi kendini çağıran) fonksiyonların tanımıdır. Böyle bir fonksiyonu şu şekilde tanımlayabiliriz:
(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)
Yukarıdaki fonksiyon, tanımlandıktan hemen sonra çağrılır. Kendi kendini çağıran işlevlerin yararı, global ad alanını karıştırmadan (herhangi bir global bildirmeden) kodu bir kez yürütmemize olanak vermeleridir.
Arrow Function
Klasik fonksiyona alternatif olarak kullanılan arrow function sözdiziminde ufak bir farklılık vardır. function anahtar kelimesi yerine => işareti kullanılır.
Sırasıyla aynı fonksiyonun klasik ve arrow function halini yazalım
function square(n) {
return n * n
}
console.log(square(2)) // 4
const square = n => {
return n * n
}
console.log(square(2)) // -> 4
// kod bloğumuzda sadece bir satır kod varsa bu fonksiyon şu şekilde yazılabilir.
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'))
Yukarıdaki fonksiyon yalnızca geri dönüş ifadesine sahiptir, bu nedenle bunu aşağıdaki şekilde açıkça iade edebiliriz.
const printFullName = (firstName, lastName) => `${firstName} ${lastName}`
console.log(printFullName('Asabeneh', 'Yetayeh'))
Arrow function'da sınırsız sayıda parametre
Arrow function, klasik fonksiyon gibi arguments nesnesine sahip değildir. Arrow function'da sınırsız sayıda parametre kullanmak istersek spread operatör (...) ve hemen ardından parametre adı kullanılır. Fonksiyonda bağımsız değişken olarak geçtiğimiz her şeye arrow functionda dizi olarak erişilebilir. Bir örnek görelim
```js // arguments nesnesine erişmemize bir örnek const sumAllNums = (...args) => { // console.log(arguments), arguments nesnesi bulunamadı // bunun yerine spread operator (...) ve parametre adı kullanalım 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
Default parametre ile fonksiyon kullanımı
Bazen parametrelere default değerler geçmek isteyebiliriz. Bu durumda fonksiyon çağırımı sırasında söz konusu parametreyi vermek zorunda olmadan kullanabiliriz. Eğer bu parametreyi vermezsek fonksiyon işlevinin parametrenin default değerini kullanarak tamamlayacaktır.
// syntax - söz dizimi
// fonksiyon tanımı
function functionName(param = value) {
//codes
}
// fonksiyon çağırımı
functionName()
functionName(arg)
Example:
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' // değer önce dize olarak değiştirilmelidir
return weight
}
console.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 Dünya yüzeyinde yerçekimi
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // Ay yüzeyinde yerçekimi
Yukarıdaki fonksiyonları bir de arrow function kullanarak tanımlayalım
// syntax - söz dizimi
// fonksiyonu tanımlama
const functionName = (param = value) => {
//codes
}
// fonksiyonu çağırma
functionName()
functionName(arg)
Example:
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 Dünya yüzeyinde yerçekimi
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // Ay yüzeyinde yerçekimi
Function declaration versus Arrow function
Diğer bölümde ele alınacaktır.
🌕 Serinin 7. gününü de başarıyla tamamladın. Durmak yok yola devam
💻 Exercises
Exercises: Level 1
- Declare a function fullName and it print out your full name.
- Declare a function fullName and now it takes firstName, lastName as a parameter and it returns your full - name.
- Declare a function addNumbers and it takes two two parameters and it returns sum.
- An area of a rectangle is calculated as follows: area = length x width. Write a function which calculates areaOfRectangle.
- A perimeter of a rectangle is calculated as follows: perimeter= 2x(length + width). Write a function which calculates perimeterOfRectangle.
- A volume of a rectangular prism is calculated as follows: volume = length x width x height. Write a function which calculates volumeOfRectPrism.
- Area of a circle is calculated as follows: area = π x r x r. Write a function which calculates areaOfCircle
- Circumference of a circle is calculated as follows: circumference = 2πr. Write a function which calculates circumOfCircle
- Density of a substance is calculated as follows:density= mass/volume. Write a function which calculates density.
- Speed is calculated by dividing the total distance covered by a moving object divided by the total amount of time taken. Write a function which calculates a speed of a moving object, speed.
- Weight of a substance is calculated as follows: weight = mass x gravity. Write a function which calculates weight.
- Temperature in oC can be converted to oF using this formula: oF = (oC x 9/5) + 32. Write a function which convert oC to oF convertCelsiusToFahrenheit.
-
Body mass index(BMI) is calculated as follows: bmi = weight in Kg / (height x height) in m2. Write a function which calculates bmi. BMI is used to broadly define different weight groups in adults 20 years old or older.Check if a person is underweight, normal, overweight or obese based the information given below.
- The same groups apply to both men and women.
- Underweight: BMI is less than 18.5
- Normal weight: BMI is 18.5 to 24.9
- Overweight: BMI is 25 to 29.9
- Obese: BMI is 30 or more
-
Write a function called checkSeason, it takes a month parameter and returns the season:Autumn, Winter, Spring or Summer.
-
Math.max returns its largest argument. Write a function findMax that takes three arguments and returns their maximum with out using Math.max method.
Exercises: Level 2
- Linear equation is calculated as follows: ax + by + c = 0. Write a function which calculates value of a linear equation, solveLinEquation.
-
Quadratic equation is calculated as follows: ax2 + bx + c = 0. Write a function which calculates value or values of a quadratic equation, solveQuadEquation.
-
Declare a function name printArray. It takes array as a parameter and it prints out each value of the array.
-
Write a function name showDateTime which shows time in this format: 08/01/2020 04:08 using the Date object.
-
Declare a function name swapValues. This function swaps value of x to y.
-
Declare a function name reverseArray. It takes array as a parameter and it returns the reverse of the array (don't use method).
-
Declare a function name capitalizeArray. It takes array as a parameter and it returns the - capitalizedarray.
- Declare a function name addItem. It takes an item parameter and it returns an array after adding the item
- Declare a function name removeItem. It takes an index parameter and it returns an array after removing an item
- Declare a function name sumOfNumbers. It takes a number parameter and it adds all the numbers in that range.
- Declare a function name sumOfOdds. It takes a number parameter and it adds all the odd numbers in that - range.
- Declare a function name sumOfEven. It takes a number parameter and it adds all the even numbers in that - range.
-
Declare a function name evensAndOdds . It takes a positive integer as parameter and it counts number of evens and odds in the number.
-
Write a function which takes any number of arguments and return the sum of the arguments
-
Writ a function which generates a randomUserIp.
- Write a function which generates a randomMacAddress
-
Declare a function name randomHexaNumberGenerator. When this function is called it generates a random hexadecimal number. The function return the hexadecimal number.
-
Declare a function name userIdGenerator. When this function is called it generates seven character id. The function return the id.
Exercises: Level 3
-
Modify the userIdGenerator function. Declare a function name userIdGeneratedByUser. It doesn’t take any parameter but it takes two inputs using prompt(). One of the input is the number of characters and the second input is the number of ids which are supposed to be generated.
-
Write a function name rgbColorGenerator and it generates rgb colors.
-
Write a function arrayOfHexaColors which return any number of hexadecimal colors in an array.
- Write a function arrayOfRgbColors which return any number of RGB colors in an array.
- Write a function convertHexaToRgb which converts hexa color to rgb and it returns an rgb color.
- Write a function convertRgbToHexa which converts rgb to hexa color and it returns an hexa color.
-
Write a function generateColors which can generate any number of hexa or rgb colors.
-
Call your function shuffleArray, it takes an array as a parameter and it returns a shuffled array
- Call your function factorial, it takes a whole number as a parameter and it return a factorial of the number
- Call your function isEmpty, it takes a parameter and it checks if it is empty or not
- Call your function sum, it takes any number of arguments and it returns the sum.
- Write a function called sumOfArrayItems, it takes an array parameter and return the sum of all the items. Check if all the array items are number types. If not give return reasonable feedback.
- Write a function called average, it takes an array parameter and returns the average of the items. Check if all the array items are number types. If not give return reasonable feedback.
-
Write a function called modifyArray takes array as parameter and modifies the fifth item of the array and return the array. If the array length is less than five it return 'item not found'.
-
Write a function called isPrime, which checks if a number is prime number.
- Write a functions which checks if all items are unique in the array.
- Write a function which checks if all the items of the array are the same data type.
- JavaScript variable name does not support special characters or symbols except \$ or _. Write a function isValidVariable which check if a variable is valid or invalid variable.
-
Write a function which returns array of seven random numbers in a range of 0-9. All the numbers must be unique.
-
Write a function called reverseCountries, it takes countries array and first it copy the array and returns the reverse of the original array
🎉 CONGRATULATIONS ! 🎉