← Lekcje
JavaScript · lekcja 16

Funkcje w JavaScript 1/4:
własna funkcja

Plan tematu (4 godziny):

  1. Godzina 1 (dziś): własna funkcja - definicja, parametry, wywołanie
  2. Godzina 2: funkcja wywołana przez przycisk
  3. Godzina 3: co widzi funkcja - zmienne lokalne
  4. Godzina 4: parseFloat, Math - powtórka funkcji
Rozgrzewka · 3 minuty

Rozgrzewka: obiekty z poprzedniej lekcji

  1. Co to jest obiekt w JavaScript - czym różni się od tablicy?
  2. Jak nazywa się właściwość, która jest funkcją wewnątrz obiektu?
  3. Do czego służy słowo kluczowe this wewnątrz metody?
Część 1 · Funkcja jako maszynka

Funkcja: maszynka z parametrami i wynikiem

W PHP (kurs PHP, lekcje 08-10) poznaliście już funkcję squareArea. To blok kodu z nazwą, parametrami i instrukcją return, który możecie wywołać dowolną liczbę razy. W JavaScript funkcja działa dokładnie tak samo, to ta sama „maszynka”: parametry wchodzą, ciało liczy, return oddaje wynik.

a = 3 parametr 1 b = 4 parametr 2 ciało funkcji return a * b; 12 wyjście: return
MDN: Learn_web_development/Core/Scripting/Functions („functions... allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it”); MDN: Learn_web_development/Core/Scripting/Return_values („Return values are just what they sound like - the values that a function returns when it completes”)
Część 2 · Definicja: PHP obok JavaScript

Definicja: niemal to samo, bez znaku $

PHP · już znacie (lekcja 08 kursu PHP) function squareArea($side) { $area = $side * $side; return $area; } squareArea(5) → 25 JavaScript · dziś function squareArea(side) { const area = side * side; return area; } squareArea(5) → 25 bez $

Funkcję zaczyna słowo kluczowe function, potem nazwa w camelCase (tu squareArea) i lista parametrów w nawiasach. W wywołaniu squareArea(5) liczba 5 to argument - trafia do parametru side. Jedyna różnica względem PHP: JavaScript nie ma znaku $ przed nazwami zmiennych i parametrów.

Ciekawostka z MDN: gdy wywołacie funkcję z większą liczbą argumentów, niż ma zadeklarowanych parametrów, JavaScript ich nie odrzuca. Każda funkcja ma wbudowany obiekt arguments, w którym siedzą wszystkie podane wartości, nawet te bez własnego parametru.

MDN: Learn_web_development/Core/Scripting/Functions („Parameters are the variables listed in a function definition, while arguments are the values passed to the function... when the function is called”); PHP Manual: functions.user-defined.php
Część 3 · Definicja raz, wywołanie wiele razy

Definicja raz, wywołanie wiele razy

function multiply 1 definicja, napisana raz multiply(3, 4)→ 12 multiply(5, 6)→ 30 multiply(7, 2)→ 14 
function multiply(a, b) {
  return a * b;
}

console.log(multiply(3, 4));   // 12
console.log(multiply(5, 6));   // 30
console.log(multiply(7, 2));   // 14
MDN: Learn_web_development/Core/Scripting/Functions („Every time we want to do that, we can invoke the function like this, rather than having to write all that code out again every time we want to repeat it”)
Część 4 · Rozpoznaj poprawny zapis

Poprawny zapis: rozpoznajcie go wśród podobnych

Zapis funkcjiPoprawny w JavaScript?
function greet(name) { return "Hi " + name; }TAK - forma z tej lekcji
const greet = function (name) { return "Hi " + name; };TAK - funkcja przypisana do zmiennej
function greet (name) { return "Hi " + name; }TAK - spacja przed nawiasem nic nie zmienia
new greet(name) { return "Hi " + name; }NIE - new tworzy obiekt z klasy, nie definiuje funkcji

Egzamin CKE lubi pytać właśnie o to: który z kilku podobnych zapisów naprawdę definiuje funkcję w JavaScript. Zobaczcie sami na kolejnym slajdzie.

MDN: Learn_web_development/Core/Scripting/Functions („This form of creating a function is also known as function expression”)
Egzamin EE.09 / E.14

Tak pytają na egzaminie

1.

var x = fun1(3, 24, "Mnożymy");
function fun1(a, b, c) {
  return a * b;
}

Które stwierdzenie na temat funkcji fun1 zapisanej w języku JavaScript jest prawdziwe?

  1. Ma trzy parametry wejściowe w tym jeden typu napisowego i zwraca wartość numeryczną.
  2. Ma dwa parametry liczbowe i zwraca wartość typu napisowego.
  3. Zwraca dwie wartości przechowywane w zmiennych a i b.
  4. Przyjmuje trzy parametry, lecz nie zwraca wartości.

2.

Wybierz poprawną definicję funkcji w języku JavaScript.

  1. nazwa_funkcji(argumenty) {instrukcje;}
  2. new nazwa_funkcji(argumenty) {instrukcje;}
  3. function nazwa_funkcji(argumenty) {instrukcje;}
  4. typ_funkcji nazwa_funkcji(argumenty) {instrukcje;}
CKE, EE.09, styczeń 2023, zadanie 9 · CKE, E.14, czerwiec 2019, zadanie 33
Ćwiczenie przy komputerze · 15 minut

Ćwiczenie: funkcja multiply

  1. Otwórz script.js z poprzednich lekcji (w folderze swojego projektu).
  2. Napisz function multiply(a, b) { return a * b; }
  3. Wywołaj ją dla trzech par liczb, np. multiply(3, 4), multiply(5, 6), multiply(7, 2) - każdy wynik wypisz osobną linią console.log(...).
  4. Dla chętnych w domu: napisz funkcję half(a), która zwraca połowę liczby, i wywołaj ją dla 10.
Na koniec

Sprawdź się

  1. Czym różnią się parametry od argumentów?
  2. Co zwróci funkcja, która w ciele nie ma słowa return?
  3. Ile razy możecie wywołać tę samą funkcję po jej zdefiniowaniu?

To tyle na dziś - na następnej lekcji: funkcja wywołana przez przycisk.

Poza szkołą

A jak to wygląda w produkcji?

Na lekcjiW produkcjiStatus
function multiply(a, b) { return a * b; }Ta sama definicja, często krótszym zapisem: const multiply = (a, b) => a * b; - funkcję strzałkową poznacie na kolejnych lekcjach.rozszerzane
console.log(result) po każdym wywołaniuWynik trafia do zmiennej i dalej na stronę albo do automatycznego testu funkcji, nie tylko na konsolę.zastępowane
Jedna funkcja w pliku script.jsSetki funkcji w osobnych plikach (moduły), wczytywane przez import/export.zastępowane
Nazwa squareArea, multiply po angielsku, camelCaseTen sam standard w każdej firmie korzystającej z JavaScript.nadal w użyciu
MDN: Learn_web_development/Core/Scripting/Functions (wzmianka o skróconym, jednolinijkowym zapisie funkcji z pominięciem słowa return)