به نام خدا
مجموعه سوال و جواب‌های جاواسکریپت
عیسی رضائی
Mariotek

مجموعه سوال و جواب‌های جاواسکریپتی

اگه از کتاب خوشتون اومد به گیت‌هابمون مراجعه کنین و بهمون ⭐️ بدین. اگر هم قصد مشارکت داشتید همونجا می‌تونین شروع کنین و ما هم خیلی خوشحال می‌شیم 😃

لینک گیت‌هاب ما برای مشارکت برای تولید کتاب‌ها: https://github.com/mariotek

نحوه دانلود کتاب به فرمت‌های PDF/Epub

می‌تونین خیلی راحت نسخه آنلاین کتاب استفاده کنین یا اگه به فایل کتاب می‌خوایین دسترسی داشته باشین، از بخش ریلیزهای گیت‌هاب به فرمت‌های مختلف آخرین نسخه کتاب رو می‌تونین دریافت کنین.




فهرست

ردیف سوال صفحه
1 روش‌های ایجاد objectها توی جاواسکریپت کدوما هستن؟ 29
2 زنجیره prototype چیه؟ 31
3 تفاوت‌های بین call، apply و bind کدوما هستن؟ 31
4 فرمت JSON چیه و عملیات‌های معمول روی اون چیا هستن؟ 33
5 هدف از متد slice روی آرایه‌ها چیه؟ 33
6 هدف از متد splice روی آرایه‌ها چیه؟ 34
7 تفاوت متدهای slice و splice چیا هستن؟ 34
8 تفاوت‌های Object و Map چیا هستن؟ 35
9 تفاوت‌های بین عملگرهای == و === چیا هستن؟ 35
10 توابع lambda یا arrow-function چی هستن؟ 36
11 یه تابع first-class چجور تابعی‌ـه؟ 36
12 یه تابع first-order چجور تابعی‌ـه؟ 37
13 یه تابع higher-order چجور تابعی‌ـه؟ 37
14 یه تابع unary چجور تابعی‌ـه؟ 38
15 currying توابع یعنی چی؟ 38
16 چه توابعی pure هستن؟ 38
17 هدف از کلمه کلیدی let چیه؟ 39
18 تفاوت‌های کلمات کلیدی let و var چیا هستن؟ 40
19 دلیل انتخاب کلمه کلیدی let چیه؟ 41
20 چطوری می‌تونیم توی بلوک مربوط به switch بدون دریافت خطا متغیر تعریف کنیم؟ 41
21 Temporal-Dead-Zone چیه؟ 42
22 IIFE(توابع بلافاصله صدا زده شده) چی هستن؟ 42
23 مزایای استفاده از moduleها چیه؟ 43
24 Memoization چیه؟ 43
25 Hoisting چیه؟ 44
26 Classها توی ES6 چیکار می‌کنن؟ 45
27 Closureها چیا هستن؟ 45
28 Moduleها چیا هستن؟ 46
29 چرا به moduleها نیاز داریم؟ 46
30 توی جاواسکریپت scope چیه و چیکار میکنه؟ 47
31 service-worker چیه؟ 47
32 توی service-worker چطوری می‌شه DOM رو دستکاری کرد؟ 47
33 چطوری می‌تونیم بین ریست شدن‌های service-worker داده‌های مورد نظرمون رو مجدد استفاده کنیم؟ 47
34 IndexedDB چیه؟ 48
35 Web-storage چیه؟ 48
36 Post-message چیه؟ 48
37 Cookie چیه؟ 48
38 چرا به cookie نیاز داریم؟ 49
39 گزینه‌های قابل تنظیم توی cookie چیا هستن؟ 49
40 چطوری می‌شه یه cookie رو حذف کرد؟ 50
41 تفاوت‌های بین cookie و local-storage و session-storage چیا هستن؟ 50
42 تفاوت‌های بین localStorage و sessionStorage چیا هستن؟ 50
43 چطوری به web-storage دسترسی پیدا می‌کنی؟ 51
44 چه متد‌هایی روی session-storage قابل استفاده هستن؟ 51
45 رخداد storage چیه و چطوری ازش استفاده می‌کنیم؟ 52
46 چرا به web-storage نیاز داریم؟ 52
47 چطوری می‌تونیم پشتیبانی از web-storage توسط مرورگر رو بررسی کنیم؟ 52
48 چطوری می‌تونیم پشتیبانی از web-worker توسط مرورگر رو بررسی کنیم؟ 53
49 یه مثال از web-workerها می‌تونی بزنی؟ 53
50 محدودیت‌های web-workerها روی DOM چیا هستن؟ 54
51 Promise چیه؟ 55
52 چرا به Promise نیاز داریم؟ 56
53 سه تا وضعیت ممکن برای یه Promise چیا هستن؟ 56
54 توابع callback چی هستن؟ 57
55 چرا به توابع callback نیاز داریم؟ 57
56 Callback-hell یا جهنم توابع callback چیه؟ 58
57 Server-sent-events یا همون SSE چیه؟ 59
58 چطوری می‌تونیم پیام‌های server-sent-event رو دریافت کنیم؟ 59
59 چطوری می‌تونیم پشتیبانی مرورگر برای SSE رو بررسی کنیم؟ 59
60 کدوم توابع روی SSE وجود دارن؟ 60
61 اصلی‌ترین قوانین Promiseها چیا هستن؟ 61
62 Callback توی callback چطوری رخ میده؟ 60
63 زنجیره Promiseها چیه؟ 61
64 کاربرد متد promise.all چیه؟ 62
65 هدف از متد race روی Promise چیه؟ 63
66 حالت strict توی جاواسکریپت چی کار میکنه؟ 63
67 چرا به حالت strict نیاز داریم؟ 63
68 چطوری می‌تونیم حالت strict رو فعال کنیم؟ 64
69 هدف از عملگر نقیض دوتایی(!!) چیه؟ 64
70 هدف از عملگر delete چیه؟ 65
71 عملگر typeof چیکار میکنه؟ 65
72 undefined چیه و چه زمانی undefined می‌گیریم؟ 65
73 null چیه؟ 65
74 تفاوت‌های بین null و undefined چیا هستن؟ 66
75 متد eval چیه؟ 66
76 تفاوت‌های بین window و document چیا هستن؟ 67
77 توی جاواسکریپت چطوری می‌تونیم به history دسترسی داشته باشیم؟ 67
78 انواع داده‌های جاواسکریپت کدوما هستن؟ 68
79 isNaN چیه و چیکار میکنه؟ 68
80 تفاوت‌های بین undeclared و undefined چیا هستن؟ 68
81 کدوم متغیرها عمومی هستن؟ 69
82 مشکلات متغیرهای عمومی چیا هستن؟ 69
83 مقدار NaN چیه؟ 69
84 هدف از تابع isFinite چیه؟ 69
85 یه event-flow چیه؟ 70
86 Event-bubbling چیه؟ 70
87 Event-capturing چیه؟ 70
88 چطوری می‌شه یه فرم رو با استفاده از جاواسکریپت ثبت کرد؟ 70
89 چطوری می‌شه به اطلاعات مربوط به سیستم عامل کاربر دسترسی داشت؟ 71
90 تفاوت‌های بین رخدادهای document-load و DOMContentLoaded چیا هستن؟ 71
91 تفاوت‌های بین objectهای native ، host و user چیا هستن؟ 71
92 کدوم ابزار و تکنیک‌ها برای دیباگ کردن برنامه جاواسکریپتی استفاده میشن؟ 72
93 مزایا و معایب استفاده از Promiseها به جای callback چیا هستن؟ 72
94 تفاوت‌های بین attribute و property روی DOM چیا هستن؟ 72
95 سیاست same-origin چیه؟ 73
96 هدف استفاده از void 0 چیه؟ 73
97 جاواسکریپت یه زبان تفسیری هست یا کامپایلری؟ 74
98 آیا جاواسکریپت یه زبان حساس به بزرگی و کوچکی(case-sensitive) حروف است؟ 74
99 ارتباطی بین Java و JavaScript وجود داره؟ 74
100 Eventها چی هستن؟ 74
101 کی جاواسکریپت رو ساخته؟ 75
102 هدف از متد preventDefault چیه؟ 75
103 کاربرد متد stopPropagation چیه؟ 76
104 مراحلی که موقع استفاده از return false توی یه event-handler رخ میده چیا هستن؟ 76
105 BOM چیه؟ 76
106 موارد استفاده از setTimeout کدوما هستن؟ 77
107 موارد استفاده از setInterval کدوما هستن؟ 77
108 چرا جاواسکریپت رو به عنوان یه زبان تک thread می‌شناسن؟ 78
109 Event-delegation چیه؟ 78
110 ECMAScript چیه؟ 78
111 JSON چیه؟ 79
112 قوانین فرمت JSON کدوما هستن؟ 79
113 هدف از متد JSON.stringify چیه؟ 79
114 چطوری می‌تونیم یه رشته JSON رو تجزیه کنیم؟ 79
115 چرا به JSON نیاز داریم؟ 80
116 PWAها چی هستن؟ 80
117 هدف از متد clearTimeout چیه؟ 80
118 هدف از متد clearInterval چیه؟ 81
119 توی جاواسکریپت، چطوری می‌شه به یه صفحه جدید redirect انجام داد؟ 81
120 چطوری بررسی می‌کنیم که یه string شامل یه substring هست یا نه؟ 82
121 توی جاواسکریپت، چطوری مقدار یه آدرس email رو اعتبارسنجی می‌کنیم؟ 82
122 چطوری می‌تونیم مقدار آدرس url جاری رو بخونیم؟ 83
123 ویژگی‌های مختلف url روی object مربوط به history کدوما هستن؟ 83
124 توی جاواسکریپت چطوری می‌تونیم مقدار یه query-string رو بخونیم؟ 84
125 چطوری می‌تونیم بررسی کنیم که آیا یه پراپرتی روی آبجکت وجود داره یا نه؟ 84
126 چطوری روی یه object حلقه میزنی؟ 85
127 چطوری تست می‌کنی که یه object خالیه؟ 85
128 arguments object چیه؟ 86
129 چطوری حرف اول یه رشته رو به حرف بزرگ تبدیل می‌کنی؟ 86
130 مزایا و معایب حلقه for چیا هستن؟ 87
131 چطوری تاریخ جاری رو توی جاواسکریپت نشون میدی؟ 87
132 چطوری دو تا date object رو با هم مقایسه می‌کنی؟ 87
133 چطوری بررسی می‌کنی که یه رشته با یه رشته دیگه شروع می‌شه؟ 88
134 چطوری یه رشته رو trim می‌کنی؟ 88
135 توی جاواسکریپت چطوری می‌تونیم یه زوج مرتب از key یه valueها بسازیم؟ 88
136 آیا عبارت '!--' عملگر خاصی هست؟ 89
137 چطوری می‌تونیم به متغیرهامون مقادیر اولیه بدیم؟ 89
138 چطوری می‌تونیم متن‌های چند خطی درست کنیم؟ 89
139 مدل app-shell چیه؟ 90
140 چطوری می‌تونیم روی یه تابع property اضافه کنیم؟ 90
141 چطوری می‌تونیم تعداد پارامترهای ورودی یه تابع رو به دست بیاریم؟ 91
142 Polyfill چیه؟ 91
143 عبارات Break و continue چی هستن؟ 92
144 توی جاواسکریپت labelها چیکار می‌کنن؟ 92
145 مزایای declare کردن متغیرها در اوایل کد چیه؟ 92
146 مزایای مقداردهی اولیه متغیرها چیه؟ 93
147 روش توصیه شده برای ایجاد object چیه؟ 93
148 چطوری می‌تونیم آرایه‌ JSON تعریف کنیم؟ 93
149 چطوری می‌تونیم اعداد تصادفی تولید کنیم؟ 94
150 می‌تونی یه تابع تولید اعداد تصادفی توی یه بازه مشخص بنویسی؟ 94
151 Tree-shaking چیه؟ 95
152 دلایل نیاز به tree-shaking کدوما هستن؟ 95
153 آیا استفاده از eval توصیه می‌شه؟ 95
154 Regular-Expression چیه؟ 95
155 متدهای رشته که روی Regular-expression مجاز هستن کدوماست؟ 96
156 توی Regex بخش modifiersها چیکار میکنه؟ 96
157 پترن‌های regular-expression چیه؟ 97
158 آبجکت RegExp چیه؟ 97
159 چطوری روی یه رشته دنبال یه پترن RegExp می‌گردی؟ 98
160 هدف از متد exec چیه؟ 98
161 چطوری استایل‌های یه المنت HTML رو تغییر میدی؟ 98
162 نتیجه عبارت 1+2+'3' چی می‌شه؟ 99
163 عبارت debugger چیکار میکنه؟ 99
164 هدف از breakpointها توی debugging چیه؟ 99
165 آیا می‌تونیم از عبارت‌های رزرو شده در تعریف identifierها(اسم متغیر، کلاس و ...) استفاده کنیم؟ 99
166 چطوری تشخیص بدیم که یه مرورگر mobile هست یا نه؟ 100
167 چطوری بدون Regex تشخیص بدیم که یه مرورگر mobile هست یا نه؟ 102
168 چطوری طول و عرض یه تصویر رو با جاواسکریپت به دست میاری؟ 102
169 چطوری درخواست‌های synchronous HTTP بزنیم؟ 103
170 چطوری درخواست‌های asynchronous HTTP بزنیم؟ 103
171 چطوری یه تاریخ رو به یه تاریخ در timezone دیگه تبدیل کنیم؟ 103
172 چه propertyهایی برای اندازه‌گیزی سایز window به کار میره؟ 104
173 عملگر شرطی سه گانه توی جاواسکریپت چیه؟ 104
174 آیا می‌شه روی عملگر شرطی زنجیره شرط‌ها رو اعمال کرد؟ 104
175 روش‌های اجرای جاواسکریپت بعد از لود شدن صفحه کدوما هستن؟ 105
176 تفاوت‌های بین proto و prototype کدوما هستن؟ 105
177 میتونی یه مثال از زمانی که واقعا به سمیکولون( ; ) نیاز هست بزنی؟ 106
178 متد freeze چیکار میکنه؟ 106
179 هدف از متد freeze چیه؟ 107
180 چرا به متد freeze نیاز داریم؟ 107
181 چطوری می‌تونیم زبان ترجیحی یه مرورگر رو تشخیص بدیم؟ 107
182 چطوری می‌تونیم حرف اول همه کلمات یه رشته رو به حرف بزرگ تبدیل کنیم؟ 108
183 چطوری می‌شه تشخیص داد که جاواسکریپت یه صفحه وب غیرفعال شده؟ 108
184 عملگرهای پشتیبانی شده توسط جاواسکریپت کدوما هستن؟ 109
185 پارامتر rest چیکار میکنه؟ 109
186 اگه پارامتر rest رو به عنوان آخرین پارامتر استفاده نکنیم چی می‌شه؟ 110
187 عملگرهای منطقی باینری توی جاواسکریپت کدوما هستن؟ 110
188 عملگر spread چیکار میکنه؟ 111
189 چطوری تشخیص میدی که یه آبجکت freeze شده یا نه؟ 111
190 چطوری بررسی کنیم که دو تا مقدار(شامل آبجکت) با هم برابرن یا نه؟ 111
191 هدف از متد is روی object چیه؟ 112
192 چطوری propertyهای یه object رو به یه object دیگه کپی می‌کنی؟ 112
193 کاربردهای متد assign چیه؟ 113
194 آبجکت proxy چیه؟ 113
195 هدف از متد seal چیه؟ 114
196 کاربردهای متد seal چیه؟ 114
197 تفاوت‌های بین متدهای freeze و seal چیا هست؟ 115
198 چطوری تشخیص میدی که یه آبجکت seal شده یا نه؟ 115
199 چطوری کلید و مقدارهای enumerable رو به دست میاری؟ 115
200 تفاوت‌های بین متدهای Object.values و Object.entries چیا هست؟ 116
201 چطوری لیست کلیدهای یه object رو بدست میاری؟ 116
202 چطوری یه object با prototype درست می‌کنی؟ 117
203 WeakSet چیه؟ 117
204 تفاوت‌های بین WeakSet و Set کدوما هستن؟ 118
205 لیست متدهایی که رو WeakSet قابل استفاده هستن رو می‌تونی بگی؟ 118
206 WeakMap چیه؟ 119
207 تفاوت‌های بین WeakMap و Map کدوما هستن؟ 119
208 لیست متدهایی که رو WeakMap قابل استفاده هستن رو می‌تونی بگی؟ 120
209 هدف از متد uneval چیه؟ 120
210 چطوری یه URL رو encode می‌کنی؟ 121
211 چطوری یه URL رو decode می‌کنی؟ 121
212 چطوری محتوای یه صفحه رو پرینت می‌گیری؟ 121
213 تفاوت‌های بین uneval و eval چیا هستن؟ 122
214 تابع anonymous چیه؟ 122
215 تفاوت تقدم بین متغیرهای local و global چطوریه؟ 123
216 accessorهای جاواسکریپت چیکار می‌کنن؟ 123
217 چطوری روی constructor یه Object یه مقدار تعریف می‌کنی؟ 124
218 تفاوت‌های بین get و defineProperty چیا هست؟ 124
219 مزایای استفاده از Getter و Setter چیه؟ 124
220 می‌تونیم getter و setter رو با استفاده از متد defineProperty تعریف کنیم؟ 125
221 هدف استفاده از switch-case چیه؟ 125
222 چه قواعدی برای استفاده از swtich-case باید رعایت بشه؟ 126
223 نوع داده‌های primitive کدوما هستن؟ 126
224 روش‌های مختلف دسترسی به propertyهای object کدوما هستن؟ 127
225 قوانین پارامترهای توابع کدوما هستن؟ 127
226 آبجکت error چیه؟ 127
227 چه موقعی خطای syntax دریافت می‌کنیم؟ 128
228 عنوان خطاهای مختلف که روی error-object برمیگردن کدوما هستن؟ 128
229 عبارات مختلف که در هنگام مدیریت error استفاده میشن کدوما هستن؟ 129
230 دو نوع مختلف حلقه‌ها تو جاواسکریپت کدوما هستن؟ 129
231 nodejs چیه؟ 129
232 آبجکت Intl چیه؟ 130
233 چطوری تاریخ و زمان رو بر اساس زبان جاری سیستم کاربر نمایش بدیم؟ 130
234 Iterator چیه؟ 130
131
236 Event-loop چیه؟ 131
237 Call-stack چیه؟ 131
238 Event-queue چیه؟ 132
239 Decorator چیه؟ 132
240 مقادیر موجود روی آبجکت Intl کدوما هستن؟ 133
241 عملگر Unary چیه؟ 134
242 چطوری المنت‌های موجود تو یه آرایه رو مرتب می‌کنی؟ 134
243 هدف از تابع مرتب‌سازی موقع استفاده از متد sort چیه؟ 134
244 چطوری آیتم‌های یه آرایه رو معکوس مرتب کنیم؟ 134
245 چطوری حداقل و حداکثر مقدار یه آرایه رو بدست بیاریم؟ 135
246 چطوری حداقل و حداکثر مقدار یه آرایه رو بدون استفاده از متدهای Math بدست بیاریم؟ 135
247 عبارت خالی چیه و هدف از استفاده ازش چیه؟ 136
248 چطوری metadata یه ماژول رو بدست میاری؟ 136
249 عملگر comma چیه و چیکار میکنه؟ 137
250 مزایای استفاده از عملگر comma چیه؟ 137
251 Typescript چیه؟ 138
252 تفاوت‌های بین javascript و typescript کدوما هستن؟ 138
253 مزایای typescript نسبت به javascript چیاست؟ 139
254 object-initializer چیه؟ 139
255 متد constructor چیه؟ 140
256 اگه متد constructor رو بیش از یه بار توی کلاس بنویسیم چی می‌شه؟ 140
257 چطوری متد constructor کلاس والد رو صدا بزنیم؟ 141
258 چطوری prototype یه object رو به دست میاری؟ 141
259 اگه به متد getPrototype رشته پاس بدیم چی می‌شه؟ 141
260 چطوری prototype یه object روی یه object دیگه ست کنیم؟ 142
261 چطوری بررسی می‌کنی که یه object قابل extend هست یا نه؟ 142
262 چطوری جلوی extend یه object رو بگیریم؟ 142
263 روش‌های مختلف برای تبدیل یه object به object غیرقابل extend چیه؟ 143
264 چطوری propertyهای متعددی رو روی یه object تعریف می‌کنی؟ 143
265 منظور از MEAN توی جاواسکریپت چیه؟ 144
266 Obfuscation توی جاواسکریپت چیه و چیکار میکنه؟ 144
267 چه نیازی به Obfuscate کردن داریم؟ 145
268 Minification چیه؟ 145
269 مزایای minification یا کم حجم‌سازی چیه؟ 145
270 تفاوت‌های بین Obfuscation و Encryption چیه؟ 146
271 ابزارهای مختلف برای minification کدوما هستن؟ 146
272 چطوری اعتبارسنجی فرم رو با javascript انجام میدی؟ 146
273 چطوری اعتبارسنجی فرم رو بدون javascript انجام میدی؟ 147
274 متدهای موجود روی DOM برای اعتبارسنجی کدوما هستن؟ 147
275 مقادیر موجود روی DOM برای اعتبارسنجی کدوما هستن؟ 148
276 مقادیر موجود روی input برای اعتبارسنجی کدوما هستن؟ 148
277 یه مثال از استفاده ویژگی rangeOverflow می‌تونی بزنی؟ 149
278 جاواسکریپت قابلیت استفاده از enum رو پیش‌فرض توی خودش داره؟ 149
279 enum چیه؟ 150
280 چطوری همه propertyهای یه object رو به دست بیاریم؟ 150
281 چطوری property-descriptorهای یه آبجکت رو بدست بیاریم؟ 150
282 گزینه‌هایی که موقع تعریف ویژگی object با descriptor داریم کدوما هستن؟ 151
283 چطوری کلاس‌ها رو extend می‌کنی؟ 151
284 چطوری آدرس صفحه رو بدون رفرش صفحه عوض کنیم؟ 152
285 چطوری بررسی می‌کنی که یه آرایه یه مقدار مشخص رو داره یا نه؟ 152
286 چطوری آرایه‌های scalar رو با هم مقایسه می‌کنی؟ 153
287 چطوری می‌شه پارامترهای صفحه رو از متد GET گرفت؟ 153
288 چطوری اعداد رو می‌شه سه رقم سه رقم جدا کرد؟ 153
289 تفاوت‌ بین java و javascript چیه؟ 154
290 آیا جاواسکریپت namespace رو پشتیبانی میکنه؟ 154
291 چطوری namespace تعریف می‌کنی؟ 155
292 چطوری می‌تونیم تکه کد جاواسکریپت داخل یه iframe رو از صفحه والد صدا بزنیم؟ 156
293 چطوری می‌شه اختلاف timezone رو از آبجکت date بگیریم؟ 157
294 چطوری فایل‌های CSS و JS رو به شکل داینامیک بارگذاری کنیم؟ 157
295 روش‌های مختلف برای پیدا کردن elementها توی DOM کدوما هستن؟ 158
296 jQuery چیه؟ 158
297 موتور V8 جاواسکریپت چیه؟ 158
298 چرا ما جاواسکریپت رو به عنوان یه زبان داینامیک می‌شناسیم؟ 159
299 عملگر void چیکار میکنه؟ 159
300 چطوری می‌شه نمایشگر موس صفحه رو به درحال لود تغییر داد؟ 159
301 چطوری می‌شه یه حلقه بی‌نهایت درست کرد؟ 160
302 چرا باید در استفاده از عبارت with تجدیدنظر کرد؟ 160
303 خروجی این حلقه‌ها چی می‌شه؟ 161
304 می‌تونی یه سری از ویژگی‌های ES6 رو اسم ببری؟ 161
305 ES6 چیه؟ 162
306 آیا می‌تونیم متغیرهای تعریف شده با let و const رو مجددا declare کنیم؟ 162
307 آیا استفاده از const برای تعریف متغیر اونا رو immutable میکنه؟ 163
308 parameterهای پیش‌فرض چی هستن؟ 163
309 template-literalها چی هستن؟ 164
310 چطوری رشته‌های چند خطی رو توی template-literalها می‌نویسیم؟ 165
311 template-literal‌های تودرتو چی هستن؟ 165
312 tagged-templateها چی هستن؟ 165
313 رشته‌های خام چی هستن؟ 166
314 assign کردن با destructuring چیه و چطوری انجام می‌شه؟ 167
315 موقع assign کردن با destructuring چطوری می‌شه مقدار اولیه تعریف کرد؟ 168
316 چطوری می‌تونیم مقدار یه آرایه رو با استفاده از destructuring-assignment تعویض کنیم؟ 168
317 Enhanced-object-literalها چی هستن؟ 169
318 importهای داینامیک چی هستن؟ 169
319 کاربرد importهای داینامیک چیه؟ 169
320 آرایه‌های نوع‌دار(typed-arrays) چیه؟ 170
321 مزایای لودر ماژول‌ها چیه؟ 171
322 collation چیه؟ 171
323 عبارت for...of چیه؟ 171
324 خروجی عملگر spread روی آرایه زیر چیه؟ 172
325 آیا PostMessage امنه؟ 172
326 مشکلات استفاده از postmessage با origin روی wildcard چیه؟ 172
327 چطوری از دریافت postMessageهای ناخواسته و ناامن از طرف هکرها جلوگیری کنیم؟ 173
328 می‌تونیم کلا postMessageها رو غیرفعال کنیم؟ 173
329 آیا postMessageها به صورت synchronous و همزمان کار می‌کنن؟ 173
330 پارادیم زبان جاواسکریپت چیه؟ 174
331 تفاوت‌های بین جاواسکریپت داخلی و خارجی چیه؟ 174
332 آیا جاواسکریپت سریعتر از اسکریپت‌های سمت سرور است؟ 174
333 چطوری وضعیت چک بودن یه checkbox رو بدست بیاریم؟ 174
334 هدف از عملگر double-tilde چیه؟ 175
335 چطوری یه کاراکتر رو به کد ASCII تبدیل کنیم؟ 175
336 ArrayBuffer چیه؟ 175
337 خروجی کد زیر چی خواهد بود؟ 176
338 هدف از Error-object چیه؟ 176
339 هدف از EvalError-object چیه؟ 177
340 خطاهایی که در حالت strict-mode رخ میدن ولی در غیر اون وجود ندارن کدوما هستن؟ 177
341 آیا همه objectها دارای prototype هستن؟ 178
342 تفاوت‌های بین parameter و argument چیه؟ 178
343 هدف از متد some روی آرایه‌ها چیه؟ 178
344 چطوری دو یا تعداد بیشتری از آرایه‌ها رو با هم ترکیب کنیم؟ 179
345 تفاوت‌های بین Shallow و Deep کپی چیه؟ 179
346 چطوری می‌تونیم به یه تعداد مشخص از یه رشته کپی کنیم؟ 180
347 چطوری همه stringهای match شده با یه regular-expression رو برگردونیم؟ 181
348 چطوری یه رشته رو از اول یا از آخر trim کنیم؟ 181
349 خروجی کنسول زیر با عملگر unary چی می‌شه؟ 181
350 آیا جاواسکریپت از mixinها استفاده میکنه؟ 182
351 تابع thunk چیه و چیکار میکنه؟ 182
352 thunkهای asynchronous چیکار می‌کنن؟ 182
353 خروجی فراخوانی‌های توابع زیر چی می‌شه؟ 183
354 چطوری همه خطوط جدید رو از یه رشته حذف کرد؟ 184
355 تفاوت‌ بین reflow و repaint چیه؟ 184
356 اگه قبل از یه آرایه عملگر نفی «!» بزاریم چی می‌شه؟ 184
357 اگه دو تا آرایه رو با هم جمع ببندیم چی می‌شه؟ 185
358 اگه عملگر جمع «+» روی قبل از مقادیر falsy قرار بدیم چی می‌شه؟ 185
359 چطوری با استفاده از آرایه‌ها و عملگرهای منطقی می‌تونیم رشته self رو تولید کنیم؟ 185
360 چطوری می‌تونیم مقادیر falsy رو از آرایه حذف کنیم؟ 186
361 چطوری مقادیر تکراری رو از یه آرایه حذف کنیم؟ 186
362 aliaseهای همزمان با destructuring چطوری کار می‌کنن؟ 187
363 چطوری آیتم‌های یه آرایه رو بدون استفاده از متد map پیمایش کنیم؟ 187
364 چطوری یه آرایه رو خالی کنیم؟ 187
365 چطوری اعداد رو با تعداد رقم اعشار مشخص رند می‌کنی؟ 188
366 ساده‌ترین روش برای تبدیل آرایه به object چیه؟ 188
367 چطوری یه آرایه با یه سری داده درست کنیم؟ 188
368 متغیرهای موجود روی آبجکت console کدوما هستن؟ 188
369 می‌شه پیام‌های کنسول رو استایل‌دهی کرد؟ 189
370 هدف از متد dir روی آبجکت console چیه؟ 189
371 آیا می‌شه المنت‌های HTML رو توی console دیباگ کرد؟ 190
372 چطوری می‌شه داده‌ها رو به شکل جدولی توی console نمایش بدیم؟ 190
373 چطوری می‌شه بررسی کرد که یه پارامتر Number هست یا نه؟ 191
374 چطوری یه متن رو می‌تونیم به clipboard کپی کنیم؟ 191
375 چطوری می‌شه timestamp رو بدست آورد؟ 191
376 چطوری یه آرایه چندسطحی رو تک سطحی کنیم؟ 192
377 ساده‌ترین روش برای بررسی چندشرطی چیه؟ 192
378 چطوری کلیک روی دکمه برگشت مرورگر رو متوجه بشیم؟ 193
379 چطوری می‌تونیم کلیک راست رو غیرفعال کنیم؟ 193
380 object-wrapperها چی هستن؟ 193
381 AJAX چیه؟ 194
382 روش‌های مختلف مدیریت یه کد Asynchronous چیه؟ 194
383 چطوری یه درخواست fetch رو کنسل کنیم؟ 194
384 Speech-API چیه؟ 195
385 حداقل timeout توی throttling چقدره؟ 196
386 چطوری می‌شه یه timeout صفر توی مرورگر اجرا کرد؟ 197
387 taskها توی event-loop چی هستن؟ 197
388 microtaskها چی هستن؟ 198
389 event-loopهای مختلف کدوما هستن؟ 198
390 هدف از queueMicrotask چیه؟ 198
391 چطوری می‌شه از کتابخونه‌های جاواسکریپت توی فایل typescript استفاده کرد؟ 199
392 تفاوت‌های بین Promiseها و observableها کدوما هستن؟ 199
393 heap چیه؟ 200
394 event-table چیه؟ 200
395 صف microTask چیه؟ 201
396 تفاوت بین shim و polyfill چیه؟ 201
397 چطوری متوجه primitive یا غیر primitive بودن یه نوع داده میشیم؟ 202
398 babel چیه؟ 202
399 آیا Node.js به شکل کامل تک thread کار میکنه؟ 202
400 کاربردهای مرسوم observableها کدوما هستن؟ 203
401 RxJS چیه؟ 203
402 تفاوت بین Function-constructor و function-declaration چیه؟ 203
403 شرط Short-circuit یا اتصال کوتاه چیه؟ 204
404 ساده‌ترین روش برای تغییر سایز یه آرایه چیه؟ 204
405 observable چیه؟ 205
406 تفاوت‌های بین توابع و کلاس‌ها چیه؟ 206
407 تابع async چیه؟ 207
408 چطوری خطاهای ایجاد شده هنگام استفاده از Promiseها رو کنترل کنیم؟ 207
409 Deno چیه؟ 209
410 توی جاواسکریپت چطوری یه object قابل پیمایش درست کنیم؟ 209
411 روش مناسب برای فراخوانی توابع بازگشتی چیه؟ 211
412 چطوری بررسی کنیم که یه آبجکت Promise هست یا نه؟ 211
413 چطوری متوجه بشیم که یا تابع با تابع constructor صدا زده شده یا نه؟ 212
414 تفاوت‌های بین آبجکت argument و پارامتر rest چیه؟ 213
415 تفاوت‌های بین عملگر spread و پارامتر rest چیه؟ 213
416 نوع‌های مختلف generatorها کدوما هستن؟ 213
417 iterableهای built-in کدوما هستن؟ 215
418 تفاوت‌های بین حلقه for...of و for...in چیه؟ 215
419 چطوری propertyهای instance و غیر instanceای تعریف می‌کنی؟ 216
420 تفاوت‌های بین isNaN و Number.isNaN کدوما هستن؟ 216

