|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "92e136090efc4341b1d51c37924c1802",
|
|
|
"translation_date": "2025-08-28T15:25:58+00:00",
|
|
|
"source_file": "2-js-basics/2-functions-methods/README.md",
|
|
|
"language_code": "ur"
|
|
|
}
|
|
|
-->
|
|
|
# جاوا اسکرپٹ کی بنیادی باتیں: میتھڈز اور فنکشنز
|
|
|
|
|
|
|
|
|
> اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
## لیکچر سے پہلے کا کوئز
|
|
|
[لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app)
|
|
|
|
|
|
جب ہم کوڈ لکھنے کے بارے میں سوچتے ہیں، تو ہم ہمیشہ یہ یقینی بنانا چاہتے ہیں کہ ہمارا کوڈ پڑھنے کے قابل ہو۔ اگرچہ یہ عجیب لگ سکتا ہے، لیکن کوڈ کو لکھنے کے مقابلے میں کئی گنا زیادہ بار پڑھا جاتا ہے۔ ایک ڈویلپر کے ٹول باکس میں ایک اہم ٹول جو قابلِ دیکھ بھال کوڈ کو یقینی بناتا ہے وہ ہے **فنکشن**۔
|
|
|
|
|
|
[](https://youtube.com/watch?v=XgKsD6Zwvlc "میتھڈز اور فنکشنز")
|
|
|
|
|
|
> 🎥 میتھڈز اور فنکشنز کے بارے میں ویڈیو دیکھنے کے لیے اوپر دی گئی تصویر پر کلک کریں۔
|
|
|
|
|
|
> آپ یہ سبق [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();
|
|
|
```
|
|
|
|
|
|
> **نوٹ:** ایک خاص قسم کا فنکشن جسے **میتھڈ** کہا جاتا ہے، آپ پہلے ہی استعمال کر چکے ہیں! درحقیقت، ہم نے اسے اپنے ڈیمو میں دیکھا جب ہم نے `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}`);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
جب ہم فنکشن کو کال کرتے ہیں، تو ہم فیصلہ کر سکتے ہیں کہ آیا ہم `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 سیکنڈ گزر چکے ہیں** نظر آئے گا۔
|
|
|
|
|
|
```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);
|
|
|
```
|
|
|
|
|
|
### ہر حکمت عملی کو کب استعمال کریں
|
|
|
|
|
|
آپ نے اب دیکھا کہ ہمارے پاس فنکشن کو پیرامیٹر کے طور پر پاس کرنے کے تین طریقے ہیں اور آپ سوچ رہے ہوں گے کہ ہر ایک کو کب استعمال کیا جائے۔ اگر آپ جانتے ہیں کہ آپ فنکشن کو ایک سے زیادہ بار استعمال کریں گے، تو اسے عام طریقے سے بنائیں۔ اگر آپ اسے صرف ایک جگہ کے لیے استعمال کریں گے، تو عام طور پر گمنام فنکشن استعمال کرنا بہتر ہے۔ چاہے آپ فیٹ ایرو فنکشن استعمال کریں یا روایتی `function` سینٹیکس، یہ آپ پر منحصر ہے، لیکن آپ دیکھیں گے کہ زیادہ تر جدید ڈویلپرز `=>` کو ترجیح دیتے ہیں۔
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 چیلنج
|
|
|
|
|
|
کیا آپ ایک جملے میں فنکشنز اور میتھڈز کے درمیان فرق بیان کر سکتے ہیں؟ کوشش کریں!
|
|
|
|
|
|
## لیکچر کے بعد کا کوئز
|
|
|
[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app)
|
|
|
|
|
|
## جائزہ اور خود مطالعہ
|
|
|
|
|
|
یہ [ایرو فنکشنز کے بارے میں مزید پڑھنے](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) کے قابل ہے، کیونکہ انہیں کوڈ بیسز میں بڑھتے ہوئے استعمال کیا جا رہا ہے۔ ایک فنکشن لکھنے کی مشق کریں، اور پھر اسے اس سینٹیکس کے ساتھ دوبارہ لکھیں۔
|
|
|
|
|
|
## اسائنمنٹ
|
|
|
|
|
|
[فنکشنز کے ساتھ مزہ](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**ڈسکلیمر**:
|
|
|
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔ |
