mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-24 07:13:00 +02:00
Initial commit
This commit is contained in:
chris
196
2-js-basics/2-functions-methods/README.md
Normal file
196
2-js-basics/2-functions-methods/README.md
Normal file
@@ -0,0 +1,196 @@
|
||||
# JavaScript Basics: Methods and Functions
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
|
||||
|
||||
When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**.
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
||||
|
||||
> 🎥 Click the image above for a video about methods and functions.
|
||||
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Functions
|
||||
|
||||
At its core, a function is a block of code we can execute on demand. This is perfect for scenarios where we need to perform the same task multiple times; rather than duplicating the logic in multiple locations (which would make it hard to update when the time comes), we can centralize it in one location, and call it whenever we need the operation performed - you can even call functions from other functions!.
|
||||
|
||||
Just as important is the ability to name a function. While this might seem trivial, the name provides a quick way of documenting a section of code. You could think of this as a label on a button. If I click on a button which reads "Cancel timer", I know it's going to stop running the clock.
|
||||
|
||||
## Creating and calling a function
|
||||
|
||||
The syntax for a function looks like the following:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // function definition
|
||||
// function definition/body
|
||||
}
|
||||
```
|
||||
|
||||
If I wanted to create a function to display a greeting, it might look like this:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
Whenever we want to call (or invoke) our function, we use the name of the function followed by `()`. It's worth noting the fact our function can be defined before or after we decide to call it; the JavaScript compiler will find it for you.
|
||||
|
||||
```javascript
|
||||
// calling our function
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **NOTE:** There is a special type of function known as a **method**, which you've already been using! In fact, we saw this in our demo above when we used `console.log`. What makes a method different from a function is a method is attached to an object (`console` in our example), while a function is free floating. You will hear many developers use these terms interchangeably.
|
||||
|
||||
### Function best practices
|
||||
|
||||
There are a handful of best practices to keep in mind when creating functions
|
||||
|
||||
- As always, use descriptive names so you know what the function will do
|
||||
- Use **camelCasing** to combine words
|
||||
- Keep your functions focused on a specific task
|
||||
|
||||
## Passing information to a function
|
||||
|
||||
To make a function more reusable you'll often want to pass information into it. If we consider our `displayGreeting` example above, it will only display **Hello, world!**. Not the most useful function one could create. If we want to make it a little more flexible, like allowing someone to specify the name of the person to greet, we can add a **parameter**. A parameter (also sometimes called an **argument**), is additional information sent to a function.
|
||||
|
||||
Parameters are listed in the definition part within parenthesis and are comma separated like so:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
We can update our `displayGreeting` to accept a name and have that displayed.
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
When we want to call our function and pass in the parameter, we specify it in the parenthesis.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// displays "Hello, Christopher!" when run
|
||||
```
|
||||
|
||||
## Default values
|
||||
|
||||
We can make our function even more flexible by adding more parameters. But what if we don't want to require every value be specified? Keeping with our greeting example, we could leave name as required (we need to know who we're greeting), but we want to allow the greeting itself to be customized as desired. If someone doesn't want to customize it, we provide a default value instead. To provide a default value to a parameter, we set it much in the same way we set a value for a variable - `parameterName = 'defaultValue'`. To see a full example:
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
When we call the function, we can then decide if we want to set a value for `salutation`.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// displays "Hello, Christopher"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// displays "Hi, Christopher"
|
||||
```
|
||||
|
||||
## Return values
|
||||
|
||||
Up until now the function we built will always output to the [console](https://developer.mozilla.org/docs/Web/API/console). Sometimes this can be exactly what we're looking for, especially when we create functions which will be calling other services. But what if I want to create a helper function to perform a calculation and provide the value back so I can use it elsewhere?
|
||||
|
||||
We can do this by using a **return value**. A return value is returned by the function, and can be stored in a variable just the same as we could store a literal value such as a string or number.
|
||||
|
||||
If a function does return something then the keyword `return` is used. The `return` keyword expects a value or reference of what's being returned like so:
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
We could create a function to create a greeting message and return the value back to the caller
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
When calling this function we'll store the value in a variable. This is much the same way we'd set a variable to a static value (like `const name = 'Christopher'`).
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## Functions as parameters for functions
|
||||
|
||||
As you progress in your programming career, you will come across functions which accept functions as parameters. This neat trick is commonly used when we don't know when something is going to occur or complete, but we know we need to perform an operation in response.
|
||||
|
||||
As an example, consider [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), which begins a timer and will execute code when it completes. We need to tell it what code we want to execute. Sounds like a perfect job for a function!
|
||||
|
||||
If you run the code below, after 3 seconds you'll see the message **3 seconds has elapsed**.
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}
|
||||
// timer value is in milliseconds
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### Anonymous functions
|
||||
|
||||
Let's take another look at what we've built. We're creating a function with a name which will be used one time. As our application gets more complex, we can see ourselves creating a lot of functions which will only be called once. This isn't ideal. As it turns out, we don't always need to provide a name!
|
||||
|
||||
When we are passing a function as a parameter we can bypass creating one in advance and instead build one as part of the parameter. We use the same `function` keyword, but instead we build it as a parameter.
|
||||
|
||||
Let's rewrite the code above to use an anonymous function:
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
If you run our new code you'll notice we get the same results. We've created a function, but didn't have to give it a name!
|
||||
|
||||
### Fat arrow functions
|
||||
|
||||
One shortcut common in a lot of programming languages (including JavaScript) is the ability to use what's called an **arrow** or **fat arrow** function. It uses a special indicator of `=>`, which looks like an arrow - thus the name! By using `=>`, we are able to skip the `function` keyword.
|
||||
|
||||
Let's rewrite our code one more time to use a fat arrow function:
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### When to use each strategy
|
||||
|
||||
You've now seen we have three ways to pass a function as a parameter and might be wondering when to use each. If you know you'll be using the function more than once, create it as normal. If you'll be using it for just the one location, it's generally best to use an anonymous function. Whether or not you use a fat arrow function or the more traditional `function` syntax is up to you, but you will notice most modern developers prefer `=>`.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Can you articulate in one sentence the difference between functions and methods? Give it a try!
|
||||
|
||||
## Post-Lecture Quiz
|
||||
[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
It's worth [reading up a little more on arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), as they are increasingly used in code bases. Practice writing a function, and then rewriting it with this syntax.
|
||||
|
||||
## Assignment
|
||||
|
||||
[Fun with Functions](assignment.md)
|
||||
13
2-js-basics/2-functions-methods/assignment.md
Normal file
13
2-js-basics/2-functions-methods/assignment.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# Fun with Functions
|
||||
|
||||
## Instructions
|
||||
|
||||
Create different functions, both functions that return something and functions that don't return anything.
|
||||
|
||||
See if you can create a function that has a mix of parameters and parameters with default values.
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | Solution is offered with two or more well-performing functions with diverse parameters | Working solution is offered with one function and few parameters | Solution has bugs |
|
||||
195
2-js-basics/2-functions-methods/translations/README.de.md
Normal file
195
2-js-basics/2-functions-methods/translations/README.de.md
Normal file
@@ -0,0 +1,195 @@
|
||||
# JavaScript-Grundlagen: Methoden und Funktionen
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methoden und Funktionen")
|
||||
|
||||
## [Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
|
||||
|
||||
Wenn wir darüber nachdenken, Code zu schreiben, möchten wir immer sicherstellen, dass unser Code lesbar ist. Während dies nicht intuitiv klingt, wird Code viel öfter gelesen als geschrieben. Ein Kernwerkzeug in der Toolbox eines Entwicklers, um wartbaren Code sicherzustellen, ist die **Funktion**.
|
||||
|
||||
## Funktionen
|
||||
|
||||
Eine Funktion ist im Kern ein Codeblock, den wir bei Bedarf ausführen können. Dies ist perfekt für Szenarien, in denen wir dieselbe Aufgabe mehrmals ausführen müssen. Anstatt die Logik an mehreren Orten zu duplizieren (was eine Aktualisierung zu gegebener Zeit erschweren würde), können wir sie an einem Ort zentralisieren und jederzeit aufrufen, wenn die Operation ausgeführt werden muss - Sie können sogar Funktionen von anderen Funktionen aus aufrufen!.
|
||||
|
||||
Ebenso wichtig ist die Fähigkeit, eine Funktion zu benennen. Obwohl dies trivial erscheinen mag, bietet der Name eine schnelle Möglichkeit, einen Codeabschnitt zu dokumentieren. Sie können sich dies als Beschriftung auf einer Schaltfläche vorstellen. Wenn ich auf eine Schaltfläche mit der Aufschrift "Timer abbrechen" klicke, weiß ich, dass die Uhr nicht mehr läuft.
|
||||
|
||||
## Eine Funktion erstellen und aufrufen
|
||||
|
||||
Die Syntax für eine Funktion sieht folgendermaßen aus:
|
||||
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // function definition
|
||||
// function definition/body
|
||||
}
|
||||
```
|
||||
|
||||
Wenn ich eine Funktion zum Anzeigen einer Begrüßung erstellen wollte, könnte dies folgendermaßen aussehen:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
Wann immer wir unsere Funktion aufrufen (oder aufrufen) möchten, verwenden wir den Namen der Funktion, gefolgt von `()`. Es ist erwähnenswert, dass unsere Funktion definiert werden kann, bevor oder nachdem wir uns entscheiden, sie aufzurufen. Der JavaScript-Compiler findet es für Sie.
|
||||
|
||||
|
||||
```javascript
|
||||
// calling our function
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **HINWEIS:** Es gibt eine spezielle Art von Funktion, die als **Methode** bekannt ist und die Sie bereits verwendet haben! Tatsächlich haben wir dies in unserer obigen Demo gesehen, als wir `console.log` verwendet haben. Was eine Methode von einer Funktion unterscheidet, ist, dass eine Methode an ein Objekt angehängt ist (in unserem Beispiel `console`), während eine Funktion frei schwebend ist. Sie werden hören, dass viele Entwickler diese Begriffe synonym verwenden.
|
||||
|
||||
### Best Practices für Funktionen
|
||||
|
||||
Es gibt eine Handvoll Best Practices, die beim Erstellen von Funktionen berücksichtigt werden müssen
|
||||
|
||||
- Verwenden Sie wie immer beschreibende Namen, damit Sie wissen, was die Funktion tun wird
|
||||
- Verwenden Sie **camelCasing**, um Wörter zu kombinieren
|
||||
- Konzentrieren Sie Ihre Funktionen auf eine bestimmte Aufgabe
|
||||
|
||||
## Informationen an eine Funktion übergeben
|
||||
|
||||
Um eine Funktion wiederverwendbarer zu machen, möchten Sie häufig Informationen an sie weitergeben. Wenn wir unser Beispiel `displayGreeting` oben betrachten, wird nur **Hallo, Welt!** angezeigt. Nicht die nützlichste Funktion, die man erstellen könnte. Wenn wir es etwas flexibler gestalten möchten, z. B. jemandem erlauben, den Namen der zu begrüßenden Person anzugeben, können wir einen **Parameter** hinzufügen. Ein Parameter (manchmal auch als **Argument** bezeichnet) sind zusätzliche Informationen, die an eine Funktion gesendet werden.
|
||||
|
||||
Die Parameter sind im Definitionsteil in Klammern aufgeführt und werden wie folgt durch Kommas getrennt:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Wir können unser `displayGreeting` aktualisieren, um einen Namen zu akzeptieren und diesen anzeigen zu lassen.
|
||||
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
Wenn wir unsere Funktion aufrufen und den Parameter übergeben möchten, geben wir ihn in Klammern an.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// zeigt "Hallo Christopher!" wenn ausgeführt
|
||||
```
|
||||
|
||||
## Standardwerte
|
||||
|
||||
Wir können unsere Funktion noch flexibler gestalten, indem wir weitere Parameter hinzufügen. Aber was ist, wenn nicht jeder Wert angegeben werden soll? In Übereinstimmung mit unserem Begrüßungsbeispiel könnten wir den Namen nach Bedarf belassen (wir müssen wissen, wen wir begrüßen), aber wir möchten, dass die Begrüßung selbst nach Wunsch angepasst wird. Wenn jemand es nicht anpassen möchte, geben wir stattdessen einen Standardwert an. Um einem Parameter einen Standardwert zuzuweisen, setzen wir ihn ähnlich wie einen Wert für eine Variable - `parameterName = 'defaultValue'`. Um ein vollständiges Beispiel zu sehen:
|
||||
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
When we call the function, we can then decide if we want to set a value for `salutation`.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// zeigt "Hallo Christopher!"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// zeigt "Hi Christopher!"
|
||||
```
|
||||
|
||||
## Rückgabewerte
|
||||
|
||||
Bisher wurde die von uns erstellte Funktion immer an die [Konsole](https://developer.mozilla.org/docs/Web/API/console) ausgegeben. Manchmal kann dies genau das sein, wonach wir suchen, insbesondere wenn wir Funktionen erstellen, die andere Dienste aufrufen. Was aber, wenn ich eine Hilfsfunktion erstellen möchte, um eine Berechnung durchzuführen und den Wert zurückzugeben, damit ich ihn an anderer Stelle verwenden kann?
|
||||
|
||||
Wir können dies tun, indem wir einen **Rückgabewert** verwenden. Ein Rückgabewert wird von der Funktion zurückgegeben und kann in einer Variablen genauso gespeichert werden, wie wir einen Literalwert wie eine Zeichenfolge oder eine Zahl speichern könnten.
|
||||
|
||||
Wenn eine Funktion etwas zurückgibt, wird das Schlüsselwort `return` verwendet. Das Schlüsselwort `return` erwartet einen Wert oder eine Referenz dessen, was wie folgt zurückgegeben wird:
|
||||
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
Wir könnten eine Funktion erstellen, um eine Begrüßungsnachricht zu erstellen und den Wert an den Anrufer zurückzugeben:
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
Beim Aufruf dieser Funktion speichern wir den Wert in einer Variablen. Dies ist fast die gleiche Art und Weise, wie wir eine Variable auf einen statischen Wert setzen würden (wie `const name = 'Christopher'`).
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## Funktionen als Parameter für Funktionen
|
||||
|
||||
Im Laufe Ihrer Programmierkarriere werden Sie auf Funktionen stoßen, die Funktionen als Parameter akzeptieren. Dieser nette Trick wird häufig verwendet, wenn wir nicht wissen, wann etwas eintreten oder abgeschlossen sein wird, aber wir wissen, dass wir als Reaktion darauf eine Operation ausführen müssen.
|
||||
|
||||
Betrachten Sie als Beispiel [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), das einen Timer startet und nach dessen Ausführung Code ausführt. Wir müssen ihm sagen, welchen Code wir ausführen wollen. Klingt nach einem perfekten Job für eine Veranstaltung!
|
||||
|
||||
Wenn Sie den folgenden Code ausführen, wird nach 3 Sekunden die Meldung **3 Sekunden sind verstrichen** angezeigt.
|
||||
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}
|
||||
// Der Timer-Wert wird in Millisekunden angegeben
|
||||
setTimeout(3000, displayDone);
|
||||
```
|
||||
|
||||
### Anonyme Funktionen
|
||||
|
||||
Schauen wir uns noch einmal an, was wir gebaut haben. Wir erstellen eine Funktion mit einem Namen, der einmal verwendet wird. Wenn unsere Anwendung komplexer wird, können wir uns vorstellen, viele Funktionen zu erstellen, die nur einmal aufgerufen werden. Das ist nicht ideal. Wie sich herausstellt, müssen wir nicht immer einen Namen angeben!
|
||||
|
||||
Wenn wir eine Funktion als Parameter übergeben, können wir die Erstellung einer Funktion im Voraus umgehen und stattdessen eine als Teil des Parameters erstellen. Wir verwenden das gleiche Schlüsselwort `function`, aber stattdessen erstellen wir es als Parameter.
|
||||
|
||||
Schreiben wir den obigen Code neu, um eine anonyme Funktion zu verwenden:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
});
|
||||
```
|
||||
|
||||
Wenn Sie unseren neuen Code ausführen, werden Sie feststellen, dass wir die gleichen Ergebnisse erhalten. Wir haben eine Funktion erstellt, mussten ihr aber keinen Namen geben!
|
||||
|
||||
### Fettpfeilfunktionen
|
||||
|
||||
Eine in vielen Programmiersprachen (einschließlich JavaScript) übliche Abkürzung ist die Möglichkeit, eine sogenannte **arrow** - oder **fat arrow** -Funktion zu verwenden. Es wird ein spezieller Indikator für `=>` verwendet, der wie ein Pfeil aussieht - daher der Name! Mit `=>` können wir das Schlüsselwort `function` überspringen.
|
||||
|
||||
Lassen Sie uns unseren Code noch einmal umschreiben, um eine Fettpfeilfunktion zu verwenden:
|
||||
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, () => {
|
||||
console.log('3 seconds has elapsed');
|
||||
});
|
||||
```
|
||||
|
||||
### Wann wird jede Strategie angewendet?
|
||||
|
||||
Sie haben jetzt gesehen, dass wir drei Möglichkeiten haben, eine Funktion als Parameter zu übergeben, und fragen sich möglicherweise, wann sie jeweils verwendet werden sollen. Wenn Sie wissen, dass Sie die Funktion mehrmals verwenden, erstellen Sie sie wie gewohnt. Wenn Sie es nur für einen Ort verwenden, ist es im Allgemeinen am besten, eine anonyme Funktion zu verwenden. Ob Sie eine Fat-Arrow-Funktion oder die traditionellere `function` Syntax verwenden, liegt bei Ihnen, aber Sie werden feststellen, dass die meisten modernen Entwickler `=>` bevorzugen.
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Herausforderung
|
||||
|
||||
Können Sie den Unterschied zwischen Funktionen und Methoden in einem Satz artikulieren? Versuche es!
|
||||
|
||||
## [Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
|
||||
|
||||
## Review & Selbststudium
|
||||
|
||||
Es lohnt sich, [etwas mehr über Pfeilfunktionen zu lesen](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), da diese zunehmend in Codebasen verwendet werden. Üben Sie, eine Funktion zu schreiben und sie dann mit dieser Syntax neu zu schreiben.
|
||||
|
||||
## Zuordnung
|
||||
|
||||
[Spaß mit Funktionen](assignment.de.md)
|
||||
189
2-js-basics/2-functions-methods/translations/README.es.md
Normal file
189
2-js-basics/2-functions-methods/translations/README.es.md
Normal file
@@ -0,0 +1,189 @@
|
||||
|
||||
|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
# Conceptos básicos de JavaScript: función y funciones
|
||||
|
||||
[](https://youtube.com/watch?v=DdCRhOQibMo "función y funciones")
|
||||
|
||||
## [Pre-lectura prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
|
||||
|
||||
Cuando necesite su código para realizar una tarea, utilizará una función. Analicemos las diferencias.
|
||||
|
||||
## Funciones
|
||||
|
||||
Una función es un bloque de código destinado a realizar una tarea. Usted crea una función usando la palabra clave `function`, un nombre, un conjunto de parámetros y la definición de la función también conocida como funciones _body_. La sintaxis de una función se parece a la siguiente:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) { // definición de función
|
||||
// definición de función/body
|
||||
}
|
||||
```
|
||||
|
||||
## Funciones
|
||||
|
||||
En esencia, una función es un bloque de código que podemos ejecutar bajo demanda. Esto es perfecto para escenarios en los que necesitamos realizar la misma tarea varias veces; en lugar de duplicar la lógica en varias ubicaciones (lo que dificultaría la actualización cuando llegue el momento), podemos centralizarla en una ubicación y llamarla cuando necesitemos que se realice la operación; ¡incluso puede llamar a funciones desde otras funciones!
|
||||
|
||||
Igual de importante es la capacidad de nombrar una función. Si bien esto puede parecer trivial, el nombre proporciona una forma rápida de documentar una sección de código. Podría pensar en esto como una etiqueta en un botón. Si hago clic en un botón que dice "Cancelar temporizador", sé que dejará de correr el reloj.
|
||||
|
||||
## Creando y llamando a una función
|
||||
|
||||
La sintaxis de una función se parece a la siguiente:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // definición de función
|
||||
// Código de la función
|
||||
}
|
||||
```
|
||||
|
||||
Si quisiera crear una función para mostrar un saludo, podría verse así:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('¡Hola, mundo!');
|
||||
}
|
||||
```
|
||||
|
||||
Siempre que queremos llamar (o invocar) nuestra función, usamos el nombre de la función seguido de `()`. Vale la pena señalar el hecho de que nuestra función se puede definir antes o después de que decidamos llamarla; el compilador de JavaScript lo encontrará por usted.
|
||||
|
||||
```javascript
|
||||
// llamando nuestra función
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **NOTA:** Existe un tipo especial de función conocida como **método**, que ya ha estado utilizando. De hecho, vimos esto en nuestra demostración anterior cuando usamos `console.log`. Lo que hace que un método sea diferente de una función es que un método está adjunto a un objeto (`consola` en nuestro ejemplo), mientras que una función es flotante libre. Escuchará que muchos desarrolladores usan estos términos indistintamente.
|
||||
|
||||
### Mejores prácticas de función
|
||||
|
||||
Hay algunas prácticas recomendadas que se deben tener en cuenta al crear funciones:
|
||||
|
||||
- Como siempre, use nombres descriptivos para que sepa lo que hará la función
|
||||
- Usa **camelCasing** para combinar palabras
|
||||
- Mantenga sus funciones enfocadas en una tarea específica
|
||||
|
||||
## Pasar información a una función
|
||||
|
||||
Para que una función sea más reutilizable, a menudo querrá pasarle información. Si consideramos nuestro ejemplo de `displayGreeting` anterior, solo mostrará **¡Hola, mundo!**. No es la función más útil que uno podría crear. Si queremos hacerlo un poco más flexible, como permitir que alguien especifique el nombre de la persona a saludar, podemos agregar un **parámetro**. Un parámetro (también llamado a veces **argumento**), es información adicional enviada a una función.
|
||||
|
||||
Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Podemos actualizar nuestro `displayGreeting` para aceptar un nombre y mostrarlo.
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `¡Hola, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
Cuando queremos llamar a nuestra función y pasar el parámetro, lo especificamos entre paréntesis.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Paco');
|
||||
// dice "¡Hola, Paco!" cuando ejecutas el comando
|
||||
```
|
||||
|
||||
## Valores predeterminados
|
||||
|
||||
Podemos hacer que nuestra función sea aún más flexible agregando más parámetros. Pero, ¿y si no queremos que se especifiquen todos los valores? Siguiendo con nuestro ejemplo de saludo, podríamos dejar el nombre según sea necesario (necesitamos saber a quién saludamos), pero queremos permitir que el saludo en sí se personalice como desee. Si alguien no quiere personalizarlo, proporcionamos un valor predeterminado en su lugar. Para proporcionar un valor predeterminado a un parámetro, lo configuramos de la misma manera que configuramos un valor para una variable: `parameterName = 'defaultValue'`. Para ver un ejemplo completo:
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hola') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
Cuando llamamos a la función, podemos decidir si queremos establecer un valor para el "saludo".
|
||||
|
||||
```javascript
|
||||
displayGreeting('Paco');
|
||||
// dice "Hola, Paco"
|
||||
|
||||
displayGreeting('Paco', 'Hola');
|
||||
// dice "Hola, Paco"
|
||||
```
|
||||
### Parámetro
|
||||
|
||||
Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:
|
||||
|
||||
```javascript
|
||||
(param, param2, param3)
|
||||
```
|
||||
|
||||
### Parámetro
|
||||
|
||||
Hasta ahora, la función que construimos siempre saldrá a la [consola](https://developer.mozilla.org/docs/Web/API/console). A veces, esto puede ser exactamente lo que estamos buscando, especialmente cuando creamos funciones que llamarán a otros servicios. Pero, ¿qué pasa si quiero crear una función auxiliar para realizar un cálculo y devolver el valor para poder usarlo en otro lugar?
|
||||
|
||||
Podemos hacer esto usando un **valor de retorno**. La función devuelve un valor de retorno y se puede almacenar en una variable de la misma manera que podríamos almacenar un valor literal como una cadena o un número.
|
||||
|
||||
Aquí define qué tarea debe realizar la función. Una función puede devolver algo o no. Si una función devuelve algo, entonces se usa la palabra clave `return`. La palabra clave `return` espera un valor o referencia de lo que se devuelve así:
|
||||
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
Un ejemplo más completo puede verse así:
|
||||
|
||||
```javascript
|
||||
function add(firstValue, secondValue) {
|
||||
let sum = firstValue + secondValue;
|
||||
return sum;
|
||||
}
|
||||
```
|
||||
|
||||
En el código anterior, se devuelve la variable `sum`.
|
||||
|
||||
### Invocación
|
||||
|
||||
Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. La función `add()` introducido se puede invocar de la siguiente manera:
|
||||
|
||||
|
||||
```javascript
|
||||
let result = add(1, 3);
|
||||
console.log(result); // imprime 4
|
||||
```
|
||||
|
||||
Los argumentos `1` y `3` están vinculados a los parámetros `firstValue` y `secondValue` debido al orden en el que se definen los parámetros.
|
||||
|
||||
JavaScript es bastante flexible cuando se trata de invocaciones. No está obligado a proporcionar argumentos para todos los parámetros, el código se ejecutará de todos modos. Sin embargo, dependiendo de lo que le pase, es posible que el código no se comporte como se esperaba.
|
||||
|
||||
> Desafío, intente llamar al función `add()` así `add(1)` y vea qué sucede
|
||||
|
||||
### Valores predeterminados
|
||||
|
||||
También existe el concepto de _ valores predeterminados_ en los parámetros. Esto significa que si no se pasa un argumento a un parámetro durante la invocación, el parámetro asumirá el valor predeterminado. Considere el siguiente código usando un valor predeterminado:
|
||||
|
||||
|
||||
```javascript
|
||||
function add5(firstValue, secondValue = 5) {
|
||||
return firstValue + secondValue;
|
||||
}
|
||||
```
|
||||
|
||||
La invocación de la función anterior podría verse así:
|
||||
|
||||
```javascript
|
||||
add5 (4) // devuelve 9
|
||||
add5 (4,2) // devuelve 6
|
||||
```
|
||||
|
||||
Cualquier parámetro con valores predeterminados debe estar al final de la lista de parámetros. La razón es que JavaScript intenta hacer coincidir argumentos con parámetros y los parámetros con valores predeterminados pueden omitirse en la invocación.
|
||||
|
||||
🚀 Desafío:
|
||||
|
||||
|
||||
## [Prueba de validación de conocimientos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
Vale la pena [leer un poco más sobre las funciones de flecha](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), ya que se utilizan cada vez más en bases de código. Practique escribir una función y luego reescribirla con esta sintaxis.
|
||||
|
||||
**Tarea**: [Práctica de tipos de datos](assignment.es.md)
|
||||
|
||||
196
2-js-basics/2-functions-methods/translations/README.fr.md
Normal file
196
2-js-basics/2-functions-methods/translations/README.fr.md
Normal file
@@ -0,0 +1,196 @@
|
||||
# Les bases du JavaScript : Méthodes et fonctions
|
||||
|
||||
|
||||
> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz préalable
|
||||
[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=fr)
|
||||
|
||||
Lorsque nous pensons à écrire du code, nous voulons toujours nous assurer que notre code est lisible. Bien que cela puisse paraître contre-intuitif, le code est lu bien plus souvent qu'il n'est écrit. Un outil essentiel dans la boîte à outils d'un développeur pour garantir un code maintenable est la **fonction**.
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
||||
|
||||
> 🎥 Cliquez sur l'image ci-dessus pour voir une vidéo sur les méthodes et les fonctions.
|
||||
|
||||
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Fonctions
|
||||
|
||||
À la base, une fonction est un bloc de code que nous pouvons exécuter à la demande. C'est parfait pour les scénarios où nous devons effectuer la même tâche plusieurs fois; plutôt que de dupliquer la logique à plusieurs endroits (ce qui rendrait difficile la mise à jour le moment venu), nous pouvons la centraliser à un seul endroit et l'appeler chaque fois que nous avons besoin d'effectuer l'opération - vous pouvez même appeler des fonctions à partir d'autres fonctions !
|
||||
|
||||
La possibilité de nommer une fonction est tout aussi importante. Bien que cela puisse sembler trivial, le nom fournit un moyen rapide de documenter une section de code. On pourrait penser à l'étiquette d'un bouton. Si je clique sur un bouton qui indique "Annuler le chronomètre", je sais qu'il va arrêter le chronomètre.
|
||||
|
||||
## Créer et appeler une fonction
|
||||
|
||||
La syntaxe d'une fonction ressemble à ce qui suit :
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // Définition de la fonction
|
||||
// Code de la fonction
|
||||
}
|
||||
```
|
||||
|
||||
Si je voulais créer une fonction pour afficher une salutation, elle pourrait ressembler à ceci :
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
Chaque fois que nous voulons appeler (ou invoquer) notre fonction, nous utilisons le nom de la fonction suivi de `()`. Il est important de noter que notre fonction peut être définie avant ou après que nous ayons décidé de l'appeler; le compilateur JavaScript la trouvera pour vous.
|
||||
|
||||
```javascript
|
||||
// Appel de notre fonction
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **NOTE:** Il existe un type spécial de fonction appelé **méthode**, que vous avez déjà utilisé ! En fait, nous l'avons vu dans notre démonstration ci-dessus lorsque nous avons utilisé `console.log`. Ce qui différencie une méthode d'une fonction, c'est qu'une méthode est attachée à un objet (`console` dans notre exemple), alors qu'une fonction est flottante. Vous entendrez de nombreux développeurs utiliser ces termes de manière interchangeable.
|
||||
|
||||
### Bonnes pratiques des fonctions
|
||||
|
||||
Il existe une poignée de bonnes pratiques à garder à l'esprit lors de la création de fonctions
|
||||
|
||||
- Comme toujours, utilisez des noms descriptifs afin de savoir ce que fera la fonction.
|
||||
- Utilisez le **camelCase** pour combiner les mots.
|
||||
- Faites en sorte que vos fonctions se concentrent sur une tâche spécifique
|
||||
|
||||
## Transmettre des informations à une fonction
|
||||
|
||||
Pour rendre une fonction plus réutilisable, vous voudrez souvent lui passer des informations. Si nous considérons notre exemple `displayGreeting` ci-dessus, il affichera seulement **Hello, world!**. Ce n'est pas la fonction la plus utile que l'on puisse créer. Si on veut la rendre un peu plus flexible, comme permettre à quelqu'un de spécifier le nom de la personne à saluer, on peut ajouter un **paramètre**. Un paramètre (aussi parfois appelé **argument**), est une information supplémentaire envoyée à une fonction.
|
||||
|
||||
Les paramètres sont énumérés dans la partie définition entre parenthèses et sont séparés par des virgules comme suit :
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Nous pouvons mettre à jour notre `displayGreeting` pour accepter un nom et l'afficher.
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
Lorsque nous voulons appeler notre fonction et passer le paramètre, nous le spécifions dans la parenthèse.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// Affiche "Hello, Christopher!"
|
||||
```
|
||||
|
||||
## Valeurs par défaut
|
||||
|
||||
Nous pouvons rendre notre fonction encore plus flexible en ajoutant d'autres paramètres. Mais que faire si nous ne voulons pas exiger que chaque valeur soit spécifiée ? Pour reprendre l'exemple de notre message d'accueil, nous pourrions laisser le nom comme paramètre obligatoire (nous devons savoir qui nous accueillons), mais nous voulons permettre à l'accueil lui-même d'être personnalisé à volonté. Si quelqu'un ne veut pas le personnaliser, nous fournissons une valeur par défaut à la place. Pour fournir une valeur par défaut à un paramètre, nous le définissons de la même manière que nous définissons une valeur pour une variable - `parameterName = 'defaultValue'`. Pour voir un exemple complet :
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
Lorsque nous appelons la fonction, nous pouvons alors décider si nous voulons définir une valeur pour `salutation`.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// Affiche "Hello, Christopher"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// Affiche "Hi, Christopher"
|
||||
```
|
||||
|
||||
## Valeurs de retour
|
||||
|
||||
Jusqu'à présent, la fonction que nous avons créée s'affiche toujours dans la [console](https://developer.mozilla.org/docs/Web/API/console). Parfois, c'est exactement ce que nous recherchons, notamment lorsque nous créons des fonctions qui appelleront d'autres services. Mais que faire si je veux créer une fonction d'aide pour effectuer un calcul et renvoyer la valeur afin de pouvoir l'utiliser ailleurs ?
|
||||
|
||||
Nous pouvons le faire en utilisant une **valeur de retour**. Une valeur de retour est renvoyée par la fonction et peut être stockée dans une variable de la même manière qu'une valeur littérale telle qu'une chaîne ou un nombre.
|
||||
|
||||
Si une fonction renvoie quelque chose, le mot-clé `return` est utilisé. Le mot-clé `return` attend une valeur ou une référence de ce qui est retourné comme ceci :
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
Nous pouvons créer une fonction pour créer un message d'accueil et renvoyer la valeur à l'appelant.
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
Lorsque nous appelons cette fonction, nous stockons la valeur dans une variable. C'est à peu près la même chose que de définir une variable à une valeur statique (comme `const name = 'Christopher'`).
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## Fonctions comme paramètres de fonctions
|
||||
|
||||
Au fur et à mesure que vous progressez dans votre carrière de programmeur, vous rencontrerez des fonctions qui acceptent des fonctions comme paramètres. Cette astuce est couramment utilisée lorsque nous ne savons pas quand quelque chose va se produire ou se terminer, mais que nous savons que nous devons effectuer une opération en réponse.
|
||||
|
||||
Prenons l'exemple de [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), qui lance une minuterie et exécute un code lorsqu'elle est terminée. Nous devons lui indiquer quel code nous voulons exécuter. C'est le travail idéal pour une fonction !
|
||||
|
||||
Si vous exécutez le code ci-dessous, après 3 secondes, vous verrez le message **3 secondes se sont écoulées**.
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3 secondes se sont écoulées');
|
||||
}
|
||||
// Valeur du délai en millisecondes
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### Fonctions anonymes
|
||||
|
||||
Regardons à nouveau ce que nous avons construit. Nous créons une fonction avec un nom qui ne sera utilisé qu'une seule fois. Au fur et à mesure que notre application devient plus complexe, nous pouvons nous voir créer un grand nombre de fonctions qui ne seront appelées qu'une seule fois. Ce n'est pas l'idéal. Il s'avère que nous n'avons pas toujours besoin de fournir un nom !
|
||||
|
||||
Lorsque nous passons une fonction en paramètre, nous pouvons éviter d'en créer une à l'avance et en construire une en tant que partie du paramètre. Nous utilisons le même mot-clé `function`, mais nous le construisons comme un paramètre.
|
||||
|
||||
Réécrivons le code ci-dessus pour utiliser une fonction anonyme :
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3 secondes se sont écoulées');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
Si vous exécutez notre nouveau code, vous remarquerez que nous obtenons les mêmes résultats. Nous avons créé une fonction, mais nous n'avons pas eu besoin de lui donner un nom !
|
||||
|
||||
### Fonctions fléchées
|
||||
|
||||
Un raccourci commun à de nombreux langages de programmation (y compris JavaScript) est la possibilité d'utiliser ce que l'on appelle une fonction **fléchée**. Elle utilise un indicateur spécial, `=>`, qui ressemble à une flèche - d'où son nom ! En utilisant `=>`, nous sommes en mesure de sauter le mot-clé `function`.
|
||||
|
||||
Réécrivons notre code une fois de plus pour utiliser une fonction fléchée :
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 secondes se sont écoulées');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### Quand utiliser chaque stratégie
|
||||
|
||||
Vous avez maintenant vu que nous avons trois façons de passer une fonction en paramètre et vous vous demandez peut-être quand utiliser chacune d'entre elles. Si vous savez que vous utiliserez la fonction plus d'une fois, créez-la normalement. Si vous ne l'utilisez qu'à un seul endroit, il est généralement préférable d'utiliser une fonction anonyme. C'est à vous de décider si vous utilisez une fonction fléchée ou la syntaxe plus traditionnelle `function`, mais vous remarquerez que la plupart des développeurs modernes préfèrent `=>`.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Défi
|
||||
|
||||
Pouvez-vous expliquer en une phrase la différence entre les fonctions et les méthodes ? Essayez de le faire !
|
||||
|
||||
## Quiz de validation des connaissances
|
||||
[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=fr)
|
||||
|
||||
## Révision et étude personnelle
|
||||
|
||||
Cela vaut la peine de [lire un peu plus sur les fonctions fléchées](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), car elles sont de plus en plus utilisées dans les bases de code. Entraînez-vous à écrire une fonction, puis à la réécrire avec cette syntaxe.
|
||||
|
||||
## Affectation
|
||||
|
||||
[S'amuser avec les fonctions](assignment.fr.md)
|
||||
195
2-js-basics/2-functions-methods/translations/README.hi.md
Normal file
195
2-js-basics/2-functions-methods/translations/README.hi.md
Normal file
@@ -0,0 +1,195 @@
|
||||
# जावास्क्रिप्ट मूल बातें: मेथड्स और फंक्शन्स
|
||||
|
||||
|
||||
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||
|
||||
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||
[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=hi)
|
||||
|
||||
जब हम कोड लिखने के बारे में सोचते हैं, तो हम हमेशा यह सुनिश्चित करना चाहते हैं कि हमारा कोड पढ़ने योग्य हो। हालांकि यह तर्कविरूद्ध लगता है, लेकिन कोड को लिखे जाने की तुलना में कई गुना अधिक पढ़ा जाता है। एक डेवलपर टूलबॉक्स में एक कोर टूल, जिसमें यह सुनिश्चित करने के लिए कि कोड योग्य है **फ़ंक्शन** है।
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "मेथड्स और फ़ंक्शंस")
|
||||
|
||||
> मेथड्स और फ़ंक्शंस के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||
|
||||
|
||||
## फ़ंक्शंस
|
||||
|
||||
इसके मूल में, एक फ़ंक्शन कोड का एक ब्लॉक है जिसे हम मांग पर निष्पादित कर सकते हैं। यह उन परिदृश्यों के लिए एकदम सही है जहाँ हमें एक ही कार्य को कई बार करने की आवश्यकता होती है; कई स्थानों पर तर्क की नकल करने के बजाय (जो समय आने पर इसे अपडेट करना कठिन बना देगा), हम इसे एक स्थान पर केंद्रीकृत कर सकते हैं, और जब भी हमें ऑपरेशन की आवश्यकता हो, तब कॉल कर सकते हैं - आप अन्य फंक्शन्स से भी एक फंक्शन को कॉल कर सकते हैं!
|
||||
|
||||
एक फंक्शन का नाम रखने की क्षमता भी इतनी ही महत्वपूर्ण है। हालांकि यह भ्रामक प्रतीत हो सकता है, लेकिन नाम कोड के एक सेक्शन का दस्तावेजीकरण करने का एक त्वरित तरीका प्रदान करता है। आप इसे एक बटन पर एक लेबल के रूप में सोच सकते हैं। अगर मैं एक बटन पर क्लिक करता हूं जिसमें लिखा है "टाइमर रद्द करें", मुझे पता है कि यह घड़ी को चलाने से रोकने वाला है।
|
||||
|
||||
## फंक्शन बनाना और कॉल करना
|
||||
|
||||
किसी फ़ंक्शन का सिंटैक्स निम्न जैसा दिखता है:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // function definition
|
||||
// function definition/body
|
||||
}
|
||||
```
|
||||
|
||||
अगर मैं ग्रीटिंग प्रदर्शित करने के लिए कोई फ़ंक्शन बनाना चाहता हूं, तो यह इस तरह दिख सकता है:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
जब भी हम अपने फ़ंक्शन को कॉल करना (या इनवोक करना) चाहते हैं, हम फ़ंक्शन के नाम के बाद `()` का उपयोग करते हैं। यह ध्यान देने योग्य है कि हमारे फ़ंक्शन को कॉल करने का निर्णय लेने से पहले या बाद में परिभाषित किया जा सकता है; जावास्क्रिप्ट कंपाइलर इसे आपके लिए खोजेगा।
|
||||
|
||||
```javascript
|
||||
// calling our function
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **नोट:** एक विशेष प्रकार का फ़ंक्शन है जिसे **मेथड** के रूप में जाना जाता है, जिसका आप पहले से ही उपयोग कर रहे हैं! वास्तव में, हमने इसे ऊपर अपने डेमो में देखा था जब हमने `console.log` का उपयोग किया था। जो चीज मेथड को फंक्शन से अलग बनाती है वो है की मेथड एक ऑब्जेक्ट से जुड़ी होती है (हमारे उदाहरण में `console`), जबकि एक फ़ंक्शन फ्री-फ़्लोटिंग है। आप कई डेवलपर्स से इन शब्दों का इस्तेमाल परस्पर करते सुनेंगे।
|
||||
|
||||
### सर्वोत्तम फ़ंक्शन प्रथाएं
|
||||
|
||||
फ़ंक्शन का निर्माण करते समय ध्यान में रखने के लिए सर्वोत्तम अभ्यास हैं
|
||||
|
||||
- हमेशा की तरह, वर्णनात्मक नामों का उपयोग करें ताकि आप जान सकें कि फ़ंक्शन क्या करेगा
|
||||
- शब्दों को संयोजित करने के लिए **camelCasing** का उपयोग करें
|
||||
- अपने कार्यों को किसी विशिष्ट कार्य पर केंद्रित रखें
|
||||
|
||||
## किसी फ़ंक्शन के लिए जानकारी पास करना
|
||||
|
||||
किसी फ़ंक्शन को अधिक पुन: प्रयोज्य बनाने के लिए आप अक्सर उसमें जानकारी देना चाहेंगे। अगर हम ऊपर अपने `displayGreeting` उदाहरण पर विचार करते हैं, तो यह केवल **Hello, world** प्रदर्शित करेगा। सबसे उपयोगी फ़ंक्शन कोई नहीं बना सकता है। यदि हम इसे थोड़ा और लचीला बनाना चाहते हैं, जैसे किसी व्यक्ति को बधाई देने के लिए व्यक्ति का नाम निर्दिष्ट करने की अनुमति देना, हम एक **पैरामीटर** जोड़ सकते हैं। एक पैरामीटर (जिसे कभी-कभी **आर्गुमेंट** भी कहा जाता है), एक फ़ंक्शन को भेजी जाने वाली अतिरिक्त जानकारी है।
|
||||
|
||||
पैरामीटर को कोष्ठक के भीतर परिभाषा भाग में सूचीबद्ध किया जाता है और अल्पविराम को अलग किया जाता है:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
हम एक नाम को स्वीकार करने के लिए अपने `displayGreeting` को अपडेट कर सकते हैं और उसे प्रदर्शित कर सकते हैं।
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
जब हम अपने फ़ंक्शन को कॉल करना चाहते हैं और पैरामीटर में पास करते हैं, तो हम इसे कोष्ठक में निर्दिष्ट करते हैं।
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// displays "Hello, Christopher!" when run
|
||||
```
|
||||
|
||||
## डिफॉल्ट मान
|
||||
|
||||
हम अधिक मापदंडों को जोड़कर अपने कार्य को और अधिक लचीला बना सकते हैं। लेकिन क्या होगा अगर हम हर मूल्य को निर्दिष्ट करने की आवश्यकता नहीं चाहते हैं? अपने ग्रीटिंग उदाहरण के साथ रखते हुए, हम आवश्यकता के अनुसार नाम छोड़ सकते हैं (हमें यह जानना होगा कि हम किसका अभिवादन कर रहे हैं), लेकिन हम चाहते हैं कि ग्रीटिंग को वांछित रूप में अनुकूलित किया जाए। यदि कोई इसे अनुकूलित नहीं करना चाहता है, तो हम इसके बजाय एक डिफ़ॉल्ट मान प्रदान करते हैं। एक पैरामीटर को एक डिफ़ॉल्ट मान प्रदान करने के लिए, हम इसे उसी तरह से सेट करते हैं जिस तरह से हम एक चर के लिए मान सेट करते हैं - `parameterName = 'defaultValue'`। एक पूर्ण उदाहरण देखने के लिए:
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
जब हम फ़ंक्शन को कॉल करते हैं, तो हम यह तय कर सकते हैं कि क्या हम `सैल्यूटेशन` के लिए कोई मूल्य निर्धारित करना चाहते हैं।
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// displays "Hello, Christopher"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// displays "Hi, Christopher"
|
||||
```
|
||||
|
||||
## आउटपुट लौटाएं
|
||||
|
||||
अब तक हमने जो फ़ंक्शन बनाया है वह हमेशा [कंसोल](https://developer.mozilla.org/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह ठीक वही हो सकता है जिसकी हम तलाश कर रहे हैं, खासकर जब हम फ़ंक्शन बनाते हैं जो अन्य सेवाओं को कॉल करेगा। लेकिन क्या होगा अगर मैं गणना करने और मान प्रदान करने के लिए एक सहायक फ़ंक्शन बनाना चाहता हूं तो मैं इसे कहीं और उपयोग कर सकता हूं?
|
||||
|
||||
हम **रिटर्न वैल्यू** का उपयोग करके ऐसा कर सकते हैं। एक वापसी मान फ़ंक्शन द्वारा लौटाया जाता है, और इसे एक चर में संग्रहीत किया जा सकता है, जैसे कि हम एक स्ट्रिंग या संख्या जैसे शाब्दिक मूल्य को संग्रहीत कर सकते हैं।
|
||||
|
||||
यदि कोई फ़ंक्शन कुछ वापस करता है तो कीवर्ड `return` का उपयोग किया जाता है। `return` कीवर्ड को इस तरह से लौटाए जाने के मूल्य या संदर्भ की उम्मीद है:
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
हम एक बधाई संदेश बनाने के लिए एक फ़ंक्शन बना सकते हैं और कॉलर को वापस मान दे सकते हैं
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
इस फ़ंक्शन को कॉल करते समय हम एक वैरिएबल में मान संग्रहीत करेंगे। यह उसी तरह है जैसे हम एक वैरिएबल को स्थिर मान (जैसे `const name ='Christopher'`) में सेट करते हैं।
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## फंक्शन्स के लिए पैरामीटर के रूप में कार्य
|
||||
|
||||
जैसे ही आप अपने प्रोग्रामिंग करियर में आगे बढ़ते हैं, आप ऐसे फंक्शन में आएंगे, जो फंक्शन्स को पैरामीटर के रूप में स्वीकार करते हैं। इस साफ-सुथरी चाल का इस्तेमाल आमतौर पर तब किया जाता है जब हम नहीं जानते कि कब कुछ होने वाला है या पूरा हो रहा है, लेकिन हम जानते हैं कि हमें प्रतिक्रिया में एक ऑपरेशन करने की जरूरत है।
|
||||
|
||||
एक उदाहरण के रूप में, [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) पर विचार करें, जो एक टाइमर शुरू करता है और पूरा होने पर कोड निष्पादित करेगा। हमें यह बताना होगा कि हम किस कोड को निष्पादित करना चाहते हैं। एक समारोह के लिए एक सही काम की तरह लगता है!
|
||||
|
||||
यदि आप नीचे दिए गए कोड को चलाते हैं, तो 3 सेकंड के बाद आपको संदेश दिखाई देगा **3 सेकंड में** समाप्त हो गया है।
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}
|
||||
// timer value is in milliseconds
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### अनाम फंक्शन्स
|
||||
|
||||
आइए एक और नज़र डालें कि हमने क्या बनाया है। हम एक नाम के साथ एक फ़ंक्शन बना रहे हैं जिसका उपयोग एक बार किया जाएगा। जैसे-जैसे हमारा आवेदन अधिक जटिल होता जाता है, हम स्वयं को बहुत सारे कार्य बनाते हुए देख सकते हैं, जिसे केवल एक बार ही कहा जाएगा। यह आदर्श नहीं है। जैसा कि यह पता चला है, हमें हमेशा एक नाम प्रदान करने की आवश्यकता नहीं है!
|
||||
|
||||
जब हम एक फ़ंक्शन को एक पैरामीटर के रूप में पारित कर रहे हैं, तो हम पहले से एक बनाने के लिए बाईपास कर सकते हैं और इसके बजाय एक पैरामीटर के हिस्से के रूप में निर्माण कर सकते हैं। हम उसी `function` कीवर्ड का उपयोग करते हैं, लेकिन इसके बजाय हम इसे एक पैरामीटर के रूप में बनाते हैं।
|
||||
|
||||
अनाम फ़ंक्शन का उपयोग करने के लिए ऊपर दिए गए कोड को फिर से लिखें:
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
यदि आप हमारा नया कोड चलाते हैं, तो आपको वही परिणाम मिलेंगे। हमने एक फ़ंक्शन बनाया है, लेकिन इसे कोई नाम नहीं देना है!
|
||||
|
||||
### फैट एरो फंक्शन्स
|
||||
|
||||
बहुत सारी प्रोग्रामिंग भाषाओं में एक शॉर्टकट (जावास्क्रिप्ट सहित) एक का उपयोग करने की क्षमता है जिसे **एरो** या **फैट एरो** फ़ंक्शन कहा जाता है। यह `=>` के एक विशेष संकेतक का उपयोग करता है, जो एक तीर की तरह दिखता है - इस प्रकार नाम! `=>` का उपयोग करके, हम `function` कीवर्ड को छोड़ सकते हैं।
|
||||
|
||||
चलो एक फैट एरो फंक्शन्स का उपयोग करने के लिए हमारे कोड को एक बार फिर से लिखें:
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### प्रत्येक रणनीति का उपयोग कब करें
|
||||
|
||||
अब आपने देखा है कि हमारे पास फंक्शन को एक पैरामीटर के रूप में पास करने के तीन तरीके हैं और प्रत्येक का उपयोग करते समय सोच सकते हैं। यदि आप जानते हैं कि आप एक से अधिक बार फ़ंक्शन का उपयोग कर रहे हैं, तो इसे सामान्य रूप से बनाएं। यदि आप इसे केवल एक स्थान के लिए उपयोग कर रहे हैं, तो यह आमतौर पर एक अनाम फ़ंक्शन का उपयोग करने के लिए सबसे अच्छा है।आप फैट एरो फंक्शन्स या अधिक पारंपरिक `फ़ंक्शन` सिंटैक्स का उपयोग करते हैं या नहीं, आप पर निर्भर है, लेकिन आप देखेंगे कि अधिकांश आधुनिक डेवलपर्स` => `पसंद करते हैं।
|
||||
|
||||
---
|
||||
|
||||
## 🚀 चुनौती
|
||||
|
||||
क्या आप एक वाक्य में कार्यों और विधियों के बीच के अंतर को स्पष्ट कर सकते हैं? कोशिश तो करो!
|
||||
|
||||
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||
[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=hi)
|
||||
|
||||
## समीक्षा और स्व अध्ययन
|
||||
|
||||
यह लायक है [एरो फ़ंक्शंस पर थोड़ा और पढ़ना](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), क्योंकि वे कोड बेस में उपयोग किए जा रहे हैं। एक फ़ंक्शन लिखने का अभ्यास करें, और फिर इस सिंटैक्स के साथ इसे फिर से लिखना।
|
||||
|
||||
## असाइनमेंट
|
||||
|
||||
[फन विथ फंशन्स ](assignment.hi.md)
|
||||
194
2-js-basics/2-functions-methods/translations/README.id.md
Normal file
194
2-js-basics/2-functions-methods/translations/README.id.md
Normal file
@@ -0,0 +1,194 @@
|
||||
# Dasar-dasar JavaScript: Metode dan Fungsi
|
||||
|
||||
|
||||
|
||||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
[Kuis pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=id)
|
||||
|
||||
Ketika kita berpikir tentang menulis kode, kita selalu ingin memastikan kode kita dapat dibaca. Meskipun ini terdengar berlawanan dengan intuisi, kode dibaca lebih banyak kali daripada yang tertulis. Salah satu alat inti dalam kotak alat pengembang untuk memastikan kode yang dapat dipelihara adalah **function (fungsi)**.
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode dan Fungsi")
|
||||
|
||||
## Fungsi
|
||||
|
||||
Pada intinya, fungsi adalah sekumpulan kode yang dapat kita jalankan sesuai permintaan. Ini sempurna untuk skenario di mana kita perlu melakukan tugas yang sama beberapa kali; daripada menduplikasi logika di beberapa lokasi (yang akan menyulitkan pembaruan saat waktunya tiba), kita dapat memusatkannya di satu lokasi, dan memanggilnya kapan pun kita membutuhkan operasi dilakukan - Anda bahkan dapat memanggil fungsi dari fungsi lain!.
|
||||
|
||||
Sama pentingnya adalah kemampuan untuk menamai suatu fungsi. Meskipun ini mungkin tampak sepele, nama tersebut memberikan cara cepat untuk mendokumentasikan bagian kode. Anda bisa menganggap ini sebagai label pada sebuah tombol. Jika saya mengklik tombol yang bertuliskan "Batalkan pengatur waktu", saya tahu itu akan berhenti menjalankan jam.
|
||||
|
||||
## Membuat dan memanggil suatu fungsi
|
||||
|
||||
Sintaks untuk suatu fungsi terlihat seperti berikut:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() {
|
||||
// definisi fungsi
|
||||
// definisi fungsi/tubuh
|
||||
}
|
||||
```
|
||||
|
||||
Jika saya ingin membuat fungsi untuk menampilkan salam, mungkin akan terlihat seperti ini:
|
||||
|
||||
```javascript
|
||||
function tampilkanSapaan() {
|
||||
console.log("Hello, world!");
|
||||
}
|
||||
```
|
||||
|
||||
Kapanpun kita ingin memanggil (atau memanggil) fungsi kita, kita menggunakan nama fungsi yang diikuti dengan `()`. Perlu diperhatikan fakta bahwa fungsi kita dapat didefinisikan sebelum atau sesudah kita memutuskan untuk memanggilnya; kompilator JavaScript (JavaScript compiler) akan menemukannya untuk Anda.
|
||||
|
||||
```javascript
|
||||
// memanggil fungsi kita
|
||||
tampilkanSapaan();
|
||||
```
|
||||
|
||||
> **CATATAN:** Ada jenis fungsi khusus yang dikenal sebagai **method**, yang telah Anda gunakan! Faktanya, kita melihat ini di demo kita di atas ketika kita menggunakan `console.log`. Apa yang membuat metode berbeda dari fungsi adalah metode dilampirkan ke objek (`konsol` dalam contoh kita), sementara fungsi mengambang bebas. Anda akan mendengar banyak pengembang menggunakan istilah ini secara bergantian.
|
||||
|
||||
### Praktik terbaik fungsi
|
||||
|
||||
Ada beberapa praktik terbaik yang perlu diperhatikan saat membuat fungsi
|
||||
|
||||
- Seperti biasa, gunakan nama deskriptif agar Anda tahu fungsinya
|
||||
- Gunakan **camelCasing** untuk menggabungkan kata-kata
|
||||
- Jaga agar fungsi Anda tetap fokus pada tugas tertentu
|
||||
|
||||
## Memasukkan informasi ke suatu fungsi
|
||||
|
||||
Agar suatu fungsi lebih dapat digunakan kembali, Anda sering kali ingin menyampaikan informasi ke dalamnya. Jika kita mempertimbangkan contoh `tampilkanSapaan` di atas, itu hanya akan menampilkan **Halo, dunia!**. Bukan fungsi paling berguna yang bisa dibuat seseorang. Jika kita ingin membuatnya sedikit lebih fleksibel, seperti mengizinkan seseorang untuk menentukan nama orang yang akan disapa, kita dapat menambahkan **parameter**. Parameter (juga terkadang disebut **argumen**), adalah informasi tambahan yang dikirim ke suatu fungsi.
|
||||
|
||||
Parameter dicantumkan di bagian definisi dalam tanda kurung dan dipisahkan dengan koma seperti ini:
|
||||
|
||||
```javascript
|
||||
function nama(param, param2, param3) {}
|
||||
```
|
||||
|
||||
Kita dapat memperbarui `tampilkanSapaan` kita untuk menerima sebuah nama dan menampilkannya.
|
||||
|
||||
```javascript
|
||||
function tampilkanSapaan(nama) {
|
||||
const pesan = `Hello, ${nama}!`;
|
||||
console.log(pesan);
|
||||
}
|
||||
```
|
||||
|
||||
Ketika kita ingin memanggil fungsi kita dan memasukkan parameternya, kita tentukan di dalam tanda kurung.
|
||||
|
||||
```javascript
|
||||
tampilkanSapaan("Christopher");
|
||||
// Menampilkan "Hello, Christopher!" ketika dijalankan
|
||||
```
|
||||
|
||||
## Nilai dasar (Nilai Default)
|
||||
|
||||
Kita dapat membuat fungsi kita lebih fleksibel dengan menambahkan lebih banyak parameter. Tetapi bagaimana jika kita tidak ingin setiap nilai ditentukan? Sesuai dengan contoh sapaan kita, kita bisa membiarkan nama sesuai kebutuhan (kita perlu tahu siapa yang kita sapa), tapi kita ingin membiarkan sapaan itu sendiri disesuaikan sesuai keinginan. Jika seseorang tidak ingin menyesuaikannya, kita memberikan nilai default sebagai gantinya. Untuk memberikan nilai default ke parameter, kita menyetelnya dengan cara yang sama seperti kita menyetel nilai untuk variabel - `namaParameter = 'nilaiDefault'`. Berikut contoh lengkapnya:
|
||||
|
||||
```javascript
|
||||
function tampilkanSapaan(nama, salam = "Hello") {
|
||||
console.log(`${salam}, ${nama}`);
|
||||
}
|
||||
```
|
||||
|
||||
Ketika kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai dari `salam`.
|
||||
|
||||
```javascript
|
||||
tampilkanSapaan("Christopher");
|
||||
// menampilkan "Hello, Christopher"
|
||||
|
||||
tampilkanSapaan("Christopher", "Hi");
|
||||
// menampilkan "Hi, Christopher"
|
||||
```
|
||||
|
||||
## Nilai Kembali (Return values)
|
||||
|
||||
Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain?
|
||||
|
||||
Kita bisa melakukan ini dengan menggunakan **nilai kembali (return value)**. Nilai kembali dikembalikan oleh fungsi, dan dapat disimpan dalam variabel sama seperti kita dapat menyimpan nilai literal seperti string atau angka.
|
||||
|
||||
Jika suatu fungsi mengembalikan sesuatu maka kata kunci `return` digunakan. Kata kunci `return` mengharapkan nilai atau referensi dari apa yang dikembalikan seperti:
|
||||
|
||||
```javascript
|
||||
return variabelSaya;
|
||||
```
|
||||
|
||||
Kita bisa membuat fungsi untuk membuat pesan ucapan dan mengembalikan nilainya ke pemanggil
|
||||
|
||||
```javascript
|
||||
function buatPesanSapaan(nama) {
|
||||
const pesan = `Hello, ${nama}`;
|
||||
return pesan;
|
||||
}
|
||||
```
|
||||
|
||||
Saat memanggil fungsi ini, kita akan menyimpan nilai dalam variabel. Ini hampir sama dengan cara kita menetapkan variabel ke nilai statis (seperti `const nama = 'Christopher'`).
|
||||
|
||||
```javascript
|
||||
const pesanSapaan = buatPesanSapaan("Christopher");
|
||||
```
|
||||
|
||||
## Fungsi sebagai parameter untuk fungsi
|
||||
|
||||
Saat Anda maju dalam karir pemrograman Anda, Anda akan menemukan fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tanggapan.
|
||||
|
||||
Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi!
|
||||
|
||||
Jika Anda menjalankan kode di bawah ini, setelah 3 detik Anda akan melihat pesan **3 detik telah berlalu**.
|
||||
|
||||
```javascript
|
||||
function tampilkanSelesai() {
|
||||
console.log("3 detik telah berlalu");
|
||||
}
|
||||
// nilai timer dalam milidetik
|
||||
setTimeout(3000, tampilkanSelesai);
|
||||
```
|
||||
|
||||
### Fungsi anonim
|
||||
|
||||
Mari kita lihat lagi apa yang telah kita bangun. Kita membuat fungsi dengan nama yang akan digunakan satu kali. Saat aplikasi kita menjadi lebih kompleks, kita dapat melihat diri kita sendiri membuat banyak fungsi yang hanya akan dipanggil sekali. Ini tidak ideal. Ternyata, kita tidak selalu perlu memberi nama!
|
||||
|
||||
Saat kita mengirimkan fungsi sebagai parameter, kita dapat mengabaikan pembuatannya terlebih dahulu dan sebagai gantinya membuatnya sebagai bagian dari parameter. Kita menggunakan kata kunci `function` yang sama, tetapi kita membuatnya sebagai parameter.
|
||||
|
||||
Mari tulis ulang kode di atas untuk menggunakan fungsi anonim:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, function () {
|
||||
console.log("3 detik telah berlalu");
|
||||
});
|
||||
```
|
||||
|
||||
Jika Anda menjalankan kode baru kita, Anda akan melihat kita mendapatkan hasil yang sama. Kita telah membuat fungsi, tetapi tidak harus memberinya nama!
|
||||
|
||||
### Fungsi panah gemuk
|
||||
|
||||
Satu pintasan yang umum di banyak bahasa pemrograman (termasuk JavaScript) adalah kemampuan untuk menggunakan apa yang disebut fungsi **panah (arrow)** atau **panah gemuk (fat arrow)**. Ini menggunakan indikator khusus `=>`, yang terlihat seperti panah - demikian namanya! Dengan menggunakan `=>`, kita dapat melewati kata kunci `function`.
|
||||
|
||||
Mari kita tulis ulang kode kita sekali lagi untuk menggunakan fungsi panah gemuk:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, () => {
|
||||
console.log("3 detik telah berlalu");
|
||||
});
|
||||
```
|
||||
|
||||
### Kapan menggunakan setiap strategi
|
||||
|
||||
Anda sekarang telah melihat bahwa kita memiliki tiga cara untuk meneruskan fungsi sebagai parameter dan mungkin bertanya-tanya kapan harus menggunakannya. Jika Anda tahu Anda akan menggunakan fungsi tersebut lebih dari sekali, buatlah seperti biasa. Jika Anda akan menggunakannya hanya untuk satu lokasi, biasanya yang terbaik adalah menggunakan fungsi anonim. Apakah Anda menggunakan fungsi panah gemuk atau tidak atau sintaks `function` yang lebih tradisional terserah Anda, tetapi Anda akan melihat sebagian besar pengembang modern lebih memilih`=>`.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan metode? Cobalah!
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini.
|
||||
|
||||
## Tugas
|
||||
|
||||
[Bersenang-senang dengan Fungsi](./assignment.id.md)
|
||||
195
2-js-basics/2-functions-methods/translations/README.it.md
Normal file
195
2-js-basics/2-functions-methods/translations/README.it.md
Normal file
@@ -0,0 +1,195 @@
|
||||
# Nozioni di base su JavaScript: Metodi e Funzioni
|
||||
|
||||
|
||||
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz pre-lezione
|
||||
|
||||
[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=it)
|
||||
|
||||
Quando si pensa di scrivere codice, ci si vuole sempre assicurare che il proprio codice sia leggibile. Anche se questo sembra controintuitivo, il codice viene letto molte più volte di quanto non venga scritto. Uno strumento base nella cassetta degli attrezzi dello sviluppatore è la **funzione**
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
||||
|
||||
## Funzioni
|
||||
|
||||
Essenzialmente, una funzione è un blocco di codice che si può eseguire su richiesta. Questo è perfetto per gli scenari in cui si deve eseguire la stessa attività più volte; invece di duplicare la logica in più posizioni (il che renderebbe difficile l'aggiornamento quando arriva il momento), è possibile centralizzarla in una posizione e chiamarla ogni volta che serve eseguire quell'operazione - è possibile persino chiamare funzioni da altre funzioni!.
|
||||
|
||||
Altrettanto importante è la capacità di nominare una funzione. Anche se questo potrebbe sembrare banale, il nome fornisce un modo rapido per documentare una sezione di codice. Si potrebbe pensare a questo come un'etichetta su un pulsante. Se clicco su un pulsante che dice "Annulla timer", so che interromperà il conteggio del tempo.
|
||||
|
||||
## Creare e chiamare una funzione
|
||||
|
||||
La sintassi di una funzione è simile alla seguente:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // definizione della funzione
|
||||
// definizione della funzione/corpo
|
||||
}
|
||||
```
|
||||
|
||||
Se si volesse creare una funzione per visualizzare un saluto, potrebbe assomigliare a questo:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
Ogniqualvolta si voglia chiamare (o invocare) una funzione, si usa il nome della funzione seguito da `()`. Vale la pena notare il fatto che la funzione può essere definita prima o dopo aver deciso di chiamarla; il compilatore JavaScript la troverà da solo.
|
||||
|
||||
```javascript
|
||||
// chiamata della funzione
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> Esiste un tipo speciale di funzione, noto come metodo, che già si sta usando! In effetti questo si è visto nella demo di cui sopra quando si è usato `console.log`. Quello che rende un metodo diverso da una funzione è che il metodo è attaccato a un oggetto (la console nell'esempio), mentre una funzione è libera.Si sentiranno molti sviluppatori usare questi termini in modo intercambiabile.
|
||||
|
||||
### Migliori pratiche per la funzione
|
||||
|
||||
Ci sono alcune buone pratiche da tenere a mente quando si creano funzioni
|
||||
|
||||
- Come sempre, usare nomi descrittivi in modo da sapere cosa farà la funzione
|
||||
- Usare la notazione a cammello (camelCase) per combinare le parole
|
||||
- Mantenere le proprie funzioni concentrate su un'attività specifica
|
||||
|
||||
## Passare di informazioni a una funzione
|
||||
|
||||
Per rendere una funzione più riutilizzabile spesso si vorrà passarle delle informazioni. Se si considera la funzione di esempio `displayGreeting` qui sopra, visualizzerà solamente `Hello, world!`.Non è la funzione più utile che si possa creare. Se la si vuole rendere un poco più flessibile, tipo consentire a qualcuno di specificare il nome della persona da salutare, si può aggiungere un **parametro**. Un parametro (talvota chiamato anche **argomento**), è una informazione addizionale inviata alla funzione.
|
||||
|
||||
I parametri sono elencati nella parte di definizione tra parentesi e sono separati da virgole in questo modo:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
E' possibile aggiornare la funzione `displayGreeting` in modo che accetti un nome e lo visualizzi.
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
Quando si vuole chiamare la funzione e passare il parametro, lo si specifica tra parentesi.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// visualizza "Hello, Christopher!" quando eseguita
|
||||
```
|
||||
|
||||
## Valori predefiniti
|
||||
|
||||
E' possibile rendere la funzione ancora più flessibile aggiungendo più parametri. Ma cosa succede se non si vuole richiedere che ogni valore sia specificato? Continuando con l'esempio di saluto, si potrebbe lasciare il nome come richiesto (serve sapere chi si sta salutando), ma si vuole personalizzare coma desiderato anche il saluto. Se qualcuno non vuole personalizzarlo, si fornisce invece un valore predefinito. Per fornire a un parametro un valore predefinito, lo si imposta in modo praticamente uguale a come si assegna un valore a una variabile - `nomeParametro = 'valorePredefinito'`. Ecco un esempio completo:
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
Quando si chiama la funzione, è possibile poi decidere se si vuole impostare un valore per `salutation`.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// visualizza "Hello, Christopher"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// visualizza "Hi, Christopher"
|
||||
```
|
||||
|
||||
## Valori restituiti
|
||||
|
||||
Fino ad ora la funzione costruita mostrerà sempre il suo risultato alla [console](https://https://developer.mozilla.org/it/docs/Web/API/Console). A volte questo può essere esattamente quello che si sta cercando, specialmente quando si creano funzioni che chiameranno altri servizi. Ma cosa succede se si vuole creare una funzione di supporto per eseguire un calcolo e ritornare il valore in modo da poterlo utilizzare altrove?
|
||||
|
||||
Si può fare utilizzando un **valore di ritorno**. Un valore di ritorno viene restituito dalla funzione e può essere memorizzato in una variabile proprio come si potrebbe memorizzare un valore letterale come una stringa o un numero.
|
||||
|
||||
Se una funzione ritorna qualcosa allora si deve usare la parola chiave `return`. La parola chiave `return` si attende un valore o un riferimento a ciò che viene ritornato, in questo modo:
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
Si potrebbe creare una funzione per creare un messaggio di saluto e restituire il valore al chiamante
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
Quando si chiama questa funzione, il valore verrà memorizzato in una variabile. E' praticamente lo stesso modo nel quale si imposterebbe una variabile a un valore statico (tipo `const name = 'Christopher'`).
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## Funzioni come parametri per funzioni
|
||||
|
||||
Man mano che si progredisce nella propria carriera di programmatore, ci si imbatterà in funzioni che accettano funzioni come parametri. Questo trucco è comunemente usato quando non si sa quando qualcosa accadrà o sarà completata, ma si sa che si deve eseguire un'operazione in risposta.
|
||||
|
||||
Come esempio si consideri [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), che fa partire un timer ed eseguirà del codice il tempo viene esaurito. Occorre dirgli quale codice si vuole eseguire. Sembra un lavoro perfetto per una funzione!
|
||||
|
||||
Se si esegue il codice qui sopra, dopo 3 secondi si vedrà il messaggio **3 seconds has elapsed** (sono trascorsi 3 secondi).
|
||||
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}
|
||||
// il valore del timer è in millisecondi
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### Funzioni anonime
|
||||
|
||||
Si dia un'altra occhiata a ciò che è stato costruito. Si sta creando una funzione con un nome che verrà utilizzata una volta. Man mano che la propria applicazione diventa più complessa, si può prevedere che verranno create molte funzioni che verranno chiamate solo una volta. Questo non è l'ideale. A quanto pare, non è sempre necessario fornire un nome!
|
||||
|
||||
Quando si passa una funzione come parametro, è possibile evitare di crearla in anticipo e invece costruirne una come parte del parametro. Si usa la stessa parola chiave `function`, ma invece la si costruisce come parametro.
|
||||
|
||||
Il codice qui sopra viene riscritto per utilizzare una funzione anonima:
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
Se si esegue adesso il nuovo codice si noterà che vengono ottenuti gli stessi risultati. E' stata creata una funzione, ma non si è dovuto darle un nome!
|
||||
|
||||
### Funzioni fat arrow
|
||||
|
||||
Una scorciatoia comune in molti linguaggi di programmazione (incluso JavaScript) è la possibilità di utilizzare quella che viene chiamata una funzione **freccia** o funzione **fat arrow** . Utilizza un indicatore speciale, `=>`, che assomiglia a una freccia, da cui il nome! Usando `=>`, è possibile saltare la parola chiave `function` .
|
||||
|
||||
Ora il codice viene riscritto ancora una volta (refattorizzato) per utilizzare una funzione fat arrow:
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### Quando utilizzare ciascuna strategia
|
||||
|
||||
Ora che si è visto che ci sono tre modi per passare una funzione come parametro ci si potrebbe chiedere quando usare ciascuno di essi. Se si sa che funzione verrà utilizzata più di una volta, si crea normalmente. Se la si utilizzerà solo per una posizione, in genere è meglio utilizzare una funzione anonima. Se si usa o meno una funzione fat arrow o la sintassi più tradizionale `function` dipende dallo sviluppatore, ma si noterà che la maggior parte degli sviluppatori moderni preferisce `=>`.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Si riesce ad articolare in una frase la differenza tra funzioni e metodi? Fare un tentativo!
|
||||
|
||||
## Quiz post-lezione
|
||||
|
||||
[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=it)
|
||||
|
||||
## Revisione e auto apprendimento
|
||||
|
||||
Vale la pena [leggere un poco di più sulle funzioni arrow](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), poiché sono sempre più utilizzate nelle basi di codice. Esercitarsi a scrivere una funzione, quindi riscriverla con questa sintassi.
|
||||
|
||||
## Compito
|
||||
|
||||
[Divertimento con le funzioni](assignment.it.md)
|
||||
192
2-js-basics/2-functions-methods/translations/README.ja.md
Normal file
192
2-js-basics/2-functions-methods/translations/README.ja.md
Normal file
@@ -0,0 +1,192 @@
|
||||
# JavaScript の基本: メソッドと関数
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レッスン前の小テスト
|
||||
[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=ja)
|
||||
|
||||
コードを書くことを考えるとき、私たちは常にコードが読みやすいようにしたいと考えています。直感的ではないように聞こえるかもしれませんが、コードは書かれた回数よりも何度も読まれます。コードを確実にメンテナンスできるようにするための開発者のツールボックスの中心的なツールの一つが **関数** です。
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
||||
|
||||
## 関数
|
||||
|
||||
コアとなるのは、関数は必要に応じて実行できるコードのブロックです。これは、同じタスクを何度も実行する必要がある場合に最適です。ロジックを複数の場所に複製するのではなく (時間が来たときに更新するのが困難になります)、1つの場所に集中させ、実行する操作が必要なときにいつでも呼び出すことができます - 他の関数から関数を呼び出すこともできます!
|
||||
|
||||
他の関数から関数を呼び出すこともできます！同じくらい重要なのは、関数に名前を付ける機能です。これは些細なことのように思われるかもしれませんが、名前をつけることでコードのセクションを簡単に文書化することができます。これはボタンのラベルのようなものと考えることができます。もし "Cancel timer" と書かれたボタンをクリックすると、それが時計の動作を止めようとしていることがわかります。
|
||||
|
||||
## 関数の作成と呼び出し
|
||||
|
||||
関数の構文は次のようになります:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // 関数の定義
|
||||
// 関数の定義/中身
|
||||
}
|
||||
```
|
||||
|
||||
挨拶を表示する関数を作ろうと思ったら、こんな感じになるかもしれません:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
関数を直接呼び出したい (または別スレッド、別コンテキストの関数を呼び出したい) ときはいつでも、関数名の後に `()` をつけます。関数を呼び出す前に定義しても後に定義してもよいという事実は注目に値します; JavaScript コンパイラがそれを見つけてくれます。
|
||||
|
||||
```javascript
|
||||
// 関数の呼び出し
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **注:** **メソッド** として知られている特殊なタイプの関数がありますが、これはすでに使ったことがあるでしょう！実際、上のデモではこれを見ました。実際、上のデモでは `console.log` を使っています。メソッドが関数と異なるのは、メソッドがオブジェクト (この例では `console`) にアタッチされているのに対し、関数はフリーフローティングです。多くの開発者がこれらの用語を互換性を持って使っているのを耳にするでしょう。
|
||||
|
||||
### 関数のベストプラクティス
|
||||
|
||||
機能を作成する際に留意すべきベストプラクティスがいくつかあります。
|
||||
|
||||
- いつものように、関数が何をするのかがわかるように、記述的な名前を使用します
|
||||
- **キャメルケーシング** を使用して単語を組み合わせます
|
||||
- 関数を特定のタスクに集中させます
|
||||
|
||||
## 関数への情報の受け渡し
|
||||
|
||||
関数をより再利用可能なものにするためには、情報を渡したいことがよくあります。上の `displayGreeting` の例を考えてみると、**Hello, world!** しか表示されません。これでは、作成できる関数の中で最も有用なものとは言えません。挨拶する相手の名前を指定できるようにするなど、もう少し柔軟にしたい場合は、**パラメータ** を追加することができます。パラメータ (**引数** と呼ばれることもあります) は、関数に送られる追加情報です。
|
||||
|
||||
パラメータは定義部分に括弧内に記載されており、以下のようにカンマで区切られています:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
名前を受け付けてそれを表示するように `displayGreeting` を更新することができます。
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
関数を呼び出してパラメータを渡すときは、括弧内で指定します。
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// 実行時に "Hello, Christopher!" と表示される
|
||||
```
|
||||
|
||||
## 初期値
|
||||
|
||||
より多くのパラメータを追加することで、関数をさらに柔軟にすることができます。しかし、すべての値を指定する必要がない場合はどうでしょうか？挨拶の例に倣って、名前は必須のままにしておくこともできますが (誰に挨拶しているのかを知る必要があります)、挨拶自体は必要に応じてカスタマイズできるようにしたいと考えています。誰かがカスタマイズしたくない場合は、代わりにデフォルト値を指定します。パラメータにデフォルト値を設定するには、変数に値を設定するのと同じ方法 - `parameterName = 'defaultValue'` でパラメータを設定します。完全な例を見るには、以下を参照してください。
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
関数を呼び出すときに、`salutation` に値を設定するかどうかを決めることができます。
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// "Hello, Christopher" と表示されます。
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// "Hi, Christopher" と表示されます。
|
||||
```
|
||||
|
||||
## 戻り値
|
||||
|
||||
今までは、私たちが作った関数は常に [console](https://developer.mozilla.org/ja/docs/Web/API/console) に出力されていました。特に他のサービスを呼び出す関数を作成する場合には、これがまさに求めているものになることがあります。しかし、計算を実行するヘルパー関数を作成して値を返し、それを他の場所で使えるようにしたい場合はどうしたらいいでしょうか？
|
||||
|
||||
これを行うには、**戻り値** を使用します。戻り値は関数から返され、文字列や数値などのリテラル値を格納するのと同じように変数に格納することができます。
|
||||
|
||||
関数が何かを返す場合は、キーワード `return` が使用されます。キーワード `return` は、以下のように返されるものの値や参照を期待しています:
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
挨拶メッセージを作成して、その値を呼び出し元に返す関数を作成することができます。
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
この関数を呼び出すときには、変数に値を格納します。これは、(`const name = 'Christopher'` のように) 変数に静的な値を設定するのと同じ方法です。
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## 関数のパラメータとしての関数
|
||||
|
||||
プログラミングのキャリアを積んでいくと、関数をパラメータとして受け入れる関数に出くわすようになります。この巧妙なトリックは、何かがいつ発生するか、または完了するかわからないが、レスポンスとして操作を実行する必要があることがわかっている場合によく使われます。
|
||||
|
||||
例として、タイマーを開始し、タイマーが完了したらコードを実行する [setTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) を考えてみましょう。どのようなコードを実行したいかを伝える必要があります。関数としては完璧な仕事のように聞こえます。
|
||||
|
||||
以下のコードを実行すると、3秒後に **3秒が経過しました** というメッセージが表示されます。
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3秒が経過しました');
|
||||
}
|
||||
// タイマーの値はミリ秒単位
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### 匿名関数
|
||||
|
||||
もう一度、作ったものを見てみましょう。一度だけ使用される名前の関数を作成しています。アプリケーションが複雑になるにつれて、一度しか呼ばれない関数をたくさん作ることになるでしょう。これは理想的ではありません。しかし、常に名前を指定する必要はありません。
|
||||
|
||||
パラメータとして関数を渡すときは、事前に関数を作成する必要はなく、代わりにパラメータの一部として関数を作成することができます。同じ `function` キーワードを使用しますが、代わりにパラメータとしてビルドします。
|
||||
|
||||
上のコードを書き換えて、匿名の関数を使用してみましょう。
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3秒が経過しました');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
新しいコードを実行すると、同じ結果が得られることに気づくでしょう。関数を作りましたが、名前をつける必要はありませんでした。
|
||||
|
||||
### ファットアロー関数
|
||||
|
||||
多くのプログラミング言語 (JavaScript を含む) に共通するショートカットは、**アロー** または **ファットアロー** 関数と呼ばれるものを使用することです。これは、矢印のように見える `=>` という特殊なインジケータを使用します。`=>` を使うことで、`function` キーワードを省略することができます。
|
||||
|
||||
ファットアロー関数を使って、もう一度コードを書き換えてみましょう。
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### それぞれの戦略を使うとき
|
||||
|
||||
関数をパラメータとして渡すには3つの方法があることがわかりましたが、それぞれをいつ使うか迷っているかもしれません。関数を複数回使用することがわかっているのであれば、通常通りに作成してください。1 つの場所だけで使用する場合は、一般的には匿名関数を使用するのがベストです。太いアロー関数を使うか、より伝統的な `function` 構文を使うかはあなた次第ですが、最近の開発者の多くは `=>` を好んでいることに気づくでしょう。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
関数とメソッドの違いを一文で表現できますか？試してみてください。
|
||||
|
||||
## レッスン後の小テスト
|
||||
[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=ja)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
コードベースで使われることが多くなってきているアロー関数については、[もう少し読み込んでみる](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)価値があると思います。この構文で関数を書いて、それを書き換える練習をしてみましょう。
|
||||
|
||||
## 課題
|
||||
|
||||
[関数で楽しむ](assignment.ja.md)
|
||||
192
2-js-basics/2-functions-methods/translations/README.ko.md
Normal file
192
2-js-basics/2-functions-methods/translations/README.ko.md
Normal file
@@ -0,0 +1,192 @@
|
||||
# JavaScript 기초: 메소드와 함수
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## 강의 전 퀴즈
|
||||
[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=ko)
|
||||
|
||||
코드 작성에 대해 생각할 때 항상 코드를 읽을 수 있도록 해야합니다. 직설적이지 않지만, 코드는 작성된 것보다 더 많이 읽힙니다. 개발자의 툴 박스에서 유지관리 가능한 코드를 보장하는 핵심 도구는 **함수**입니다.
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
||||
|
||||
## 함수
|
||||
|
||||
핵심으로, 함수는 요청 시 실행할 수 있는 코드 블록입니다. 동일한 작업을 여러 번 수행하는 시나리오에 적합합니다; 로직을 여러 위치에 복사하는 대신(특정 시기에 업데이트하기 어렵게 만들 수 있음), 한 위치에 로직을 집중하고, 작업이 필요할 때마다 호출할 수 있습니다. 다른 함수에서 함수를 호출할 수도 있습니다!.
|
||||
|
||||
함수의 이름을 지정하는 능력도 중요합니다. 사소할 수 있지만, 이름은 코드 문서화를 빠르게 해줍니다. 버튼의 레이블로 생각할 수도 있습니다. "타이머 취소"라는 버튼을 클릭하면, 시계가 중지된다는 것을 알 수 있습니다.
|
||||
|
||||
## 함수 만들고 호출하기
|
||||
|
||||
함수 구문은 다음과 같습니다:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // function definition
|
||||
// function definition/body
|
||||
}
|
||||
```
|
||||
|
||||
인사말 출력하는 함수를 만들고 싶다면, 다음과 같이 보일 수 있습니다:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
함수를 호출(또는 invoke)할 때마다, 함수 이름 뒤에 `()`를 사용합니다. 함수를 호출하기 전후에 정의할 수 있다는 사실에 주목할 가치가 있습니다; JavaScript 컴파일러가 찾을 것입니다.
|
||||
|
||||
```javascript
|
||||
// calling our function
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **NOTE:** 이미 사용하고 있는 **메소드**라는 특별한 타입의 함수가 있습니다! 실제로, 데모에서 `console.log`를 사용할 때 보았습니다. 메소드가 함수와 다른 점은 메소드가 객체(`console`)에 연결되어있는 반면에, 함수는 free floating 상태라는 것입니다. 많은 개발자들이 같은 의미로 사용하는 걸 듣게 될 것입니다.
|
||||
|
||||
### 좋은 함수 예시
|
||||
|
||||
함수를 만들 때 알아야 할 몇 가지 좋은 사례가 있습니다
|
||||
|
||||
- 항상 그렇듯이, 설명이 포함된 이름을 사용해서 함수가 수행하는 작업을 알 수 있습니다
|
||||
- **camelCasing** 를 사용하여 단어 결합
|
||||
- 특정 작업에 맞춘 함수 유지
|
||||
|
||||
## 함수에 정보 전달하기
|
||||
|
||||
함수를 더 재사용하기 위해 종종 정보를 전달하고 싶을 것입니다. 아래의 `displayGreeting` 예시를 고려하면 **Hello, world!** 만 출력됩니다. 만들 수 있는 가장 유용한 함수는 아닙니다. 인사할 사람의 이름을 정하는 것 처럼 더 유연하게 만들고 싶다면, 매개 변수를 추가할 수 있습니다. 매개 변수(**인수**)는 함수에 전달되는 추가 정보입니다.
|
||||
|
||||
매개 변수는 괄호 안에 나열되며 쉼표로 구분됩니다.
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
`displayGreeting` 함수를 업데이트해서 이름을 받아 출력할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
함수를 호출하고 매개 변수를 전달하려면, 괄호 안에 지정합니다.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// displays "Hello, Christopher!" when run
|
||||
```
|
||||
|
||||
## 기본 값
|
||||
|
||||
더 많은 매개 변수를 추가하여 힘수를 유연하게 만들 수 있습니다. 그러나 모든 값을 지정하지 않으려면 어떻게 해야할까요? 인사 예시를 유지하면서 필요하면 이름을 남길 수 있지만 (인사말하는 사람을 알아야 합니다), 원하는대로 인사를 커스터마이징할 수 있습니다. 누군가 커스터마이징을 원하지 않는 경우에는 대신 기본값을 제공합니다. 매개 변수에 기본값을 제공하기 위해서는 변수에 대한 값을 지정하는 것과 같은 방식으로 설정합니다 - `parameterName = 'defaultValue'`. 전체 예시를 보십시오:
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
함수를 호출할 때, `salutation`에 대한 값을 설정할 것인지 결정할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// displays "Hello, Christopher"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// displays "Hi, Christopher"
|
||||
```
|
||||
|
||||
## 반환 값
|
||||
|
||||
지금까지 만든 함수는 항상 [console](https://developer.mozilla.org/docs/Web/API/console)에 출력됩니다. 특히 다른 서비스를 호출할 함수를 만들 때도 이것이 찾고 있을 수 있습니다. 하지만 계산을 하고 값을 다른 곳에 다시 제공하고자 헬퍼 함수를 만들고 싶으면 어떻게 해야합니까?
|
||||
|
||||
**반환 값**을 사용하면 할 수 있습니다. 반환 값은 함수에 의해 반환되며, 문자열이나 숫자와 같은 리터럴 값을 저장할 수 있고 똑같은 변수에 저장할 수 있습니다.
|
||||
|
||||
함수가 무언가 반환하면 `return` 키워드가 사용됩니다. `return` 키워드는 다음과 같이 반환되는 항목의 값 또는 참조를 예상합니다:
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
인사 메시지를 만들고 호출하는 곳에 값을 반환해주는 함수를 만들 수 있습니다.
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
이 함수를 호출하면 값을 변수에 저장합니다. 변수를 정적 값(`const name = 'Christopher'`)으로 지정하는 것과 거의 동일합니다.
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## 함수의 파라미터에서 함수
|
||||
|
||||
프로그래밍 경력을 쌓으면서, 함수를 매개 변수로 받는 함수를 보게 될 것 입니다. 이 깔끔한 트릭은 일반적으로 어떤 일이 발생되거나 완료되는 때를 알지 못하지만, 이에 반응하여 작업해야 한다는 것을 알고있을 때 사용됩니다.
|
||||
|
||||
예시로, 타이머를 시작하고 완료되면 코드를 실행하는 [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)을 고려해보세요. 실행하려는 코드를 먼저 알려줘야 합니다. 함수에 대한 완벽한 직업인 것 같습니다!
|
||||
|
||||
아래 코드를 실행하면, 3초 후에 **3 seconds has elapsed**는 메시지가 표시됩니다.
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}
|
||||
// timer value is in milliseconds
|
||||
setTimeout(3000, displayDone);
|
||||
```
|
||||
|
||||
### 익명 함수
|
||||
|
||||
우리가 만든 것을 다시 보겠습니다. 한 번 사용할 이름으로 함수를 만들고 있습니다. 애플리케이션이 점점 복잡해지면서 한 번만 호출되는 함수를 많이 생성하는 것을 볼 수 있습니다. 이상적이지 않습니다. 결과적으로 항상 이름을 제공 할 필요가 없습니다!
|
||||
|
||||
함수를 매개 변수로 전달할 때 미리 하나를 생성하지 않고 대신 매개 변수의 일부로 만들 수 있습니다. 동일한 `function` 키워드를 사용하지만 대신 매개 변수로 작성합니다.
|
||||
|
||||
익명 함수를 사용하도록 위 코드를 다시 작성해 보겠습니다:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
});
|
||||
```
|
||||
|
||||
새 코드를 실행해도 동일한 결과를 얻을 수 있습니다. 함수를 만들었지만, 이름을 지정할 필요가 없어졌습니다!
|
||||
|
||||
### 화살표 함수
|
||||
|
||||
많은 프로그래밍 언어(JavaScript 등)에서 흔히 볼 수 있는 한 가지 단축키는 **화살표** 또는 **fat 화살표** 함수를 사용하는 능력입니다. 화살표처럼 보이는 `=>`의 특수 인디케이터를 사용합니다. `=>` 를 사용하면, `function` 키워드를 건너 뛸 수 있습니다.
|
||||
|
||||
화살표 함수를 사용하기 위해 코드를 다시 작성해봅니다:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, () => {
|
||||
console.log('3 seconds has elapsed');
|
||||
});
|
||||
```
|
||||
|
||||
### 각 strategy를 사용하는 경우
|
||||
|
||||
이제 매개 변수로 함수에 전달하는 세 가지 방법이 있으며 각자 언제 사용하는 지 궁금할 것입니다. 함수를 두번 이상 사용한다는 것을 알고 있다면 정상적으로 만들게 됩니다. 한 위치에만 사용하는 경우, 일반적으로 익명 함수를 사용하는 것이 가장 좋습니다. 화살표 함수를 사용하거나 더 전통적인 `함수` 구문을 사용하거나 안하거나 대부분의 요즘 개발자들이 `=>`를 선호한다는 것을 알게 될 것입니다.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 도전
|
||||
|
||||
함수와 메소드의 차이점을 한 문장으로 표현할 수 있나요? 시도해보세요!
|
||||
|
||||
## 강의 후 퀴즈
|
||||
[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=ko)
|
||||
|
||||
## 리뷰 & 자기주도 학습
|
||||
|
||||
화살표 함수는 코드 베이스에서 점점 많이 사용되고 있으므로, [읽어 볼 가치](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)가 있습니다. 함수 작성을 연습한 다음에 syntax로 다시 작성하십시오.
|
||||
|
||||
## 과제
|
||||
|
||||
[Fun with Functions](../assignment.md)
|
||||
195
2-js-basics/2-functions-methods/translations/README.ms.md
Normal file
195
2-js-basics/2-functions-methods/translations/README.ms.md
Normal file
@@ -0,0 +1,195 @@
|
||||
# Asas JavaScript: Kaedah dan Fungsi
|
||||
|
||||
|
||||
> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuiz Pra Kuliah
|
||||
[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
|
||||
|
||||
Apabila kita berfikir tentang menulis kod, kita selalu ingin memastikan kod kita dapat dibaca. Walaupun ini terdengar berlawanan dengan intuisi, kod dibaca lebih banyak kali daripada yang ditulis. Satu alat inti dalam kotak alat pemaju untuk memastikan kod yang dapat dikendalikan adalah **fungsi**.
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
||||
|
||||
> Klik gambar di atas untuk video mengenai kaedah dan fungsi.
|
||||
|
||||
## Fungsi
|
||||
|
||||
Pada intinya, fungsi adalah sekumpulan kod yang dapat kita laksanakan berdasarkan permintaan. Ini sesuai untuk senario di mana kita perlu melakukan tugas yang sama berkali-kali; daripada menggandakan logik di beberapa lokasi (yang akan menjadikannya sukar untuk dikemas kini apabila tiba masanya), kita dapat memusatkannya di satu lokasi, dan memanggilnya setiap kali kita memerlukan operasi yang dilakukan - anda bahkan dapat memanggil fungsi dari fungsi lain !.
|
||||
|
||||
Sama pentingnya ialah kemampuan menamakan fungsi. Walaupun ini kelihatan remeh, namanya memberikan cara cepat untuk mendokumentasikan bahagian kod. Anda boleh menganggap ini sebagai label pada butang. Sekiranya saya mengklik pada butang yang berbunyi "Batalkan pemasa", saya tahu ia akan berhenti menjalankan jam.
|
||||
|
||||
## Membuat dan memanggil fungsi
|
||||
|
||||
Sintaks untuk fungsi kelihatan seperti berikut:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // definisi fungsi
|
||||
// definisi fungsi dan badannya
|
||||
}
|
||||
```
|
||||
|
||||
Sekiranya saya ingin membuat fungsi untuk memaparkan ucapan, mungkin seperti ini:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
Setiap kali kita mahu memanggil (atau memanggil) fungsi kita, kita menggunakan nama fungsi diikuti oleh `()`. Perlu diperhatikan bahawa fungsi kita dapat ditentukan sebelum atau selepas kita memutuskan untuk menyebutnya; penyusun JavaScript akan mencarinya untuk anda.
|
||||
|
||||
```javascript
|
||||
// memanggil fungsi
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **CATATAN:** Terdapat jenis fungsi khas yang dikenali sebagai
|
||||
**kaedah**, yang sudah anda gunakan! Sebenarnya, kami melihat ini dalam demo kami di atas semasa kami menggunakan `console.log`. Apa yang membuat kaedah berbeza dari fungsi adalah metode yang dilampirkan ke objek (`console` dalam contoh kami), sementara fungsi bebas mengambang. Anda akan mendengar banyak pembangun menggunakan istilah ini secara bergantian.
|
||||
|
||||
### Amalan terbaik untuk fungsi
|
||||
|
||||
Terdapat sebilangan kecil amalan terbaik yang perlu diingat semasa membuat fungsi
|
||||
|
||||
- Seperti biasa, gunakan nama deskriptif sehingga anda tahu fungsi apa yang akan dilakukan
|
||||
- Gunakan **camelCasing** untuk menggabungkan perkataan
|
||||
- Pastikan fungsi anda tertumpu pada tugas tertentu
|
||||
|
||||
## Menyampaikan maklumat ke fungsi
|
||||
|
||||
Untuk menjadikan fungsi lebih boleh digunakan semula, anda selalunya ingin menyampaikan maklumat ke dalamnya. Sekiranya kita mempertimbangkan contoh `displayGreeting` di atas, ia hanya akan memaparkan **Hello, world!**. Bukan fungsi paling berguna yang dapat dibuat oleh seseorang. Sekiranya kita ingin menjadikannya sedikit lebih fleksibel, seperti membiarkan seseorang menentukan nama orang yang disambut, kita dapat menambahkan **parameter**. Parameter (kadang-kadang disebut **argumen**), adalah maklumat tambahan yang dikirim ke fungsi.
|
||||
|
||||
Parameter disenaraikan di bahagian definisi dalam kurungan dan dipisahkan koma seperti:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Kami boleh mengemas kini `displayGreeting` kami untuk menerima nama dan memaparkannya.
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
Apabila kita mahu memanggil fungsi kita dan meneruskan parameter, kita menentukannya dalam kurungan.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// memapar "Hello, Christopher!" apabila memproseskannya
|
||||
```
|
||||
|
||||
## Nilai lalai
|
||||
|
||||
Kita dapat menjadikan fungsi kita lebih fleksibel dengan menambahkan lebih banyak parameter. Tetapi bagaimana jika kita tidak mahu setiap nilai ditentukan? Sesuai dengan contoh ucapan kami, kami dapat meninggalkan nama seperti yang diperlukan (kami harus tahu siapa yang kami sapa), tetapi kami ingin membiarkan ucapan itu disesuaikan sesuai keinginan. Sekiranya seseorang tidak mahu menyesuaikannya, kami memberikan nilai lalai. Untuk memberikan nilai lalai ke parameter, kami menetapkannya dengan cara yang sama dengan menetapkan nilai untuk pemboleh ubah - `parameterName = 'defaultValue' `. Untuk melihat contoh penuh:
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
Apabila kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai untuk `salam `.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// memapar "Hello, Christopher"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// memapar "Hi, Christopher"
|
||||
```
|
||||
|
||||
## Nilai Pulangan
|
||||
|
||||
Sehingga kini fungsi yang kami bina akan selalu dikeluarkan ke [console](https://developer.mozilla.org/docs/Web/API/console). Kadang kala inilah yang sebenarnya kita cari, terutamanya ketika kita membuat fungsi yang akan memanggil perkhidmatan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan pengiraan dan memberikan nilai kembali supaya saya dapat menggunakannya di tempat lain?
|
||||
|
||||
Kita boleh melakukan ini dengan menggunakan **nilai kembali**. Nilai kembali akan dikembalikan oleh fungsi, dan dapat disimpan dalam pemboleh ubah sama seperti kita dapat menyimpan nilai literal seperti rentetan atau angka.
|
||||
|
||||
Sekiranya fungsi mengembalikan sesuatu maka kata kunci `return` digunakan. Kata kunci `return` menjangkakan nilai atau rujukan tentang apa yang dikembalikan seperti itu:
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
Kami dapat membuat fungsi untuk membuat pesan ucapan dan mengembalikan nilainya kembali ke pemanggil
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
Apabila memanggil fungsi ini, kita akan menyimpan nilainya dalam pemboleh ubah. Ini sama dengan cara kita menetapkan pemboleh ubah ke nilai statik (seperti `const name = 'Christopher' `).
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## Berfungsi sebagai parameter untuk fungsi
|
||||
|
||||
Semasa anda maju dalam kerjaya pengaturcaraan anda, anda akan menemui fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tindak balas.
|
||||
|
||||
Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulakan pemasa dan akan melaksanakan kod apabila selesai. Kita perlu memberitahu apa kod yang ingin kita laksanakan. Kedengarannya pekerjaan yang sempurna untuk fungsi!
|
||||
|
||||
Sekiranya anda menjalankan kod di bawah ini, setelah 3 saat anda akan melihat mesej **3 saat telah berlalu**.
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}
|
||||
// timer value is in milliseconds
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### Fungsi tanpa nama
|
||||
|
||||
Mari kita lihat lagi apa yang telah kita bina. Kami membuat fungsi dengan nama yang akan digunakan sekali sahaja. Oleh kerana aplikasi kita semakin rumit, kita dapat melihat diri kita membuat banyak fungsi yang hanya akan dipanggil sekali. Ini tidak sesuai. Ternyata, kita tidak selalu perlu memberikan nama!
|
||||
|
||||
Ketika kita meneruskan fungsi sebagai parameter, kita dapat memotong membuatnya terlebih dahulu dan sebaliknya membangunnya sebagai bagian dari parameter. Kami menggunakan kata kunci `function` yang sama, tetapi sebaliknya kami membuatnya sebagai parameter.
|
||||
|
||||
Marilah tulis semula kod di atas untuk menggunakan fungsi tanpa nama:
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
Sekiranya anda menjalankan kod baru kami, anda akan melihat bahawa kami mendapat hasil yang sama. Kami telah membuat fungsi, tetapi tidak perlu memberikan nama!
|
||||
|
||||
### Fungsi panah gemuk
|
||||
|
||||
Salah satu jalan pintas yang biasa digunakan dalam banyak bahasa pengaturcaraan (termasuk JavaScript) adalah kemampuan untuk menggunakan apa yang disebut fungsi **panah** atau **panah lemak**. Ia menggunakan penunjuk khas `=>`, yang kelihatan seperti anak panah - dengan demikian namanya! Dengan menggunakan `=>`, kita dapat melangkau kata kunci `function`.
|
||||
|
||||
Mari tulis semula kod kami sekali lagi untuk menggunakan fungsi anak panah lemak:
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 saat telah berlalu');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### Bila menggunakan strategi masing-masing
|
||||
|
||||
Anda sekarang telah melihat kita mempunyai tiga cara untuk meneruskan fungsi sebagai parameter dan mungkin tertanya-tanya kapan menggunakannya. Sekiranya anda tahu anda akan menggunakan fungsi lebih dari sekali, buat seperti biasa. Sekiranya anda menggunakannya hanya untuk satu lokasi, biasanya lebih baik menggunakan fungsi tanpa nama. Sama ada anda menggunakan fungsi anak panah lemak atau sintaks `function` yang lebih tradisional bergantung kepada anda, tetapi anda akan perhatikan bahawa kebanyakan pembangun moden lebih suka `=>`.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Cabaran
|
||||
|
||||
Bolehkah anda menyatakan dalam satu ayat perbezaan antara fungsi dan kaedah? Mencubanya!
|
||||
|
||||
## Kuiz Pasca Kuliah
|
||||
[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
|
||||
|
||||
## Mengkaji & Belajar Sendiri
|
||||
|
||||
Perlu [membaca sedikit lebih banyak mengenai fungsi anak panah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), kerana ia semakin banyak digunakan dalam pangkalan kod. Berlatih menulis fungsi, dan kemudian menulis semula dengan sintaks ini.
|
||||
|
||||
## Tugasan
|
||||
|
||||
[Seronok dengan Fungsi](assignment.ms.md)
|
||||
194
2-js-basics/2-functions-methods/translations/README.pt.md
Normal file
194
2-js-basics/2-functions-methods/translations/README.pt.md
Normal file
@@ -0,0 +1,194 @@
|
||||
# Noções básicas de JavaScript: métodos e funções
|
||||
|
||||
|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pré-Aula
|
||||
[Quiz Pré-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
|
||||
|
||||
Quando pensamos em escrever código, sempre queremos garantir que nosso código seja legível. Embora isso pareça contra-intuitivo, o código é lido muito mais vezes do que escrito. Uma ferramenta central na caixa de ferramentas de uma pessoa desenvolvedora para garantir código sustentável é a **função**.
|
||||
|
||||
[](https://youtube.com/watch?v=aAfSVldL6Vk "Métodos e Funções")
|
||||
|
||||
> Clique na imagem acima para ver um vídeo sobre métodos e funções.
|
||||
|
||||
|
||||
## Funções
|
||||
|
||||
Em sua essência, uma função é um bloco de código que podemos executar sob demanda. Isso é perfeito para cenários em que precisamos realizar a mesma tarefa várias vezes; em vez de duplicar a lógica em vários locais (o que tornaria difícil atualizá-la quando chegar a hora), podemos centralizá-la em um local e chamá-la sempre que precisarmos que a operação seja realizada - você pode até chamar funções de outras funções !.
|
||||
|
||||
Também importante é a capacidade de nomear uma função. Embora isso possa parecer trivial, o nome fornece uma maneira rápida de documentar uma seção de código. Você pode pensar nisso como um rótulo em um botão. Se eu clicar em um botão que diz "Cancelar cronômetro", sei que o relógio vai parar de funcionar.
|
||||
|
||||
## Criar e chamar uma Função
|
||||
|
||||
A sintaxe de uma função é semelhante a esta:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // definição de função
|
||||
// definição de função/corpo
|
||||
}
|
||||
```
|
||||
|
||||
Se eu quisesse criar uma função para exibir uma saudação, poderia ser assim:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Olá, mundo!');
|
||||
}
|
||||
```
|
||||
|
||||
Sempre que quisermos chamar (ou invocar) nossa função, usamos o nome da função seguido por `()`. É importante notar o fato de que nossa função pode ser definida antes ou depois de decidirmos chamá-la; o compilador JavaScript encontrará ela para você.
|
||||
|
||||
```javascript
|
||||
// calling our function
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **NOTA:** Existe um tipo especial de função conhecido como **método**, que você já está usando! Na verdade, vimos isso em nossa demonstração acima, quando usamos `console.log`. O que torna um método diferente de uma função é que um método é anexado a um objeto (`console` em nosso exemplo), enquanto uma função está flutuando livremente. Você ouvirá muitas pessoas desenvolvedoras usarem esses termos alternadamente.
|
||||
|
||||
### Práticas recomendadas de função
|
||||
|
||||
Existem várias práticas recomendadas para se ter em mente ao criar funções
|
||||
|
||||
- Como sempre, use nomes descritivos para sabermos o que a função fará
|
||||
- Use **camelCasing** para combinar palavras
|
||||
- Mantenha suas funções focadas em uma tarefa específica
|
||||
|
||||
## Passando informações para uma função
|
||||
|
||||
Para tornar uma função mais reutilizável, você frequentemente desejará passar informações para ela. Se considerarmos nosso exemplo `displayGreeting` acima, ele exibirá apenas **Olá, mundo!**. Não é a função mais útil que se poderia criar. Se quisermos torná-lo um pouco mais flexível, como permitir que alguém especifique o nome da pessoa a ser cumprimentada, podemos adicionar um **parâmetro**. Um parâmetro (às vezes também chamado de **argumento**), é uma informação adicional enviada para uma função.
|
||||
|
||||
Os parâmetros são listados na parte de definição entre parênteses e são separados por vírgulas, assim:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Podemos atualizar nosso `displayGreeting` para aceitar um nome e exibi-lo.
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
Quando queremos chamar nossa função e passar o parâmetro, especificamos entre parênteses.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// displays "Hello, Christopher!" when run
|
||||
```
|
||||
|
||||
## Valores padrão
|
||||
|
||||
Podemos tornar nossa função ainda mais flexível adicionando mais parâmetros. Mas e se não quisermos que todos os valores sejam especificados? Seguindo nosso exemplo de saudação, poderíamos deixar o nome conforme necessário (precisamos saber quem estamos saudando), mas queremos permitir que a própria saudação seja personalizada conforme desejado. Se alguém não quiser personalizá-lo, fornecemos um valor padrão. Para fornecer um valor padrão a um parâmetro, nós o definimos da mesma forma que definimos um valor para uma variável - `parameterName = 'defaultValue'`. Para ver um exemplo completo:
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
Quando chamamos a função, podemos decidir se queremos definir um valor para `salutation`.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// displays "Hello, Christopher"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// displays "Hi, Christopher"
|
||||
```
|
||||
|
||||
## Valores de retorno
|
||||
|
||||
Até agora, a função que construímos sempre será enviada para o [console](https://developer.mozilla.org/docs/Web/API/console). Às vezes, isso pode ser exatamente o que estamos procurando, especialmente quando criamos funções que chamarão outros serviços. Mas e se eu quiser criar uma função auxiliar para realizar um cálculo e fornecer o valor de volta para que eu possa usá-lo em outro lugar?
|
||||
|
||||
Podemos fazer isso usando um **valor de retorno**. Um valor de retorno é retornado pela função e pode ser armazenado em uma variável da mesma forma que podemos armazenar um valor literal, como uma string ou número.
|
||||
|
||||
Se uma função retornar algo, então a palavra-chave `return` é usada. A palavra-chave `return` espera um valor ou referência do que está sendo retornado assim:
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
Poderíamos criar uma função para criar uma mensagem de saudação e retornar o mensagem para a pessoa usuária.
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
Ao chamar esta função, armazenaremos o valor em uma variável. É quase da mesma forma que definiríamos uma variável com um valor estático (como `const name = 'Christopher'`).
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## Funções como parâmetros para funções
|
||||
|
||||
Conforme você progride em sua carreira de programação, encontrará funções que aceitam funções como parâmetros. Esse truque interessante é normalmente usado quando não sabemos quando algo vai ocorrer ou se completar, mas sabemos que precisamos realizar uma operação em resposta.
|
||||
|
||||
Como exemplo, considere [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), que inicia um cronômetro e executará o código quando ele for concluído. Precisamos dizer a ele qual código queremos executar. Parece um trabalho perfeito para uma função!
|
||||
|
||||
Se você executar o código abaixo, após 3 segundos verá a mensagem **3 segundos decorreram**.
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}
|
||||
// timer value is in milliseconds
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### Funções Anônimas
|
||||
|
||||
Vamos dar outra olhada no que construímos. Estamos criando uma função com um nome que será usado uma vez. Conforme nossa aplicação fica mais complexa, podemos nos ver criando uma série de funções que serão chamadas apenas uma vez. Isso não é o ideal. Acontece que nem sempre precisamos fornecer um nome!
|
||||
|
||||
Quando passamos uma função como parâmetro, podemos pular a criação de uma com antecedência e, em vez disso, construir uma como parte do parâmetro. Usamos a mesma palavra-chave `function`, mas em vez disso, a construímos como um parâmetro.
|
||||
|
||||
Vamos reescrever o código acima para usar uma função anônima:
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
Se você executar nosso novo código, notará que obtemos os mesmos resultados. Criamos uma função, mas não precisamos dar um nome a ela!
|
||||
|
||||
### Arrow Functions
|
||||
|
||||
Um atalho comum em muitas linguagens de programação (incluindo JavaScript) é a capacidade de usar o que é chamado de função **arrow** ou **arrow function**. Ela usa um indicador especial de `=>`, que se parece com uma flecha (arrow, em inglês) - daí o nome! Usando `=>`, podemos pular a palavra-chave `function`.
|
||||
|
||||
Vamos reescrever nosso código mais uma vez para usar arrow function:
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### Quando usar cada estratégia
|
||||
|
||||
Agora você viu que temos três maneiras de passar uma função como parâmetro e você pode estar se perguntando quando usar cada uma delas. Se você sabe que usará a função mais de uma vez, crie-a normalmente. Se você for usá-lo apenas para um local, geralmente é melhor usar uma função anônima. Sobre usar Arrow Functions ou a sintaxe mais tradicional de `function` é com você, mas você notará que a maioria das pessoas desenvolvedoras modernas prefere` => `.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Desafio
|
||||
|
||||
Você pode articular em uma frase a diferença entre funções e métodos? Tente!
|
||||
|
||||
## Quiz Pós-Aula
|
||||
[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
|
||||
|
||||
## Revisão e autoestudo
|
||||
|
||||
Vale a pena [ler um pouco mais sobre arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), como elas são cada vez mais usados em bases de código. Pratique escrever uma função e, em seguida, reescrevê-la com esta sintaxe.
|
||||
## Tarefa
|
||||
|
||||
[Diversão com funções](assignment.pt.md)
|
||||
195
2-js-basics/2-functions-methods/translations/README.zh-cn.md
Normal file
195
2-js-basics/2-functions-methods/translations/README.zh-cn.md
Normal file
@@ -0,0 +1,195 @@
|
||||
# JavaScript 基础：方法和函数
|
||||
|
||||
|
||||
> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## 课前小测
|
||||
[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=zh_cn)
|
||||
|
||||
当我们思考如何去写代码的时候，我们总是希望确保自己的代码是可读的。尽管听起来有些违反直觉，代码被阅读的次数会远多于它被写下的次数。**函数（function）** 正是开发者的工具箱里用于确保代码可维护的一件利器。
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "方法和函数")
|
||||
|
||||
> 点击上方图片来观看一个有方法和函数的视频。
|
||||
|
||||
|
||||
## 函数（Functions）
|
||||
|
||||
本质上，函数就是一块我们可以按需执行的代码。这在我们需要多次执行同一个任务的场景下很有用，比起将逻辑复制到很多个位置（这会导致在以后很难去同时更新所有位置），我们可以将其集中在同一个位置，在需要这套逻辑被执行的任何时候都可以来调用它 —— 你甚至可以在其他的函数中调用函数！
|
||||
|
||||
合理命名一个函数同样是很重要的能力。尽管听起来微不足道，但函数命名相当于是一种给一部分代码写简易文档的快捷做法。可以用网页上按钮的标签来类比这件事，如果我点击了一个叫做“停止计时”的按钮，我能够很轻易地知道它可以用来停止一个时钟的运行。
|
||||
|
||||
## 创建和调用函数
|
||||
|
||||
函数的语法一般长这样：
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // 函数定义
|
||||
// 函数定义 / 函数体
|
||||
}
|
||||
```
|
||||
|
||||
如果你想创建一个用来打招呼的函数，它可以是这样：
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
如果想要调用（call / invoke）一个函数，用函数的名称跟上 `()` 即可。值得注意的是，函数定义在其调用位置之前或之后都是可以的，JavaScript 编译器会替你找到函数定义的位置。
|
||||
|
||||
```javascript
|
||||
// 调用我们的函数
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **注意：**有一类特殊的函数被称作**方法（method）**，你其实已经使用过它了！上面的示例中的 `console.log` 就是一个例子。方法和函数的区别在于，方法依附于一个对象上（比如例子中的 `console`），而函数是自由自在的。但你以后会看到很多开发者有时也会将这两个术语混用。
|
||||
|
||||
### 函数的最佳实践
|
||||
|
||||
这里有一些在你创建函数时可以牢记在心的最佳实践：
|
||||
|
||||
- 坚持使用描述性的命名，这样可以更容易知道这个函数是做什么的
|
||||
- 使用**小驼峰命名法（camelCasing）**来组合单词（译注：小驼峰，即除了第一个单词首位小写外，其它单词都首位大写）
|
||||
- 让你的函数专注于一件特定的任务
|
||||
|
||||
## 向函数传递信息
|
||||
|
||||
为了使函数可以更便于重复利用，你常会希望传递一些信息给它。考虑上面 `displayGreeting` 这个例子，它只会显示 **Hello, world!**，但它其实可以被创造得更加有用一些。如果我们想让它更加灵活一些，比如允许指定想要打招呼的人的名字，我们可以为函数添加一个**参数（parameter / argument）**。参数，就是传给函数的额外信息。
|
||||
|
||||
参数会列在函数定义这一部分，用括号括起来并且用逗号分隔，比如：
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
我们可以更新以下我们的 `displayGreeting` 来接收一个名字并将其显示出来。
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
当我们想要在调用函数时指定参数，将其放在括号中即可。
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// 在运行时会显示 “Hello, Christopher!”
|
||||
```
|
||||
|
||||
## 默认值（Default values）
|
||||
|
||||
我们可以通过为函数添加更多参数来使它更加灵活，但是如果我们并不希望每次调用都需要指定所有参数该怎么办？继续用我们的打招呼示例，我们可以让名字是必选的（我们需要知道该向谁打招呼），但打招呼的语句本身可以随意定制。如果有人不想自定义打招呼的语句，我们就会提供一个默认值（又称缺省值）。为了给参数提供一个默认值，写法和给变量赋值很像 —— `parameterName = 'defaultValue'`。完整例子如下：
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
当我们调用函数时，可以自由决定是否要指定 `salutation` 的值。
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// 显示 “Hello, Christopher”
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// 显示 “Hi, Christopher”
|
||||
```
|
||||
|
||||
## 返回值（Return values）
|
||||
|
||||
目前为止我们创建的函数都只会输出到[控制台（console）](https://developer.mozilla.org/zh-CN/docs/Web/API/console)。有时这就是我们想要的效果，特别是当我们创建调用其他服务的函数时。但如果我想要创建一个辅助函数来计算一个值并且返回出去用在别处该怎么办？
|
||||
|
||||
我们可以用**返回值**来做到这件事。返回值由函数返回，并且可以像字面量（如字符串或数值）一样存储在一个变量中。
|
||||
|
||||
如果一个函数有返回值，就会在函数体中用到 `return` 关键字。`return` 关键字可以指定期望被返回的值或引用，就像下面这样：
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
我们可以创建一个函数来构造一个打招呼的消息，然后将这个消息的值返回给调用者
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
调用函数时可以将返回值存在变量里，和将一个静态值存入变量的办法一样（如 `const name = 'Christopher'`）。
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## 将函数作为函数参数
|
||||
|
||||
在你的编程生涯中，你会遇到一些可以接受函数作为参数的函数。这个优雅的小技巧会经常被用到，比如我们不知道一些事会在什么时候发生或完成，但我们知道在那个时候需要执行一个操作作为响应的情况。
|
||||
|
||||
举个例子，对于 [setTimeout](https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)，其会开启一个计时器，在倒计时结束时执行代码。我们需要告诉它我们希望它执行什么代码。这听起来正是函数该做到的事！
|
||||
|
||||
如果你执行下方的代码，三秒后你就可以看到 **3 秒过去了** 这条消息。
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3 秒过去了');
|
||||
}
|
||||
// 计时器的时间单位是毫秒
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### 匿名函数（Anonymous functions）
|
||||
|
||||
再回过头看看我们创建的函数，我们创建了一个名字只被使用了一次的函数。当我们的应用程序变得愈发复杂，我们会发现我们创建了大量只被调用了一次的函数。这样实在不太好，其实我们并不总是需要为函数提供一个名字！
|
||||
|
||||
当我们将一个函数作为参数传入时，我们可以绕过提前创建它的步骤，直接在参数的部分来创建它。我们还是使用相同的 `function` 关键字，只不过是将其作为一个参数来创建。
|
||||
|
||||
让我们将上面的代码用匿名函数重写一次：
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3 秒过去了');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
运行我们的新代码，你会注意到结果和之前完全一样。我们成功创建了一个函数，而不必给它命名！
|
||||
|
||||
### 箭头函数（Fat arrow functions）
|
||||
|
||||
在很多编程语言（包括 JavaScript）中都有一种称为**箭头**（arrow / fat arrow）函数的快捷写法。它会用到一个特殊的 `=>` 标志，看起来就像一个箭头 —— 它的名字就是这么来的！使用 `=>`，我们就可以跳过 `function` 关键字。
|
||||
|
||||
让我们用箭头函数再一次重写上面的代码：
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 秒过去了');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### 何时使用上述每种策略
|
||||
|
||||
你现在已经见到了三种将函数作为参数传给另一个函数的写法，可能很好奇该在什么时候选用哪一种。如果你知道你会多次用到这个函数，就照常创建它。如果你只会在一处用到它，一般最好使用匿名函数。使用箭头函数还是传统的 `function` 语法取决于你自己，但你会注意到多数现代开发者更喜欢用 `=>`。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 挑战
|
||||
|
||||
你能用一句话清楚说明函数和方法的区别吗？试一试！
|
||||
|
||||
## 课后小测
|
||||
[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=zh_cn)
|
||||
|
||||
## 复习 & 自学
|
||||
|
||||
箭头函数在代码库中正在被越来越多地使用，[多了解一下箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)会非常有好处。试着写一个函数，然后用箭头函数语法重写它。
|
||||
|
||||
## 作业
|
||||
|
||||
[试玩函数](assignment.zh-cn.md)
|
||||
195
2-js-basics/2-functions-methods/translations/README.zh-tw.md
Normal file
195
2-js-basics/2-functions-methods/translations/README.zh-tw.md
Normal file
@@ -0,0 +1,195 @@
|
||||
# JavaScript 入門 - 函式與方法
|
||||
|
||||
|
||||
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
|
||||
|
||||
## 課前測驗
|
||||
[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=zh_tw)
|
||||
|
||||
撰寫程式碼時，我們必須確保程式碼的閱讀性。聽來不太直覺，理解程式碼的時間遠比撰寫時間來的久。裡面最需要被管理的程式項目就是**函式**。
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "函式與方法")
|
||||
|
||||
> 點擊上方圖片觀看關於函式的影片。
|
||||
|
||||
|
||||
## 函式 (Function)
|
||||
|
||||
函式是程式碼區塊，會在程式執行時被呼叫運行。有些時候我們需要重複性的執行同一項作業，比起複製整個邏輯到其他區塊，函式是較完美的處理方式。不只方便維護，也可以在任何地方、任何時間被其他函式呼叫執行。
|
||||
|
||||
另一項重點是函式的名稱，聽來不太重要，但它能直接地解釋程式碼的內容。你可以想像它是按鈕上的文字，若按鈕上寫著「停止計時」，你會預期按壓按鈕後會終止計時器的運作。
|
||||
|
||||
## 建立並呼叫函式
|
||||
|
||||
函式的語法格式如下：
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // 函式的定義
|
||||
// 函式的說明與內容
|
||||
}
|
||||
```
|
||||
|
||||
如果你想建立一個打招呼的函式，它可能會以下列的格式呈現：
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
如果你想呼叫這個函式，我們使用函式的名稱加上 `()`。我們不需要考慮函式是在被呼叫地方的前面或後面才被定義出來，JavaScript 的編譯器會幫你尋找它的定義為置。
|
||||
|
||||
```javascript
|
||||
// 呼叫函式
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **注意** 另一個你正使用的函式類型稱做 **方法(method)**。事實上，我們能在執行 `console.log` 的 demo 時能找到它。它與函式的差異在於它需要接續在物件後面，在這個例子中就是 `console`，而函式並沒有強制要求的。你會發現許多開發者在兩者之間做切換。
|
||||
|
||||
### 函式的重點觀念
|
||||
|
||||
在建立函式時，你需要注意一些重點：
|
||||
|
||||
- 我們反覆提到的，函式的名字要能了解函式的主要功能。
|
||||
- 使用**駝峰式大小寫(camelCasing)**來連接單字。
|
||||
- 單一函式只專一在單一功能。
|
||||
|
||||
## 向含式傳遞資料
|
||||
|
||||
為了讓函式能被重複利用，你會需要餵給函式不同的資料。以上述 `displayGreeting` 的例子中，它只能輸出文字 **Hello, world!**。這並不是個實用的函式。要增加函式的彈性，例如打招呼的對象，我們可以增加新的**參數(parameter/argument)**。它提供額外的資料給函式使用。
|
||||
|
||||
參數會寫在定義函式的地方，以括號與逗號標記與分隔：
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
現在我們更新函式 `displayGreeting`，讓它支援打招呼的對象：
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
當我們要呼叫函式時，輸入需要的參數在括號中：
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// 呼叫完，印出字串 "Hello, Christopher!"
|
||||
```
|
||||
|
||||
## 預設值(Default values)
|
||||
|
||||
我們利用參數增加了函式的彈性。但如果我們不想每次都要指定參數給函式使用呢? 繼續之前的例子，保留對象的名稱外，我們增加招呼語的種類。我們可以定義招呼語的預設值，若使用者沒有指定哪一種招呼語時，就使用預設值。它的方法就與賦予變數數值一樣 ── `parameterName = 'defaultValue'`。例如：
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
當我們呼叫函式時，我們可以選擇是否要指定招呼語到 `salutation` 中。
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// 輸出字串 "Hello, Christopher"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// 輸出字串 "Hi, Christopher"
|
||||
```
|
||||
|
||||
## 回傳值(Return values)
|
||||
|
||||
目前為止，我們的函式只能輸出字串到[console](https://developer.mozilla.org/docs/Web/API/console)上。這或許是我們希望的結果，尤其是需要呼叫其他服務的時候。萬一今天我想建立一個額外的函式負責做資料處理與運算呢?
|
||||
|
||||
此時，我們可以利用**回傳值**。回傳值由函式輸出，就像變數一樣儲存像是字串或是數字的結果。
|
||||
|
||||
如果函式有定義回傳值，那就需要使用關鍵字 `return` 。關鍵字 `return` 需要附帶回傳的數值或是參考物件在後方，如：
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
我們建立一個函式專門建立招呼訊息並回傳給呼叫者：
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
當函式被呼叫時，變數會儲存函式回傳的數值。這就像我們給變數定值一樣： `const name = 'Christopher'`。
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## 將函式作為函式參數使用
|
||||
|
||||
在你的程式旅程中，你會見到有函式將其他函式當作參數使用。這個俐落的手法常被用在一種情況：我們不知道 A 事件什麼時候發生與完成，但我們要在 A 事件後執行 B 事件。
|
||||
|
||||
舉例來說，考慮函式[setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)，它會啟動計時機制，並在倒數完後執行下一個程式。我們需要告訴函式哪一個函式要在時間到後執行，一個完美的例子！
|
||||
|
||||
執行下方的程式，三秒鐘之後你會看到訊息**已經過三秒鐘**。
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('已經過三秒鐘');
|
||||
}
|
||||
// 計時單位為毫秒。
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### 不記名函式(Anonymous functions)
|
||||
|
||||
回顧我們所建的函式，這些函式都只被執行了一次。當程式越來越複雜，我們可能建了許多的函式，但他們可能都只被呼叫了一次。這並不是理想的方式，那不如，不要給它函式名稱！
|
||||
|
||||
我們可以傳遞函式作為參數使用，也可以直接在參數裡建立新的函式。同樣使用關鍵字 `function`，但我們寫在參數欄當中。
|
||||
|
||||
試著以不記名函式的方式改寫程式碼：
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
執行上述程式後可以得到相同的結果。我們建立了一個函式，一個沒有名字的函式！
|
||||
|
||||
### 箭頭函式(Fat arrow functions)
|
||||
|
||||
許多程式語言，包含 JavaScript，都有一個常見的快捷語法稱作**箭頭(arrow/fat arrow)**函式。 它使用 `=>` 表示法，就像是箭頭一樣，如同它的名稱！使用 `=>` 可以省略關鍵字 `function`。
|
||||
|
||||
再一次改寫程式碼，這次我們使用箭頭函式：
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### 使用不同策略的時機
|
||||
|
||||
現在你已經學會了三種將函式作為參數的方法了。你可能會好奇使用它們的時機點為何。如果你知道你會重複使用一個函式，請使用正常的方法；如果你知道函式只用在特定的函式內一次，這就是用無記名函式的時機；箭頭函式與傳統 `function` 語法則是取決與你自己，但多數的開發者比較偏好使用 `=>`。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 挑戰
|
||||
|
||||
你能用一句話清楚地說明這些函式與方法的差別嗎? 試試看吧！
|
||||
|
||||
## 課後測驗
|
||||
[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=zh_tw)
|
||||
|
||||
## 複習與自學
|
||||
|
||||
這很值得去閱讀[關於箭頭函式的資料](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，它們越來越常被用在程式碼上。試著寫個函式，再改寫成箭頭語法。
|
||||
|
||||
## 作業
|
||||
|
||||
[把玩函式](assignment.zh-tw.md)
|
||||
@@ -0,0 +1,13 @@
|
||||
# Funksiyalarla Əylən
|
||||
|
||||
## Təlimatlar
|
||||
|
||||
Fərqli funksiyalar yaradın, həm nəyisə qaytaran funksiyalar, həm də heç nə qaytarmayan funksiyalar.
|
||||
|
||||
Defolt dəyərləri olan parametrlər və parametrlərin qarışığı olan bir funksiya yarada bildiyinizə baxın.
|
||||
|
||||
## Rubrika
|
||||
|
||||
| Meyarlar | Nümunəvi | Müvafiq | Təkmilləşdirmə Ehtiyacı var |
|
||||
| -------- | ------------------------------------------------- ----------------------------------- | ------------------------------------------------- -------------- | ----------------- |
|
||||
| | Həll müxtəlif parametrlərə malik iki və ya daha çox yaxşı işləyən funksiya ilə təklif olunur | İşçi həll bir funksiya və bir neçə parametr ilə təklif olunur | Həlldə səhvlər var |
|
||||
@@ -0,0 +1,13 @@
|
||||
# Spaß mit Funktionen
|
||||
|
||||
## Anleitung
|
||||
|
||||
Erstellen Sie verschiedene Funktionen, sowohl Funktionen, die etwas zurückgeben, als auch Funktionen, die nichts zurückgeben.
|
||||
|
||||
Überprüfen Sie, ob Sie eine Funktion erstellen können, die eine Mischung aus Parametern und Parametern mit Standardwerten enthält.
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf |
|
||||
| -------- | -------------------------------------------------- ------------------------------------ | -------------------------------------------------- -------------- | ----------------- |
|
||||
| | Die Lösung wird mit zwei oder mehr leistungsfähigen Funktionen mit verschiedenen Parametern angeboten Arbeitslösung wird mit einer Funktion und wenigen Parametern angeboten Lösung hat Fehler |
|
||||
@@ -0,0 +1,13 @@
|
||||
# Diversión con funciones
|
||||
|
||||
## Instrucciones
|
||||
|
||||
Cree diferentes funciones, tanto funciones que devuelvan algo como funciones que no devuelvan nada.
|
||||
|
||||
Vea si puede crear una función que tenga una combinación de parámetros y parámetros con valores predeterminados.
|
||||
|
||||
## Rúbrica
|
||||
|
||||
| Criterios | Ejemplar | Adecuado | Necesita mejorar |
|
||||
| -------- | ------------------------------------ | -------------- | ----------------- |
|
||||
| | La solución se ofrece con dos o más funciones de buen rendimiento con diversos parámetros | La solución de trabajo se ofrece con una función y pocos parámetros | La solución tiene errores |
|
||||
@@ -0,0 +1,13 @@
|
||||
# Du fun avec les fonctions
|
||||
|
||||
## Instructions
|
||||
|
||||
Créez différentes fonctions, à la fois des fonctions qui renvoient quelque chose et des fonctions qui ne renvoient rien.
|
||||
|
||||
Voyez si vous pouvez créer une fonction qui a un mélange de paramètres et de paramètres avec des valeurs par défaut.
|
||||
|
||||
## Rubrique
|
||||
|
||||
| Critères | Exemplaire | Adéquat | Besoin d'amélioration |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | La solution est proposée avec deux ou plusieurs fonctions performantes avec divers paramètres | La solution de travail est offerte avec une fonction et peu de paramètres | La solution a des bugs |
|
||||
@@ -0,0 +1,13 @@
|
||||
# कार्य के साथ मज़ा
|
||||
|
||||
## अनुदेश
|
||||
|
||||
अलग-अलग फ़ंक्शंस बनाएं, दोनों फ़ंक्शंस जो कुछ लौटाते हैं और फ़ंक्शंस जो कुछ भी वापस नहीं करते हैं।
|
||||
|
||||
देखें कि क्या आप एक फ़ंक्शन बना सकते हैं जिसमें डिफ़ॉल्ट मानों के साथ मापदंडों और मापदंडों का मिश्रण है.
|
||||
|
||||
## सरनामा
|
||||
|
||||
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| ------ | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------- |
|
||||
| | समाधान को विभिन्न मापदंडों के साथ दो या अधिक अच्छी तरह से निष्पादित कार्यों के साथ पेश किया जाता है | कार्य समाधान को एक फ़ंक्शन और कुछ मापदंडों के साथ पेश किया जाता है | समाधान में बग्स हैं |
|
||||
@@ -0,0 +1,13 @@
|
||||
# Bersenang-senang dengan Fungsi
|
||||
|
||||
## Instruksi
|
||||
|
||||
Buat fungsi yang berbeda, baik fungsi yang mengembalikan sesuatu maupun fungsi yang tidak mengembalikan apa pun.
|
||||
|
||||
Lihat apakah Anda dapat membuat fungsi yang memiliki campuran parameter dan parameter dengan nilai default.
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Memenuhi Syarat | Perlu Perbaikan |
|
||||
|----------|---------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|---------------------|
|
||||
| | Solusi ditawarkan dengan dua atau lebih fungsi yang berkinerja baik dengan parameter yang beragam | Solusi kerja ditawarkan dengan satu fungsi dan beberapa parameter | Solusi memiliki bug |
|
||||
@@ -0,0 +1,13 @@
|
||||
# Divertimento con le funzioni
|
||||
|
||||
## Istruzioni
|
||||
|
||||
Creare diverse funzioni, sia funzioni che restituiscono qualcosa che funzioni che non restituiscono nulla.
|
||||
|
||||
Provare a creare una funzione che abbia un mix di parametri e parametri con valori predefiniti.
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | La soluzione è offerta con due o più funzioni con buone prestazioni con diversi parametri | La soluzione funzionante è offerta con una funzione e pochi parametri | La soluzione ha bug |
|
||||
@@ -0,0 +1,13 @@
|
||||
# 関数で楽しむ
|
||||
|
||||
## 説明書
|
||||
|
||||
何かを返す関数と何も返さない関数の両方の異なる関数を作成します。
|
||||
|
||||
デフォルト値を持つパラメータとパラメータが混在した関数を作成できるかどうかを見てみましょう。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | ソリューションは、多様なパラメータを持つ2つ以上の関数で提供されます。 | ワーキングソリューションは、1つの関数と少数のパラメータで提供されます。 | ソリューションにはバグがあります。 |
|
||||
@@ -0,0 +1,13 @@
|
||||
# 함수와 놀기
|
||||
|
||||
## 설명
|
||||
|
||||
무언가를 반환하는 함수와 아무것도 반환하지 않는 또 다른 함수를 만들어봅니다.
|
||||
|
||||
기본값이 없는 매개 변수와 있는 매개 변수를 잘 혼합해 함수를 만들 수 있는지를 확인합니다.
|
||||
|
||||
## 평가 기준
|
||||
|
||||
기준 | <br>모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||
--- | --- | --- | ---
|
||||
| 다양한 매개 변수를 가진 두개 이상의 잘 동작하는 함수를 포함한 답안 | 소수의 매개변수를 가진 한개의 함수를 포함한 답안 | 버그가 있는 답안
|
||||
@@ -0,0 +1,13 @@
|
||||
# Seronok dengan Fungsi
|
||||
|
||||
## Arahan
|
||||
|
||||
Buat fungsi yang berbeza, kedua fungsi yang mengembalikan sesuatu dan fungsi yang tidak mengembalikan apa-apa.
|
||||
|
||||
Lihat apakah anda dapat membuat fungsi yang memiliki gabungan parameter dan parameter dengan nilai lalai.
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Mencukupi | Usaha Lagi |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | Penyelesaian ditawarkan dengan dua atau lebih fungsi yang berfungsi dengan baik dengan pelbagai parameter | Penyelesaian kerja ditawarkan dengan satu fungsi dan beberapa parameter | Penyelesaian mempunyai pepijat |
|
||||
@@ -0,0 +1,13 @@
|
||||
# Plezier met functies
|
||||
|
||||
## Instructies
|
||||
|
||||
Maak verschillende functies, zowel functies die iets retourneren als functies die niets retourneren.
|
||||
|
||||
Kijk of u een functie kunt maken met een combinatie van parameters en parameters met standaardwaarden.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | Oplossing wordt geboden met twee of meer goed presterende functies met diverse parameters | Werkoplossing wordt aangeboden met één functie en enkele parameters | Oplossing heeft bugs |
|
||||
@@ -0,0 +1,12 @@
|
||||
# Diversão com funções
|
||||
|
||||
## Instruções
|
||||
|
||||
Crie funções diferentes, ambas funções que retornam algo e funções que não retornam nada.
|
||||
Veja se você pode criar uma função que possui uma combinação de parâmetros e parâmetros com valores padrão.
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Critério | Exemplar | Adequada | Precisa de melhorias |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | A solução é oferecida com duas ou mais funções de bom desempenho com diversos parâmetros | A solução é oferecida com uma função e alguns parâmetros | A solução tem bugs |
|
||||
@@ -0,0 +1,13 @@
|
||||
# 试玩函数
|
||||
|
||||
## 说明
|
||||
|
||||
创建一个会返回什么东西的函数，再创建一个不会返回任何东西的函数。
|
||||
|
||||
试试看让它们有多种参数，并且让其中一部分参数有默认值。
|
||||
|
||||
## 评价表
|
||||
|
||||
| 指标 | 优秀 | 良好 | 尚可进步 |
|
||||
| --- | --- | --- | --- |
|
||||
| | 给出了两个或更多运行良好的函数，并且有多种多样的参数 | 只有一个可以正常运行的函数，参数也不多 | 有 Bug |
|
||||
@@ -0,0 +1,13 @@
|
||||
# 把玩函式
|
||||
|
||||
## 簡介
|
||||
|
||||
建立不同的函式，有的回傳數值，有的不回傳數值。
|
||||
|
||||
看看你是否能讓函式有多樣的參數輸入與參數預設值。
|
||||
|
||||
## 學習評量
|
||||
|
||||
| 作業內容 | 優良 | 普通 | 待改進 |
|
||||
| -------- | ------------------------------------------ | -------------------------- | -------------- |
|
||||
| | 建立兩個以上多樣參數輸入且功能豐富的函式。 | 建立一個有參數輸入的函式。 | 函式出現問題。 |
|
||||
Reference in New Issue
Block a user