پیشگفتار

در ابتدا، ممنونم از شما که با خرید این کتاب بهمون کمک کردین که بتونیم قدمی در راه کمک به افراد نیازمند برداریم و با درآمد حاصل از فروش این کتاب کمکی هر چند کوچیک در راه مسئولیت اجتماعی‌مون برداریم، به هم‌دیگه کمک کنیم، با هم مهربون‌تر باشیم و در کنار هم پیشرفت کنیم. تشکر گرم من رو، دورادور پذیرا باشین و امیدوارم این کتاب به جهت افزایش دانش‌تون و کمک به پیشرفت شغلی‌تون کمکی کرده باشه.
کتابی که پیش‌روی شماست، حاصل تلاش نه فقط من، بلکه چندین نفر از بهترین و حرفه‌ای‌ترین دوستان بنده هم هست که در اینجا به ترتیب میزان زحمتی که متقبل شدن اسمشونو قید می‌کنم و کمال تشکر رو ازشون دارم:

  • جعفررضائی

  • مهسا مصباح

این عزیزان هر کدام با کمک‌هاشون برای ترجمه، ویراستاری‌هاشون و حتی دل‌گرمی‌هاشون باعث شدن این مجموعه به زبان فارسی آماده بشه و به شکل چاپی بتونه به دستان شما برسه.

ماریوتک

من جعفررضائی، پلتفرم ماریوتک رو با هدف آموزش اصولی و رایگان، تاسیس کردم و این کتاب هم از مجموعه ماریوتک منتشر میشه. ما ماریوتک رو متعلق به همه می‌دونیم، پس اگه بعضی تایم‌های بیکاری داری که فکر می‌کنی می‌تونی باهامون توی این مسیر همراه باشی حتما بهم ایمیل بزن. ایده‌های ماریوتک برای افزایش آگاهی و دانش تا حد امکان رایگان خواهد بود و تا به اینجا هم، تنها هزینه‌های چاپ برداشته شده و مابقی به موسسات خیریه داده شدن.

مطالب کتاب

