|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
|
|
|
"translation_date": "2025-11-03T12:53:48+00:00",
|
|
|
"source_file": "2-js-basics/2-functions-methods/README.md",
|
|
|
"language_code": "ur"
|
|
|
}
|
|
|
-->
|
|
|
# جاوا اسکرپٹ کی بنیادی باتیں: طریقے اور فنکشنز
|
|
|
|
|
|
|
|
|
> اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title Your JavaScript Functions Adventure
|
|
|
section Foundation
|
|
|
Function Syntax: 5: You
|
|
|
Calling Functions: 4: You
|
|
|
Parameters & Arguments: 5: You
|
|
|
section Advanced Concepts
|
|
|
Return Values: 4: You
|
|
|
Default Parameters: 5: You
|
|
|
Function Composition: 4: You
|
|
|
section Modern JavaScript
|
|
|
Arrow Functions: 5: You
|
|
|
Anonymous Functions: 4: You
|
|
|
Higher-Order Functions: 5: You
|
|
|
```
|
|
|
|
|
|
## لیکچر سے پہلے کا کوئز
|
|
|
[لیکچر سے پہلے کا کوئز](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) پر لے سکتے ہیں!
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((JavaScript Functions))
|
|
|
Basic Concepts
|
|
|
Declaration
|
|
|
Traditional syntax
|
|
|
Arrow function syntax
|
|
|
Calling
|
|
|
Using parentheses
|
|
|
Parentheses required
|
|
|
Parameters
|
|
|
Input Values
|
|
|
Multiple parameters
|
|
|
Default values
|
|
|
Arguments
|
|
|
Values passed in
|
|
|
Can be any type
|
|
|
Return Values
|
|
|
Output Data
|
|
|
return statement
|
|
|
Exit function
|
|
|
Use Results
|
|
|
Store in variables
|
|
|
Chain functions
|
|
|
Advanced Patterns
|
|
|
Higher-Order
|
|
|
Functions as parameters
|
|
|
Callbacks
|
|
|
Anonymous
|
|
|
No name needed
|
|
|
Inline definition
|
|
|
```
|
|
|
|
|
|
## فنکشنز
|
|
|
|
|
|
فنکشن ایک خود مختار کوڈ بلاک ہے جو ایک خاص کام انجام دیتا ہے۔ یہ منطق کو انکیپسولیٹ کرتا ہے جسے آپ جب چاہیں چلا سکتے ہیں۔
|
|
|
|
|
|
اپنے پروگرام میں ایک ہی کوڈ کو کئی بار لکھنے کے بجائے، آپ اسے ایک فنکشن میں پیک کر سکتے ہیں اور جب بھی ضرورت ہو اسے کال کر سکتے ہیں۔ یہ طریقہ آپ کے کوڈ کو صاف رکھتا ہے اور اپ ڈیٹس کو بہت آسان بناتا ہے۔ تصور کریں کہ اگر آپ کو اپنے کوڈ بیس کے 20 مختلف مقامات پر بکھری ہوئی منطق کو تبدیل کرنے کی ضرورت ہو تو یہ کتنا مشکل ہوگا۔
|
|
|
|
|
|
اپنے فنکشنز کو وضاحتی نام دینا ضروری ہے۔ ایک اچھا نام دیا گیا فنکشن اس کے مقصد کو واضح طور پر بتاتا ہے – جب آپ `cancelTimer()` دیکھتے ہیں، تو آپ فوراً سمجھ جاتے ہیں کہ یہ کیا کرتا ہے، بالکل اسی طرح جیسے ایک واضح طور پر لیبل لگا ہوا بٹن آپ کو بتاتا ہے کہ جب آپ اسے کلک کریں گے تو کیا ہوگا۔
|
|
|
|
|
|
## فنکشن بنانا اور کال کرنا
|
|
|
|
|
|
آئیے دیکھتے ہیں کہ فنکشن کیسے بنایا جائے۔ نحو ایک مستقل پیٹرن کی پیروی کرتا ہے:
|
|
|
|
|
|
```javascript
|
|
|
function nameOfFunction() { // function definition
|
|
|
// function definition/body
|
|
|
}
|
|
|
```
|
|
|
|
|
|
آئیے اسے توڑ کر دیکھتے ہیں:
|
|
|
- `function` کلیدی لفظ جاوا اسکرپٹ کو بتاتا ہے "ارے، میں ایک فنکشن بنا رہا ہوں!"
|
|
|
- `nameOfFunction` وہ جگہ ہے جہاں آپ اپنے فنکشن کو ایک وضاحتی نام دیتے ہیں
|
|
|
- قوسین `()` وہ جگہ ہیں جہاں آپ پیرامیٹرز شامل کر سکتے ہیں (ہم جلد ہی اس پر پہنچیں گے)
|
|
|
- گھنگریالے بریکٹس `{}` میں اصل کوڈ ہوتا ہے جو آپ کے فنکشن کو کال کرنے پر چلتا ہے
|
|
|
|
|
|
آئیے ایک سادہ گریٹنگ فنکشن بناتے ہیں تاکہ اسے عملی طور پر دیکھ سکیں:
|
|
|
|
|
|
```javascript
|
|
|
function displayGreeting() {
|
|
|
console.log('Hello, world!');
|
|
|
}
|
|
|
```
|
|
|
|
|
|
یہ فنکشن "Hello, world!" کو کنسول میں پرنٹ کرتا ہے۔ ایک بار جب آپ نے اسے ڈیفائن کر لیا، تو آپ اسے جتنی بار چاہیں استعمال کر سکتے ہیں۔
|
|
|
|
|
|
اپنے فنکشن کو چلانے (یا "کال کرنے") کے لیے، اس کا نام لکھیں اور اس کے بعد قوسین لگائیں۔ جاوا اسکرپٹ آپ کو اپنے فنکشن کو کال کرنے سے پہلے یا بعد میں ڈیفائن کرنے کی اجازت دیتا ہے – جاوا اسکرپٹ انجن عملدرآمد کے ترتیب کو سنبھال لے گا۔
|
|
|
|
|
|
```javascript
|
|
|
// calling our function
|
|
|
displayGreeting();
|
|
|
```
|
|
|
|
|
|
جب آپ یہ لائن چلاتے ہیں، تو یہ آپ کے `displayGreeting` فنکشن کے اندر موجود تمام کوڈ کو چلاتا ہے، اور "Hello, world!" کو آپ کے براؤزر کے کنسول میں دکھاتا ہے۔ آپ اس فنکشن کو بار بار کال کر سکتے ہیں۔
|
|
|
|
|
|
### 🧠 **فنکشن کی بنیادی باتوں کی جانچ: اپنے پہلے فنکشنز بنانا**
|
|
|
|
|
|
**آئیے دیکھتے ہیں کہ آپ بنیادی فنکشنز کے بارے میں کیسا محسوس کر رہے ہیں:**
|
|
|
- کیا آپ وضاحت کر سکتے ہیں کہ فنکشن ڈیفینیشنز میں گھنگریالے بریکٹس `{}` کیوں استعمال کیے جاتے ہیں؟
|
|
|
- اگر آپ `displayGreeting` کو بغیر قوسین کے لکھیں تو کیا ہوگا؟
|
|
|
- آپ ایک ہی فنکشن کو کئی بار کال کیوں کرنا چاہیں گے؟
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["✏️ Define Function"] --> B["📦 Package Code"]
|
|
|
B --> C["🏷️ Give it a Name"]
|
|
|
C --> D["📞 Call When Needed"]
|
|
|
D --> E["🔄 Reuse Anywhere"]
|
|
|
|
|
|
F["💡 Benefits"] --> F1["No code repetition"]
|
|
|
F --> F2["Easy to maintain"]
|
|
|
F --> F3["Clear organization"]
|
|
|
F --> F4["Easier testing"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style E fill:#e8f5e8
|
|
|
style F fill:#fff3e0
|
|
|
```
|
|
|
|
|
|
> **نوٹ:** آپ نے ان اسباق میں **طریقے** استعمال کیے ہیں۔ `console.log()` ایک طریقہ ہے – بنیادی طور پر ایک فنکشن جو `console` آبجیکٹ سے تعلق رکھتا ہے۔ اہم فرق یہ ہے کہ طریقے آبجیکٹس سے منسلک ہوتے ہیں، جبکہ فنکشنز آزادانہ طور پر کھڑے ہوتے ہیں۔ بہت سے ڈویلپرز ان اصطلاحات کو غیر رسمی گفتگو میں ایک دوسرے کے ساتھ استعمال کرتے ہیں۔
|
|
|
|
|
|
### فنکشنز کے بہترین طریقے
|
|
|
|
|
|
یہاں کچھ تجاویز ہیں جو آپ کو بہترین فنکشنز لکھنے میں مدد کریں گی:
|
|
|
|
|
|
- اپنے فنکشنز کو واضح، وضاحتی نام دیں – آپ کا مستقبل کا خود آپ کا شکر گزار ہوگا!
|
|
|
- **camelCasing** کا استعمال کریں جب نام میں ایک سے زیادہ الفاظ ہوں (جیسے `calculateTotal` بجائے `calculate_total`)
|
|
|
- ہر فنکشن کو ایک کام کو اچھی طرح انجام دینے پر مرکوز رکھیں
|
|
|
|
|
|
## فنکشن کو معلومات دینا
|
|
|
|
|
|
ہمارا `displayGreeting` فنکشن محدود ہے – یہ صرف "Hello, world!" سب کے لیے دکھا سکتا ہے۔ پیرامیٹرز ہمیں فنکشنز کو زیادہ لچکدار اور مفید بنانے کی اجازت دیتے ہیں۔
|
|
|
|
|
|
**پیرامیٹرز** ایسے پلیس ہولڈرز کی طرح کام کرتے ہیں جہاں آپ ہر بار فنکشن استعمال کرتے وقت مختلف اقدار ڈال سکتے ہیں۔ اس طرح، ایک ہی فنکشن ہر کال پر مختلف معلومات کے ساتھ کام کر سکتا ہے۔
|
|
|
|
|
|
جب آپ اپنے فنکشن کو ڈیفائن کرتے ہیں تو پیرامیٹرز کو قوسین کے اندر درج کریں، اور متعدد پیرامیٹرز کو کاما کے ساتھ الگ کریں:
|
|
|
|
|
|
```javascript
|
|
|
function name(param, param2, param3) {
|
|
|
|
|
|
}
|
|
|
```
|
|
|
|
|
|
ہر پیرامیٹر ایک پلیس ہولڈر کی طرح کام کرتا ہے – جب کوئی آپ کے فنکشن کو کال کرتا ہے، تو وہ اصل اقدار فراہم کرے گا جو ان جگہوں پر ڈال دی جائیں گی۔
|
|
|
|
|
|
آئیے اپنے گریٹنگ فنکشن کو اپ ڈیٹ کریں تاکہ کسی کا نام قبول کر سکے:
|
|
|
|
|
|
```javascript
|
|
|
function displayGreeting(name) {
|
|
|
const message = `Hello, ${name}!`;
|
|
|
console.log(message);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
نوٹ کریں کہ ہم بیک ٹکس (`` ` ``) اور `${}` کا استعمال کر رہے ہیں تاکہ نام کو براہ راست اپنے پیغام میں ڈال سکیں – اسے ٹیمپلیٹ لیٹرل کہا جاتا ہے، اور یہ متغیرات کے ساتھ ملے ہوئے اسٹرنگز بنانے کا ایک بہت ہی آسان طریقہ ہے۔
|
|
|
|
|
|
اب جب ہم اپنے فنکشن کو کال کرتے ہیں، تو ہم کوئی بھی نام پاس کر سکتے ہیں:
|
|
|
|
|
|
```javascript
|
|
|
displayGreeting('Christopher');
|
|
|
// displays "Hello, Christopher!" when run
|
|
|
```
|
|
|
|
|
|
جاوا اسکرپٹ اسٹرنگ `'Christopher'` لیتا ہے، اسے `name` پیرامیٹر کو تفویض کرتا ہے، اور ذاتی پیغام "Hello, Christopher!" بناتا ہے۔
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["🎯 Function Call"] --> B["📥 Parameters"]
|
|
|
B --> C["⚙️ Function Body"]
|
|
|
C --> D["📤 Result"]
|
|
|
|
|
|
A1["displayGreeting('Alice')"] --> A
|
|
|
B1["name = 'Alice'"] --> B
|
|
|
C1["Template literal\n\`Hello, \${name}!\`"] --> C
|
|
|
D1["'Hello, Alice!'"] --> D
|
|
|
|
|
|
E["🔄 Parameter Types"] --> E1["Strings"]
|
|
|
E --> E2["Numbers"]
|
|
|
E --> E3["Booleans"]
|
|
|
E --> E4["Objects"]
|
|
|
E --> E5["Functions"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style C fill:#e8f5e8
|
|
|
style D fill:#fff3e0
|
|
|
style E fill:#f3e5f5
|
|
|
```
|
|
|
|
|
|
## ڈیفالٹ اقدار
|
|
|
|
|
|
اگر ہم کچھ پیرامیٹرز کو اختیاری بنانا چاہتے ہیں تو کیا ہوگا؟ یہی وہ جگہ ہے جہاں ڈیفالٹ اقدار کام آتی ہیں!
|
|
|
|
|
|
فرض کریں کہ ہم چاہتے ہیں کہ لوگ گریٹنگ کے لفظ کو اپنی مرضی کے مطابق بنا سکیں، لیکن اگر وہ کوئی خاص لفظ نہ بتائیں، تو ہم "Hello" کو بیک اپ کے طور پر استعمال کریں گے۔ آپ ڈیفالٹ اقدار کو برابر کے نشان کا استعمال کرتے ہوئے سیٹ کر سکتے ہیں، بالکل ویری ایبل سیٹ کرنے کی طرح:
|
|
|
|
|
|
```javascript
|
|
|
function displayGreeting(name, salutation='Hello') {
|
|
|
console.log(`${salutation}, ${name}`);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
یہاں، `name` اب بھی ضروری ہے، لیکن `salutation` کے پاس `'Hello'` کی بیک اپ ویلیو ہے اگر کوئی مختلف گریٹنگ فراہم نہ کرے۔
|
|
|
|
|
|
اب ہم اس فنکشن کو دو مختلف طریقوں سے کال کر سکتے ہیں:
|
|
|
|
|
|
```javascript
|
|
|
displayGreeting('Christopher');
|
|
|
// displays "Hello, Christopher"
|
|
|
|
|
|
displayGreeting('Christopher', 'Hi');
|
|
|
// displays "Hi, Christopher"
|
|
|
```
|
|
|
|
|
|
پہلی کال میں، جاوا اسکرپٹ ڈیفالٹ "Hello" استعمال کرتا ہے کیونکہ ہم نے کوئی گریٹنگ نہیں بتائی۔ دوسری کال میں، یہ ہماری مرضی کے مطابق "Hi" استعمال کرتا ہے۔ یہ لچک فنکشنز کو مختلف حالات کے مطابق ڈھالنے کے قابل بناتی ہے۔
|
|
|
|
|
|
### 🎛️ **پیرامیٹرز کی مہارت کی جانچ: فنکشنز کو لچکدار بنانا**
|
|
|
|
|
|
**اپنے پیرامیٹرز کی سمجھ کو جانچیں:**
|
|
|
- پیرامیٹر اور آرگیومنٹ میں کیا فرق ہے؟
|
|
|
- حقیقی دنیا کی پروگرامنگ میں ڈیفالٹ اقدار کیوں مفید ہیں؟
|
|
|
- کیا آپ پیش گوئی کر سکتے ہیں کہ اگر آپ پیرامیٹرز سے زیادہ آرگیومنٹس پاس کریں تو کیا ہوگا؟
|
|
|
|
|
|
```mermaid
|
|
|
stateDiagram-v2
|
|
|
[*] --> NoParams: function greet() {}
|
|
|
[*] --> WithParams: function greet(name) {}
|
|
|
[*] --> WithDefaults: function greet(name, greeting='Hi') {}
|
|
|
|
|
|
NoParams --> Static: Same output always
|
|
|
WithParams --> Dynamic: Changes with input
|
|
|
WithDefaults --> Flexible: Optional customization
|
|
|
|
|
|
Static --> [*]
|
|
|
Dynamic --> [*]
|
|
|
Flexible --> [*]
|
|
|
|
|
|
note right of WithDefaults
|
|
|
Most flexible approach
|
|
|
Backwards compatible
|
|
|
end note
|
|
|
```
|
|
|
|
|
|
> **پرو ٹپ**: ڈیفالٹ پیرامیٹرز آپ کے فنکشنز کو زیادہ صارف دوست بناتے ہیں۔ صارفین معقول ڈیفالٹس کے ساتھ جلدی شروع کر سکتے ہیں، لیکن ضرورت پڑنے پر اپنی مرضی کے مطابق بنا سکتے ہیں!
|
|
|
|
|
|
## واپسی کی اقدار
|
|
|
|
|
|
ہمارے فنکشنز اب تک صرف کنسول میں پیغامات پرنٹ کر رہے ہیں، لیکن اگر آپ چاہتے ہیں کہ فنکشن کچھ حساب کرے اور آپ کو نتیجہ واپس دے؟
|
|
|
|
|
|
یہی وہ جگہ ہے جہاں **واپسی کی اقدار** کام آتی ہیں۔ کچھ دکھانے کے بجائے، ایک فنکشن آپ کو ایک ویلیو واپس دے سکتا ہے جسے آپ ویری ایبل میں اسٹور کر سکتے ہیں یا اپنے کوڈ کے دوسرے حصوں میں استعمال کر سکتے ہیں۔
|
|
|
|
|
|
ویلیو واپس بھیجنے کے لیے، آپ `return` کلیدی لفظ استعمال کرتے ہیں اور اس کے بعد جو بھی آپ واپس بھیجنا چاہتے ہیں:
|
|
|
|
|
|
```javascript
|
|
|
return myVariable;
|
|
|
```
|
|
|
|
|
|
یہاں ایک اہم بات ہے: جب فنکشن `return` اسٹیٹمنٹ پر پہنچتا ہے، تو یہ فوراً چلنا بند کر دیتا ہے اور اس ویلیو کو واپس بھیج دیتا ہے جس نے اسے کال کیا تھا۔
|
|
|
|
|
|
آئیے اپنے گریٹنگ فنکشن کو تبدیل کریں تاکہ پیغام کو پرنٹ کرنے کے بجائے واپس کرے:
|
|
|
|
|
|
```javascript
|
|
|
function createGreetingMessage(name) {
|
|
|
const message = `Hello, ${name}`;
|
|
|
return message;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
اب یہ فنکشن گریٹنگ کو پرنٹ کرنے کے بجائے پیغام بناتا ہے اور ہمیں واپس دیتا ہے۔
|
|
|
|
|
|
واپس کی گئی ویلیو کو استعمال کرنے کے لیے، ہم اسے کسی ویری ایبل میں اسٹور کر سکتے ہیں بالکل کسی اور ویلیو کی طرح:
|
|
|
|
|
|
```javascript
|
|
|
const greetingMessage = createGreetingMessage('Christopher');
|
|
|
```
|
|
|
|
|
|
اب `greetingMessage` میں "Hello, Christopher" موجود ہے اور ہم اسے اپنے کوڈ میں کہیں بھی استعمال کر سکتے ہیں – ویب پیج پر دکھانے کے لیے، ای میل میں شامل کرنے کے لیے، یا کسی دوسرے فنکشن کو پاس کرنے کے لیے۔
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["🔧 Function Processing"] --> B{"return statement?"}
|
|
|
B -->|Yes| C["📤 Return Value"]
|
|
|
B -->|No| D["📭 Return undefined"]
|
|
|
|
|
|
C --> E["💾 Store in Variable"]
|
|
|
C --> F["🔗 Use in Expression"]
|
|
|
C --> G["📞 Pass to Function"]
|
|
|
|
|
|
D --> H["⚠️ Usually not useful"]
|
|
|
|
|
|
I["📋 Return Value Uses"] --> I1["Calculate results"]
|
|
|
I --> I2["Validate input"]
|
|
|
I --> I3["Transform data"]
|
|
|
I --> I4["Create objects"]
|
|
|
|
|
|
style C fill:#e8f5e8
|
|
|
style D fill:#ffebee
|
|
|
style I fill:#e3f2fd
|
|
|
```
|
|
|
|
|
|
### 🔄 **واپسی کی اقدار کی جانچ: نتائج واپس حاصل کرنا**
|
|
|
|
|
|
**اپنی واپسی کی اقدار کی سمجھ کو جانچیں:**
|
|
|
- فنکشن میں `return` اسٹیٹمنٹ کے بعد کوڈ کے ساتھ کیا ہوتا ہے؟
|
|
|
- کنسول میں صرف پرنٹ کرنے کے بجائے ویلیوز واپس کرنا کیوں بہتر ہے؟
|
|
|
- کیا فنکشن مختلف قسم کی ویلیوز واپس کر سکتا ہے (اسٹرنگ، نمبر، بولین)؟
|
|
|
|
|
|
```mermaid
|
|
|
pie title "Common Return Value Types"
|
|
|
"Strings" : 30
|
|
|
"Numbers" : 25
|
|
|
"Objects" : 20
|
|
|
"Booleans" : 15
|
|
|
"Arrays" : 10
|
|
|
```
|
|
|
|
|
|
> **اہم بصیرت**: ویلیوز واپس کرنے والے فنکشنز زیادہ ورسٹائل ہوتے ہیں کیونکہ کالر فیصلہ کرتا ہے کہ نتیجہ کے ساتھ کیا کرنا ہے۔ یہ آپ کے کوڈ کو زیادہ ماڈیولر اور دوبارہ استعمال کے قابل بناتا ہے!
|
|
|
|
|
|
## فنکشنز کو فنکشنز کے پیرامیٹرز کے طور پر استعمال کرنا
|
|
|
|
|
|
فنکشنز کو دوسرے فنکشنز کے پیرامیٹرز کے طور پر پاس کیا جا سکتا ہے۔ اگرچہ یہ تصور شروع میں پیچیدہ لگ سکتا ہے، یہ ایک طاقتور خصوصیت ہے جو لچکدار پروگرامنگ پیٹرنز کو فعال کرتی ہے۔
|
|
|
|
|
|
یہ پیٹرن بہت عام ہے جب آپ کہنا چاہتے ہیں "جب کچھ ہو، تو یہ دوسرا کام کرو۔" مثال کے طور پر، "جب ٹائمر ختم ہو، تو یہ کوڈ چلائیں" یا "جب صارف بٹن پر کلک کرے، تو اس فنکشن کو کال کریں۔"
|
|
|
|
|
|
آئیے `setTimeout` دیکھتے ہیں، جو ایک بلٹ ان فنکشن ہے جو کچھ وقت انتظار کرتا ہے اور پھر کچھ کوڈ چلاتا ہے۔ ہمیں اسے بتانا ہوگا کہ کون سا کوڈ چلانا ہے – فنکشن پاس کرنے کے لیے بہترین کیس!
|
|
|
|
|
|
یہ کوڈ آزمائیں – 3 سیکنڈ کے بعد، آپ کو ایک پیغام نظر آئے گا:
|
|
|
|
|
|
```javascript
|
|
|
function displayDone() {
|
|
|
console.log('3 seconds has elapsed');
|
|
|
}
|
|
|
// timer value is in milliseconds
|
|
|
setTimeout(displayDone, 3000);
|
|
|
```
|
|
|
|
|
|
نوٹ کریں کہ ہم `displayDone` کو (بغیر قوسین کے) `setTimeout` کو پاس کرتے ہیں۔ ہم خود فنکشن کو کال نہیں کر رہے – ہم اسے `setTimeout` کے حوالے کر رہے ہیں اور کہہ رہے ہیں "اسے 3 سیکنڈ میں کال کریں۔"
|
|
|
|
|
|
### گمنام فنکشنز
|
|
|
|
|
|
کبھی کبھی آپ کو صرف ایک چیز کے لیے فنکشن کی ضرورت ہوتی ہے اور آپ اسے نام دینا نہیں چاہتے۔ سوچیں – اگر آپ صرف ایک بار فنکشن استعمال کر رہے ہیں، تو کیوں اپنے کوڈ کو ایک اضافی نام سے بھر دیں؟
|
|
|
|
|
|
جاوا اسکرپٹ آپ کو **گمنام فنکشنز** بنانے کی اجازت دیتا ہے – ایسے فنکشنز جن کے نام نہیں ہوتے اور آپ انہیں وہیں ڈیفائن کر سکتے ہیں جہاں آپ کو ضرورت ہو۔
|
|
|
|
|
|
یہاں ہم اپنے ٹائمر کی مثال کو گمنام فنکشن کا استعمال کرتے ہوئے دوبارہ لکھ سکتے ہیں:
|
|
|
|
|
|
```javascript
|
|
|
setTimeout(function() {
|
|
|
console.log('3 seconds has elapsed');
|
|
|
}, 3000);
|
|
|
```
|
|
|
|
|
|
یہ وہی نتیجہ حاصل کرتا ہے، لیکن فنکشن کو براہ راست `setTimeout` کال کے اندر ڈیفائن کیا گیا ہے، جس سے الگ فنکشن ڈیفینیشن کی ضرورت ختم ہو جاتی ہے۔
|
|
|
|
|
|
### فیٹ ایرو فنکشنز
|
|
|
|
|
|
جدید جاوا اسکرپٹ میں فنکشنز لکھنے کا ایک اور مختصر طریقہ ہے جسے **ایرو فنکشنز** کہا جاتا ہے۔ یہ `=>` استعمال کرتے ہیں (جو ایک تیر کی طرح لگتا ہے – سمجھ گئے؟) اور ڈویلپرز میں بہت مقبول ہیں۔
|
|
|
|
|
|
ایرو فنکشنز آپ کو `function` کلیدی لفظ چھوڑنے اور زیادہ مختصر کوڈ لکھنے کی اجازت دیتی ہیں۔
|
|
|
|
|
|
یہاں ہمارا ٹائمر کی مثال ایرو فنکشن کا استعمال کرتے ہوئے ہے:
|
|
|
|
|
|
```javascript
|
|
|
setTimeout(() => {
|
|
|
console.log('3 seconds has elapsed');
|
|
|
}, 3000);
|
|
|
```
|
|
|
|
|
|
`()` وہ جگہ ہے جہاں پیرامیٹرز جائیں گے (اس کیس میں خالی)، پھر تیر `=>` آتا ہے، اور آخر میں فنکشن باڈی گھنگریالے بریکٹس میں۔ یہ زیادہ مختصر نحو کے ساتھ وہی فعالیت فراہم کرتا ہے۔
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["📝 Function Styles"] --> B["Traditional"]
|
|
|
A --> C["Arrow"]
|
|
|
A --> D["Anonymous"]
|
|
|
|
|
|
B --> B1["function name() {}"]
|
|
|
B --> B2["Hoisted"]
|
|
|
B --> B3["Named"]
|
|
|
|
|
|
C --> C1["const name = () => {}"]
|
|
|
C --> C2["Concise syntax"]
|
|
|
C --> C3["Modern style"]
|
|
|
|
|
|
D --> D1["function() {}"]
|
|
|
D --> D2["No name"]
|
|
|
D --> D3["One-time use"]
|
|
|
|
|
|
E["⏰ When to Use"] --> E1["Traditional: Reusable functions"]
|
|
|
E --> E2["Arrow: Short callbacks"]
|
|
|
E --> E3["Anonymous: Event handlers"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style B fill:#e8f5e8
|
|
|
style C fill:#fff3e0
|
|
|
style D fill:#f3e5f5
|
|
|
style E fill:#e0f2f1
|
|
|
```
|
|
|
|
|
|
### ہر حکمت عملی کب استعمال کریں
|
|
|
|
|
|
آپ کو ہر طریقہ کب استعمال کرنا چاہیے؟ ایک عملی رہنما: اگر آپ فنکشن کو کئی بار استعمال کریں گے، تو اسے ایک نام دیں اور الگ سے ڈیفائن کریں۔ اگر یہ ایک خاص استعمال کے لیے ہے، تو گمنام فنکشن پر غور کریں۔ ایرو فنکشنز اور روایتی نحو دونوں درست انتخاب ہیں، حالانکہ ایرو فنکشنز جدید جاوا اسکرپٹ کوڈ بیسز میں عام ہیں۔
|
|
|
|
|
|
### 🎨 **فنکشن اسٹائلز کی مہارت کی جانچ: صحیح نحو کا انتخاب**
|
|
|
|
|
|
**اپنے نحو کی سمجھ کو جانچیں:**
|
|
|
- آپ ایرو فنکشنز کو روایتی فنکشن نحو پر کب ترجیح دیں گے؟
|
|
|
- گمنام فنکشنز کا بنیادی فائدہ کیا ہے؟
|
|
|
- کیا آپ ایسی صورتحال کے بارے میں سوچ سکتے ہیں جہاں گمنام فنکشن کے بجائے نام دیا گیا فنکشن بہتر ہو؟
|
|
|
|
|
|
```mermaid
|
|
|
quadrantChart
|
|
|
title Function Choice Decision Matrix
|
|
|
x-axis Simple --> Complex
|
|
|
y-axis One-time use --> Reusable
|
|
|
quadrant-1 Arrow Functions
|
|
|
quadrant-2 Named Functions
|
|
|
quadrant-3 Anonymous Functions
|
|
|
quadrant-4 Traditional Functions
|
|
|
|
|
|
Event Handlers: [0.3, 0.2]
|
|
|
Utility Functions: [0.7, 0.8]
|
|
|
Callbacks: [0.2, 0.3]
|
|
|
Class Methods: [0.8, 0.7]
|
|
|
Mathematical Operations: [0.4, 0.6]
|
|
|
```
|
|
|
|
|
|
> **جدید رجحان**: ایرو فنکشنز بہت سے ڈویلپرز کے لیے ڈیفالٹ انتخاب بن رہی ہیں کیونکہ ان کی مختصر نحو، لیکن روایتی فنکشنز کا بھی اپنا مقام ہے!
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 چیلنج
|
|
|
|
|
|
کیا آپ ایک جملے میں فنکشنز اور طریقوں کے درمیان فرق بیان کر سکتے ہیں؟ کوشش کریں!
|
|
|
|
|
|
## GitHub Copilot Agent چیلنج 🚀
|
|
|
|
|
|
Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
|
|
|
|
|
|
**تفصیل:** ایک یوٹیلیٹی لائبریری بنائیں جو مختلف فنکشن تصورات کو ظاہر کرے جو اس سبق میں شامل ہیں، بشمول پیرامیٹرز، ڈیفالٹ اقدار، واپسی کی اقدار، اور ایرو فنکشنز۔
|
|
|
|
|
|
**پرومپٹ:** ایک جاوا اسکرپٹ فائل بنائیں جس کا نام `mathUtils.js` ہو جس میں درج ذیل فنکشنز شامل ہوں:
|
|
|
1. ایک فنکشن `add` جو دو پیرامیٹرز لیتا ہے اور ان کا مجموعہ واپس کرتا ہے
|
|
|
2. ایک فنکشن `multiply` جس میں ڈیفالٹ پیرامیٹر ویلیوز ہوں (دوسرا پیرامیٹر ڈیفالٹ 1 ہو)
|
|
|
3. ایک ایرو فنکشن `
|
|
|
- [ ] روایتی فنکشن کو ایرو فنکشن کے انداز میں تبدیل کرنے کی کوشش کریں
|
|
|
- [ ] چیلنج پر عمل کریں: فنکشنز اور میتھڈز کے درمیان فرق کو سمجھائیں
|
|
|
|
|
|
### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
|
|
|
- [ ] سبق کے بعد کا کوئز مکمل کریں اور کسی بھی الجھن والے تصورات کا جائزہ لیں
|
|
|
- [ ] GitHub Copilot چیلنج سے میتھ یوٹیلیٹیز لائبریری بنائیں
|
|
|
- [ ] ایک فنکشن بنائیں جو دوسرے فنکشن کو پیرامیٹر کے طور پر استعمال کرے
|
|
|
- [ ] ڈیفالٹ پیرامیٹرز کے ساتھ فنکشن لکھنے کی مشق کریں
|
|
|
- [ ] فنکشن کے ریٹرن ویلیوز میں ٹیمپلیٹ لیٹرلز کے ساتھ تجربہ کریں
|
|
|
|
|
|
### 📅 **آپ کی ہفتہ بھر کی فنکشن مہارت**
|
|
|
- [ ] "فن ود فنکشنز" اسائنمنٹ کو تخلیقی انداز میں مکمل کریں
|
|
|
- [ ] اپنے لکھے ہوئے کچھ دہرائے گئے کوڈ کو دوبارہ قابل استعمال فنکشنز میں تبدیل کریں
|
|
|
- [ ] صرف فنکشنز کا استعمال کرتے ہوئے ایک چھوٹا کیلکولیٹر بنائیں (کوئی گلوبل ویریبلز نہیں)
|
|
|
- [ ] ایرو فنکشنز کی مشق کریں جیسے `map()` اور `filter()` کے ساتھ
|
|
|
- [ ] عام کاموں کے لیے یوٹیلیٹی فنکشنز کا مجموعہ بنائیں
|
|
|
- [ ] ہائر آرڈر فنکشنز اور فنکشنل پروگرامنگ کے تصورات کا مطالعہ کریں
|
|
|
|
|
|
### 🌟 **آپ کی مہینے بھر کی تبدیلی**
|
|
|
- [ ] ایڈوانس فنکشن تصورات جیسے کلوزرز اور اسکوپ میں مہارت حاصل کریں
|
|
|
- [ ] ایک پروجیکٹ بنائیں جو فنکشن کمپوزیشن کا بھرپور استعمال کرے
|
|
|
- [ ] اوپن سورس میں حصہ لیں اور فنکشن ڈاکیومنٹیشن کو بہتر بنائیں
|
|
|
- [ ] کسی اور کو فنکشنز اور مختلف انداز کے بارے میں سکھائیں
|
|
|
- [ ] جاوا اسکرپٹ میں فنکشنل پروگرامنگ کے پیراڈائمز کو دریافت کریں
|
|
|
- [ ] مستقبل کے پروجیکٹس کے لیے قابل استعمال فنکشنز کی ذاتی لائبریری بنائیں
|
|
|
|
|
|
### 🏆 **فنکشنز چیمپئن کی آخری چیک ان**
|
|
|
|
|
|
**اپنی فنکشن مہارت کا جشن منائیں:**
|
|
|
- اب تک آپ نے سب سے زیادہ مفید فنکشن کون سا بنایا ہے؟
|
|
|
- فنکشنز کے بارے میں سیکھنے سے کوڈ آرگنائزیشن کے بارے میں آپ کی سوچ کیسے بدلی؟
|
|
|
- آپ کو کون سا فنکشن انداز زیادہ پسند ہے اور کیوں؟
|
|
|
- آپ کون سا حقیقی دنیا کا مسئلہ فنکشن لکھ کر حل کریں گے؟
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title Your Function Confidence Evolution
|
|
|
section Today
|
|
|
Confused by Syntax: 3: You
|
|
|
Understanding Basics: 4: You
|
|
|
Writing Simple Functions: 5: You
|
|
|
section This Week
|
|
|
Using Parameters: 4: You
|
|
|
Returning Values: 5: You
|
|
|
Modern Syntax: 5: You
|
|
|
section Next Month
|
|
|
Function Composition: 5: You
|
|
|
Advanced Patterns: 5: You
|
|
|
Teaching Others: 5: You
|
|
|
```
|
|
|
|
|
|
> 🎉 **آپ نے پروگرامنگ کے سب سے طاقتور تصور میں مہارت حاصل کر لی ہے!** فنکشنز بڑے پروگراموں کے بنیادی اجزاء ہیں۔ ہر ایپلیکیشن جو آپ کبھی بنائیں گے، فنکشنز کا استعمال کرے گی تاکہ کوڈ کو منظم، دوبارہ استعمال اور ساخت دیا جا سکے۔ آپ اب سمجھتے ہیں کہ منطق کو دوبارہ قابل استعمال اجزاء میں کیسے پیک کیا جائے، جو آپ کو زیادہ موثر اور مؤثر پروگرامر بناتا ہے۔ ماڈیولر پروگرامنگ کی دنیا میں خوش آمدید! 🚀
|
|
|
|
|
|
---
|
|
|
|
|
|
**اعلانِ لاتعلقی**:
|
|
|
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔ |
