|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5958491a27a8dd97a4777f34f9214bca",
|
|
|
"translation_date": "2025-10-20T20:42:43+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();
|
|
|
```
|
|
|
|
|
|
> **NOTE:** ایک خاص قسم کا فنکشن ہے جسے **طریقہ** کہا جاتا ہے، جسے آپ پہلے ہی استعمال کر رہے ہیں! درحقیقت، ہم نے یہ اپنے ڈیمو میں دیکھا جب ہم نے `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` نحو، یہ آپ پر منحصر ہے، لیکن آپ دیکھیں گے کہ زیادہ تر جدید ڈویلپرز `=>` کو ترجیح دیتے ہیں۔
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 چیلنج
|
|
|
|
|
|
کیا آپ ایک جملے میں فنکشنز اور طریقوں کے درمیان فرق بیان کر سکتے ہیں؟ کوشش کریں!
|
|
|
|
|
|
## GitHub Copilot Agent چیلنج 🚀
|
|
|
|
|
|
Agent موڈ استعمال کریں تاکہ درج ذیل چیلنج مکمل کریں:
|
|
|
|
|
|
**تفصیل:** ایک یوٹیلیٹی لائبریری بنائیں جو مختلف ریاضیاتی فنکشنز پر مشتمل ہو اور اس سبق میں شامل مختلف فنکشن کے تصورات کو ظاہر کرے، بشمول پیرامیٹرز، ڈیفالٹ ویلیوز، ریٹرن ویلیوز، اور ایرو فنکشنز۔
|
|
|
|
|
|
**پرومپٹ:** ایک جاوا اسکرپٹ فائل بنائیں جس کا نام `mathUtils.js` ہو اور اس میں درج ذیل فنکشنز شامل ہوں:
|
|
|
1. ایک فنکشن `add` جو دو پیرامیٹرز لے اور ان کا مجموعہ واپس کرے
|
|
|
2. ایک فنکشن `multiply` جس کے ڈیفالٹ پیرامیٹر ویلیوز ہوں (دوسرا پیرامیٹر ڈیفالٹ 1 ہو)
|
|
|
3. ایک ایرو فنکشن `square` جو ایک نمبر لے اور اس کا مربع واپس کرے
|
|
|
4. ایک فنکشن `calculate` جو ایک اور فنکشن کو پیرامیٹر کے طور پر قبول کرے اور دو نمبر لے، پھر ان نمبروں پر فنکشن لاگو کرے
|
|
|
5. ہر فنکشن کو مناسب ٹیسٹ کیسز کے ساتھ کال کرنے کا مظاہرہ کریں
|
|
|
|
|
|
## لیکچر کے بعد کا کوئز
|
|
|
[لیکچر کے بعد کا کوئز](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) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا عدم درستگی ہو سکتی ہے۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔ |
