You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
22 KiB
210 lines
22 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "92e136090efc4341b1d51c37924c1802",
|
|
"translation_date": "2025-08-28T17:05:42+00:00",
|
|
"source_file": "2-js-basics/2-functions-methods/README.md",
|
|
"language_code": "pa"
|
|
}
|
|
-->
|
|
# ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀਆਂ: ਮੈਥਡਸ ਅਤੇ ਫੰਕਸ਼ਨ
|
|
|
|
|
|
> ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਵੱਲੋਂ
|
|
|
|
## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
|
|
[Pre-lecture quiz](https://ff-quizzes.netlify.app)
|
|
|
|
ਜਦੋਂ ਅਸੀਂ ਕੋਡ ਲਿਖਣ ਬਾਰੇ ਸੋਚਦੇ ਹਾਂ, ਤਾਂ ਅਸੀਂ ਹਮੇਸ਼ਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਸਾਡਾ ਕੋਡ ਪੜ੍ਹਨਯੋਗ ਹੋਵੇ। ਹਾਲਾਂਕਿ ਇਹ ਵਿਰੋਧਭਾਸੀ ਲੱਗ ਸਕਦਾ ਹੈ, ਪਰ ਕੋਡ ਨੂੰ ਲਿਖਣ ਦੇ ਮੁਕਾਬਲੇ ਕਈ ਵਾਰ ਪੜ੍ਹਿਆ ਜਾਂਦਾ ਹੈ। ਡਿਵੈਲਪਰ ਦੇ ਟੂਲਬਾਕਸ ਵਿੱਚ ਇੱਕ ਮੁੱਖ ਸਾਧਨ **ਫੰਕਸ਼ਨ** ਹੈ, ਜੋ ਸਥਿਰਤਾ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
|
|
|
|
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
|
|
|
> 🎥 ਉਪਰ ਦਿੱਤੀ ਤਸਵੀਰ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਮੈਥਡਸ ਅਤੇ ਫੰਕਸ਼ਨ ਬਾਰੇ ਵੀਡੀਓ ਦੇਖਣ ਲਈ।
|
|
|
|
> ਤੁਸੀਂ ਇਹ ਪਾਠ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
|
|
|
|
## ਫੰਕਸ਼ਨ
|
|
|
|
ਮੁੱਢਲੇ ਤੌਰ 'ਤੇ, ਇੱਕ ਫੰਕਸ਼ਨ ਕੋਡ ਦਾ ਇੱਕ ਬਲਾਕ ਹੁੰਦਾ ਹੈ ਜਿਸਨੂੰ ਅਸੀਂ ਜਰੂਰਤ ਪੈਣ 'ਤੇ ਚਲਾ ਸਕਦੇ ਹਾਂ। ਇਹ ਉਹਨਾਂ ਸਥਿਤੀਆਂ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ ਜਿੱਥੇ ਸਾਨੂੰ ਇੱਕੋ ਕੰਮ ਕਈ ਵਾਰ ਕਰਨਾ ਪੈਂਦਾ ਹੈ; ਬਜਾਏ ਲਾਜਿਕ ਨੂੰ ਕਈ ਸਥਾਨਾਂ 'ਤੇ ਦੁਹਰਾਉਣ ਦੇ (ਜੋ ਅਪਡੇਟ ਕਰਨਾ ਮੁਸ਼ਕਲ ਬਣਾ ਸਕਦਾ ਹੈ), ਅਸੀਂ ਇਸਨੂੰ ਇੱਕ ਸਥਾਨ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰ ਸਕਦੇ ਹਾਂ ਅਤੇ ਜਦੋਂ ਵੀ ਸਾਨੂੰ ਇਹ ਕਾਰਵਾਈ ਕਰਨ ਦੀ ਜਰੂਰਤ ਹੋਵੇ, ਇਸਨੂੰ ਕਾਲ ਕਰ ਸਕਦੇ ਹਾਂ - ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਨੂੰ ਹੋਰ ਫੰਕਸ਼ਨ ਤੋਂ ਵੀ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ!
|
|
|
|
ਇਸ ਤੋਂ ਵੀ ਜ਼ਿਆਦਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਫੰਕਸ਼ਨ ਨੂੰ ਨਾਮ ਦੇਣ ਦੀ ਯੋਗਤਾ। ਹਾਲਾਂਕਿ ਇਹ ਛੋਟਾ ਜਿਹਾ ਲੱਗ ਸਕਦਾ ਹੈ, ਪਰ ਨਾਮ ਕੋਡ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਦਸਤਾਵੇਜ਼ ਕਰਨ ਦਾ ਇੱਕ ਤੇਜ਼ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਇਸਨੂੰ ਬਟਨ 'ਤੇ ਲੇਬਲ ਵਜੋਂ ਸੋਚ ਸਕਦੇ ਹੋ। ਜੇ ਮੈਂ "ਟਾਈਮਰ ਰੱਦ ਕਰੋ" ਪੜ੍ਹਦੇ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹਾਂ, ਤਾਂ ਮੈਨੂੰ ਪਤਾ ਹੈ ਕਿ ਇਹ ਘੜੀ ਨੂੰ ਚਲਾਉਣਾ ਬੰਦ ਕਰ ਦੇਵੇਗਾ।
|
|
|
|
## ਫੰਕਸ਼ਨ ਬਣਾਉਣਾ ਅਤੇ ਕਾਲ ਕਰਨਾ
|
|
|
|
ਫੰਕਸ਼ਨ ਲਈ ਸਿੰਟੈਕਸ ਹੇਠਾਂ ਦਿੱਤੇ ਤਰੀਕੇ ਵਰਗਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
|
|
|
|
```javascript
|
|
function nameOfFunction() { // function definition
|
|
// function definition/body
|
|
}
|
|
```
|
|
|
|
ਜੇ ਮੈਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦਾ ਜੋ ਇੱਕ ਗ੍ਰੀਟਿੰਗ ਦਿਖਾਏ, ਤਾਂ ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇ ਸਕਦਾ ਹੈ:
|
|
|
|
```javascript
|
|
function displayGreeting() {
|
|
console.log('Hello, world!');
|
|
}
|
|
```
|
|
|
|
ਜਦੋਂ ਵੀ ਅਸੀਂ ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ (ਜਾਂ ਚਲਾਉਣਾ) ਚਾਹੁੰਦੇ ਹਾਂ, ਅਸੀਂ ਫੰਕਸ਼ਨ ਦੇ ਨਾਮ ਦੇ ਪਿੱਛੇ `()` ਵਰਤਦੇ ਹਾਂ। ਇਹ ਗੱਲ ਯਾਦ ਕਰਨ ਵਾਲੀ ਹੈ ਕਿ ਸਾਡਾ ਫੰਕਸ਼ਨ ਕਾਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਜਾਂ ਬਾਅਦ ਪਰिभਾਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੰਪਾਇਲਰ ਇਸਨੂੰ ਤੁਹਾਡੇ ਲਈ ਲੱਭ ਲਵੇਗਾ।
|
|
|
|
```javascript
|
|
// calling our function
|
|
displayGreeting();
|
|
```
|
|
|
|
> **NOTE:** ਇੱਕ ਵਿਸ਼ੇਸ਼ ਕਿਸਮ ਦਾ ਫੰਕਸ਼ਨ ਹੁੰਦਾ ਹੈ ਜਿਸਨੂੰ **ਮੈਥਡ** ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਜਿਸਨੂੰ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਵਰਤ ਰਹੇ ਹੋ! ਅਸਲ ਵਿੱਚ, ਅਸੀਂ ਇਹ ਆਪਣੇ ਡੈਮੋ ਵਿੱਚ ਵੇਖਿਆ ਜਦੋਂ ਅਸੀਂ `console.log` ਵਰਤਿਆ। ਜੋ ਮੈਥਡ ਨੂੰ ਫੰਕਸ਼ਨ ਤੋਂ ਵੱਖਰਾ ਬਣਾਉਂਦਾ ਹੈ ਉਹ ਇਹ ਹੈ ਕਿ ਮੈਥਡ ਇੱਕ ਆਬਜੈਕਟ ਨਾਲ ਜੁੜਿਆ ਹੁੰਦਾ ਹੈ (`console` ਸਾਡੇ ਉਦਾਹਰਨ ਵਿੱਚ), ਜਦੋਂ ਕਿ ਫੰਕਸ਼ਨ ਆਜ਼ਾਦ ਹੁੰਦਾ ਹੈ। ਤੁਸੀਂ ਅਕਸਰ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਇਹ ਸ਼ਬਦ ਇੱਕੋ ਜਿਹਾ ਵਰਤਦੇ ਸੁਣੋਗੇ।
|
|
|
|
### ਫੰਕਸ਼ਨ ਲਈ ਵਧੀਆ ਅਭਿਆਸ
|
|
|
|
ਫੰਕਸ਼ਨ ਬਣਾਉਣ ਸਮੇਂ ਕੁਝ ਵਧੀਆ ਅਭਿਆਸਾਂ ਨੂੰ ਯਾਦ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ:
|
|
|
|
- ਹਮੇਸ਼ਾ ਵਰਣਨਾਤਮਕ ਨਾਮ ਵਰਤੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਪਤਾ ਹੋਵੇ ਕਿ ਫੰਕਸ਼ਨ ਕੀ ਕਰੇਗਾ
|
|
- ਸ਼ਬਦਾਂ ਨੂੰ ਜੋੜਨ ਲਈ **camelCasing** ਵਰਤੋ
|
|
- ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਕੰਮ 'ਤੇ ਕੇਂਦਰਿਤ ਰੱਖੋ
|
|
|
|
## ਫੰਕਸ਼ਨ ਨੂੰ ਜਾਣਕਾਰੀ ਪਾਸ ਕਰਨਾ
|
|
|
|
ਫੰਕਸ਼ਨ ਨੂੰ ਹੋਰ ਵਧੇਰੇ ਵਰਤਣਯੋਗ ਬਣਾਉਣ ਲਈ ਤੁਸੀਂ ਅਕਸਰ ਇਸ ਵਿੱਚ ਜਾਣਕਾਰੀ ਪਾਸ ਕਰਨਾ ਚਾਹੋਗੇ। ਜੇ ਅਸੀਂ ਆਪਣੇ `displayGreeting` ਉਦਾਹਰਨ ਨੂੰ ਮਾਨਾਂ, ਤਾਂ ਇਹ ਸਿਰਫ **Hello, world!** ਦਿਖਾਏਗਾ। ਇਹ ਸਭ ਤੋਂ ਵਧੀਆ ਫੰਕਸ਼ਨ ਨਹੀਂ ਹੈ ਜੋ ਕੋਈ ਬਣਾਉਂਦਾ। ਜੇ ਅਸੀਂ ਇਸਨੂੰ ਥੋੜਾ ਜਿਹਾ ਹੋਰ ਲਚੀਲਾਪਨ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਜਿਵੇਂ ਕਿ ਕਿਸੇ ਨੂੰ ਗ੍ਰੀਟ ਕਰਨ ਵਾਲੇ ਵਿਅਕਤੀ ਦਾ ਨਾਮ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਣਾ, ਤਾਂ ਅਸੀਂ ਇੱਕ **ਪੈਰਾਮੀਟਰ** ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹਾਂ। ਪੈਰਾਮੀਟਰ (ਜਿਸਨੂੰ ਕਈ ਵਾਰ **argument** ਵੀ ਕਿਹਾ ਜਾਂਦਾ ਹੈ), ਫੰਕਸ਼ਨ ਨੂੰ ਭੇਜੀ ਗਈ ਵਾਧੂ ਜਾਣਕਾਰੀ ਹੁੰਦੀ ਹੈ।
|
|
|
|
ਪੈਰਾਮੀਟਰ ਪਰਿਭਾਸ਼ਾ ਦੇ ਹਿੱਸੇ ਵਿੱਚ ਕੋਮਾਂ ਨਾਲ ਵੱਖਰੇ ਕੀਤੇ ਗਏ ਕੌਂਸੇ ਵਿੱਚ ਸੂਚੀਬੱਧ ਕੀਤੇ ਜਾਂਦੇ ਹਨ:
|
|
|
|
```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 value** ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਰ ਸਕਦੇ ਹਾਂ। ਇੱਕ return value ਫੰਕਸ਼ਨ ਦੁਆਰਾ ਵਾਪਸ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਅਤੇ ਇਸਨੂੰ ਇੱਕ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਬਿਲਕੁਲ ਉਸੇ ਤਰੀਕੇ ਨਾਲ ਜਿਵੇਂ ਅਸੀਂ ਇੱਕ literal value (ਜਿਵੇਂ ਕਿ string ਜਾਂ number) ਨੂੰ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹਾਂ।
|
|
|
|
ਜੇਕਰ ਇੱਕ ਫੰਕਸ਼ਨ ਕੁਝ ਵਾਪਸ ਕਰਦਾ ਹੈ ਤਾਂ `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(displayDone, 3000);
|
|
```
|
|
|
|
### ਗੁੰਨਾਮ ਫੰਕਸ਼ਨ
|
|
|
|
ਆਓ ਜੋ ਅਸੀਂ ਬਣਾਇਆ ਹੈ ਉਸਨੂੰ ਦੁਬਾਰਾ ਵੇਖੀਏ। ਅਸੀਂ ਇੱਕ ਨਾਮ ਦੇ ਨਾਲ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹਾਂ ਜੋ ਸਿਰਫ ਇੱਕ ਵਾਰ ਵਰਤਿਆ ਜਾਵੇਗਾ। ਜਿਵੇਂ ਜਿਵੇਂ ਸਾਡਾ ਐਪਲੀਕੇਸ਼ਨ ਹੋਰ ਜਟਿਲ ਹੁੰਦਾ ਹੈ, ਅਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਕਈ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋਏ ਦੇਖ ਸਕਦੇ ਹਾਂ ਜੋ ਸਿਰਫ ਇੱਕ ਵਾਰ ਕਾਲ ਕੀਤੇ ਜਾਣਗੇ। ਇਹ ਆਦਰਸ਼ ਨਹੀਂ ਹੈ। ਜਿਵੇਂ ਪਤਾ ਲੱਗਦਾ ਹੈ, ਸਾਨੂੰ ਹਮੇਸ਼ਾ ਇੱਕ ਨਾਮ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ!
|
|
|
|
ਜਦੋਂ ਅਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਪਾਸ ਕਰ ਰਹੇ ਹੁੰਦੇ ਹਾਂ, ਤਾਂ ਅਸੀਂ ਪਹਿਲਾਂ ਇੱਕ ਬਣਾਉਣ ਨੂੰ ਬਾਈਪਾਸ ਕਰ ਸਕਦੇ ਹਾਂ ਅਤੇ ਇਸਦੇ ਬਦਲੇ ਇਸਨੂੰ ਪੈਰਾਮੀਟਰ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਬਣਾਉਂਦੇ ਹਾਂ। ਅਸੀਂ ਉਹੀ `function` ਕੀਵਰਡ ਵਰਤਦੇ ਹਾਂ, ਪਰ ਇਸਦੇ ਬਦਲੇ ਅਸੀਂ ਇਸਨੂੰ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਬਣਾਉਂਦੇ ਹਾਂ।
|
|
|
|
ਆਓ ਉਪਰ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਗੁੰਨਾਮ ਫੰਕਸ਼ਨ ਵਰਤ ਕੇ ਦੁਬਾਰਾ ਲਿਖੀਏ:
|
|
|
|
```javascript
|
|
setTimeout(function() {
|
|
console.log('3 seconds has elapsed');
|
|
}, 3000);
|
|
```
|
|
|
|
ਜੇ ਤੁਸੀਂ ਸਾਡਾ ਨਵਾਂ ਕੋਡ ਚਲਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਨਤੀਜੇ ਇੱਕੋ ਜਿਹੇ ਪਾਉਂਦੇ ਹੋ। ਅਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਇਆ ਹੈ, ਪਰ ਇਸਨੂੰ ਇੱਕ ਨਾਮ ਦੇਣ ਦੀ ਲੋੜ ਨਹੀਂ ਪਈ!
|
|
|
|
### ਫੈਟ ਐਰੋ ਫੰਕਸ਼ਨ
|
|
|
|
ਕਈ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ (ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਮੇਤ) ਵਿੱਚ ਇੱਕ ਆਮ ਸ਼ਾਰਟਕਟ **arrow** ਜਾਂ **fat arrow** ਫੰਕਸ਼ਨ ਵਰਤਣ ਦੀ ਯੋਗਤਾ ਹੈ। ਇਹ `=>` ਦੇ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਸੰਕੇਤਕ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜੋ ਇੱਕ ਤੀਰ ਵਰਗਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ - ਇਸ ਲਈ ਨਾਮ! `=>` ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਅਸੀਂ `function` ਕੀਵਰਡ ਨੂੰ ਛੱਡ ਸਕਦੇ ਹਾਂ।
|
|
|
|
ਆਓ ਆਪਣੇ ਕੋਡ ਨੂੰ ਇੱਕ ਵਾਰ ਫਿਰ ਫੈਟ ਐਰੋ ਫੰਕਸ਼ਨ ਵਰਤ ਕੇ ਦੁਬਾਰਾ ਲਿਖੀਏ:
|
|
|
|
```javascript
|
|
setTimeout(() => {
|
|
console.log('3 seconds has elapsed');
|
|
}, 3000);
|
|
```
|
|
|
|
### ਹਰ ਰਣਨੀਤੀ ਨੂੰ ਕਦੋਂ ਵਰਤਣਾ ਹੈ
|
|
|
|
ਤੁਸੀਂ ਹੁਣ ਵੇਖਿਆ ਹੈ ਕਿ ਅਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਪਾਸ ਕਰਨ ਦੇ ਤਿੰਨ ਤਰੀਕੇ ਹਨ ਅਤੇ ਤੁਸੀਂ ਸੋਚ ਰਹੇ ਹੋ ਸਕਦੇ ਹੋ ਕਿ ਹਰ ਇੱਕ ਨੂੰ ਕਦੋਂ ਵਰਤਣਾ ਹੈ। ਜੇ ਤੁਹਾਨੂੰ ਪਤਾ ਹੈ ਕਿ ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਨੂੰ ਇੱਕ ਤੋਂ ਵੱਧ ਵਾਰ ਵਰਤੋਂਗੇ, ਤਾਂ ਇਸਨੂੰ ਆਮ ਤੌਰ 'ਤੇ ਬਣਾਓ। ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ ਸਿਰਫ ਇੱਕ ਸਥਾਨ ਲਈ ਵਰਤੋਂਗੇ, ਤਾਂ ਆਮ ਤੌਰ 'ਤੇ ਗੁੰਨਾਮ ਫੰਕਸ਼ਨ ਵਰਤਣਾ ਸਭ ਤੋਂ ਵਧੀਆ ਹੈ। ਚਾਹੇ ਤੁਸੀਂ ਫੈਟ ਐਰੋ ਫੰਕਸ਼ਨ ਵਰਤੋਂ ਜਾਂ ਪੁਰਾਣੇ ਤਰੀਕੇ ਵਾਲੇ `function` ਸਿੰਟੈਕਸ ਨੂੰ, ਇਹ ਤੁਹਾਡੇ ਉੱਤੇ ਹੈ, ਪਰ ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਜ਼ਿਆਦਾਤਰ ਆਧੁਨਿਕ ਡਿਵੈਲਪਰ `=>` ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹਨ।
|
|
|
|
---
|
|
|
|
## 🚀 ਚੁਣੌਤੀ
|
|
|
|
ਕੀ ਤੁਸੀਂ ਇੱਕ ਵਾਕ ਵਿੱਚ ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਨੂੰ ਵਿਆਖਿਆ ਕਰ ਸਕਦੇ ਹੋ? ਇਸਨੂੰ ਅਜ਼ਮਾਓ!
|
|
|
|
## ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼
|
|
[Post-lecture quiz](https://ff-quizzes.netlify.app)
|
|
|
|
## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
|
|
|
|
ਇਹ [arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ਬਾਰੇ ਹੋਰ ਪੜ੍ਹਨ ਯੋਗ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਕੋਡ ਬੇਸ ਵਿੱਚ ਵਧੇਰੇ ਵਰਤੇ ਜਾ ਰਹੇ ਹਨ। ਇੱਕ ਫੰਕਸ਼ਨ ਲਿਖਣ ਦਾ ਅਭਿਆਸ ਕਰੋ, ਅਤੇ ਫਿਰ ਇਸਨੂੰ ਇਸ ਸਿੰਟੈਕਸ ਨਾਲ ਦੁਬਾਰਾ ਲਿਖੋ।
|
|
|
|
## ਅਸਾਈਨਮੈਂਟ
|
|
|
|
[Fun with Functions](assignment.md)
|
|
|
|
---
|
|
|
|
**ਅਸਵੀਕਾਰਨਾ**:
|
|
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੱਜੇਪਣ ਹੋ ਸਕਦੇ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |