Skip to content

Commit 162bcb7

Browse files
Merge pull request #70 from mahdi-momeni/optionalChaining
Optional chaining '?.'
2 parents 0de4b5e + 2cf2482 commit 162bcb7

File tree

1 file changed

+79
-55
lines changed
  • 1-js/04-object-basics/07-optional-chaining

1 file changed

+79
-55
lines changed
Lines changed: 79 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,69 @@
1+
# Optional chaining '?.' یا زنجیره ای اختیاری
2+
[recent browser="new"]
13

2-
# Optional chaining '?.'
4+
###### زنجیره ای اختیاری روشی بدون خطا برای دستیابی به ویژگی های(properties) داخلی شی است حتی در زمانی که ویژگی میانی وجود نداشته باشد
35

4-
[recent browser="new"]
56

6-
The optional chaining `?.` is a safe way to access nested object properties, even if an intermediate property doesn't exist.
7+
## مشکل
78

8-
## The "non-existing property" problem
9+
اگر به تازگی شروع به خواندن آموزش و یادگیری جاوا اسکریپت کرده اید ، شاید این مشکل هنوز شما را لمس نکرده اید ، اما این یک مشکل کاملاً رایج است.
910

10-
If you've just started to read the tutorial and learn JavaScript, maybe the problem hasn't touched you yet, but it's quite common.
11+
برای مثال, بیاید یک شی(object) برای اطلاعات کاربران در نظر بگیریم. تعدادی از کاربران ما آدرس را در ویژگی `user.address` و خیابان را در ویژگی `user.address.street` دارند ولی تعدادی کمی از آن ها آدرس را ارائه نکرده‌اند.
1112

12-
As an example, let's consider objects for user data. Most of our users have addresses in `user.address` property, with the street `user.address.street`, but some did not provide them.
13+
در این صورت تلاش ما برای دستیابی به `user.address.street` با شکست مواجه خواهد شد
1314

14-
In such case, when we attempt to get `user.address.street`, we'll get an error:
1515

1616
```js run
1717
let user = {}; // the user without "address" property
1818

1919
alert(user.address.street); // Error!
2020
```
2121

22-
That's the expected result, JavaScript works like this, but many practical cases we'd prefer to get `undefined` instead of an error (meaning "no street").
22+
این یک خروجی قابل حدس است٬ جاوااسکریپت اینگونه کار میکند٬ ولی در مثال های عملی ترجیح میدهیم ‍``undefined`` دریافت کنیم به جای خطا.
23+
24+
یا مثالی دیگر در توسعه وب٬ ما میخواهیم اطلاعاتی در مورد اِلمانی در صفحه را بگیریم٬ که ممکن بعضی اوقات وجود نداشته باشد :
25+
2326

24-
...And another example. In the web development, we may need to get an information about an element on the page, that sometimes doesn't exist:
27+
28+
یا در توسعه وب٬ ما میخواهیم اطلاعاتی در مورد اِلمان در صفحه را بگیریم٬ ولی شاید وجود نداشته باشد :
2529

2630
```js run
2731
// Error if the result of querySelector(...) is null
2832
let html = document.querySelector('.my-element').innerHTML;
2933
```
3034

31-
Before `?.` appeared in the language, the `&&` operator was used to work around that.
3235

33-
For example:
36+
37+
قبل از اینکه `?.` در زبان وجود داشته باشد از عمگر `&&` برای کار در این مورد استفاده میشد. برای مثال :
3438

3539
```js run
3640
let user = {}; // user has no address
3741

3842
alert( user && user.address && user.address.street ); // undefined (no error)
3943
```
4044

41-
AND'ing the whole path to the property ensures that all components exist (if not, the evaluation stops), but is cumbersome to write.
45+
AND کردن کل مسیر رسیدن به ویژگی ، وجود همه اجزا را تضمین می کند(اگر ارزیابی متوقف نشود) ، اما نوشتن آن دست و پا گیر است.
46+
47+
48+
## زنجیره ای اختیاری
4249

43-
## Optional chaining
50+
زنجیره ای اختیاری `?.` ارزیابی را متوقف میکند اگر مقدار قبل از قسمت `?.` برابر با `undefined` یا `null` باشد و مقدار `undefined` را برمیگرداند.
4451

45-
The optional chaining `?.` stops the evaluation and returns `undefined` if the part before `?.` is `undefined` or `null`.
52+
**در ادامه این مقاله ، به اختصار خواهیم گفت چیزی وجود خواهد داشت اگر که `undefined` و `null` نباشد.**
4653

47-
**Further in this article, for brevity, we'll be saying that something "exists" if it's not `null` and not `undefined`.**
4854

49-
Here's the safe way to access `user.address.street`:
55+
56+
این یک مسیر امن برای دستیابی `user.address.street` است :
5057