مطالب این کتاب می‌تونن تا حد بسیار خوبی دانش شما رو توی مسائل کلیدی مربوط به React.js و کتابخونه‌های پیرامون اون افزایش بدن. سوالات چالشی و کلیدی مطرح شده توی کتاب اکثرا سوالاتی هستند که توی مصاحبه‌های استخدامی پرسیده میشن و مسلط بودن به اونا می‌تونه شانس موفقیت شما برای موقعیت‌های شغلی که مدنظر دارین افزایش بده. مطالب این کتاب به دلیل ترجمه بودن تا حد زیادی قابل دستکاری نبودن و سعی شده تا حد امکان حق گردآورنده محفوظ باشه و با نسخه اصلی سورس که توسط Sudheer Jonna جمع‌آوری شده تفاوت معنایی نداشته باشه. بخشی از مطالب کتاب اصلی به خاطر قدیمی بودن منقضی شده بودن و به عنوان مترجم بخش‌های زیادی از نمونه کدها و مطالب قدیمی تصحیح شدند. در آخر، امیدوارم همیشه شاد و خندان و خوشحال باشین. مخلصیم



  1. روش‌های ایجاد objectها توی جاواسکریپت کدوما هستن؟

    1. سازنده آبجکت: ساده‌ترین راه برای ایجاد یه آبجکت خالی استفاده از کلاس Objectـه. در حال حاضر این روش توصیه نمی‌شه.

    const object = new Object();
    
    1. متد استاتیک create روی Object: متد استاتیک create روی Object با انتقال prototype آبجکت به عنوان پارامتر، یه آبجکت جدید ایجاد میکنه.

    const object = Object.create(null);
    
    1. استفاده از syntax آبجکت: با مقداردهی یه متغیر توسط یه آبجکت ساده داخل syntax آبجکت.

    const object = {
         name: "Ali Karimi",
         age: 30,
    };
    
    1. constructor تابع: هر تابعی که بخوایم رو ایجاد می‌کنیم و از طریق عملگر new یه نمونه آبجکت جدید می‌سازیم.

    function Person(name) {
         const object = {};
         object.name = name;
         object.age = 30;
    
         return object;
    }
    
    const object = new Person("Ali Karimi");
    
    1. constructor تابع به همراه prototype شبیه سازنده تابع هستش اما از prototype برای متد‌ها و خصوصیاتشون استفاده میکنه.

    function Person() {}
    Person.prototype.name = "Ali Karimi";
    
    const object = new Person();
    

    این معادل نمونه‌ای هستش که با متد ایجاد آبجکت با prototype تابع ایجاد شده و تابع رو با یه نمونه و پارامتر‌هاش به عنوان آرگومان فراخوانی میکنه.

    function func {};
    
    new func(x, y, z);
    

    (یا)

    // Create a new instance using function prototype.
    const newInstance = Object.create(func.prototype)
    
    // Call the function
    const result = func.call(newInstance, x, y, z),
    
    // If the result is a non-null object then use it otherwise just use the new instance.
    console.log(result && typeof result === 'object' ? result : newInstance);
    
    1. استفاده از کلاس‌های ES6: توی ES6 کلمه کلیدی class رو برای ایجاد آبجکت‌ها معرفی کردن.

    class Person {
         constructor(name) {
              this.name = name;
         }
    }
    
    const object = new Person("Ali Karimi");
    
    1. الگو یا پترن Singleton: آبجکت‌ای‌ـه که فقط یه بار قابل نمونه‌گیری هستش و فراخوانی‌های بعدی روی سازنده‌ش همون نمونه اولی رو برمی‌گردونه و اینطوری می‌شه مطمئن شد که به طور تصادفی نمونه‌های مختلف ایجاد نمی‌شه.

    const object = new (function () {
         this.name = "Ali Karimi";
    })();
    

    فهرست

  2. زنجیره prototype چیه؟

    زنجیره prototype برای ساخت انواع جدیدی از آبجکت‌ها بر‌اساس موارد موجود استفاده می‌شه. این کار شبیه ارث بری توی یه زبان مبتنی بر کلاس هستش. prototype روی نمونه آبجکت از طریق ویژگی Object.getPrototypeOf(object) یا **proto** در دسترسه در حالی که prototype توی عملکرد سازنده‌ها از طریق object.prototype در دسترسه.


    زنجیره prototype چیه؟

    فهرست

  3. تفاوت‌های بین call، apply و bind چیا هستن؟

    متد call: متد call یه تابع با یه مقدار this و آرگومان‌های ارائه شده رو دونه دونه فراخوانی میکنه.

    const employee1 = {
         firstName: "John",
         lastName: "Rodson",
    };
    const employee2 = {
         firstName: "Jimmy",
         lastName: "Baily",
    };
    
    function invite(greeting1, greeting2) {
         console.log(
              greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
         );
    }
    
    invite.call(employee1, "Hello", "How are you?"); // Hello John Rodson, How are you?
    invite.call(employee2, "Hello", "How are you?"); // Hello Jimmy Baily, How are you?
    

    متد apply: تابع رو فراخوانی میکنه و بهمون اجازه میده تا آرگومان‌ها رو به عنوان یه آرایه منتقل کنیم.

    const employee1 = { firstName: "John", lastName: "Rodson" };
    const employee2 = { firstName: "Jimmy", lastName: "Baily" };
    
    function invite(greeting1, greeting2) {
         console.log(
              greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
         );
    }
    
    invite.apply(employee1, ["Hello", "How are you?"]); // Hello John Rodson, How are you?
    invite.apply(employee2, ["Hello", "How are you?"]); // Hello Jimmy Baily, How are you?
    

    متد bind: یه تابع جدید برمی‌گردونه، در حالی که بهمون اجازه میده هر تعداد آرگومانی که می خوایم رو توی یه آرایه منتقل کنیم.

    const employee1 = { firstName: "John", lastName: "Rodson" };
    const employee2 = { firstName: "Jimmy", lastName: "Baily" };
    
    function invite(greeting1, greeting2) {
         console.log(
              greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
         );
    }
    
    const inviteEmployee1 = invite.bind(employee1);
    const inviteEmployee2 = invite.bind(employee2);
    inviteEmployee1("Hello", "How are you?"); // Hello John Rodson, How are you?
    inviteEmployee2("Hello", "How are you?"); // Hello Jimmy Baily, How are you?
    

    متدهای call و apply تقریباً قابل تعویض هستن. هر دو بلافاصله تابع فعلی رو اجرا می‌کنن. شما باید تصمیم بگیرین که ارسال آرایه در آرایه آسون‌تره یا فهرستی از آرگومان‌های جدا شده با کاما. باید یادمون باشه که متد call برای کاما (فهرست جدا شده) و apply برای حالت آرایه‌ای‌ـه. در حالی که bind یه تابع جدید ایجاد میکنه و می‌تونه با دریافت «this» روی اولین پارامتر ارسال شده کانتکست آبجکت جدید ساخته رو تنظیم کنه.

    فهرست

  4. فرمت JSON چیه و عملیات‌های معمول روی اون چیا هستن؟

    JSON یه قالب داده مبتنی برمتن‌‌ـه که از syntax آبجکت جاواسکریپت (Javascript objext syntax) پیروی میکنه و توسط ‍‍Douglas Crockford رایج شد. کاربردش زمانی‌ـه که بخواییم داده‌ها رو از طریق شبکه انتقال بدیم و اساسا یه فایل متنی با پسوند .json و نوع MIME از application/json داشته باشیم. اکثرا دو عملیات زیر روی JSON انجام میشه:


    تجزیه (Parsing): تبدیل یه رشته به یه آبجکت جاواسکریپت (native Object).

    JSON.parse(text);
    

    رشته‌سازی (stringify کردن): تبدیل یه آبجکت جاواسکریپت به یه رشته تا بتونه از طریق شبکه منتقل بشه یا یه جایی ذخیره بشه.

    JSON.stringify(object);
    

    فهرست

  5. هدف از متد slice روی آرایه‌ها چیه؟

    متد slice عناصر انتخاب شده توی یه آرایه رو به عنوان یه آرایه جدید برمی‌گردونه. این عناصر رو از اولین آرگومان داده شده انتخاب میکنه و با آرگومان پایانی و اختیاری داده شده بدون در نظر گرفتن آخرین عنصر به پایان می‌رسونه. اگه آرگومان دوم رو حذف کنیم تا آخر آرایه همه عناصر رو انتخاب میکنه. چند تا مثال در مورد نحوه کارکردش ببینیم:


    const arrayIntegers = [1, 2, 3, 4, 5];
    const arrayIntegers1 = arrayIntegers.slice(0, 2); // returns [1,2]
    const arrayIntegers2 = arrayIntegers.slice(2, 3); // returns [3]
    const arrayIntegers3 = arrayIntegers.slice(4); //returns [5]
    

    نکته: متد slice‌ آرایه اصلی رو تغییر نمیده ولی یه زیر‌مجموعه به عنوان یه آرایه جدید برمی‌گردونه.

    فهرست

  6. هدف از متد splice روی آرایه‌ها چیه؟

    متد splice برای اضافه کردن یه عنصر به آرایه یا حذف از اون استفاده می‌شه و مورد یا موارد حذف شده رو برمی‌گردونه. آرگومان اول موقعیت آرایه رو برای درج یا حذف مشخص میکنه در حالی که آرگومان اختیاری دوم تعداد عناصر برای حذف رو مشخص میکنه و مابقی هر آرگومان اضافه‌ای که به این متد ارسال بشه، به آرایه اضافه می‌شه. چند تا مثال در مورد نحوه کارکردش ببینیم:


    const arrayIntegersOriginal1 = [1, 2, 3, 4, 5];
    const arrayIntegersOriginal2 = [1, 2, 3, 4, 5];
    const arrayIntegersOriginal3 = [1, 2, 3, 4, 5];
    
    const arrayIntegers1 = arrayIntegersOriginal1.splice(0, 2); // returns [1, 2]; original array: [3, 4, 5]
    const arrayIntegers2 = arrayIntegersOriginal2.splice(3); // returns [4, 5]; original array: [1, 2, 3]
    const arrayIntegers3 = arrayIntegersOriginal3.splice(3, 1, "a", "b", "c"); //returns [4]; original array: [1, 2, 3, "a", "b", "c", 5]
    

    نکته: متد splice آرایه اصلی رو اصلاح میکنه یعنی متغیر اصلی رو تحت تاثیر قرار میده و آرایه حذف شده رو برمی‌گردونه.

    فهرست

  7. تفاوت متدهای slice و splice چیا هستن؟

    slice splice
    آرایه اصلی رو تغییر نمیده (immutable یا تغییرناپذیر) آرایه اصلی رو تغییر میده (mutable یا تغییرپذیر)
    زیر مجموعه آرایه اصلی رو برمی‌گردونه عناصر حذف شده رو به عنوان آرایه برمی‌گردونه
    برای انتخاب عناصر از آرایه استفاده می‌شه برای درج عناصر به آرایه یا حذف از اون استفاده می‌شه

    فهرست

  8. تفاوت‌های Object و Map چیا هستن؟

    آبجکت‌ها شبیه به Mapها هستن(البته خود Map هم آبجکته و اینجا منظور شاعر خود شخص Object رو میگه) از این جهت که هردو بهمون این امکان رو میدن که مقادیر رو روی کلید‌های مشخصی تعریف کنیم، مقادیر رو بازیابی کنیم، کلید‌ها رو حذف کنیم و ببینیم چیزی توی یه کلید ذخیره شده یا نه. به همین دلیل در طول تاریخ از آبجکت‌ها به عنوان Map و HashMap استفاده‌های زیادی شده. اما تفاوت‌های مهمی وجود داره که استفاده از Map رو توی موارد خاص ارجعیت میده.

    1. کلید‌های یه آبجکت رشته‌ها و Symbolها هستن، در حالی که برای Map مقادیر مختلفی میتونه وجود داشته باشه که شامل توابع، آبجکت‌ها و هر نوع اولیه دیگه‌ای می‌شه.

    2. کلید‌های Map مرتب میشن در حالی که کلید‌های اضافه شده به آبجکت اینطوری نیستن. بنابراین موقع تکرار روی اون، آبجکت map کلیدها رو به ترتیب اضافه شدنشون برمی‌گردونه.

    3. اندازه Map رو می‌تونیم به راحتی با ویژگی سایز بدست بیاریم، در حالی که تعداد خصوصیات یه آبجکت باید به صورت دستی و با ساخت یه آرایه از روی کلیدها و یا مقادیرش حساب بشه.

    4. Map قابل تکراره و میتونه مستقیما تکرار بشه، در حالی که تکرار روی یه آبجکت مستلزم بدست آوردن کلیدهای اون به روشی خاص و تکرار روی اونهاست.

    5. آبجکت یه prototype داره، بنابراین کلید‌های پیش‌فرض توی Object وجود داره که که اگه دقت نکنیم ممکنه با کلید‌هامون برخورد کنه. از زمان ES5 می‌تونیم با استفاده از Map = Object.create(null)، این قضیه رو دور بزنیم ولی به‌ندرت این کار انجام می‌شه.

    6. Map ممکنه توی سناریوهای شامل جمع و حذف مکرر جفت کلیدها عملکرد بهتری داشته باشه.

    فهرست

  9. تفاوت‌های بین عملگرهای == و === چیا هستن؟

    جاواسکریپت مقایسه برابری سخت ( === ، !== ) و تبدیل نوع ( == ، != ) رو فراهم میکنه. عملگرهای سختگیرانه نوع متغیر رو در نظر می‌گیرند، در حالی که عملگرهای غیر دقیق، اصلاح/تبدیل نوع رو بر اساس مقادیر متغیرها انجام میدن. اپراتورهای سختگیر از شرایط زیر برای انواع مختلف پیروی می‌کنن.

    1. دو رشته زمانی کاملاً برابر هستن که توالی کاراکترهای یکسان، طول یکسان و کاراکترهای مشابه در موقعیت‌های متناظر داشته باشن.

    2. دو عدد زمانی که از نظر عددی مساوی باشن کاملاً برابر هستن. یعنی داشتن مقدار عددی یکسان.

    دو مورد خاص در این مورد وجود داره:

    1. NaN با هیچ چیز از جمله NaN برابر نیست.

    2. صفرهای مثبت و منفی با هم برابرند.

    3. اگه هر دو درست یا نادرست باشن، دو عملوند بولین کاملاً برابر هستن.

    4. اگه دو شیء به یه شیء اشاره کنن کاملاً برابر هستن.

    5. انواع Null و Undefined با === برابر نیستن، بلکه با == برابر هستن. یعنی
      null === undefined --> false اما null == undefined --> true

    یه چندتا مثال که موارد بالا رو پوشش میدن:

    0 == false   // true
    0 === false  // false
    1 == "1"     // true
    1 === "1"    // false
    null == undefined // true
    null === undefined // false
    '0' == false // true
    '0' === false // false
    []==[] or []===[] //false, refer different objects in memory
    {}=={} or {}==={} //false, refer different objects in memory
    

    فهرست

  10. توابع lambda یا arrow-function چی هستن؟

    arrow function ‌ها به صورت ساده‌تر و کوتاه‌تر تعریف میشن و شئ this ، متغیر جادویی argumants ، متد super یا new.target ندارن. این توابع بدون متد هستن و به عنوان سازنده یا constructor استفاده نمیشن.

    فهرست

  11. یه تابع first-class چجور تابعی‌ـه؟

    توی جاواسکریپت، توابع آبجکت‌های کلاس اول یا first class هستن. توابع کلاس اول توی هر زبان برنامه‌نویسی، زمانی معنی میدن که توابع توی اون زبان باهاشون مثل بقیه متغیر‌ها رفتار بشه.

    برای مثال، توی جاواسکریپت، یه تابع می‌تونه به عنوان آرگومان به یه تابع دیگه پاس داده بشه، می‌تونه به عنوان مقدار نهایی یه تابع دیگه برگشت داده بشه و می‌تونه به یه متغیر دیگه به عنوان مقدار اختصاص داده بشه. برای مثال توی کد زیر، تابع handler به عنوان callback به یه تابع listener پاس داده شده.

    const handler = () => console.log("This is a click handler function");
    
    /**
    * Usage of `handler` method
    */
    document.addEventListener("click", handler);
    

    فهرست

  12. یه تابع first-order چجور تابعی‌ـه؟

    تابع مرتبه اول یا first-order تابعیه که هیچ تابع دیگه‌ای رو به عنوان آرگومان قبول نمیکنه و هیچ تابعی رو هم به عنوان مقدار برگشتی یا return value برنمی‌گردونه. مثل:

    const firstOrder = () => console.log("I am a first order function!");
    

    فهرست

  13. یه تابع higher-order چجور تابعی‌ـه؟

    توابع مرتبه بالا توابعی هستن که یه تابع رو به عنوان پارامتر ورودی دریافت و یا به عنوان خروجی ارسال میکنن. مثل:

    const firstOrderFunc = () =>
         console.log("Hello I am a First order function");
    const higherOrder = (ReturnFirstOrderFunc) => ReturnFirstOrderFunc();
    
    higherOrder(firstOrderFunc);
    

    فهرست

  14. یه تابع unary چجور تابعی‌ـه؟

    تابع unary تابعیه که فقط یه آرگومان ورودی دریافت میکنه. مثل:

    // Add 10 to the given argument and display the value
    const unaryFunction = (a) => {
      console.log(a + 10);
    };
    

    فهرست

  15. currying توابع یعنی چی؟

    به فرایندی که در اون یه تابع با چندین آرگومان رو به مجموعه‌ای از توابع که فقط یه آرگومان دریافت می‌کنن، تبدیل کنیم currying می‌گیم. Currying از نام یه ریاضی‌دان به اسم Haskell Curry گرفته شده. با استفاده از Currying در واقع یه تابع رو به یه تابع unary تبدیل می‌کنیم. بیاین یه مثال از یه تابع با چندین آرگومان و تبدیلش به تابع currying بزنیم.

    const multiArgFunction = (a, b, c) => a + b + c;
    const curryUnaryFunction = (a) => (b) => (c) => a + b + c;
    curryUnaryFunction(1); // returns a function: b => c =>  1 + b + c
    curryUnaryFunction(1)(2); // returns a function: c => 3 + c
    curryUnaryFunction(1)(2)(3); // returns the number 6
    

    توابع Curried برای بهبود قابلیت استفاده مجدد کد و ترکیب عملکردی عالی هستن.

    فهرست

  16. چه توابعی pure هستن؟

    تابع pure تابعیه که مقدار برگشتیش فقط توسط آرگومان‌هاش تعیین می‌شه بدون هیج side effect یا عوارض جانبی. برای مثال اگه ما یه تابع رو n بار در n جای مختلف برنامه فراخوانی کنیم همیشه یه مقدار مشخص برگشت داده می‌شه. بیاین یه مثال از تفاوت بین توابع pure و توابع غیرpure بزنیم.

    //Impure
    let numberArray = [];
    const impureAddNumber = (number) => numberArray.push(number);
    
    //Pure
    const pureAddNumber = (number) => (argNumberArray) =>
      argNumberArray.concat([number]);
    
    //Display the results
    console.log(impureAddNumber(6)); // returns 1
    console.log(numberArray); // returns [6]
    console.log(pureAddNumber(7)(numberArray)); // returns [6, 7]
    console.log(numberArray); // returns [6]
    

    بر اساس تکه کدهای بالا، تابع push با تغییر روی آرایه و برگردوندن شماره ایندکس push که مستقل از مقدار پارامتر هستش، یه تابع ناخالص یا Impure به حساب میاد. در حالی که از یه طرف متد concat آرایه رو می‌گیره و اونو با یه آرایه دیگه ترکیب میکنه و یه آرایه کاملا جدید و بدون هیچ side-effect تولید میکنه. همچنین مقدار برگشتی با آرایه قبلی ترکیب شده هستش.
    یادتون باشه که توابع خالص یا pure مهم‌ان چون اونا unite-test رو بدون هیچ side-effect و بدون نیاز به dependency-injection ساده می‌کنن. اونا همچنین از اتصال محکم بین بخش‌های مختلف برنامه جلوگیری می‌کنن و با نداشتن side-effect، احتمال بروز خطا تو برنامه رو کمک‌تر می‌کنن. این اصول کنار هم جمع میشن و کنار Immutability و باعث میشن که از const به جای let استفاده بشه.

    نکته: دقت کنیم که چاپ یه مقدار روی کنسول و یا درخواست api-call هم side-effect محسوب میشه.

    فهرست

  17. هدف از کلمه کلیدی let چیه؟

    دستور let یه متغیر محلی block scope تعریف میکنه. از این رو متغیر‌هایی که با کلمه کلیدی let تعریف میشن محدود به همون اسکوپی که توش تعریف شدن، میشن و فقط دستورها و عبارت‌های توی همون اسکوپ بهش دسترسی دارن. درحالی که متغیر‌های تعریف شده با کلمه کلیدی var برای تعریف یه متغیر توی سطح global و یا به شکل محلی و برای استفاده در کل تابع بدون در نظر گرفتن اسکوپی که توش تعریف شده، استفاده می‌شه. بیاین برای نشون دادن کاربردش یه مثال بزنیم.

    let counter = 30;
    if (counter === 30) {
      let counter = 31;
      console.log(counter); // 31
    }
    console.log(counter); // 30 (because if block variable won't exist here)
    

    فهرست

  18. تفاوت‌های کلمات کلیدی let و var چیا هستن؟

    var :

    1. دامنه تابع داره

    2. متغیر‌ها Hoist میشن

    3. از ابتدای جاواسکریپت در دسترس هستش


    let:

    1. به عنوان بخشی از ES6 معرفی شده

    2. محدود به scope یا دامنه هستش

    3. Hoist شده ولی قابل استفاده نیست


    بیاین با یه مثال تفاوتش رو بهتر ببینیم:

    function userDetails(username) {
      if (username) {
        console.log(salary); // undefined(due to hoisting)
        console.log(age); // error: age is not defined (ReferenceError)
        let age = 30;
        var salary = 10000;
      }
      console.log(salary); //10000 (accessible to due function scope)
      console.log(age); //error: age is not defined(due to block scope)
    }
    

    فهرست

  19. دلیل انتخاب کلمه کلیدی let چیه؟

    Let یه عنوان ریاضی هستش که توسط زبان‌های برنامه‌نویسی اولیه مثل Scheme و Basic پذیرفته شده. این زبان از ده‌ها زبان دیگه گرفته شده که از let به عنوان یه کلمه کلیدی سنتی تا حد ممکن نزدیک به var استفاده میکنه.

    فهرست

  20. چطوری می‌تونیم توی بلوک مربوط به switch بدون دریافت خطا متغیر تعریف کنیم؟

    اگه بخوایم متغیر‌ها رو مجددا توی یه بلوک switch تعریف کنیم، این کار باعث خطا می‌شه چون در واقع فقط یه بلوک وجود داره. برای مثال توی کد زیر یه خطای نحوی ایجاد می‌شه:

    let counter = 1;
    switch (x) {
      case 0:
        let name;
        break;
    
      case 1:
        let name; // SyntaxError for redeclaration.
        break;
    }
    

    برای جلوگیری از این خطا، می‌تونیم یه بلوک تودرتو داخل case ایجاد کنیم و یه محیط واژگانی دارای محدوده بلوک جدید ایجاد کنیم.

    let counter = 1;
    switch (x) {
      case 0: {
        let name;
        break;
      }
      case 1: {
        let name; // No SyntaxError for redeclaration.
        break;
      }
    }
    

    فهرست

  21. Temporal-Dead-Zone چیه؟

    Temporal Dead Zone رفتاری توی جاواسکریپت‌ـه که موقع تعریف متغیر با کلمات کلیدی let و const رخ میده، نه با کلمه کلیدی var. توی اکما‌سکریپت 6، دستیابی به متغیر let و const قبل از تعریفش (توی scope خودش) باعث خطای refrence می‌شه. فاصله زمانی ایجاد اون، بین ایجاد اتصال متغیر و تعریف اون، منطقه Temporal Dead هستش. بیاین با یه مثال ببینیم:

    function somemethod() {
         console.log(counter1); // undefined
         console.log(counter2); // ReferenceError
         var counter1 = 1;
         let counter2 = 2;
    }
    

    فهرست

  22. IIFE(توابع بلافاصله صدا زده شده) چی هستن؟

    IIFE (فراخوانی عملکرد بلافاصله) یه تابع جاواسکریپت‌ـه که به محض تعریف اجرا می‌شه.
    تعریف اون به این صورته:

    (function () {
         // logic here
    })();
    

    دلیل اصلی استفاده از IIFE بدست آوردن حریم خصوصی داده‌هاست، چون محیط خارجی به متغیر‌هایی که توی IIFE تعریف شده دسترسی نداره. برای مثال، اگه سعی کنیم با IIFE به متغیر‌ها دسترسی پیدا کنیم این خطا رو می‌گیریم:

    (function () {
         var message = "IIFE";
         console.log(message);
    })();
    
    console.log(message); //Error: message is not defined
    

    فهرست

  23. مزایای استفاده از moduleها چیه؟

    استفاده از ماژول‌ها مزایای زیادی داره، مثلا:


    1. قابلیت نگهداری بالایی دارن

    2. قابلیت استفاده مجدد دارن

    3. نامگذاری بخش‌های مختلف کد رو راحت‌تر می‌کنن

    فهرست

  24. Memoization چیه؟

    Memoization یه روش برنامه‌نویسی‌ـه که سعی میکنه با ذخیره نتایج قبلی یه تابع عملکرد(پرفورمنس performance) اون تابع رو افزایش بده. هر بار که یه تابع Memoize شده فراخوانی می‌شه، پارامتر‌های اون به همراه نتجه بدست‌ اومده cache می‌شه(یعنی توی حافظه ذخیره می‌شه). موقع اجرای بعدی قبل از انجام محاسبه بررسی میشه که داده قبلا پردازش شده یا نه و اگه داده وجود داشته باشه، بدون اجرای کل تابع و از روی مقدار cache شده نتیجه برگشت داده میشه، در غیر این صورت تابع به شکل عادی اجرا می‌شه و بعدش نتیجه بدست اومده توی حافظه ذخیره می‌شه.


    بیاین یه مثال از نوشتن یه تابع با Memoization بزنیم،

    const memoizAddition = () => {
      let cache = {};
      return (value) => {
        if (value in cache) {
          console.log("Fetching from cache");
    
          return cache[value];
          // Here, cache.value cannot be used as property name starts with the number which is not a valid JavaScript  identifier. Hence, can only be accessed using the square bracket notation.
        } else {
          console.log("Calculating result");
          let result = value + 20;
    
          cache[value] = result;
          return result;
        }
      };
    };
    
    // returned function from memoizAddition
    const addition = memoizAddition();
    console.log(addition(20)); //output: 40 calculated
    console.log(addition(20)); //output: 40 cached
    

    فهرست

  25. Hoisting چیه؟

    Hoisting یه مکانیسم جاواسکریپت‌ـه که متغیر‌ها و تعاریف توابع رو به بالای scope یا دامنه خودشون انتقال میده. یادمون باشه که جاواسکریپت فقط تعریف متغیر‌ها و توابع رو Hoist میکنه، نه مقدار دهی اولیه اونا رو.
    بیاین یه مثال ساده از hoist کردن متغیر‌ها ببینیم:

    console.log(message); //output : undefined
    var message = "The variable Has been hoisted";
    

    ترجمه کد بالا اینطوری می‌شه:

    var message;
    console.log(message);
    message = "The variable Has been hoisted";
    

    فهرست

  26. Classها توی ES6 چیکار می‌کنن؟

    در ES6، کلاس‌های جاواسکریپت اصطلاحا فقط یه suger-syntax روی وراثت مبتنی بر prototype جاواسکریپت‌ هستن.
    برای مثال، وراثت مبتنی بر prototype که به شکل تابع به صورت زیر نوشته شده:

    function Bike(model, color) {
      this.model = model;
      this.color = color;
    }
    
    Bike.prototype.getDetails = function () {
      return this.model + " bike has" + this.color + " color";
    };
    

    حالا همین کد با کلاس‌های ES6 و به شکل ساده‌تری به صورت زیر قابل نوشتن‌ـه:

    class Bike {
      constructor(color, model) {
        this.color = color;
        this.model = model;
      }
    
      getDetails() {
        return this.model + " bike has" + this.color + " color";
      }
    }
    

    فهرست

  27. Closureها چیا هستن؟

    کلاژور ترکیبی از یه تابع و یه scope هستش که تابع توی اون تعریف شده. برای مثال این یه تابع داخلی‌ـه که به متغیر‌های تابع خارجی دسترسی داره.
    کلاژور دارای سه زنجیره scope هستش:
    ۱. scope داخلی و جایی که متغیر‌های محلی بین براکت‌های اون تعریف شده باشن
    ۲. متغیر‌های تابع بیرونی
    ۳. متغیر‌های عمومی و general

    بیاین یه مثال راجع به مفهوم کلاژور بزنیم

    function welcome(name) {
      var greetingInfo = function (message) {
        console.log(message + " " + name);
      };
      return greetingInfo;
    }
    
    var myFunction = welcome("John");
    myFunction("Welcome "); //Output: Welcome John
    myFunction("Hello Mr."); //output: Hello Mr.John
    

    مطابق کد بالا، تابع داخلی (greetingInfo) حتی بعد از بازگشت تابع خارجی به متغیر‌های scope تابع خارجی (welcome) دسترسی داره.

    فهرست

  28. Moduleها چیا هستن؟

    ماژول‌ها به واحد‌های کوچیکی از کد مستقل و قابل استفاده مجدد گفته میشن و به عنوان پایه بسیاری از دیزاین پترن‌های جاواسکریپت عمل می‌کنن. خروجی ماژول‌های جاواسکریپت یه شی، یه تابع یا constructor هستش.

    فهرست

  29. چرا به moduleها نیاز داریم؟

    دلایل زیادی برای استفاده کردن از ماژول‌ها وجود داره که یه تعداد از اونا رو این زیر میاریم:

    1. قابلیت نگهداری

    2. قابلیت استفاده مجدد

    3. نام‌گذاری

    4. جدا بودن بخش‌های مختلف برنامه

    فهرست

  30. توی جاواسکریپت scope چیه و چیکار میکنه؟

    scope یا محدوده، به نحوه دسترسی متغیر‌ها، توابع و اشیاء توی بخش‌های مختلف کدمون در زمان اجرا گفته میشه. به عبارت دیگه، دامنه قابلیت دیده شدن متغیر‌ها و بقیه منابع رو تو قسمت‌هایی از کدمون تعیین میکنه.

    فهرست

  31. service-worker چیه؟

    service worker اساسا یه اسکریپت هستش که جدا از یه صفحه وب توی پس‌زمینه اجرا می‌شه و ویژگی‌هایی رو فراهم میکنه که نیازی به صفحه وب یا تعامل کاربر نداره. بعضی از ویژگی‌های عمده service worker‌ها عبارتند از: تجربه کار با برنامه بدون نیاز به اینترنت(آفلاین وب)، به روزرسانی داده‌ها به شکل متناوب در پس‌زمینه، push notification، رهگیری و رسیدگی به درخواست‌های شبکه و مدیریت درخواست‌های cache شده.

    فهرست

  32. توی service-worker چطوری می‌شه DOM رو دستکاری کرد؟

    service worker مستقیما نمیتونه به DOM دسترسی پیدا کنه، اما میتونه با پاسخ به پیام‌های ارسالی از طریق رابط postMessage با صفحاتی که کنترل میکنه ارتباط برقرار کنه و این صفحات میتونن DOM رو دستکاری کنن.

    فهرست

  33. چطوری می‌تونیم بین ریست شدن‌های service-worker داده‌های مورد نظرمون رو مجدد استفاده کنیم؟

    مشکلی که توی service worker وجود داره اینه که در صورت عدم استفاده برای یه مدت، قطع میشه و در صورت نیاز بعدی دوباره راه‌اندازی می‌شه، به همین دلیل نمی‌تونیم به state‌های سراسری توی handlerهای onfetch و onmessage یه service worker اعتماد کنیم. تو این حالت service worker برای تداوم کار و استفاده مجدد موقع شروع مجدد، به indexedDB دسترسی خواهد داشت و میشه از اون استفاده کرد.

    فهرست

  34. IndexedDB چیه؟

    IndexedDB یه API سطح پایین برای ذخیره client-side یا سمت کاربر و برای مقدار زیادی از داده‌های ساخت‌ یافته(structured) شامل فایل‌ها و bolbها هستش. این API از index‌ها برای فراهم‌سازی جستجو‌ با کارایی بالا توی این داده‌ها استفاده میکنه.

    فهرست

  35. Web-storage چیه؟

    web storage یه API هستش که مکانیزمی رو فراهم میکنه که مرورگر‌ها می‌تونن یه مقدار رو به همراه یه کلید و بصورت محلی توی مرورگر کاربر ذخیره کنن، که روشی بسیار مدرن‌تر و عملی‌تر نسبت به کوکی‌ها محسوب میشه. فضای ذخیره‌سازی وب دو مکانیزم برای ذخیره اطلاعات روی client فراهم میکنه.

    1. Local storage: داده‌ها رو برای مسیر(origin) فعلی و بدون تاریخ انقضا ذخیره میکنه.

    2. Session storage: داده‌ها رو برای یه session ذخیره میکنه و با بسته شدن تب مرورگر داده‌ها از بین میرن.

    فهرست

  36. Post-message چیه؟

    Post message روشی هست که امکان ایجاد ارتباط متقابل بین آبجکت‌های window رو فراهم میکنه (برای مثال، بین یه صفحه و یه پنجره باز‌شو که باعث ایجاد اون شده، یا بین یه صفحه و یه iframe قرارداده شده شده توی اون)
    به طور کلی اسکریپت‌های موجود در صفحات مختلف اگه که صفحاتشون از خط‌ و مشی‌ یکسانی تبعیت کنن مجاز به دسترسی به همدیگه هستن.(یعنی صفحات از پروتکل، شماره پورت و host یکسانی برخوردار باشن).

    فهرست

  37. Cookie چیه؟

    کوکی قطعه‌ای از داده هستش که توی کامپیوترمون ذخیره می‌شه تا مرورگر به اون دسترسی داشته باشه. کوکی‌ها به عنوان جفت‌های کلید و مقدار ذخیره میشن.
    برای مثال می‌تونیم یه کوکی با عنوان نام کاربری مثل زیر ایجاد کنیم:

    document.cookie = "username=John";
    
    Cookie illustation

    فهرست

  38. چرا به cookie نیاز داریم؟

    از کوکی‌ها برای به خاطر سپردن اطلاعات مربوط به مشخصات کاربر (مانند نام کاربری) استفاده می‌شه. در اصل شامل دو مرحله هستش:

    1. وقتی که کاربر از یه صفحه وب بازدید میکنه، مشخصات کاربر میتونه توی یه کوکی ذخیره بشه.

    2. دفعه بعد که کاربر از صفحه بازدید کرد، کوکی مشخصات کاربر رو به خاطر میاره.

    فهرست

  39. گزینه‌های قابل تنظیم توی cookie چیا هستن؟

    گزینه‌های زیر برای کوکی موجوده:

    1. به طور پیش فرض، کوکی موقع بسته شدن مرورگر حذف می‌شه اما با تنظیم تاریخ انقضا (به وقت UTC) می‌تونیم این رفتار رو تغییر بدیم.

    document.cookie = "username=John; expires=Sat, 8 Jun 2019 12:00:00 UTC";
    
    1. به طور پیش فرض، کوکی به صفحه فعلی تعلق داره. اما با استفاده از پارامتر path می‌تونیم به مرورگر بگیم که کوکی متعلق به چه مسیری‌ـه.

    document.cookie = "username=John; path=/services";
    

    فهرست

  40. چطوری می‌شه یه cookie رو حذف کرد؟

    با تنظیم تاریخ انقضا به عنوان تاریخ گذشته می‌تونیم کوکی رو حذف کنیم. تو این حالت نیازی به تعیین مقدار کوکی نیست.
    برای مثال، می‌تونیم کوکی نام کاربری رو توی صفحه فعلی به صورت زیر حذف کنیم.

    document.cookie =
      "username=; expires=Fri, 07 Jun 2019 00:00:00 UTC; path=/;";
    

    نکته برای اطمینان از نحوه درست پاک کردن کوکی باید گزینه مسیر کوکی رو تعیین کنیم. بعضی از مرورگرها تا زمانی که پارامتر مسیر رو تعیین نکنیم اجازه حذف کوکی رو نمیدن.

    فهرست

  41. تفاوت‌های بین cookie و local-storage و session-storage چیا هستن؟

    ویژگی Cookie Local storage Session storage
    قابل دسترسی از طرف client یا server هردو server و client فقط client فقط client
    طول عمر پیکربندی‌شده با استفاده از گزینه اکسپایر تا وقتی که حذف بشه تا وقتی که تب بسته‌نشده
    پشتیبانی از SSL پشتیبانی می‌شه پشتیبانی نمی‌شه پشتیبانی نمی‌شه
    حداکثر اندازه داده 4KB 5MB 5MB

    فهرست

  42. تفاوت‌های بین localStorage و sessionStorage چیا هستن؟

    لوکال استوریج همون سشن استوریج هستش اما داده‌ها با بستن و دوباره باز کردن مرورگر همچنان حفظ می‌شه (تاریخ انقضا نداره) در حالی که سشن استوریج داده‌ها رو با بستن پنجره مرورگر پاک میکنه.

    فهرست

  43. چطوری به web-storage دسترسی پیدا می‌کنی؟

    آبجکت window ویژگی‌های WindowLocalStorage و WindowSessionStorage رو که دارای ویژگی‌های localStorage و sessionStorage هستن رو پشتیبانی میکنه. این خصوصیات نمونه ای از شئ Storage رو ایجاد میکنه که از طریق اون می‌شه موارد داده رو برای یه دامنه خاص و نوع ذخیره سازی (session یا محلی) تنظیم، بازیابی و حذف کرد.


    برای مثال، می‌تونیم روی اشیای ذخیره سازی محلی مثل زیر بخونیم و بنویسیم:


    localStorage.setItem("logo", document.getElementById("logo").value);
    localStorage.getItem("logo");
    

    فهرست

  44. چه متد‌هایی روی session-storage قابل استفاده هستن؟

    session storage متد‌هایی رو برای خواندن، نوشتن و پاکسازی داده‌های session ارائه میده. مثلا:

    // Save data to sessionStorage
    sessionStorage.setItem("key", "value");
    
    // Get saved data from sessionStorage
    let data = sessionStorage.getItem("key");
    
    // Remove saved data from sessionStorage
    sessionStorage.removeItem("key");
    
    // Remove all saved data from sessionStorage
    sessionStorage.clear();
    

    فهرست


  45. رخداد storage چیه و چطوری ازش استفاده می‌کنیم؟

    StorageEvent رویدادی هستش که با همزمان با تغییر یه محل ذخیره‌سازی تو یه context صفحه دیگه‌ای فراخوانی می‌شه. این امکان بهمون قابلیت پردازش تغییرات مقادیر ذخیره‌سازی شده توسط یه EventHandler رو میده. ساختار کد اون یه چیزی مث کد زیر میشه:

    window.onstorage = functionRef;
    

    برای مثال استفاده از رویداد onstorage رو ببینیم که کلید ذخیره و مقادیر اونو ثبت میکنه:

    window.onstorage = function (e) {
         console.log(
              "The " +
              e.key +
              " key has been changed from " +
              e.oldValue +
              " to " +
              e.newValue +
              "."
         );
    };
    

    فهرست

  46. چرا به web-storage نیاز داریم؟

    با استفاده از این قابلیت میشه گفت که فضای ذخیره‌سازی وب از امنیت بیشتری برخورداره و مقدار زیادی داده می‌تونن به صورت محلی ذخیره بشن، بدون اینکه روی عملکرد وب سایت تأثیر بذارن. همچنین، اطلاعات هرگز به سرور منتقل نمیشن و به همین دلیل این روش نسبت به کوکی‌ها بیشتر توصیه می‌شه.

    فهرست

  47. چطوری می‌تونیم پشتیبانی از web-storage توسط مرورگر رو بررسی کنیم؟

    قبل از استفاده از فضای ذخیره‌سازی وب، می‌تونیم پشتیبانی مرورگر رو برای localStorage و sessionStorage بررسی کنیم. البته مرورگرهای مدرن امروزی کاملا پشتیبانی web-storage رو ارائه میدن.

    if (typeof Storage !== "undefined") {
      // Code for localStorage/sessionStorage.
    } else {
      // Sorry! No Web Storage support..
    }
    

    فهرست

  48. چطوری می‌تونیم پشتیبانی از web-worker توسط مرورگر رو بررسی کنیم؟

    می‌تونیم برای داشتن یه کد cross-functional قبل از استفاده از وب ورکرها، پشتیبانی مرورگر رو بررسی کنیم، انجام این کار هم ساده اس و با یه شرط ساده محقق میشه:

    if (typeof Worker !== "undefined") {
      // code for Web worker support.
    } else {
      // Sorry! No Web Worker support..
    }
    

    فهرست

  49. یه مثال از web-workerها می‌تونی بزنی؟

    یه مثال ساده برای شروع استفاده از web worker‌ها میتونه مثال شمارنده باشه که برای اجرای اون باید مراحل زیر رو دنبال کنیم:


    1. ساخت یه فایل Web Worker: برای افزایش مقدار شمارشی، باید یه اسکریپت بنویسیم که این کار رو انجام میده. بیاین اسمشو counter.js بذاریم

    let i = 0;
    
    function timedCount() {
         i = i + 1;
         postMessage(i);
         setTimeout("timedCount()", 500);
    }
    
    timedCount();
    

    اینجا از روش postMessage برای ارسال پیام به صفحه HTML استفاده می‌شه.


    1. ایجاد شی Web Worker: با بررسی پشتیبانی مرورگر می‌تونیم یه شی Web Worker ایجاد کنیم. بیاین اسم این فایل رو web_worker_example.js بذاریم.

    if (typeof w == "undefined") {
         w = new Worker("counter.js");
    }
    

    روی همین شئ ما می‌تونیم پیام‌ها رو از web worker دریافت کنیم:

    w.onmessage = function (event) {
         document.getElementById("message").innerHTML = event.data;
    };
    

    1. پایان دادن به web Worker: ‌می‌دونیم که Web Workerها تا زمان خاتمه یافتن پیام‌ها(حتی بعد از اتمام یه اسکریپت خارجی) به گوش دادن ادامه میدن. برای قطع کردن گوش دادن به پیام‌ها می‌تونیم از دستور terminate استفاده کنیم.

    w.terminate();
    

    1. استفاده مجدد از web worker: اگه متغیر worker رو undefined مقداردهی کنیم، می‌تونیم از کد نوشته شده مجددا استفاده کنیم.

    w = undefined;
    

    فهرست

  50. محدودیت‌های web-workerها روی DOM چیا هستن؟

    WebWorker‌ها به اشیا جاواسکریپت دسترسی ندارن چون توی یه فایل خارجی تعریف شدن. پس به این آبجکت‌ها دسترسی نداریم:

    1. آبجکت Window

    2. آبجکت Document

    3. آبجکت Parent

    فهرست

  51. Promise چیه؟

    یه Promise آبجکت‌ای‌ـه که یه ممکنه یه callback برای موفق بودن یا رو با یه callback موفق نبودن(مثلاً خطای شبکه) فرآیند تولید کنه. پس کلا حالت‌های ممکن برای یه Promise یکی از این سه حالت خواهد بود: انجام شده، رد شده، یا در انتظار.

    برای ساختن Promise‌ها از سینتکس زیر استفاده می‌شه

    const promise = new Promise(function (resolve, reject) {
      // promise description
    });
    

    استفاده از Promiseها رو هم باهم ببینیم

    const promise = new Promise(
      (resolve) => {
        setTimeout(() => {
          resolve("I'm a Promise!");
        }, 5000);
      },
      (reject) => {
        // if we want to rejest, we can call `reject()` cb method
      }
    );
    
    /**
     * We can call promise and add some success callback functionality to run after resolve
     */
    promise.then((value) => console.log(value)); // here after 5s we will have a log in our console
    

    چرخه فرآیند یه Promise به این شکل انجام میشه:

    Screenshot

    فهرست



  52. چرا به Promise نیاز داریم؟

    Promiseها برای رسیدگی به عملیات ناهمزمان(async) استفاده می‌شن. اونا با جلوگیری از وقوع callback hell و نوشتن کد clean و تر و تمیزتر ، یه رویکرد جایگزین برای callbackها ارائه می‌کنن.

    فهرست

  53. سه تا وضعیت ممکن برای یه Promise چیا هستن؟

    Promiseها سه حالت دارن:


    1. Pending: این حالت اولیه Promise قبل از شروع عملیاته

    2. Fulfilled: این حالت نشون میده که عملیات مشخص شده تکمیل شده.

    3. Rejected: این حالت نشون میده که عملیات کامل نشده. تو این حالت یه مقدار خطا داده خواهد شد.

    فهرست

  54. توابع callback چی هستن؟

    تابع callback تابعیه که به عنوان آرگومان به تابع دیگری منتقل می‌شه. این تابع در داخل تابع خارجی برای تکمیل یه عملیات فراخوانی می‌شه.
    بیاین یه مثال ساده از نحوه استفاده از تابع callback ببینیم:

    function callbackFunction(name) {
      console.log("Hello " + name);
    }
    
    function outerFunction(callback) {
      let name = prompt("Please enter your name.");
      callback(name);
    }
    
    outerFunction(callbackFunction);
    

    فهرست

  55. چرا به توابع callback نیاز داریم؟

    چون جاواسکریپت یه زبان ایونت محوره به callback‌ها نیاز داریم. این به این معنیه که جاواسکریپت به جای منتظر موندن برای جواب یه عملیات فراخوانی شده، در حین گوش دادن به ایونت‌های دیگه به اجرا شدن ادامه میده.

    بیاین یه مثال از دو تا تابع که پشت سرهم اجرا میشن ولی یکی‌شون callback میزنه به یه API (شبیه‌سازی شده با setTimeout) و اون یکی یه لاگ کنسول ساده می‌ندازه رو ببینیم:.

    function firstFunction() {
      // Simulate a code delay
      setTimeout(function () {
        console.log("First function called");
      }, 1000);
    }
    
    function secondFunction() {
      console.log("Second function called");
    }
    
    firstFunction();
    secondFunction();
    
    // Output :
    // Second function called
    // First function called
    

    همونطور که از خروجی می‌شه فهمید، جاواسکریپت منتظر جواب تابع اول نمونده و بلوک کد باقی مونده رو اجرا کرده. بنابراین از callback‌ها می‌تونیم به شکلی استفاده کنیم که مطمئن شیم یه کد تا زمانی که اجرای کد دیگه تموم نشده، اجرا نمی‌شه.

    فهرست

  56. Callback hell یا جهنم توابع callback چیه؟

    Callback Hell اصطلاحا یه آنتی‌پترن‌ـه که با چندین callback تودرتو ایجاد میشه، همیشه هم خوندن کد و رفع خطاها رو سخت‌تر میکنه، مخصوصا زمان‌هایی که با async کار می‌کنیم. یه جهنم callback با یه کد مثل کد پایین ایجاد میشه:

    async1(function () {
      async2(function () {
        async3(function () {
          async4(function () {
            // ....
          });
        });
      });
    });
    

    فهرست

  57. Server-sent-events یا همون SSE چیه؟

    event‌های ارسال شده توسط سرور (SSE) یه فناوری server pushـه که به مرورگر این امکان رو میده که به‌روزرسانی‌های خودکار رو از طریق درخواست HTTP و بدون استفاده از polling(درخواست‌های پیوسته و منظم) دریافت کنه. این روش، یه کانال ارتباطی یه طرفه‌ـست و event‌ها فقط از سرور به client ارسال میشن. این روزا از قابلیت‌های SSE روی به‌روزرسانی‌های فیس‌بوک/تویتر، به‌روزرسانی قیمت سهام، فیدهای خبری و غیره استفاده میشه.

    فهرست

  58. چطوری می‌تونیم پیام‌های server-sent-event رو دریافت کنیم؟

    کلاس EventSource برای دریافت پیام‌های event ارسال شده از سرور استفاده می‌شه. برای مثال، می‌تونیم پیام‌هایی که میخوایین رو از سرور مثل مثال زیر بگیرین.

    if (typeof EventSource !== "undefined") {
      var source = new EventSource("sse_generator.js");
      source.onmessage = function (event) {
        document.getElementById("output").innerHTML += event.data + "<br>";
      };
    }
    

    فهرست

  59. چطوری می‌تونیم پشتیبانی مرورگر برای SSE رو بررسی کنیم؟

    می‌تونیم قبل از استفاده از SSE مانند زیر، پشتیبانی مرورگر رو با یه شرط شبیه کد زیر بررسی کنیم:

    if (typeof EventSource !== "undefined") {
      // Server-sent events supported. Let's have some code here!
    } else {
      // No server-sent events supported
    }
    

    فهرست

  60. کدوم توابع روی SSE وجود دارن؟

    این پایین یه لیست از eventهای موجود برای SSE رو ذکر می‌کنیم:

    ایونت توضیحات
    onopen موقعی که اتصال به سرور باز می‌شه استفاده می‌شه
    onmessage این event زمانی استفاده می‌شه که پیامی دریافت شه
    onerror زمانی اتفاق میوفته که خطایی رخ بده

    فهرست

  61. اصلی‌ترین قوانین Promiseها چیا هستن؟

    میشه گفت اصلی‌ترین قانون‌های Promise‌ها ایناست:

    1. Promise آبجکت‌ای‌ـه که متد «.then» رو برای منتظر پاسخ درخواست موندن ارائه میکنه.

    2. یه Promise معلق ممکنه به حالت تحقق یافته یا رد شده تبدیل بشه.

    3. Promise تمام شده یا رد شده حل و فصل می‌شه و نباید به حالت دیگری تبدیل شه.

    4. پس از اتمام Promise مقدار اون نباید تغییر کنه.

    فهرست

  62. Callback توی callback چطوری رخ میده؟

    می‌تونیم یه پاسخ api-call رو داخل یه api-call دیگر قرار بدین تا عملیات‌ها رو به شکل متوالی و یکی یکی انجام بدین. این به عنوان callback در callbacks شناخته می‌شه.

    loadScript('/script1.js', function(script) {
    
          console.log('first script is loaded');
    
          loadScript('/script2.js', function(script) {
    
               console.log('second script is loaded');
    
               loadScript("/script2.js", function (script) {
               console.log("second script is loaded");
    
               loadScript("/script3.js", function (script) {
                    console.log("third script is loaded");
                    // after all scripts are loaded
               });
          });
    });
    

    فهرست

  63. زنجیره Promiseها چیه؟

    فرآیند اجرای دنباله‌ای از عملیا‌ت‌های ناهمزمان(async) به طوریکه هر کدوم بعد از تموم شدن قبلی اجرا بشن با استفاده از Promise‌ها به عنوان Promise chaining شناخته می‌شه. بیاین برای محاسبه نتیجه نهایی یه مقدار، یه مثال از زنجیره Promiseها رو ببینیم:

    new Promise(function (resolve, reject) {
      setTimeout(() => resolve(1), 1000);
    })
      .then(function (result) {
        console.log(result); // 1
        return result * 2;
      })
      .then(function (result) {
        console.log(result); // 2
        return result * 3;
      })
      .then(function (result) {
        console.log(result); // 6
        return result * 4;
      });
    

    توی بلوک‌های کد بالا، نتیجه هر Promise به زنجیره‌های then بعدی منتقل می‌شه، فرآیندشون به شکل زیر انجام میشه:

    1. Promise اول توی 1 ثانیه حل می‌شه،

    2. پس از اون then با چاپ مقدار 1 توی کنسول، فراخوانی می‌شه و یه Promise با مقدار result ضربدر 2 برمی‌گردونه.

    3. پس از اون result به callback بعدی منتقل شده و با چاپ مقدار 2 و برگردوندن یه Promise با result ضربدر 3.

    4. در نهایت مقدار به آخرین callback رسیده و با چاپ مقدار 6 توی کنسول، یه Promise با result ضربدر 4 برمی‌گردونه`.

    5. Promise اول توی 1 ثانیه حل می‌شه،

    6. پس از اون «.then» با ثبت نتیجه (1) فراخوانی می‌شه و سپس یه Promise با مقدار نتیجه * 2 برمی‌گردونه.

    7. پس از اون مقدار به بعدی منتقل شد. سپس با ثبت نتیجه (2) و برگردوندن یه Promise با نتیجه *3.

    8. در نهایت مقدار به آخرین . سپس با ثبت نتیجه (6) و یه Promise با نتیجه * 4، handler`.

    فهرست

  64. کاربرد متد promise.all چیه؟

    Promise.all یه Promiseـه که آرایه‌ای از Promise‌ها رو به عنوان ورودی می‌گیره(یک تکرار) و زمانی resolve می‌شه که همه Promise‌ها resolve بشن، و اگه یکی از اونها رد شه reject میشه. برای مثال، تیکه کد زیر رو ببینیم:

    Promise.all([Promise1, Promise2, Promise3])
      .then((result) => {
        console.log(result);
      })
      .catch((error) => {
        console.log(`Error in promises ${error}`);
      });
    

    نکته: ترتیب خروجی Promise‌ها طبق همون ترتیب آرایه ورودی ایجاد میشه.

    فهرست

  65. هدف از متد race روی Promise چیه؟

    متد Promise.race یه آرایه از Promiseها رو می‌گیره و نتیجه اولین Promiseای resolve یا reject شده رو برمی‌گردونه. بیاین مثالی از متد race رو در نظر بگیریم که تو اون Promise2 اول resolve می‌شه:

    const promise1 = new Promise(function (resolve, reject) {
      setTimeout(resolve, 500, "one");
    });
    const promise2 = new Promise(function (resolve, reject) {
      setTimeout(resolve, 100, "two");
    });
    
    Promise.race([promise1, promise2]).then(function (value) {
      console.log(value); // "two" // Both promises will resolve, but promise2 is faster
    });
    

    فهرست

  66. حالت strict توی جاواسکریپت چی کار میکنه؟

    Strict Mode یکی از قابلیت‌های ارائه شده توی ES5 هست که به ما این امکان رو میده که یه برنامه یا یه تابع رو تو یه حالت اجرایی "سخت‌تر" قرار بدیم. به این ترتیب از انجام بعضی اقدامات جلوگیری میکنه و استثنا(Exception)های بیشتری رو ایجاد میکنه. عبارت تحت اللفظی "usestrict" به مرورگر دستور میده تا از کد جاواسکریپت در حالت Strict استفاده کنه.

    فهرست

  67. چرا به حالت strict نیاز داریم؟

    حالت سخت گیرانه(strict mode) برای نوشتن جاواسکریپت "امن" و حصول اطمینان از اطلاع از "syntax بد" برای جلوگیری از خطاهای واقعی استفاده میشه. برای مثال، ایجاد تصادفی یه متغیر گلوبال رو با ایجاد یه Exception حذف میکنه و یا یه خطا برای انتساب به یه ویژگی غیرقابل نوشتن، یه ویژگی فقط گیرنده، یه ویژگی غیرموجود، یه متغیر غیرموجود یا یه ویژگی غیر قابل نوشتن ایجاد میکنه.

    فهرست

  68. چطوری می‌تونیم حالت strict رو فعال کنیم؟

    حالت سخت با اضافه کردن رشته use strict به ابتدای scope اعلام می‌شه. پس می‌تونیم اونو به ابتدای یه اسکریپت یا یه تابع اضافه کنیم.
    اگه در ابتدای یه اسکریپت اعلام شه، دامنه عمومی داره:

    "use strict";
    x = 3.14; // This will cause an error because x is not declared
    

    و اگه در داخل یه تابع اعلام کنیم محدوده محلی داره:

    x = 3.14; // This will not cause an error.
    myFunction();
    
    function myFunction() {
         "use strict";
         y = 3.14; // This will cause an error
    }
    

    فهرست

  69. هدف از عملگر نقیض دوتایی(!!) چیه؟

    علامت نقیض دوتایی یا نفی (!!) اینه که تضمین میکنه که نوع حاصل از عملیات یه مقدار true یا falseـه و تایپش بولین‌ـه. اگه falsy بود (برای مثال 0، null، undifiend و غیره)، false میشه و در غیر این صورت، درسته و نتیجه true خواهد بود.
    برای مثال، می‌تونیم نسخه IE رو با استفاده از عبارت زیر آزمایش کنیم.

    let isIE8 = false;
    isIE8 = !!navigator.userAgent.match(/MSIE 8.0/);
    console.log(isIE8); // returns true or false
    

    اگه از این عبارت استفاده نکنیم مقدار اصلی رو برمی‌گردونه.

    console.log(navigator.userAgent.match(/MSIE 8.0/)); // returns either an Array or null
    

    نکته: !! یه اپراتور جدید نیست و فقط دوتا اپراتور ! هست.
    نکته: استفاده از !! معادل استفاده از Boolean(var) هست ولی !! سریعتره.

    فهرست

  70. هدف از عملگر delete چیه؟

    کلمه کلیدی delete برای حذف ویژگی و همچنین مقدار اون استفاده می‌شه.

    var user = { name: "John", age: 20 };
    delete user.age;
    
    console.log(user); // {name: "John"}
    

    فهرست

  71. عملگر typeof چیکار میکنه؟

    برای بدست آوردن نوع متغیر جاواسکریپت می‌تونیم از عملگر typeof استفاده کنیم و نوع یه متغیر یا یه عبارت رو به صورت یه رشته برمی‌گردونه.

    typeof "John Abraham"; // Returns "string"
    typeof (1 + 2); // Returns "number"
    

    فهرست

  72. undefined چیه و چه زمانی undefined می‌گیریم؟

    ویژگی undefined می‌گیریم که به یه متغیر مقداری اختصاص داده نشده یا اصلاً تعریف نشده‌ـست. هم نوع مقدار تعریف نشده هم تعریف نشده.

    var user; // Value is undefined, type is undefined
    console.log(typeof user); //undefined
    

    هر متغیری رو می‌شه با تنظیم مقدار روی undefined خالی کرد.

    user = undefined;
    

    فهرست

  73. null چیه؟

    مقدار null عدم وجود عمدی هر مقدار شی رو نشون میده. null یکی از مقادیر اولیه جاواسکریپت‌ـه و حواسمون باید باشه که نوع مقدار null آبجکته.
    با قرار دادن مقدار null هم می‌تونیم متغیر رو خالی کنیم.

    var user = null;
    console.log(typeof user); //object
    

    فهرست

  74. تفاوت‌های بین null و undefined چیا هستن؟

    تفاوت‌های اصلی بین null و undefined:

    Null Undefined
    یه مقدار انتسابه که نشون میده متغیر به هیچ شیئی اشاره نمیکنه. یه مقدار انتساب نیست که تو اون متغیری اعلام شده باشه اما هنوز مقداری به اون اختصاص داده نشده.
    تایپ null آبجکته تایپ undefined همون تعریف نشده و undefined هستش
    مقدار null یه مقدار اولیه اس که نشون دهنده مرجع تهی، خالی یا غیر موجوده. مقدار undefined یه مقدار اولیه اس و زمانی استفاده میشه که به یه متغیر مقداری اختصاص داده نشده باشه.
    عدم وجود مقدار برای یه متغیر رو نشون میده عدم وجود خود متغیر رو نشون میده
    در حین انجام عملیات اولیه به صفر (0) تبدیل میشه در حین انجام عملیات اولیه به NaN تبدیل می‌شه

    فهرست

  75. متد eval چیه؟

    تابع eval کد جاواسکریپت‌ای رو که به صورت رشته بهش پاس داده شده رو اجرا میکنه. رشته میتونه یه عبارت جاواسکریپت، متغیر، دستور یا دنباله ای از عبارات باشه.

    console.log(eval("1 + 2")); //  3
    

    فهرست

  76. تفاوت‌های بین window و document چیا هستن؟

    Window Document
    عنصر ریشه در هر صفحه وبه فرزند مستقیم شی window هستش و همچنین به عنوان مدل شیء document (DOM)
    به طور پیش فرض شی window به طور ضمنی در هر صفحه قرار داره می‌تونیم از طریق window.document یا document به اون دسترسی داشته باشیم.
    دارای متدهایی مانند alert، confirm و ویژگی‌هایی مانند document، location متدهایی مانند getElementById، getElementByTagName، createElement و غیره رو فراهم میکنه

    فهرست

  77. توی جاواسکریپت چطوری می‌تونیم به history دسترسی داشته باشیم؟

    شی window.history حاوی تاریخچه مرورگره. با استفاده از متدهای back و ‍next می‌تونیم URL‌های قبلی و بعدی رو در تاریخچه بارگذاری کنیم. مثلا:


    function goBack() {
         window.history.back();
    }
    function goForward() {
         window.history.forward();
    }
    

    نکته: همچنین می‌تونیم بدون پیشوند window به آبجکت history دسترسی داشته باشیم.

    فهرست

  78. انواع داده‌های جاواسکریپت کدوما هستن؟

    1. Number

    2. String

    3. Boolean

    4. Object

    5. Undefined

    فهرست

  79. isNaN چیه و چیکار میکنه؟

    تابع isNaN(Not-a-Number) برای تعیین اینه که آیا یه مقدار یه عدد واقعیه یا نه هست یا نه استفاده می‌شه. یعنی اگه مقدار برابر با NaN باشه، این تابع true برمی‌گردونه. در غیر این صورت false برمیگرده.

    isNaN("Hello"); //true
    
    isNaN("100"); //false
    

    فهرست

  80. تفاوت‌های بین undeclared و undefined چیا هستن؟

    undeclared undefined
    این متغیرها تو یه برنامه وجود ندارن و تعریف نشدن این متغیرها در برنامه هست، اما هیچ مقداری نداره
    اگه سعی کنیم مقدار یه متغیر undeclared رو بخونیم، با خطای زمان اجرا مواجه می‌شیم اگه سعی کنیم مقدار یه متغیر تعریف نشده رو بخونیم، یه مقدار تعریف نشده برگردونده می‌شه.

    فهرست

  81. کدوم متغیرها عمومی هستن؟

    متغیرهای عمومی اونایی ان که در طول کد بدون هیچ محدوده ای در دسترسن. کلمه کلیدی var برای اعلام یه متغیر محلی استفاده می‌شه اما اگه اونو حذف کنیم تبدیل به متغیر عمومی می‌شه.

    msg = "Hello"; // var is missing, it becomes global variable
    

    فهرست

  82. مشکلات متغیرهای عمومی چیا هستن؟

    مشکل متغیرهای سراسری تضاد نام متغیرها با دامنه محلی و گلوباله. دیباگ و آزمایش کدی که به متغیرهای سراسری متکیه سخته.

    فهرست

  83. مقدار NaN چیه؟

    ویژگی NaN یه ویژگی گلوباله که مقدار "Not-a-Number" رو نشون میده. یعنی نشون میده که یه مقدار یه متغیر واقعا عددی نیست. استفاده از NaN تو برنامه‌ها خیلی نداره، اما می‌شه از اون به عنوان مقدار بازگشتی یه سری توابع و برای یه سری موارد کم استفاده کرد:

    Math.sqrt(-1);
    parseInt("Hello");
    

    فهرست

  84. هدف از تابع isFinite چیه؟

    تابعisFiniteبرای تعیین اینکه آیا یه عدد یه عدد محدود و قانونیه استفاده می‌شه. اگه مقدار +infinity، -infinity یا NaN (Not-a-Number) باشه false برمی‌گردونه، در غیر این صورت true رو برمی‌گردونه.

    isFinite(Infinity); // false
    isFinite(NaN); // false
    isFinite(-Infinity); // false
    
    isFinite(100); // true
    

    فهرست

  85. یه event-flow چیه؟

    event-flow ترتیبیه که event در صفحه وب دریافت می‌شه. وقتی روی یه المنت در صفحه وب کلیک می‌کنیم و این المنت به شکل تودرتو داخل المنت‌های مختلف استفاده شده، قبل از اینکه کلیک‌مون واقعاً به مقصد یا المنت هدف برسه، باید event کلیک رو برای هر کدوم از عنصرهای والد خودش بفرسته و از بالا با شی پنجره گلوبال شروع شه.

    به شکل کلی دو راه برای جریان event وجود داره:

    1. از بالا به پایین(Event Capturing)

    2. از پایین به بالا (Event Capturing)

    3. از بالا به پایین(Event Capturing)

    4. از پایین به بالا (Event Capturing)

    فهرست

  86. Event-bubbling چیه؟

    Event-bubbling نوعی انتشار event‌ـه که تو اون event ابتدا روی درونی‌ترین عنصر هدف فراخوانی می‌شه و سپس به‌طور متوالی روی اجداد (والد) عنصر هدف تو همون سلسله مراتب تودرتو راه‌اندازی می‌شه تا زمانی که به بیرونی‌ترین عنصر DOM برسه.

    فهرست

  87. Event-capturing چیه؟

    Event-capturing نوعی انتشار event‌ـه که تو اونevent اول با بیرونی ترین عنصر ثبت می‌شه و سپس به طور متوالی بر روی children (children) عنصر هدف تو همون سلسله مراتب تودرتو راه اندازی می‌شه تا زمانی که به درونی ترین عنصر DOM برسه.

    فهرست

  88. چطوری می‌شه یه فرم رو با استفاده از جاواسکریپت ثبت کرد؟

    می‌تونیم با استفاده از جاواسکریپت فرم مورد نظرمون رو با استفاده از کد document.form[0].submit ارسال کنیم. تمام اطلاعات ورودی فرم با استفاده از onsubmit event handler ارسال می‌شه

    function submit() {
      document.form[0].submit();
    }
    

    فهرست

  89. چطوری می‌شه به اطلاعات مربوط به سیستم عامل کاربر دسترسی داشت؟

    شی window.navigator حاوی اطلاعاتی درباره جزئیات سیستم عامل مرورگر بازدیدکننده‌ـست. بعضی از ویژگی‌های سیستم عامل روی ویژگی پلتفرم در دسترس هستن:

    console.log(navigator.platform);
    

    فهرست

  90. تفاوت‌های بین رخدادهای document-load و DOMContentLoaded چیا هستن؟

    رویداد DOMContentLoaded زمانی فراخوانی می‌شه که سند اولیه HTML به‌طور کامل بارگیری و تجزیه شده باشه، بدون اینکه منتظر بمونیم تا بارگیری asset‌ها(استایل‌ها، تصاویر و فریم‌های فرعی) تموم شه. در حالی که رویداد load روی داکیومنت زمانی فراخوانی می‌شه که کل صفحه بارگیری شه، شامل همه استایل‌ها، تصاویر و ... .

    فهرست

  91. تفاوت‌های بین objectهای native ، host و user چیا هستن؟

    Native objectها آبجکت‌هایی هستن که به عنوان بخشی از زبان جاواسکریپت تعریف شدن و به عنوان بخشی از مشخصات ECMAScript هستن. برای مثال، اشیاء اصلی رشته، ریاضی، RegExp، Object، Function و غیره که در مشخصات ECMAScript تعریف شدن.
    Host objects آبجکت‌هایی هستن که توسط مرورگر یا محیط زمان اجرا (Node) ارائه می‌شن. برای مثال، پنجره، XmlHttpRequest نودهای DOM و غیره به عنوان اشیاء میزبان در نظر گرفته میشن.
    User objects آبجکت‌هایی هستن که تو کد جاواسکریپت تعریف شدن. برای مثال، آبجکت‌های ایجاد شده توسط برای اطلاعات پروفایل.

    فهرست

  92. کدوم ابزار و تکنیک‌ها برای دیباگ کردن برنامه جاواسکریپتی استفاده میشن؟

    1. Chrome Devtools

    2. عبارت debugger

    3. متد console.log

    فهرست

  93. مزایا و معایب استفاده از Promiseها به جای callback چیا هستن؟

    مزایا:

    مزایا:

    1. از جهنم callback که قابل خواندن نیست جلوگیری میکنه.

    2. نوشتن کدهای ناهمزمان متوالی با then آسون‌تره.

    3. نوشتن کد ناهمزمان موازی با Promise.all آسون‌تره.

    4. بعضی از مشکلات رایج callbackهای بازگشتی رو حل میکنه (مشکل فراخوانی بسیار دیر، خیلی زود، یا چندبار فراخوانی callback و استثناها رو مدیریتیش رو راحت‌تر میکنه).

    معایب:

    1. کد یه کمی پیچیده میشه.

    2. اگه ES6 پشتیبانی نشد باید یه polyfill بارگذاری بشه.

    3. کد کمی پیچیده می سازد

    4. اگه ES6 پشتیبانی نمی‌شه، باید یه polyfill بارگذاری کنیم

    فهرست

  94. تفاوت‌های بین attribute و property روی DOM چیا هستن؟

    Attributeها برای نشونه گذاری HTML تعریف می‌شن در حالی که propertyها روی DOM تعریف میشن برای مثال، عنصر HTML زیر دارای 2 ویژگی نوع و مقدار هستش

    <input type="text" value="Name:">
    

    می‌تونیم مقدار یه ویژگی رو به صورت زیر بدست بیاریم:

    const input = document.querySelector("input");
    console.log(input.getAttribute("value")); // Good morning
    console.log(input.value); // Good morning
    

    و بعد از اینکه مقدار فیلد متن به "Good evening" تغییر داده شد، نتیجه مثل زیر می‌شه:

    console.log(input.getAttribute("value")); // Good morning
    console.log(input.value); // Good evening
    

    فهرست

  95. سیاست same-origin چیه؟

    سیاست یا خط مشی same-origin خط مشیه که از درخواست جاواسکریپت در روی کل domain جلوگیری میکنه. مبدا به عنوان ترکیبی از شمای URI، نام میزبان(hostname) و شماره پورت(port) تعریف می‌شه. اگه این خط‌مشی رو فعال کنیم، مرورگر از دسترسی یه اسکریپت مخرب تو یه صفحه به داده‌های حساس توی صفحه وب دیگه با استفاده از DOM(Document Object Model) جلوگیری میکنه.

    فهرست

  96. هدف استفاده از void 0 چیه؟

    Void(0) برای جلوگیری از به ‌روز‌رسانی صفحه استفاده می‌شه. این متد برای از بین بردن ساید افکت‌های ناخواسته مفیده، چون مقدار اولیه تعریف نشده رو برمی‌گردونه. معمولاً برای اسناد HTML استفاده می‌شه که از href="JavaScript:Void(0)" روی تو یه عنصر <a> استفاده می‌کنن. یعنی وقتی روی یه لینک کلیک می‌کنیم مرورگر یه صفحه جدید رو بارگیری میکنه یا همون صفحه رو تازه‌سازی(reload) میکنه. ولی با استفاده از این عبارت می‌تونیم از این رفتار جلوگیری کنیم.
    :برای مثال، لینک زیر پیام رو بدون بارگیری مجدد صفحه مطلع میکنه

    <a href="JavaScript:void(0);" onclick="alert('Well done!')">Click Me!</a>
    

    فهرست

  97. جاواسکریپت یه زبان تفسیری هست یا کامپایلری؟

    جاواسکریپت یه زبان تفسیری‌ـه و نه یه زبان کامپایلری. یه مفسر توی مرورگر کد جاواسکریپت رو می خونه، هر خط رو تفسیر میکنه و اونو اجرا میکنه. امروزه مرورگرهای مدرن از فناوری موسوم به کامپایل Just-In-Time(JIT) استفاده می‌کنن که جاواسکریپت رو موقعی که در شرف اجراست به بایت کد اجرایی کامپایل میکنه.

    فهرست

  98. آیا جاواسکریپت یه زبان حساس به بزرگی و کوچکی(case-sensitive) حروف است؟

    بله، جاواسکریپت یه زبان حساس به حروف کوچک و بزرگه. کلمات کلیدی استفاده شده توی زبان، متغیرها، توابع و اشیا، و هر شناسه دیگر باید همیشه با حروف بزرگ تایپ شن.

    فهرست

  99. ارتباطی بین Java و JavaScript وجود داره؟

    نه، این دو زبان برنامه نویسی کاملاً متفاوت هستن و هیچ ارتباطی با همدیگه ندارن. اما هر دوی اونا زبان‌های برنامه نویسی شی گرا هستن و مثل خیلی از زبان‌های دیگه، از syntax مشابهی برای ویژگی‌های اساسی (if، else، for، switch، break، continue و غیره) پیروی می‌کنن.

    فهرست

  100. Eventها چی هستن؟

    رویدادها «چیزهایی» هستن که روی عناصر HTML و برای اونا اتفاق می‌افتن. موقعی که جاواسکریپت توی صفحات HTML استفاده می‌شه، میتونه به این رویدادها واکنش نشون بده و ما با استفاده از این رخدادها می‌تونیم رفتار خاصی رو موقع رخداد خاص تعریف کنیم. بعضی از نمونه‌های رویدادهای HTML عبارتند از:

    1. بارگذاری صفحه وب تموم شه

    2. فیلد ورودی تغییر کنه

    3. روی یه دکمه کلیک شه

    بیاین رفتار رویداد کلیک رو برای یه button ببینیم:

    <!DOCTYPE html>
    <html>
      <head>
        <script>
          function greeting() {
            alert("Hello! Good morning");
          }
        </script>
      </head>
      <body>
        <button type="button" onclick="greeting()">Click me</button>
      </body>
    </html>
    

    فهرست

  101. کی جاواسکریپت رو ساخته؟

    جاواسکریپت توسط Brendan Eich تو سال 1995 و موقع فعالیت ایشون توی نت اسکیپ (Netscape Communication) ایجاد شد و با نام Mocha توسعه پیدا کرد، اما بعدها زمانی که برای اولین بار در نسخه‌های بتا نت اسکیپ عرضه شد، این زبان به طور رسمی LiveScript نامیده شد.

    فهرست

  102. هدف از متد preventDefault چیه؟

    متد preventDefault اگه رویداد قابل لغو باشه، اونو لغو میکنه، به این معنی که عمل یا رفتار پیش‌فرض متعلق به رویداد اتفاق نمی‌افته. برای مثال، جلوگیری از ارسال فرم موقع کلیک بر روی دکمه ارسال و جلوگیری از باز شدن URL صفحه موقع کلیک کردن روی لینک از موارد رایج استفاده‌‌‌‌ـشه.

    document
      .getElementById("link")
      .addEventListener("click", function (event) {
        event.preventDefault();
      });
    

    نکته: همه رویدادها قابل لغو نیستن.

    فهرست

  103. کاربرد متد stopPropagation چیه؟

    روش stopPropagation برای جلوگیری از event bubbling توی یه زنجیره از رویدادها استفاده می‌شه. برای مثال، div‌های تودرتو زیر با متد stopPropagation از انتشار پیش فرض رویداد موقع کلیک روی Div1 جلوگیری میکنه.

    <p>Click DIV1 Element</p>
    <div onclick="secondFunc()">
      DIV 2
      <div onclick="firstFunc(event)">DIV 1</div>
    </div>
    
    <script>
      function firstFunc(event) {
        alert("DIV 1");
        event.stopPropagation();
      }
    
      function secondFunc() {
        alert("DIV 2");
      }
    </script>
    

    فهرست

  104. مراحلی که موقع استفاده از return false توی یه event-handler رخ میده چیا هستن؟

    عبارت ‍‍‍‍return false تو event-handler مراحل زیر رو انجام میده:

    1. ابتدا عملکرد یا رفتار پیش فرض مرورگر رو متوقف میکنه.

    2. رویداد از انتشار DOM جلوگیری میکنه.

    3. اجرای ‍‍callback رو متوقف میکنه و بلافاصله پس از فراخونی بر می‌گرده.

    فهرست

  105. BOM چیه؟

    مدل آبجکتی مرورگر (BOM) به جاواسکریپت اجازه میده تا با مرورگر صحبت کنه. این مدل شامل navigation، history، page، location و document که فرزندان window هستن. BOM مدل استاندارد همه مرورگرها نیست و می‌تونه بر اساس مرورگرهای مختلف تغییر کنه.

    Screenshot


    فهرست

  106. موارد استفاده از setTimeout کدوما هستن؟

    متد setTimeout برای فراخونی یه تابع یا ارزیابی یه عبارت پس از میزان مشخصی از زمان(میلی ثانیه) استفاده می‌شه. برای مثال، بیاین یه پیام رو پس از 2 ثانیه با استفاده از متد setTimeout چاپ کنیم:

    setTimeout(function () {
      console.log("Good morning");
    }, 2000);
    

    فهرست

  107. موارد استفاده از setInterval کدوما هستن؟

    متد setInterval برای فراخوانی یه تابع یا ارزیابی یه عبارت در بازه‌های زمانی مشخص (بر حسب میلی ثانیه) استفاده می‌شه. برای مثال، بیاین یه پیام رو هر 2 ثانیه با استفاده از متد setInterval چاپ کنیم:

    setInterval(function () {
      console.log("Good morning");
    }, 2000);
    

    فهرست

  108. چرا جاواسکریپت رو به عنوان یه زبان تک thread می‌شناسن؟

    چون مشخصات زبان به برنامه نویس اجازه نمیده تا کدی بنویسه که مفسر بتونه بخش‌هایی از اونو به صورت موازی در چندین Thread یا پردازش اجرا کنه. در حالی که زبان‌هایی مانند java، go، C++ میتونن برنامه‌های چند رشته‌ای و چند فرآیندی بسازن.

    فهرست

  109. Event-delegation چیه؟

    Event-delegation تکنیکی برای گوش دادن به رویدادهاس که تو اون یه عنصر والد رو به عنوان شنونده برای همه رویدادهایی که در داخلش اتفاق می‌افتن، تفویض می‌کنیم.

    برای مثال، اگه می‌خواین تغییرات فیلد رو تو یه فرم خاص تشخیص بدین، می‌تونیم از تکنیک Event-delegation استفاده کنیم.

    var form = document.querySelector("#registration-form");
    
    // Listen for changes to fields inside the form
    form.addEventListener(
      "input",
      function (event) {
    
        // Log the field that was changed
        console.log(event.target);
    
      },
      false
    );
    

    فهرست

  110. ECMAScript چیه؟

    ECMAScript زبان برنامه نویسیه که اساس جاواسکریپت رو تشکیل میده. ECMAScript توسط سازمان استانداره بین المللی ECMA در مشخصات ECMA-262 و ECMA-402 استانداره شده است. اولین نسخه ECMAScript در سال 1997 منتشر شد.

    فهرست

  111. JSON چیه؟

    JSON (JavaScript Object Notation) یه فرمت سبک هستش که برای تبادل داده‌ها استفاده می‌شه. اصول اولیه جیسون بر اساس زیرمجموعه‌ای از زبان جاواسکریپت‌ـه و مشابه آبجکت اشیاییه که توی جاواسکریپت ساخته میشن.

    فهرست

  112. قوانین فرمت JSON کدوما هستن؟

    1. داده‌ها به صورت جفت نام/مقدار هستن

    2. داده‌ها با کاما از هم جدا میشن

    3. براکت‌ها اجسام رو نگه می‌دارن

    4. کروشه‌ها آرایه‌ها رو نگه می‌دارن

    فهرست

  113. هدف از متد JSON.stringify چیه؟

    موقع ارسال داده‌ها به وب سرور، داده‌ها باید در قالب رشته‌ای باشن. می‌تونیم با استفاده از متد stringify آبجکت JSON رو به رشته متنی تبدیل کنیم. مثل:

    var userJSON = { name: "John", age: 31 };
    var userString = JSON.stringify(user);
    console.log(userString); //"{"name":"John","age":31}"
    

    فهرست

  114. چطوری می‌تونیم یه رشته JSON رو تجزیه کنیم؟

    موقع دریافت داده‌ها از یه وب سرور، داده‌ها همیشه در قالب رشته‌ متنی هستن. اما می‌تونیم این مقدار رشته رو با استفاده از متد parse به یه آبجکت جاواسکریپت تبدیل کنیم.

    var userString = '{"name":"John","age":31}';
    var userJSON = JSON.parse(userString);
    console.log(userJSON); // {name: "John", age: 31}
    

    فهرست

  115. چرا به JSON نیاز داریم؟

    موقع تبادل داده بین مرورگر و سرور، داده‌ها به دلیل تبادل شدن با استفاده از پروتکل Http فقط میتونن متنی باشن. از اونجایی که JSON فقط متنی‌ـه میشه اونو به راحتی به سرور ارسال کرد و از اون به عنوان قالب داده برای هر زبان برنامه‌نویسی استفاده کرد.

    فهرست

  116. PWAها چی هستن؟

    Progressive web applications (PWAs) نوعی از برنامه‌های تلفن همراه هستن که از طریق وب ارائه میشن، و با استفاده از فناوری‌های رایج وب از جمله HTML، CSS و جاواسکریپت ساخته میشن. PWA‌ها در سرورها قرار می‌گیرن و از طریق آدرس صفحه وب قابل دسترسی و نصب هستن.

    فهرست

  117. هدف از متد clearTimeout چیه؟

    تابع clearTimeout در جاواسکریپت برای پاک کردن بازه زمانی استفاده می‌شه که قبل از اون توسط تابع setTimeout تنظیم شده. یعنی مقدار بازگشتی تابع setTimeout تو یه متغیر ذخیره می‌شه و برای پاک کردن تایمر به تابع clearTimeout پاس داده می‌شه.

    برای مثال، از تابع setTimeout موجود توی کد پایین برای نمایش پیام بعد از 3 ثانیه استفاده می‌شه. این مهلت زمانی رو می‌شه با تابع clearTimeout پاک کرد.

    <script>
    var msg;
    
    function greeting() {
         alert("Good morning");
    }
    
    function start() {
         msg = setTimeout(greeting, 3000);
    }
    
    function stop() {
         clearTimeout(msg);
    }
    </script>
    

    فهرست

  118. هدف از متد clearInterval چیه؟

    تابع clearInterval تو جاواسکریپت برای پاک کردن interval که توسط تابع setInterval تنظیم شده استفاده می‌شه. برای مثال، مقدار بازگشتی که توسط تابع setInterval برمی گرده تو یه متغیر ذخیره می‌شه و برای پاک کردن interval به تابع clearInterval ارسال می‌شه.

    برای مثال، از تابع setInterval توی کد پایینی برای نمایش پیام در هر 3 ثانیه استفاده می‌شه. این بازه رو می‌شه با تابع clearInterval پاک کرد.

    <script>
    var msg;
    
    function greeting() {
         alert("Good morning");
    }
    
    function start() {
         msg = setInterval(greeting, 3000);
    }
    
    function stop() {
         clearInterval(msg);
    }
    </script>
    

    فهرست

  119. توی جاواسکریپت، چطوری می‌شه به یه صفحه جدید redirect انجام داد؟

    در vanila جاواسکریپت(جاواسکریپت خام یا خالص هم میگن)، می‌تونیم با استفاده از ویژگی location آبجکت گلوبال window به صفحه جدیدی هدایت بشین.

    function redirect() {
         window.location.href = "newPage.html";
    }
    

    فهرست

  120. چطوری بررسی می‌کنیم که یه string شامل یه substring هست یا نه؟

    سه روش برای بررسی اینکه یه رشته دارای یه رشته فرعیه یا نه، وجود داره.

    1. استفاده از متد includes: ES6 روش String.prototype.includes‍ رو برای آزمایش یه رشته حاوی یه رشته فرعی ارائه کرد.

    var mainString = "hello",
      subString = "hell";
    mainString.includes(subString);
    
    1. استفاده از متد indexOf: توی محیط ES5 یا قدیمی‌تر، می‌تونیم از String. prototype.indexOf استفاده کنیم که index یه رشته فرعی رو برمی‌گردونه. اگه مقدار برابر با 1 نباشه، یعنی رشته فرعی توی رشته اصلی وجود داره.

    var mainString = "hello",
      subString = "hell";
    mainString.indexOf(subString) !== -1;
    
    1. استفاده از Regex: راه حل پیشرفته از روش test عبارت Regular ('RegExp.test')‍‍استفاده میکنه، که امکان آزمایش در برابر عبارات منظم رو فراهم میکنه.

    var mainString = "hello",
      regex = /hell/;
    regex.test(mainString);
    

    فهرست

  121. توی جاواسکریپت، چطوری مقدار یه آدرس email رو اعتبارسنجی می‌کنیم؟

    می‌تونیم با استفاده از Regex ایمیل رو توی جاواسکریپت تأیید کنیم. توصیه می‌شه به جای سمت کلاینت، اعتبارسنجی سمت سرور انجام شه. چون جاواسکریپت رو می‌شه سمت کلاینت غیرفعال کرد.

    function validateEmail(email) {
      var re =
        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(String(email).toLowerCase());
    }
    

    فهرست

    Regex بالا کاراکترهای یونیک رو می پذیرد.

  122. چطوری می‌تونیم مقدار آدرس url جاری رو بخونیم؟

    می‌تونیم از عبارت window.location.href برای دریافت مسیر آدرس فعلی استفاده کنیم و می‌تونیم از همون عبارت برای به‌روزرسانی URL هم استفاده کنیم. همچنین می‌تونیم از document.URL برای اهداف فقط خواندنی استفاده کنیم اما این راه‌حل مشکلاتی در FF داره.

    console.log("location.href", window.location.href); // Returns full URL
    

    فهرست

  123. ویژگی‌های مختلف url روی object مربوط به history کدوما هستن؟

    برای دسترسی به اجزای URL صفحه می‌توان از ویژگی‌های شی location زیر استفاده کرد.

    1. href - ورودی URL

    2. protocol - پروتکل استفاده شده URL

    3. host -‌هاست و پورت URL

    4. hostname -‌هاست URL

    5. port - شماره پورت URL

    6. pathname - مسیر URL

    7. search - قسمت جستجو URL

    8. hash - محل جای‌گیری URL

    فهرست

  124. توی جاواسکریپت چطوری می‌تونیم مقدار یه query-string رو بخونیم؟

    می‌تونیم از URLSearchParams برای دریافت مقادیر رشته پرس و جو توی جاواسکریپت استفاده کنیم. بیاین مثالی برای دریافت مقدار کد مشتری از رشته پرس و جو URL ببینیم:

    const urlParams = new URLSearchParams(window.location.search);
    const clientCode = urlParams.get("clientCode");
    

    فهرست

  125. چطوری می‌تونیم بررسی کنیم که آیا یه پراپرتی روی آبجکت وجود داره یا نه؟

    1. استفاده از عملگر‌ها: می‌تونیم از عملگر in استفاده کنیم که آیا کلیدی توی آبجکت وجود داره یا نه

    "key" in obj;
    

    برای بررسی وجود یا عدم وجود کلید، باید از پرانتز استفاده کنیم

    !("key" in obj);
    
    1. استفاده از متد hasOwnProperty: می‌تونیم از hasOwnProperty برای آزمایش ویژگی‌های نمونه آبجکت (و نه ویژگی‌های ارثی) استفاده کنیم.

    obj.hasOwnProperty("key"); // true
    
    1. استفاده از مقایسه undifiend: اگه بخوایم از یه آبجکت به یه ویژگی غیر موجود دسترسی پیدا کنیم، بهمون undifiend برمیگردونه. بیاین ویژگی‌ها را با undefined مقایسه کنیم تا وجود ویژگی را مشخص کنیم.

    const user = {
      name: "John",
    };
    
    console.log(user.name !== undefined); // true
    console.log(user.nickName !== undefined); // false
    

    فهرست

  126. چطوری روی یه object حلقه میزنی؟

    می‌تونیم از حلقه for-in برای حلقه زدن آبجکت جاواسکریپت استفاده کنیم. همچنین می‌تونیم مطمئن شیم که کلیدی که دریافت می‌کنیم ویژگی واقعی یه آبجکته و با استفاده از روش hasOwnProperty از prototype، نیست.

    var object = {
      k1: "value1",
      k2: "value2",
      k3: "value3",
    };
    
    for (let key in object) {
      if (object.hasOwnProperty(key)) {
        console.log(key + " -> " + object[key]); // k1 -> value1 ...
      }
    }
    

    فهرست

  127. چطوری تست می‌کنی که یه object خالیه؟

    راه حل‌های مختلفی بر اساس نسخه‌های ECMAScript وجود داره

    1. استفاده Object entries(ECMA 7+):
      میتونیم از object entries استفاده کنیم و length اونا رو چک کنیم
    Object.entries(obj).length === 0 && obj.constructor === Object; // Since date object length is 0, you need to check constructor check as well
    
    1. استفاده از Object keys(ECMA 5+):
      می‌تونیم ازobject keys‍ استفاده کنیم و length‍ اونو چک کنیم
    Object.keys(obj).length === 0 && obj.constructor === Object; // Since date object length is 0, you need to check constructor check as well
    
    1. استفاده از for-in با متد hasOwnProperty (Pre-ECMA 5):
      می‌تونیم از حلقه for-inاستفاده کنیم و هر پارامتر رو با hasOwnProperty‍ چک کنیم
    function isEmpty(obj) {
      for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          return false;
        }
      }
    
      return JSON.stringify(obj) === JSON.stringify({});
    }
    

    فهرست

  128. arguments object چیه؟

    آبجکت arguments یه آبجکت آرایه ماننده که داخل توابع قابل دسترسیه و حاوی مقادیر آرگومان‌های ارسال شده به اون تابعه. برای مثال، بیاین ببینیم چطوری از آبجکت arguments توی تابع sum استفاده کنیم:

    function sum() {
      var total = 0;
      for (var i = 0, len = arguments.length; i < len; ++i) {
        total += arguments[i];
      }
      return total;
    }
    
    sum(1, 2, 3); // returns 6
    

    نکته: ما نمی‌تونیم از متد‌های ارایه برای آبجکت arguments استفاده کنیم اما می‌تونیم به ارایه تبدیلش کنیم

    let argsArray = [...arguments];
    

    فهرست

  129. چطوری حرف اول یه رشته رو به حرف بزرگ تبدیل می‌کنی؟

    می‌تونیم با درست کردن یه تابع و با استفاده از زنجیره ای از متد‌های string مثلا charAt و toUpperCase و slice یه string با حرف اول بزرگ ایجاد کنیم

    function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
    

    فهرست

  130. مزایا و معایب حلقه for چیا هستن؟

    حلقه for یه syntax تکرار رایجه که از مزایا و معایبش میشه به موارد زیر اشاره کرد:

    مزایا

    1. توی همه‌ی محیط‌ها env کار میکنه

    2. می‌تونیم از break و ‍continue‍ برای کنترل جریان داده استفاده کنیم

    معایب

    1. از لحاظ نوشتاری کد بیشتری باید نوشته بشه

    2. Imperative هست

    3. ممکنه با خطاهای one-by-off روبرو بشیم

    فهرست

  131. چطوری تاریخ جاری رو توی جاواسکریپت نشون میدی؟

    می‌تونیم از کلاس new Date استفاده کنیم و با اجرای متد toLocaleString() تاریخ و زمان جدا شده توسط کاما رو بدست بیاریم :

    const today = new Date().toLocaleString();
    console.log(today.split(",")[0]); // 5/19/2022
    

    فهرست

  132. چطوری دو تا date object رو با هم مقایسه می‌کنی؟

    برای این مقایسه نباید از اپراتور‌ها استفاده کنیم. میتونیم مثل کد زیر از متد getTime که بر روی آبجکت Date قرار داره استفاده کنیم

    var d1 = new Date();
    var d2 = new Date(d1);
    console.log(d1.getTime() === d2.getTime()); //True
    console.log(d1 === d2); // False
    

    فهرست

  133. چطوری بررسی می‌کنی که یه رشته با یه رشته دیگه شروع می‌شه؟

    می‌تونیم از متد startWith که بر روی پروتوتایپ String وجود داره استفاده کنیم که یه رشته رو می‌گیره و چک میکنه که رشته مورد نظر با اون رشته شروع میشه یا نه، برای مثال کد زیر رو براش مینویسیم:

    "Good morning".startsWith("Good"); // true
    "Good morning".startsWith("morning"); // false
    

    فهرست

  134. چطوری یه رشته رو trim می‌کنی؟

    جاواسکریپت یه متد به ما میده به اسم trim که روی رشته‌ها قرار داره با استفاده از این متد همه ی فضاهای خالی بین اون رشته برداشته می‌شه

    "  Hello World   ".trim(); //Hello World
    

    فهرست

  135. توی جاواسکریپت چطوری می‌تونیم یه زوج مرتب از key یه valueها بسازیم؟

    برای اضافه کردن key جدید به آبجکت‌ها دو روش وجود داره

    var object = {
      key1: value1,
      key2: value2,
    };
    
    1. استفاده از dot: این روش زمانی موثر هستش که اسم پراپرتی رو میدونیم

    object.key3 = "value3";
    
    1. استفاده از کروشه[]: این روش زمانی موثر هستش که اسم پراپرتی داینامیک باشه

    obj["key3"] = "value3";
    

    فهرست

  136. آیا عبارت '--!' عملگر خاصی هست؟

    نه! اپراتور خاص نیست اما ترکیب دو تا اپراتور استاندار هستش یکی بعد اون یکی

    1. اپراتور نقییض (!)

    2. کاهش کننده(--)

    اول یه شماره از مقدار متغیر به مثال کم می‌شه بعد تست می‌شه که مساوی صفر هستش یا نه، که مشخص‌کننده درست یا غلط بودن شرط هست

    فهرست

  137. چطوری می‌تونیم به متغیرهامون مقادیر اولیه بدیم؟

    می‌تونیم از عملگر یا اپراتور ‍|| برای تعریف یه مقدار پیش‌فرض استفاده کرد:

    var a = b || c;
    

    مثال تعریف شده بالا مقدار متغیر a زمانی برابر مقدار متغیر c خواهد شد که b خالی false یا undifined باشه.

    فهرست

  138. چطوری می‌تونیم متن‌های چند خطی درست کنیم؟

    می‌تونیم از / برای تعریف کردن رشته‌های چند خطی استفاده کنیم برای مثال:

    const str =
      "This is a \
    very lengthy \
    sentence!";
    

    اما اگه یه فاصله بعد ‍‍‍/ داشته باشیم,کد دقیقا به همون حالتی که هست نشون داده می‌شه اما یه ارور خطای نوشتاری کد قراره داشته باشیم


    روش بعدی استفاده کردن از backtick هست که وقتی موقع تعریف رشته به جای کوتیشن مارک ازش استفاده بشه میتونیم راحت یه رشته چند خطی تعریف کنیم. برای مثال میشه کد زیر رو براش نوشت:

    const str = `This is a 
    very lengthy 
    sentence!`;
    

    فهرست

  139. مدل app-shell چیه؟

    application shell (shell) یکی از راه‌های ساخت PWA هستش که به طور قابل اعتماد و فوری بر روی صفحه نمایش کاربران شما بارگیری می‌شه، مشابه اونی‌که توی برنامه‌های کاربردی native به کاربر نشون داده میشه. برای رسوندن سریع HTML اولیه به صفحه بدون نیاز به شبکه مفیده.

    فهرست

  140. چطوری می‌تونیم روی یه تابع property اضافه کنیم؟

    می‌تونیم برای توابع پراپرتی تعیین کنیم چون توابع اصولا آبجکت هستن.

    const fn = function (x) {
      //Function code goes here
    };
    
    
    fn.userName = "John";
    
    fn.profile = function (y) {
      //Profile code goes here
    };
    

    فهرست

  141. چطوری می‌تونیم تعداد پارامترهای ورودی یه تابع رو به دست بیاریم؟

    با استفاده کردن از function.length می‌تونیم به تعداد پارامتر‌هایی که یه تابع انتظار داره بگیره دسترسی داشته باشیم.
    بریم یه مثال درموردش ببینیم:

    function sum(num1, num2, num3, num4) {
      return num1 + num2 + num3 + num4;
    }
    sum.length; // 4 is the number of parameters expected.
    

    فهرست

  142. Polyfill چیه؟

    plyfill یه قسمت از کد جاواسکریپت‌ـه که با استفاده از اون ما می‌تونیم توابع پیشرفته رو روی مروگر‌هایی که به طور طبیعی پشتیبانی نمیکنن,استفاده کنیم. پلاگین Silverlight که برای تقلید کردن توابع بر روی canvas یا مروگر IE7 استفاده کرد

    فهرست

  143. عبارات Break و continue چی هستن؟

    دستور break برای "پرش به بیرون" از یه حلقه استفاده می‌شه. یعنی حلقه رو می‌شکنه و اجرای کد رو بعد از حلقه ادامه میده.

    for (i = 0; i < 10; i++) {
      if (i === 5) {
        break;
      }
      text += "Number: " + i + "<br>";
    }
    

    دستور continue برای "پرش از روی" یه تکرار در حلقه استفاده می‌شه. یعنی یه تکرار (در حلقه) رو می‌شکنه، اگه شرایط مشخصی رخ بده، و با تکرار بعدی در حلقه ادامه میده.

    for (i = 0; i < 10; i++) {
      if (i === 5) {
        continue;
      }
      text += "Number: " + i + "<br>";
    }
    

    فهرست

  144. توی جاواسکریپت labelها چیکار می‌کنن؟

    دستور label به ما اجازه میده تا حلقه‌ها و بلوک‌ها رو توی جاواسکریپت نام گذاری کنیم. بعد می‌تونیم از این برچسب‌ها برای مراجعه به کد استفاده کنیم. برای مثال، کد زیر با استفاده از برچسب‌ها از چاپ اعداد وقتی که یکسان هستن، جلوگیری میکنه.

    loop1: for (let i = 0; i < 3; i++) {
      loop2: for (let j = 0; j < 3; j++) {
        if (i === j) {
          continue loop1;
        }
        console.log("i = " + i + ", j = " + j);
      }
    }
    
    // Output is:
    //   "i = 1, j = 0"
    //   "i = 2, j = 0"
    //   "i = 2, j = 1"
    

    فهرست

  145. مزایای declare کردن متغیرها در اوایل کد چیه؟

    توصیه می‌شه که تمام تعریف متغیر‌ها رو بالای هر اسکریپت یا تابع انجام بدیم. مزیت این کار:

    1. کد ما تمیز تر می‌شه

    2. یه مکان واحد برای جستجوی متغیرهای محلی فراهم میکنه

    3. می‌شه راحت از استفاده متفیر‌های ناخواسته جلوگیری کرد

    4. این کار محاسبات ناخواسته رو کمتر میکنه

    فهرست

  146. مزایای مقداردهی اولیه متغیرها چیه؟

    توضیه می‌شه که حتما یه مقدار اولیه برای متغیرها تعیین بشه که دلایلشو چک می‌کنیم

    1. خروجیمون کد تمیز تری می‌شه

    2. این کار باعث می‌شه یه جا برای این متغییر رزرو بشه

    3. از برگشتن خطای undefindجلوگیری می‌شه

    فهرست

  147. روش توصیه شده برای ایجاد object چیه؟

    برای ساخت یه object با مقادیر پیش‌فرض میتونیم به صورت زیر عمل کنیم

    1. استفاده از {} به جای new Object

    2. استفاده از "" به جای new String

    3. استفاده از 0 به جای new Number

    4. استفاده از false به جای new Boolean

    5. استفاده از [] به جای new Array

    6. استفاده از /()/ به جای new RegExp

    7. استفاده از (){} به جایnew Function

    بریم چند تا مثال ببینیم:

    const v1 = {};
    const v2 = "";
    const v3 = 0;
    const v4 = false;
    const v5 = [];
    const v6 = /()/;
    const v7 = function () {};
    

    فهرست

  148. چطوری می‌تونیم آرایه‌ JSON تعریف کنیم؟

    برای تعریف آرایه‌های JSON از براکت استفاده میکنیم و هر تعداد که آبجکت خواستیم داخلش تعریف میکنیم.
    بیاین یه مثال در موردش ببینیم

    "users":[
      {"firstName":"John", "lastName":"Abrahm"},
      {"firstName":"Anna", "lastName":"Smith"},
      {"firstName":"Shane", "lastName":"Warn"}
    ]
    

    فهرست

  149. چطوری می‌تونیم اعداد تصادفی تولید کنیم؟

    می‌تونیم از متد Math.random برای ساخت یه عدد رندوم بین 0 تا 1 و از متد Math.floor برای رند کردن اون عدد استفاده کنیم حالا اگه حاصل عدد به دست اومده رو ضربدر ده کنیم عددی بین یک تا ده خواهیم داشت

    Math.floor(Math.random() * 10) + 1; // returns a random integer from 1 to 10
    Math.floor(Math.random() * 100) + 1; // returns a random integer from 1 to 100
    

    نکته: Math.random یه عدد تصادفی بین 0 تا 1 ایجاد میکنه، یادمون باشه که استفاده از Math.floor قبل ضرب کردن عدد رندوم به دست اومده در ده به عنوان کمترین مقدار، باعث میشه که خروجیمون همیشه به صفر رند بشه.

    فهرست

  150. می‌تونی یه تابع تولید اعداد تصادفی توی یه بازه مشخص بنویسی؟

    بله ما می‌تونیم کد زیر رو برای این تابع داشته باشیم که مقادیر حداکثر و حداقل رو بگیره و برای ما عدد رندوم ایجاد کنه:

    function randomInteger(min, max) {
      return Math.floor(Math.random() * (max - min + 1) ) + min;
    }
    randomInteger(1, 100); // returns a random integer from 1 to 100
    randomInteger(1, 1000); // returns a random integer from 1 to 1000
    

    فهرست

  151. Tree-shaking چیه؟

    Tree Shaking نوعی حذف کد مرده هستش و به این معنیه که ماژول‌های استفاده نشده در طول فرآیند ساخت در بسته گنجونده نمی‌شن و برای اون بر ساختار استاتیک ماژول ES2015 متکیه (یعنی import و export). توی باندلر ماژول ES2015 'rollup' از این عملکرد استفاده شده.

    فهرست

  152. دلایل نیاز به tree-shaking کدوما هستن؟

    Tree Shaking می‌تونه اندازه کد رو در هر برنامه ای به میزان قابل توجهی کاهش بده. یعنی هرچی کد کمتری از طریق سیم بفرستیم برنامه کاربردی تره. به عنوان مثال، اگه فقط بخواهیم یه برنامه Hello World با استفاده از چارچوب‌های SPA ایجاد کنیم، حدود چند مگابایت حافظه رو اشغال میکنه، اما tree-shaking می‌تونه اندازه رو به چند صد کیلوبایت کاهش بده. tree-shaking تو باندلرهای Rollup و Webpack پیاده سازی شده.

    فهرست

  153. آیا استفاده از eval توصیه می‌شه؟

    نه، eval اجازه اجرای کد دلخواه رو میده که باعث ایجاد مشکل امنیتی می‌شه. همونطور که میدونیم از تابع eval برای اجرای متن به عنوان کد استفاده می‌شه. در بیشتر موارد استفاده از اون ضروری نیست.

    فهرست

  154. Regular-Expression چیه؟

    regular expression یا همون Regex یه توالیه که یه ساختار جستجو ایجاد میکنه با استفاده از این ساختار ما می‌تونیم دیتامون رو جستجو کنیم و به قولی دیتامون رو اعتبارسنجی کنیم.

    /pattern/modifiers;
    

    برای مثال Regex حساس به حروف کوچک و بزرگ زبان انگلیسی به صورت ریر نوشته می‌شه:

    /John/i
    

    فهرست

  155. متدهای رشته که روی Regular-expression مجاز هستن کدوماست؟

    Regular Expressions دو تا متد برای رشته‌ها داره :‌ search و replace. متد search یه عبارت رو می‌گیره اونو جستجو میکنه و محل اون عبارت رو برمی‌گردونه:

    var msg = "Hello John";
    var n = msg.search(/John/i); // 6
    

    متد replace برای برگردوندن رشته اصلاح شده تو جایی که الگو جایگزین می‌شه، استفاده می‌شه:

    var msg = "Hello John";
    var n = msg.replace(/John/i, "Buttler"); // Hello Buttler
    

    فهرست

  156. توی Regex بخش modifiersها چیکار میکنه؟

    Modifiers‌ها میتونن زمانی استفاده بشن که به جستجو‌های بدون حروف کوچک و بزرگ سراسری نیاز داریم بیاین یه مثال درموردشون ببینیم:

    اصلاح کننده توضیح
    i تظبیق حساس به حروف
    g تطبیق کلی به جای توقف در اولین تشابه
    m تطبیق چندخطی

    بریم یه مثال از modifier گلوبال ببینیم:

    const text = "Learn JS one by one";
    const pattern = /one/g;
    const result = text.match(pattern); // one,one
    

    فهرست

  157. پترن‌های regular-expression چیه؟

    Regex یه گروهی از ساختار‌ها برامون اماده کرده که با اونا کاراکتر‌ها رو چک کنیم اونا تو سه مدل طبفه بندی میشن.


    1. براکت‌ها: برای پیدا کردن رنجی از کاراکتر استفاده میشن
      برای مثال پایین چن تا مورد استفاده لیست شدن
      1. [abc]: برای پیدا کردن هر کاراکتری بین این سه کاراکتر استفاده میشه

      2. [0-9]: برای پیدا کردن ارقام بین این دو عدد استفاده میشه

      3. (a|b): برای پیدا کردن هر یه از گزینه‌های جدا شده با | استفاده می‌شه


    1. کاراکتر برابر با: این عبارت‌ها کاراکتر‌هایی با معنی خاص هستن
      برای مثال پایین سه تا مورد که استفاده می‌شه ازشون رو ببینیم
      1. \d: برای پیدا کردن اعداد استفاده میشه

      2. \s: برای پیدا کردن فاصله‌ها استفاده میشه

      3. \b: برای پیدا کردن کاراکتر‌های همخوانی داشته با شروع شدن یا پایانشون استفاده میشه


    1. کمیت کننده‌ها: این‌ها برای تعریف کمیت‌ها موثر هستن
      برای مثال پایین دو تا مورد استفاده براشون اوردیم
      1. n+: برای پیدا کردن رشته همخوانی داشته با حداقل یه کاراکتر

      2. n*: برای پیدا کردن همخوانی هر رشته شامل صفر یا بیشتر

      3. n?: برای پیدا کردن هر رشته که شامل صفر یا یه کاراکنر می‌شه

    فهرست

  158. آبجکت RegExp چیه؟

    object‌های Regex یه عبارت معمولی با پراپرتی‌ها و متد‌های تعریف شده از قبل هس. بریم یه مثال از نحوه استفادشون ببینیم.

    var regexp = new RegExp('\\w+');
    console.log(regexp);
    // expected output: /\w+/
    

    فهرست

  159. چطوری روی یه رشته دنبال یه پترن RegExp می‌گردی؟

    می‌تونیم از متد test عبارت منظم برای جستجوی یه رشته برای الگو استفاده کنیم که بسته به نتیجه، true یا false رو برمیگردونه.

    var pattern = /you/;
    console.log(pattern.test("How are you?")); //true
    

    فهرست

  160. هدف از متد exec چیه؟

    هدف متد exec شبیه به روش تسته اما جستجوی یه تطابق تو یه رشته مشخص رو انجام میده و یه آرایه نتیجه یا null رو به جای برگردوندن true/false برمی‌گردونه.

    var pattern = /you/;
    console.log(pattern.exec("How are you?")); //["you", index: 8, input: "How are you?", groups: undefined]
    

    فهرست

  161. چطوری استایل‌های یه المنت HTML رو تغییر میدی؟

    می‌تونیم سبک درون خطی یا اسم کلاس یه عنصر HTML رو با استفاده از جاواسکریپت تغییر بدین


    1. استفاده از پراپرتی style: با استفاده از ویژگی style می‌تونیم استایل درون خطی رو تغییر بدین

    document.getElementById("title").style.fontSize = "30px";
    
    1. استفاده از پراپرتی className: تغییر کلاس عنصر با استفاده از ویژگی className آسان است

     document.getElementById("title").style.className = "custom-title";
    

    فهرست

  162. نتیجه عبارت 1+2+'3' چی می‌شه؟

    خروجی '33' می‌شه. از اونجایی که «1» و «2» مقادیر عددی هستن، نتیجه دو رقم اول یه مقدار عددی «3» خواهد بود. رقم بعدی یه مقدار نوع رشته اس چون افزودن مقدار عددی «3» و مقدار رشته «3» فقط یه مقدار الحاقی «33» می‌شه.

    فهرست

  163. عبارت debugger چیکار میکنه؟

    دستور debugger هر گونه عملکرد اشکال زدایی موجود رو فراخوانی میکنه، مانند تعیین breakpoint. اگه هیچ عملکرد اشکال زدایی در دسترس نباشه، این عبارت تاثیری نداره.
    برای مثال، در تابع زیر یه دستور debugger درج شده. بنابراین اجرا تو دستور debugger مثل یه breakpoint در منبع اسکریپت متوقف می‌شه.

    function getProfile() {
    // code goes here
    debugger;
    // code goes here
    }
    

    فهرست

  164. هدف از breakpointها توی debugging چیه؟

    پس از اجرای دستور debugger و باز شدن پنجره دیباگر، می‌تونیم breakpointها رو در کد جاواسکریپت تنظیم کنیم. در هر breakpoint، جاواسکریپت اجرا نمی‌شه و به ما اجازه میده مقادیر جاواسکریپت رو بررسی کنیم. پس از بررسی مقادیر، می‌تونیم با استفاده از دکمه پخش، اجرای کد رو ادامه بدیم.

    فهرست

  165. آیا می‌تونیم از عبارت‌های رزرو شده در تعریف identifierها(اسم متغیر، کلاس و ...) استفاده کنیم؟

    نه، ما نمی‌تونیم از کلمات رزرو شده به عنوان متغیر، برچسب، اسم آبجکت یا تابع استفاده کنیم. بیاین یه مثال ساده رو ببینیم:

    let else = "hello"; // Uncaught SyntaxError: Unexpected token else
    

    فهرست

  166. چطوری تشخیص بدیم که یه مرورگر mobile هست یا نه؟

    ما می‌تونیم با استفاده از Regex که یه boolean به ما برمی‌گردونه بفهمیم که مرورگری که کاربر داره ازش استفاده میکنه موبایل هست یا نه، کد تشخیص به این صورت نوشته میشه:

    window.mobilecheck = function() {
      var mobileCheck = false;
      (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) mobileCheck = true;})(navigator.userAgent||navigator.vendor||window.opera);
      return mobileCheck;
    };
    

    فهرست

  167. چطوری بدون Regex تشخیص بدیم که یه مرورگر mobile هست یا نه؟

    می‌تونیم مرورگرهای تلفن همراه رو با اجرای فهرستی از دستگاه‌ها و بررسی اینکه آیا useragent با چیزی مطابقت داره یا نه، شناسایی کنیم. این یه راه حل جایگزین برای استفاده از RegExp هستش

    function detectmob() {
     if( navigator.userAgent.match(/Android/i)
         || navigator.userAgent.match(/webOS/i)
         || navigator.userAgent.match(/iPhone/i)
         || navigator.userAgent.match(/iPad/i)
         || navigator.userAgent.match(/iPod/i)
         || navigator.userAgent.match(/BlackBerry/i)
         || navigator.userAgent.match(/Windows Phone/i)
     ){
        return true;
      }
     else {
        return false;
      }
    }
    

    فهرست

  168. چطوری طول و عرض یه تصویر رو با جاواسکریپت به دست میاری؟

    می‌تونیم با استفاده از جاواسکریپت به صورت برنامه‌ریزی شده تصویر رو بدست بیاریم و ابعاد (عرض و ارتفاع) رو بررسی کنیم، برای مثال syntax بررسی میتونه طبق مثال زیر انجام بشه:

    const img = new Image();
    
    img.onload = function() {
      console.log(this.width + 'x' + this.height);
    }
    
    img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
    

    فهرست

  169. چطوری درخواست‌های synchronous HTTP بزنیم؟

    مرورگرها یه کلاس XMLHttpRequest ارائه می‌دن که می‌تونه برای ایجاد درخواست‌های HTTP همزمان از جاواسکریپت استفاده شه.

    function httpGet(theUrl) {
        const xmlHttpReq = new XMLHttpRequest();
        xmlHttpReq.open( "GET", theUrl, false ); // false for synchronous request
        xmlHttpReq.send( null );
        return xmlHttpReq.responseText;
    }
    

    فهرست

  170. چطوری درخواست‌های asynchronous HTTP بزنیم؟

    مرورگرها یه کلاس XMLHttpRequest رو ارائه می‌دن که می‌تونن برای درخواست‌های HTTP ناهمزمان از جاواسکریپت با ارسال پارامتر سوم به عنوان true استفاده کنن.

    function httpGetAsync(theUrl, callback)
    {
        var xmlHttpReq = new XMLHttpRequest();
        xmlHttpReq.onreadystatechange = function() {
            if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
                callback(xmlHttpReq.responseText);
        }
        xmlHttp.open("GET", theUrl, true); // true for asynchronous
        xmlHttp.send(null);
    }
    

    فهرست

  171. چطوری یه تاریخ رو به یه تاریخ در timezone دیگه تبدیل کنیم؟

    می‌تونیم از متد toLocaleString برای تبدیل تاریخ‌ها تو یه منطقه زمانی به منطقه زمانی دیگه استفاده کنیم.بریم یه مثال درموردش ببینیم.

    console.log(event.toLocaleString('en-GB', { timeZone: 'UTC' })); //29/06/2019, 09:56:00
    

    فهرست

  172. چه propertyهایی برای اندازه‌گیزی سایز window به کار میره؟

    می‌تونیم از ویژگی‌های innerWidth، innerHeight، clientWidth، clientHeight ویندوز، عنصر document و آبجکت body document برای پیدا کردن اندازه یه پنجره استفاده کنیم. بیاین از ترکیب اونا برای محاسبه اندازه یه window یا document استفاده کنیم.

    const width = window.innerWidth
         || document.documentElement.clientWidth
         || document.body.clientWidth;
    
    const height = window.innerHeight
         || document.documentElement.clientHeight
         || document.body.clientHeight;
    

    فهرست

  173. عملگر شرطی سه گانه توی جاواسکریپت چیه؟

    عملگر شرطی ternary تنها عملگر جاواسکریپت هستش که سه عملوند رو می‌گیره که به عنوان میانبر برای دستور if عمل میکنه.

    var isAuthenticated = false;
    console.log(isAuthenticated ? 'Hello, welcome' : 'Sorry, you are not authenticated'); //Sorry, you are not authenticated
    

    فهرست

  174. آیا می‌شه روی عملگر شرطی زنجیره شرط‌ها رو اعمال کرد؟

    بله، می‌تونیم زنجیره‌سازی رو روی عملگرهای شرطی مشابه if … else if … else if… other chain اعمال کنیم.

    function traceValue(someParam) {
        return condition1 ? value1
             : condition2 ? value2
             : condition3 ? value3
             : value4;
    }
    
    // The above conditional operator is equivalent to:
    
    function traceValue(someParam) {
        if (condition1) { return value1; }
        else if (condition2) { return value2; }
        else if (condition3) { return value3; }
        else { return value4; }
    }
    

    فهرست

  175. روش‌های اجرای جاواسکریپت بعد از لود شدن صفحه کدوما هستن؟

    1. window.onload:

    window.onload = function ...
    
    1. document.onload:

    document.onload = function ...
    
    1. body onload:

    <body onload="script();">
    

    فهرست

  176. تفاوت‌های بین proto و prototype کدوما هستن؟

    __proto__ آبجکت واقعیه که در زنجیره جستجو برای حل متدها و غیره استفاده می‌شه. در حالی که prototype آبجکت‌ای‌ـه که برای ساخت __proto__استفاده می‌شه زمانی که یه آبجکت با new Object() ایجاد می‌کنیم.

    ( new Employee ).__proto__ === Employee.prototype;
    ( new Employee ).prototype === undefined;
    

    فهرست

  177. میتونی یه مثال از زمانی که واقعا به سمیکولون( ; ) نیاز هست بزنی؟

    توصیه می‌شه که بعد از هر عبارت در جاواسکریپت از سیمیکالن استفاده کنیم. برای مثال، توی مثال زیر نذاشتن سیمیکالن، خطای .. is not a function رو در زمان اجرا ایجاد میکنه:

    // define a function
    const fn = function () {
        //...
    } // semicolon missing at this line
    
    // then execute some code inside a closure
    (function () {
        //...
    })();
    

    از مثال بالا جاواسکریپت اینطور برداشت میکنه

    const fn = function () {
        //...
    }(function () {
        //...
    })();
    

    در این حالت، تابع دوم رو به عنوان آرگومان به تابع اول ارسال می‌کنیم و سعی می‌کنیم نتیجه فراخوانی تابع اول رو به عنوان تابع فراخوانی کنیم.بخاطر همین برای تابع دوم خطای.. is not a function رو موقع اجرا می‌گیریم.

    فهرست

  178. متد freeze چیکار میکنه؟

    متد freeze برای فریز کردن یه آبجکت استفاده می‌شه. ثابت کردن یه آبجکت اجازه افزودن ویژگی‌های جدید به یه آبجکت رو نمی‌ده. از حذفش جلوگیری میکنه و از تغییر قابلیت شمارش پذیری، پیکربندی یا قابلیت نوشتن ویژگی‌های موجود جلوگیری میکنه. یعنی آبجکتء ارسال شده رو برمی‌گردونه و کپی ثابتی ایجاد نمیکنه.

    const obj = {
      prop: 100
    };
    
    Object.freeze(obj);
    obj.prop = 200; // Throws an error in strict mode
    
    console.log(obj.prop); //100
    

    نکته: یه تایپ ارور بهمون می‌ده که ارگومان داده شده object نیست

    فهرست

  179. هدف از متد freeze چیه؟

    1. برای فریز کردن آبجکت‌ها و آرایه‌ها

    2. برای imutable کردن آبجکت‌ها

    فهرست

  180. چرا به متد freeze نیاز داریم؟

    در پارادایم شی گرا، یه API موجود حاوی عناصر خاصیه که قصد توسعه، اصلاح یا استفاده مجدد رو خارج از زمینه فعلی خودشون ندارن. در زبان‌های مختلف کلمه کلیدیه finalبرای داشتن همچین خاصیتی استفاده می‌شه.

    فهرست

  181. چطوری می‌تونیم زبان ترجیحی یه مرورگر رو تشخیص بدیم؟

    ما می‌تونیم از آبجکت navigator که بر روری مرورگر وجود داره این کارو انجام بدیم

    var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox
                   navigator.language ||   // All browsers
                   navigator.userLanguage; // IE <= 10
    
    console.log(language);
    

    فهرست

  182. چطوری می‌تونیم حرف اول همه کلمات یه رشته رو به حرف بزرگ تبدیل کنیم؟

    ما می‌تونیم با تابع زیر این کارو انجام بدیم:

        function toTitleCase(str) {
            return str.replace(
                /\w\S*/g,
                function(txt) {
                    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                }
            );
        }
        toTitleCase("good morning john"); // Good Morning John
    

    فهرست

  183. چطوری می‌شه تشخیص داد که جاواسکریپت یه صفحه وب غیرفعال شده؟

    برای تشخیص غیرفعال بودن یا نبودن جاواسکریپت می‌تونیم از تگ <noscript> استفاده کنیم. بلوک کد داخل <noscript> زمانی اجرا می‌شه که جاواسکریپت غیرفعاله و معمولاً برای نمایش محتوای جایگزین زمانی که صفحه در جاواسکریپت تولید می‌شه، استفاده می‌شه.

    <script type="javascript">
        // JS related code goes here
    </script>
    <noscript>
        <a href="next_page.html?noJS=true">JavaScript is disabled in the page. Please click Next Page</a>
    </noscript>
    

    فهرست

  184. عملگرهای پشتیبانی شده توسط جاواسکریپت کدوما هستن؟

    یه عملگر قادر به دستکاری (محاسبات ریاضی و منطقی) مقدار یا عملوند معینه. اپراتورهای مختلفی توسط جاواسکریپت پشتیبانی میشن این اپراتور‌ها هستن

    1. عملگر‌های حسابی: شامل + (اضافه),– (منها), * (ضرب), / (تقسیم), % (درصد), + + (اضافه کردن) و – – (کم کردن)

    2. عملگر‌های مقایسه ای: شامل = =(برابر),!= (غیر برابر), ===(برابر و تایپ برابر), > (بزرگتر),> = (بزرگتر مساوی),< (کوچکتر),<= (کوچکتر مساوی)

    3. عملگر‌های منطقی: شامل &&("و"منطقی),||("یا"منظقی),!( منطقی"نه")

    4. عملگر‌های تعیین مقدار: شامل = (اپراتور تعیین مقدار), += (اضافه کردن و تعیین مقدار), – = (منها کردن و تعیین مقدار), *= (ضرب و تعیین مقدار), /= (تقسیم و تعیین مقدار), %= (باقی مانده و تعیین مقدار)

    5. اپراتور سه تایی: شامل اپراتور‌های شرطی سه تایی

    6. اپراتور تایپ: از اون برای پیدا کردن تایپ متغیر‌ها استفاده می‌شه به صورت typeof variable

    فهرست

  185. پارامتر rest چیکار میکنه؟

    پارامتر Rest یه روش بهبود یافته برای مدیریت پارامترهای تابع هستش که به ما امکان میده تعداد نامحدودی از آرگومان‌ها رو به عنوان یه آرایه دریافت کنیم:

    function f(a, b, ...theArgs) {
      // ...
    }
    

    برای مثال، بیاین یه مثال مجموع برای محاسبه تعداد پویا پارامترها در نظر بگیریم،

    function total(…args){
         let sum = 0;
         for(let i of args){
              sum+=i;
         }
         return sum;
    }
    console.log(fun(1,2)); //3
    console.log(fun(1,2,3)); //6
    console.log(fun(1,2,3,4)); //13
    console.log(fun(1,2,3,4,5)); //15
    

    نکته: پارامترRest در ES6 به استاندارد جاوااسکریپت اضافه شد

    فهرست

  186. اگه پارامتر rest رو به عنوان آخرین پارامتر استفاده نکنیم چی می‌شه؟

    پارامتر ‍‍Rest چون وظیفه اش جمع آوری تمام آرگومان‌های باقی مونده تو یه آرایه اس پس باید همیشه آخرین پارامتر باشه. برای مثال، اگه تابعیو مثل کد زیر تعریف کنیم معنی نداره و یه خطا ایجاد میکنه:

    function someFunc(a,…b,c){
         //You code goes here
         return;
    }
    

    فهرست

  187. عملگرهای منطقی باینری توی جاواسکریپت کدوما هستن؟

    1. به صورت بیتی AND ( & )

    2. به صورت بیتی OR ( | )

    3. به صورت بیتی XOR ( ^ )

    4. به صورت بیتی NOT ( ~ )

    5. تغییر مکان به چپ ( << )

    6. علامت در حال انتشار به سمت راست ( >> )

    7. صفر پر کردن Shift راست ( >>> )

    فهرست

  188. عملگر spread چیکار میکنه؟

    عملگر Spread به تکرارپذیرها (آرایه‌ها / اشیاء / رشته‌ها) اجازه میده تا به آرگومان‌ها / عناصر منفرد گسترش پیدا کنن. برای مشاهده این رفتار مثالی بزنیم:

    function calculateSum(x, y, z) {
      return x + y + z;
    }
    
    const numbers = [1, 2, 3];
    
    console.log(calculateSum(...numbers)); // 6
    

    فهرست

  189. چطوری تشخیص میدی که یه آبجکت freeze شده یا نه؟

    متد Object.isFrozen برای تعیین اینکه آیا یه آبجکت منجمد هس یا نه استفاده می‌شه. اگه همه شرایط زیر درست باشه، یه آبجکت منجمد می‌شه.

    1. اگه قابل توسعه نباشه.

    2. اگه تمام خصوصیاتش غیر قابل تنظیم باشن.

    3. اگه تمام خصوصیات داده اون غیر قابل نوشتن باشه.

    const object = {
       property: 'Welcome JS world'
    };
    Object.freeze(object);
    console.log(Object.isFrozen(object));
    

    فهرست

  190. چطوری بررسی کنیم که دو تا مقدار(شامل آبجکت) با هم برابرن یا نه؟

    متد Object.is تعیین میکنه که آیا دو مقدار یه مقدار هستن یا نه. برای مثال، استفاده با انواع مختلف مقادیر،

    Object.is('hello', 'hello');     // true
    Object.is(window, window);   // true
    Object.is([], []) // false
    

    اگه یکی از موارد زیر برقرار باشه، دو مقدار یکسان در نظر گرفته میشه:

    1. هردو undefined

    2. هردو null

    3. هردو true یا هر دو false

    4. هر دو رشته با طول یکسان با کاراکترهای مشابه به ترتیب یکسان

    5. هر دو یه آبجکت (یعنی هر دو شی رفرنس یکسان دارن)

    6. هر دو عدد و
      هر دو +0
      هر دو -0
      هر دو NaN
      هر دو غیر صفر و هر دو NaN نیستن و هر دو دارای یه مقدار هستن.

    فهرست

  191. هدف از متد is روی object چیه؟

    برای مقایسه دو رشته یا عدد و یا آبجکت با همدیگه و یا پیدا کردن قطبیت دو عدد استفاده میشه:

    فهرست

  192. چطوری propertyهای یه object رو به یه object دیگه کپی می‌کنی؟

    می‌تونیم از متد Object.assign استفاده کنیم که برای کپی کردن مقادیر و ویژگی‌ها از یه یا چند آبجکت منبع به یه آبجکت هدف استفاده می‌شه. آبجکت مورد نظر رو که دارای خواص و مقادیر کپی شده از آبجکت اولیه اس رو برمی‌گردونه.

    Object.assign(target, ...sources)
    

    بیاین با یه منبع و یه شی هدف مثال بزنیم،

    const target = { a: 1, b: 2 };
    const source = { b: 3, c: 4 };
    
    const returnedTarget = Object.assign(target, source);
    
    console.log(target); // { a: 1, b: 3, c: 4 }
    
    console.log(returnedTarget); // { a: 1, b: 3, c: 4 }
    

    همونطور که در کد بالا مشاهده شد، یه ویژگی مشترک (b) از منبع به مقصد وجود داره، بنابراین مقداش بازنویسی شده.

    فهرست

  193. کاربردهای متد assign چیه؟

    1. برای شبیه سازی یه آبجکت .

    2. برای ادغام آبجکت‌ها با ویژگی‌های یکسان .

    فهرست

  194. آبجکت proxy چیه؟

    آبجکت Proxy برای تعریف رفتار سفارشی برای عملیات‌های اساسی مثل جستجوی ویژگی، تخصیص، شمارش، فراخوانی تابع و غیره استفاده می‌شه.

    var p = new Proxy(target, handler);
    

    بیاین مثالی از شیء پروکسی بزنیم،

    const handler = {
        get: function(obj, prop) {
            return prop in obj ?
                obj[prop] :
                100;
        }
    };
    
    const p = new Proxy({}, handler);
    p.a = 10;
    p.b = null;
    
    console.log(p.a, p.b); // 10, null
    console.log('c' in p, p.c); // false, 100
    

    در کد بالا، از کنترل‌کننده «get» استفاده میکنه که رفتار پراکسی رو موقع انجام عملیات روی اون تعریف میکنه.

    فهرست

  195. هدف از متد seal چیه؟

    روش Object.seal برای مهر و موم کردن یه آبجکت با جلوگیری از اضافه شدن ویژگی‌های جدید بهش و علامت گذاری تمام ویژگی‌های موجود به عنوان غیر قابل تنظیم، استفاده می‌شه. اما مقادیر پراپرتی‌های فعلی تا زمانی که قابل نوشتن باشن , قابل تغییر هستن. بیاین مثال زیرو برای درک بیشتر در مورد روش seal ببینیم

     const object = {
        property: 'Welcome JS world'
     };
     Object.seal(object);
     object.property = 'Welcome to object world';
     console.log(Object.isSealed(object)); // true
     delete object.property; // You cannot delete when sealed
     console.log(object.property); //Welcome to object world
    

    فهرست

  196. کاربردهای متد seal چیه؟

    1. برای آب بندی آبجکت‌ها و آرایه‌ها استفاده می‌شه.

    2. برای غیرقابل تغییر کردن یه آبجکت استفاده می‌شه.

    فهرست

  197. تفاوت‌های بین متدهای freeze و seal چیا هست؟

    اگه یه آبجکت با استفاده از متد Object.freeze منجمد شه، ویژگی‌هاش تغییرناپذیر می‌شن و هیچ تغییری در اونا نمیتونیم ایجاد کنیم در حالی که اگه یه آبجکت با استفاده از متد Object.seal مهر و موم شده باشه، می‌شه تغییرات روی ویژگی‌های موجود ایجاد کرد.

    فهرست

  198. چطوری تشخیص میدی که یه آبجکت seal شده یا نه؟

    متد Object.isSealed برای تعیین مهر و موم بودن یا نبودن یه آبجکت استفاده می‌شه. اگه همه شرایط زیر درست باشه یه شی مهر و موم می‌شه

    1. اگه قابل توسعه نباشه.

    2. اگه تمام خصوصیات اون غیر قابل تنظیم باشن.

    3. اگه قابل جابجایی نباشه (اما لزوماً غیرقابل نوشتن نیست).
      بیاین اونو در عمل ببینیم:
    const object = {
    property: 'Hello, Good morning'
    };
    
    Object.seal(object); // Using seal() method to seal the object
    
    console.log(Object.isSealed(object));      // checking whether the object is sealed or not
    

    فهرست

  199. چطوری کلید و مقدارهای enumerable رو به دست میاری؟

    متد Object.entries برای برگردوندن آرایه‌ای از جفت‌های [key, value] دارای کلید رشته‌ای شمارش‌پذیر یه شی معین، به همون ترتیبی که توسط یه حلقه for...in ارائه می‌شه، استفاده می‌شه. بیاین عملکرد متد object.entries رو تو یه مثال ببینیم،

    const object = {
         a: 'Good morning',
         b: 100
    };
    
    for (let [key, value] of Object.entries(object)) {
         console.log(`${key}: ${value