5158
```js run
5259
let user = {}; // user has no address
5360

5461
alert( user?.address?.street ); // undefined (no error)
5562
```
5663
57-
Reading the address with `user?.address` works even if `user` object doesn't exist:
64+
65+
66+
خواندن آدرس با `user?.address` کار خواهد کرد حتی زمانی هم که شی `user` وجود ندارد :
5867
5968
```js run
6069
let user = null;
@@ -63,39 +72,45 @@ alert( user?.address ); // undefined
6372
alert( user?.address.street ); // undefined
6473
```
6574
66-
Please note: the `?.` syntax makes optional the value before it, but not any further.
75+
لطفا توجه داشته باشید : سینتکس `?.` مقدارهای قبلی را اختیاری میکند نه مقدارهای جلوی آن را.
76+
77+
در مثال بالا `user?.` به `user` مقدار `null/undefined` خواهد داد.
6778
68-
In the example above, `user?.` allows only `user` to be `null/undefined`.
6979
70-
On the other hand, if `user` does exist, then it must have `user.address` property, otherwise `user?.address.street` gives an error at the second dot.
7180
72-
```warn header="Don't overuse the optional chaining"
73-
We should use `?.` only where it's ok that something doesn't exist.
81+
از طرف دیگر ، اگر ‍‍`user` وجود داشته باشد ، پس باید ویژگی `user.address` داشته باشد ، در غیر این صورت `user؟.address.street `در نقطه دوم خطا می دهد.
7482
75-
For example, if according to our coding logic `user` object must be there, but `address` is optional, then `user.address?.street` would be better.
83+
```warn header="از زنجیر اختیاری بیش از حد استفاده تکنید"
7684

77-
So, if `user` happens to be undefined due to a mistake, we'll see a programming error about it and fix it. Otherwise, coding errors can be silenced where not appropriate, and become more difficult to debug.
85+
ما باید از `?.` فقط زمانی استفاده کنیم که عدم وجود چیزی اشکالی ندارد
86+
87+
به عنوان مثال ، اگر مطابق منطق برنامه نویسی ما ، شی `user` باید وجود داشته باشد ولی `address` اختیاری است در آن شرایط استفاده از `user.address?.street` راه حل بهتری است ،
88+
89+
بنابراین ، اگر تصادفاً به دلیل اشتباهی ‍`user` برابر با `undefined` باشد، شاهد یک خطای برنامه نویسی در مورد آن خواهیم بود و آن را برطرف خواهیم کرد. در غیر این صورت ، خطاهای کد را می توان در مواردی که مناسب نیست ساکت کرد٬ و کار اشکال زدایی را سخت تر میکند.
7890
```
7991
80-
````warn header="The variable before `?.` must be declared"
81-
If there's no variable `user` at all, then `user?.anything` triggers an error:
92+
93+
94+
````warn header="متغیر قبل از ؟. باید تعریف شده باشد" اگر متغیر user به هیچ وجه وجود نداشته باشد `user?.anything` خطا خواهد داد
95+
96+
8297
8398
```js run
8499
// ReferenceError: user is not defined
85100
user?.address;
86101
```
87-
There must be a declaration (e.g. `let/const/var user`). The optional chaining works only for declared variables.
88-
````
89-
90-
## Short-circuiting
102+
باید تعریفی باشد( `let/const/var user ` ). زنجیره ای اختیاری فقط برای متغیرهای تعریف شده کار می کند.
103+
باید `let/const/var user ` وجود داشته باشد. زنجیره ای اختیاری فقط برای متغیرهای تعریف شده کار می کند.
91104

92-
As it was said before, the `?.` immediately stops ("short-circuits") the evaluation if the left part doesn't exist.
105+
````
93106

94-
So, if there are any further function calls or side effects, they don't occur.
107+
## اتصال کوتاه
108+
همانطور که قبلا گفته شد عبارت `?.` فوراً ارزیابی را متوقف میکند(اتصال کوتاه) اگر عبارت سمت چپ آن وجود نداشته باشد.
109+
بنابراین ، اگر صدا زدن تابعی یا عوارض جانبی دیگری وجود داشته باشد ، اتفاق نمی‌افتد.
95110

96-
For instance:
111+
برای نمونه :
97112

98-
```js run
113+
```js run
99114
let user = null;
100115
let x = 0;
101116
@@ -104,13 +119,15 @@ user?.sayHi(x++); // no "sayHi", so the execution doesn't reach x++
104119
alert(x); // 0, value not incremented
105120
```
106121

107-
## Other variants: ?.(), ?.[]
108122

109-
The optional chaining `?.` is not an operator, but a special syntax construct, that also works with functions and square brackets.
110123

111-
For example, `?.()` is used to call a function that may not exist.
124+
## ?.(), ?.[] : و موارد دیگر
125+
126+
زنجیره اختیاری `?.` یک عمگر نیست بلکه یک ساختار سینتکسی خاص است که با توابع و براکت ها نیز کار می کند
127+
128+
برای مثال `?.()` برای صدا زدن تابعی که ممکن است وجود نداشته باشد هم کاربرد دارد
112129

113-
In the code below, some of our users have `admin` method, and some don't:
130+
در کد زیر٬ برخی از کاربران ما متد `admin` را دارند و برخی خیر :
114131

115132
```js run
116133
let user1 = {
@@ -127,11 +144,11 @@ user2.admin?.();
127144
*/!*
128145
```
129146

130-
Here, in both lines we first use the dot (`user1.admin`) to get `admin` property, because the user object must exist, so it's safe read from it.
147+
در اینجا در هر دو خط ما ابتدا از `.` (`user1.admin`) برای گرفتن ویژگی ‍`admin` استفاده میکنیم به خاطر اینکه شی ‍`user` حتما وجود دارد پس برای خواندن از آن مطمئن هستیم.
131148

132-
Then `?.()` checks the left part: if the admin function exists, then it runs (that's so for `user1`). Otherwise (for `user2`) the evaluation stops without errors.
149+
سپس `?.()` عبارت سمت چپ را بررسی میکند: اگر تابع ‍`admin` وجود داشته باشد آنرا اجرا میکند(برای ‍`user1`) در غیر اینصورت(برای `user2`) محاسبات بدون خطا به متوقف میشود.
133150

134-
The `?.[]` syntax also works, if we'd like to use brackets `[]` to access properties instead of dot `.`. Similar to previous cases, it allows to safely read a property from an object that may not exist.
151+
سینتکس برای حالت `?.[]` نیز کار میکند٬ اگر ما میخواهیم از براکت به جای نقطه برای دستیابی به ویژگی‌ها استفاده کنیم مشابه موارد قبلی ، اجازه می دهد تا با خیال راحت یک ویژگی را از یک شی که ممکن است وجود نداشته باشد، را بخوانیم.
135152

136153
```js run
137154
let user1 = {
@@ -148,36 +165,43 @@ alert( user2?.[key] ); // undefined
148165
alert( user1?.[key]?.something?.not?.existing); // undefined
149166
```
150167

151-
Also we can use `?.` with `delete`:
168+
169+
170+
همچنان ما میتوانیم از `?.` در `delete` هم استفاده کنیم
152171

153172
```js run
154173
delete user?.name; // delete user.name if user exists
155174
```
156175

157-
````warn header="We can use `?.` for safe reading and deleting, but not writing"
158-
The optional chaining `?.` has no use at the left side of an assignment.
176+
````warn header="ما میتوانیم از`؟.` برای پاک کردن و خواندن مطمئن استفاده کنیم ولی نوشتن نه."
177+
زنجیره اختیاری `?.` هیچ کاربردی برای سمت چپ مساوی ندارد.
159178

160-
For example:
179+
180+
برای مثال:
161181
```js run
162182
let user = null;
163183
164184
user?.name = "John"; // Error, doesn't work
165185
// because it evaluates to undefined = "John"
166186
```
167187

168-
It's just not that smart.
169-
````
188+
آنقدرها هم هوشمند نیست.
189+
190+
191+
192+
## خلاصه
193+
194+
سینتکس `?.` سه شکل دارد:
170195

171-
## Summary
196+
1. `obj?.prop` - مقدار ‍‍`obj.prop` را برمیگرداند اگر `obj` وجود داشته باشد در غیر اینصورت مقدار `undefined` را برمیگرداند
197+
2. `[obj?.[prop` - مقدار ‍‍`[obj.[prop` را برمیگرداند اگر `obj` وجود داشته باشد در غیر اینصورت مقدار `undefined` را برمیگرداند
198+
3. `()obj.method()` - ‍‍``obj?.method`` را صدا میزند اگر `obj` وجود داشته باشد در غیر اینصورت مقدار `undefined` را برمیگرداند
172199

173-
The optional chaining `?.` syntax has three forms:
174200

175-
1. `obj?.prop` -- returns `obj.prop` if `obj` exists, otherwise `undefined`.
176-
2. `obj?.[prop]` -- returns `obj[prop]` if `obj` exists, otherwise `undefined`.
177-
3. `obj.method?.()` -- calls `obj.method()` if `obj.method` exists, otherwise returns `undefined`.
201+
همانطور که می بینیم ، همه آنها ساده و آسان برای استفاده هستند. `?.` سمت چپ را از نظر `null/undefined` بررسی می کند و اجازه می دهد تا ارزیابی ادامه یابد اگر برابر با `null/undefined` نباشد.
178202

179-
As we can see, all of them are straightforward and simple to use. The `?.` checks the left part for `null/undefined` and allows the evaluation to proceed if it's not so.
203+
زنجیر `?.` امکان دسترسی به خواص تودرتو را فراهم میکند.
180204

181-
A chain of `?.` allows to safely access nested properties.
205+
با این حال هنوز ما باید `?.` را با دقت اعمال کنیم ، فقط درصورتی قابل قبو است که سمت چپ ممکن است وجود نداشته باشد.
182206

183-
Still, we should apply `?.` carefully, only where it's acceptable that the left part doesn't to exist. So that it won't hide programming errors from us, if they occur.
207+
با این حال خطاهای برنامه نویسی را از ما مخفی نمیکند اگر آنها اتفاق بیافتند.

0 commit comments

Comments
 (0)