├── LICENSE
├── README.md
├── ar-AR
    └── README_AR.md
├── ar-EG
    └── README_ar-EG.md
├── bs-BS
    └── README-bs_BS.md
├── de-DE
    └── README.md
├── es-ES
    └── README-ES.md
├── fr-FR
    └── README_fr-FR.md
├── id-ID
    └── README.md
├── it-IT
    └── README.md
├── ja-JA
    └── README-ja_JA.md
├── ko-KR
    └── README-ko_KR.md
├── nl-NL
    └── README.md
├── pl-PL
    └── README.md
├── pt-BR
    └── README_pt_BR.md
├── ru-RU
    └── README.md
├── th-TH
    └── README.md
├── tr-TR
    └── README-tr_TR.md
├── uk-UA
    └── README.md
├── vi-VI
    └── README-vi.md
├── zh-CN
    └── README-zh_CN.md
└── zh-TW
    └── README_zh-TW.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Lydia Hallie
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/ar-AR/README_AR.md:
--------------------------------------------------------------------------------
   1 | 
   2 | 
   3 | <div dir='rtl'>
   4 | 
   5 | # قائــمة أسئلة جافا سكريبت (مستوى متقدم)
   6 | أقوم بنشر عدة أسئلة جافاسكريبت بصورة يومية على حسابي في [انستغرام](https://www.instagram.com/theavocoder/).
   7 | 
   8 | تتدرج الأسئلة إبتداءا من المستوى الأساسي أو البسيط الى المستوى المتقدم لإختبار مدى معرفتك بلغة الجافا سكريبت, قم بمراجعة و إنعاش معرفتك باللغة قليلا, أو قم بالتجهيز لمقابلة عمل لوظيفة مبرمج عن طريق هذه الأسئلة!
   9 | 
  10 | أقوم بتحديث هذا المستودع أسبوعيا بإضافة المزيد من الأسئلة. :muscle: :rocket:
  11 | 
  12 | 
  13 | الأجوبة توجد في الجزء المطوي بالأسفل أدناه تحت كل سؤال على حدة, فقط قم بالضغط على كلمة الإجابة لكي تحصل على الإجابة, حظا موفقا  :heart: 
  14 | 
  15 | اللغات المتوفرة:
  16 | 
  17 | - [🇪🇬 اللغة العامية](../ar-EG/README_ar-EG.md)
  18 | - [🇧🇦 Bosanski](../bs-BS/README-bs_BS.md)
  19 | - [🇩🇪 Deutsch](../de-DE/README.md)
  20 | - [🇬🇧 English](../README.md)
  21 | - [🇪🇸 Español](../es-ES/README-ES.md)
  22 | - [🇫🇷 Français](../fr-FR/README_fr-FR.md)
  23 | - [🇮🇩 Indonesia](../id-ID/README.md)
  24 | - [🇮🇹 Italiano](../it-IT/README.md)
  25 | - [🇯🇵 日本語](../ja-JA/README-ja_JA.md)
  26 | - [🇰🇷 한국어](../ko-KR/README-ko_KR.md)
  27 | - [🇳🇱 Nederlands](../nl-NL/README.md)
  28 | - [🇵🇱 Polski](../pl-PL/README.md)
  29 | - [🇧🇷 Português Brasil](../pt-BR/README_pt_BR.md)
  30 | - [🇷🇺 Русский](../ru-RU/README.md)
  31 | - [🇹🇭 ไทย](../th-TH/README-th_TH.md)
  32 | - [🇹🇷 Türkçe](../tr-TR/README-tr_TR.md)
  33 | - [🇺🇦 Українська мова](../uk-UA/README.md)
  34 | - [🇻🇳 Tiếng Việt](../vi-VI/README-vi.md)
  35 | - [🇨🇳 简体中文](../zh-CN/README-zh_CN.md)
  36 | - [🇹🇼 繁體中文](../zh-TW/README_zh-TW.md)
  37 | </div>
  38 | 
  39 | ____________
  40 | 
  41 | 
  42 | 1. ماهو الناتج ؟
  43 | 
  44 | ```javascript
  45 | function sayHi() {
  46 |   console.log(name);
  47 |   console.log(age);
  48 |   var name = "Lydia";
  49 |   let age = 21;
  50 | }
  51 | 
  52 | sayHi();
  53 | ```
  54 | 
  55 | - A: `Lydia` and `undefined`
  56 | - B: `Lydia` and `ReferenceError`
  57 | - C: `ReferenceError` and `21`
  58 | - D: `undefined` and `ReferenceError`
  59 | 
  60 | <details><summary><b>الإجابة</b></summary>
  61 | <p>
  62 | 
  63 | <div dir='rtl'>
  64 | الإجابة هي الخيار الرابع : D
  65 | 
  66 | في داخل الدالة, قمنا أولا بتعريف المتغير `name` مع الكلمة المفتاحية `var`. و هذا يعني ان المتغير قد حصلت له عملية hoisting  والتي تعني انه قد تم حجز مساحة لهذا المتغير في هذه اللحظة مع قيمة مبدئية و التي هي  `undefined`  إلى ان نقوم فعليا بتعريف قيمة له لاحقا.
  67 | لم نقم بتعريف المتغير `name` بعد عندما قمنا بطباعته في السطر الاول من الدالة, لهذا لايزال يحمل القيمة `undefined`.
  68 |   </br>
  69 | المتغيرات التي تم تعريفها بجانب الكلمات المفتاحية `let` و  `const` يتم عمل عملية hoisting لها أيضا, ولكن على عكس المتغيرات التي يتم تعريفها بجانب الكلمة المفتاحية `var`, لا يتم تعريفها او الوصول اليها مالم نقم بإضافة قيمة لها فعليا. و يسمى هذا بال"temporal dead zone".عندما نحاول الوصول الى المتغيرات من النوع `let`قبل ان يتم تعريفها, نتحصل على الخطأ التالي  `ReferenceError`.  
  70 | 
  71 | </p>
  72 | </details>
  73 | </div>
  74 | 
  75 | ---
  76 | 
  77 | 2. ماهو الناتج?
  78 | 
  79 | ```javascript
  80 | for (var i = 0; i < 3; i++) {
  81 |   setTimeout(() => console.log(i), 1);
  82 | }
  83 | 
  84 | for (let i = 0; i < 3; i++) {
  85 |   setTimeout(() => console.log(i), 1);
  86 | }
  87 | ```
  88 | 
  89 | - A: `0 1 2` and `0 1 2`
  90 | - B: `0 1 2` and `3 3 3`
  91 | - C: `3 3 3` and `0 1 2`
  92 | 
  93 | <details><summary><b>الإجابة</b></summary>
  94 | <p>
  95 | 
  96 | <div dir='rtl'>
  97 | الإجابة هي الخيار الثالث: C
  98 | 
  99 | بسبب ترتيب تسلسل الأحداث في الجافا سكريبت, دالة `setTimeout` والتي هي دالة من نوع callbackقد تم استدعائها بعد ان تم تنفيذ ال loop. بماأن المتغير `i` في الloop  الاولى قد تم تعريفه عن طريق الكلمة المفتاحية `var` فإن هذه القيمة هي global. أثناء تنفيذ هذه ال loop قد تم إضافة 1 الى المتغير `var` في كل دورة باستخدام العملية `++`. بنهاية الدورة و عندما تم استدعاء الدالة `setTimeout` كانت قيمة المتغير `i` قد أصبحت تساوي `3` في المثال الأول.        
 100 | في الloop  الثانية ,تم تعريف المتغير `i` باستخدام الكلمة المفتاحية `let`  المتغيرات التي يتم تعريفها باستخدام الكلمات المفتاحية `let`  و `const` هي متغيرات تنتمي فقط للBlock  الذي تم تعريفها بداخله, والذي هو بين القوسين, أثناءتنفيذ الloop, سنقوم بالتحصل على قيمة جديدة للمتغير `i` في نهاية كل دورة  , وأي قيمة تكون منتمية للScope  بداخل الloop.
 101 | 
 102 | </p>
 103 | </details>
 104 | <div>
 105 | 
 106 | ---
 107 | 
 108 | 3. ماهو الناتج?
 109 | 
 110 | ```javascript
 111 | const shape = {
 112 |   radius: 10,
 113 |   diameter() {
 114 |     return this.radius * 2;
 115 |   },
 116 |   perimeter: () => 2 * Math.PI * this.radius
 117 | };
 118 | 
 119 | shape.diameter();
 120 | shape.perimeter();
 121 | ```
 122 | 
 123 | - A: `20` and `62.83185307179586`
 124 | - B: `20` and `NaN`
 125 | - C: `20` and `63`
 126 | - D: `NaN` and `63`
 127 | 
 128 | <details><summary><b>الإجابة</b></summary>
 129 | <p>
 130 | <div dir='rtl'>
 131 | الجواب هو الخيار الثاني: B
 132 | 
 133 | يرجى ملاحظة أن قيمة`diameter` هي دالة Regular و في المقابل قيمة `perimeter` هي دالة من النوع arrow.  
 134 | في حال استخدام دوال ال arrow, الكلمة المفتاحية `this` ترجع و تدل على المحيط الحالي الذي توجد به الكلمة المفتاحية, على عكس وجود الكلمة المفتاحية `this` في الدالة العادية حيث أنها تعني اننا نقوم بمناداة `perimeter` و هي لا تعني اننا نقصد الshape object بل نقصد الscope الذي يحاوطه, على سبيل المثال : Window.
 135 | 
 136 | لا توجد قيمة `radius` في ذلك ال object لهذا يقوم بإرجاع القيمة `undefined`.
 137 | 
 138 | 
 139 | </p>
 140 | </details>
 141 | </div>
 142 | 
 143 | ---
 144 | 
 145 | 4. ماهو الناتج؟ 
 146 | 
 147 | ```javascript
 148 | +true;
 149 | !"Lydia";
 150 | ```
 151 | 
 152 | - A: `1` and `false`
 153 | - B: `false` and `NaN`
 154 | - C: `false` and `false`
 155 | 
 156 | <details><summary><b>الإجابة</b></summary>
 157 | <p>
 158 | <div dir='rtl'>
 159 | الجواب هو الخيار الأول : A
 160 | 
 161 | عملية الزيادة الأحادية هنا وجدت لكي تقوم بتحويل المعامل الى رقم, `true` هي `1` , و `false` هي `0`.  
 162 |  المتغير من نوع string `'Lydia'` هو قيمة صدقية أو حقيقية, بمعنى أنها تساوي `true` . السؤال الذي نقوم بطرحه هنا, هو هل هذه القيمة الصدقية هي قيمة غير صدقية؟ اي تساوي `false`؟ لهذا نتحصل على الجواب `false`.   
 163 | </p>
 164 | </details>
 165 | </div>
 166 | 
 167 | ---
 168 | 
 169 | 5. أي الإجابات هو إجابة صحيحة؟ 
 170 | 
 171 | ```javascript
 172 | const bird = {
 173 |   size: "small"
 174 | };
 175 | 
 176 | const mouse = {
 177 |   name: "Mickey",
 178 |   small: true
 179 | };
 180 | ```
 181 | 
 182 | - A: `mouse.bird.size` غير صحيحة
 183 | - B: `mouse[bird.size]` غير صحيحة
 184 | - C: `mouse[bird["size"]]` غير صحيحة
 185 | - D: كل الإجابات صحيحة
 186 | 
 187 | <details><summary><b>الإجابة</b></summary>
 188 | <p>
 189 | <div dir='rtl'>
 190 | الجواب هو الخيار الأول: A
 191 | 
 192 | في لغة الجافا سكريبت, جميع مفاتيح الobjects  هي من النوع string. الا اذا كانت عبارة عن  symbol. حتى ولو أننا في بعض المرات لانقوم بوضع نوعها على انها string  بصورة صريحة, ولكنها دائما يتم تحويلها الى نوع string  وراء الكواليس.
 193 | 
 194 | لغة الجافاسكريبت تقوم بترجمةال statements.عندما نقوم باستعمال ال bracket notation, تقوم الجافا سكريبت اولا برؤية أول فتحة للقوس `[` و تقوم بالمتابعة الى ان تجد قفلة هذا القوس `]`.فقط عندما تصل الى قفلة القوس حتى تقوم بتقييم ال statement و من ثم معالجتها. 
 195 | `mouse[bird.size]`: اولا تقوم بتقييم`bird.size`, والتي هي تساوي `"small"`. `mouse["small"]` تقوم بإرجاع`true`
 196 | 
 197 | ولكن في المقابل, عندما نقوم بإستخدام ال dot notation,لا يتم معالجة الأمر هكذا. `mouse` ليس لديها مفتاح يسمى `bird`, و هذا يعني أن `mouse.bird` هي قيمة `undefined`. بالتالي نقوم بالسؤال عن ال`size` بإستخدام ال dot notation: للسؤال عن قيمة  `mouse.bird.size`.
 198 | وبما أن `mouse.bird`قيمتها `undefined` ف نحن فعليا نقوم بالسؤال عن `undefined.size` و التي هي بالتأكيد غير صحيحة و غير صالحة و ستقوم بإرجاع error مشابه ل `Cannot read property "size" of undefined`.    
 199 | </p>
 200 | </details>
 201 | </div>
 202 | 
 203 | ---
 204 | 
 205 | 6. ماهو الناتج؟ 
 206 | 
 207 | ```javascript
 208 | let c = { greeting: "Hey!" };
 209 | let d;
 210 | 
 211 | d = c;
 212 | c.greeting = "Hello";
 213 | console.log(d.greeting);
 214 | ```
 215 | 
 216 | - A: `Hello`
 217 | - B: `Hey`
 218 | - C: `undefined`
 219 | - D: `ReferenceError`
 220 | - E: `TypeError`
 221 | 
 222 | <details><summary><b>الإجابة</b></summary>
 223 | <p>
 224 | <div dir='rtl'>
 225 | الجواب هو الخيار الأول : A
 226 | 
 227 | في لغة الجافاسكريبت, جميع ال objectsيتم التفاعل معها عن طريق _reference_ و ذلك عندما نقوم بمساواتهم ببعضهم البعض بعلامة ال=.
 228 | 
 229 | أولا, المتغير `c` يحمل قيمة ل object. لاحقا قمنا بإضافة `d` لنفس الrefence الذي لدى المتغير `c` لل object.
 230 | 
 231 | <img src="https://i.imgur.com/ko5k0fs.png" width="200">
 232 | 
 233 | لذا, عندما تقوم بتغيير object واحد , انت فعليا تقوم بتغيير جميع الobjects. 
 234 | 
 235 | </p>
 236 | </details>
 237 | </div>
 238 | 
 239 | ---
 240 | 
 241 | 7. ماهو الناتج؟
 242 | 
 243 | ```javascript
 244 | let a = 3;
 245 | let b = new Number(3);
 246 | let c = 3;
 247 | 
 248 | console.log(a == b);
 249 | console.log(a === b);
 250 | console.log(b === c);
 251 | ```
 252 | 
 253 | - A: `true` `false` `true`
 254 | - B: `false` `false` `true`
 255 | - C: `true` `false` `false`
 256 | - D: `false` `true` `true`
 257 | 
 258 | <details><summary><b>الإجابة</b></summary>
 259 | <p>
 260 | <div dir='rtl'>
 261 | الجواب هو الخيار الثالث: C
 262 | 
 263 | `new Number()` هي دالة من نوع built-in function constructer. على الرغم من أنها تبدو كرقم, ولكنها في الحقيقة ليس رقم, هي عبارة عن object  ولديها العديد العديد من المميزات.
 264 |   
 265 | عندما نقوم بإستخدام العلامة او العامل `==`, هي تقوم فقط بالتحقق من إذا ماكان لديها same _value_.كلا الطرفين قيمتهم تساوي `3` لهذا تقوم بإرجاع `true`.
 266 | 
 267 | و لكن على الرغم من هذا, عندما نقوم بإستخدام العملية أو المعامل `===`, كلا القيمة _and_ النوع يجب ان يكونا نفس الشيء. 
 268 | 
 269 | هي ليست `new Number()` هي ليست عبارة عن رقم, هي عبارة عن **object** , وكلاهما سيقومان بإرجاع `false.`   
 270 | 
 271 | </p>
 272 | </details>
 273 | </div>
 274 | 
 275 | ---
 276 | 
 277 | 8. ماهو الناتج؟ 
 278 | 
 279 | ```javascript
 280 | class Chameleon {
 281 |   static colorChange(newColor) {
 282 |     this.newColor = newColor;
 283 |     return this.newColor;
 284 |   }
 285 | 
 286 |   constructor({ newColor = "green" } = {}) {
 287 |     this.newColor = newColor;
 288 |   }
 289 | }
 290 | 
 291 | const freddie = new Chameleon({ newColor: "purple" });
 292 | console.log(freddie.colorChange("orange"));
 293 | ```
 294 | 
 295 | - A: `orange`
 296 | - B: `purple`
 297 | - C: `green`
 298 | - D: `TypeError`
 299 | 
 300 | <details><summary><b>الإجابة</b></summary>
 301 | <p>
 302 | <div dir='rtl'>
 303 | الجواب هو الخيار الرابع: D
 304 | 
 305 | الدالة `colorChange` هي دالة static, و الدوال التي هي من نوع static هي دوال صممت لكي يتم استخدامها فقط في الconstructor  الذي تم تعريفها به, و ليس من الممكن ان يتم تمريرها او استخدامها من قبل اي مكون children. بما أن `freddie` هي متغير children فإن الدالة لم يتم تمريرها اليه و هي غير متوفرة في ال instant من  `freddie` لذا نتحصل على الخطأ `TypeError` .    
 306 | </p>
 307 | </details>
 308 | </div>
 309 | 
 310 | ---
 311 | 
 312 | 9. ماهو الناتج؟
 313 | 
 314 | ```javascript
 315 | let greeting;
 316 | greetign = {}; // Typo!
 317 | console.log(greetign);
 318 | ```
 319 | 
 320 | - A: `{}`
 321 | - B: `ReferenceError: greetign is not defined`
 322 | - C: `undefined`
 323 | 
 324 | <details><summary><b>الإجابة</b></summary>
 325 | <p>
 326 | <div dir='rtl'>
 327 | الجواب هو الخيار الأول : A
 328 | 
 329 | تقوم بعمل log على الconsole  ل object. و لأننا قمنا بإنشاء object فارغ في global object! عندما قمنا بالخطأ بطباعة  `greetign` بدل ان نقوم بطباعتها بصورة صحيحة هكذا `greeting`, هنا قام مترجم الجافاسكريبت بترجمة الآتي `global.greetign = {}` أو `window.greetign = {}` في المتصفح.   
 330 | 
 331 | لكي نتجنب حدوث مثل هذه الحالة, بإمكاننا إستخدام `"use strict"`. بفعل هذه الخطوة ستتأكد من أنك قد عرفت المتغير قبل ان تساويه بأي شي آخر. 
 332 | </p>
 333 | </details>
 334 | </div>
 335 | 
 336 | ---
 337 | 
 338 |  10. ما الذي يحدث عندما نقوم بعمل الآتي؟ 
 339 | 
 340 | ```javascript
 341 | function bark() {
 342 |   console.log("Woof!");
 343 | }
 344 | 
 345 | bark.animal = "dog";
 346 | ```
 347 | 
 348 | - A: Nothing, this is totally fine!
 349 | - B: `SyntaxError`. You cannot add properties to a function this way.
 350 | - C: `undefined`
 351 | - D: `ReferenceError`
 352 | 
 353 | <details><summary><b>الإجابة</b></summary>
 354 | <p>
 355 | <div dir='rtl'>
 356 | الجواب هو الخيار الأول: A
 357 | 
 358 | هذا ممكن في لغة الجافاسكريبت, لأن الدوال هي عبارة عن objects, (كل شيء بداخل الأنواع التي هي primitive هو عبارة عن object)
 359 | 
 360 | الدالة هي عبارة عن نوع خاص من الobjects, الكود الذي تقوم بكتابته بنفسك هو ليس بالدالة الفعلية, الدالة هي object لديه خصائص. و هذه الخاصية قابلة للمناداة
 361 | </p>
 362 | </details>
 363 | </div>
 364 | 
 365 | ---
 366 | 
 367 | 11. ماهو الناتج؟
 368 | 
 369 | ```javascript
 370 | function Person(firstName, lastName) {
 371 |   this.firstName = firstName;
 372 |   this.lastName = lastName;
 373 | }
 374 | 
 375 | const member = new Person("Lydia", "Hallie");
 376 | Person.getFullName = function() {
 377 |   return `${this.firstName} ${this.lastName}`;
 378 | };
 379 | 
 380 | console.log(member.getFullName());
 381 | ```
 382 | 
 383 | - A: `TypeError`
 384 | - B: `SyntaxError`
 385 | - C: `Lydia Hallie`
 386 | - D: `undefined` `undefined`
 387 | 
 388 | <details><summary><b>الإجابة</b></summary>
 389 | <p>
 390 | <div dir='rtl'>
 391 | الجواب هو الخيار الأول: A
 392 | 
 393 | ليس بإمكانك اضافة الخصائص ل constructor كما تقوم بإضافة الخصائص للobjects. إذا أردت أن تضيف مميزات لكل الobjects مرة واحدة, سيجب عليك أن تقوم بإستخدام الprototype. لذا في هذه الحالة,
 394 | </div>
 395 | 
 396 | ```js
 397 | Person.prototype.getFullName = function() {
 398 |   return `${this.firstName} ${this.lastName}`;
 399 | };
 400 | ```
 401 | 
 402 | <div dir='rtl'>
 403 |   
 404 | اذا استطعنا جعل `member.getFullName()` تعمل. لماذا ستكون ذات فائدة؟ فلنفترض أننا أضفنا هذه الmethod للconstructor نفسها. ربما ليس أي instance من `Person` تحتاج الى هذه ال method. بهذه الطريقة سنقوم بإستهلاك مساحة كبيرة من الذاكرة, بما أنهم سيظلون يحتفظون ب هذه الخاصية, و التي بدورها ستقوم بحجز مساحة في الذاكرة لأي instance. لذا من الأفضل أن نقوم بإضافتهاالى الprototype, بهذه الطريقة ستقوم بحجز مكان واحد فقط في الذاكرة, و لكنها متاحة للكل للوصول إليها.   
 405 | </p>
 406 | </details>
 407 | <div>
 408 |   
 409 | ---
 410 | 
 411 | 12. ماهو الناتج؟
 412 | 
 413 | ```javascript
 414 | function Person(firstName, lastName) {
 415 |   this.firstName = firstName;
 416 |   this.lastName = lastName;
 417 | }
 418 | 
 419 | const lydia = new Person("Lydia", "Hallie");
 420 | const sarah = Person("Sarah", "Smith");
 421 | 
 422 | console.log(lydia);
 423 | console.log(sarah);
 424 | ```
 425 | 
 426 | - A: `Person {firstName: "Lydia", lastName: "Hallie"}` and `undefined`
 427 | - B: `Person {firstName: "Lydia", lastName: "Hallie"}` and `Person {firstName: "Sarah", lastName: "Smith"}`
 428 | - C: `Person {firstName: "Lydia", lastName: "Hallie"}` and `{}`
 429 | - D:`Person {firstName: "Lydia", lastName: "Hallie"}` and `ReferenceError`
 430 | 
 431 | <details><summary><b>الإجابة</b></summary>
 432 | <p>
 433 | <div dir='rtl'>
 434 | الجواب هو الخيار الأول: A
 435 | 
 436 | للمتغير `sarah` لم نقم بإستخدام الكلمة المفتاحية `new`, عندإستخدام الكلمة المفتاحية `new` ف هي تشير الى ال object  الخالي او الفارغ الذي قمنا بإنشاءه, و لكن اذا لم تقم بإضافة`new` ف هي ستشير الى ال **global object**!.  
 437 | 
 438 | نحن نقول بأن `this.firstName` تساوي `"Sarah"` و `this.lastName` تساوي `"Smith"`. ماقمنا بفعله حقا هنا, هو أنه قمنا بتعريف `global.firstName = 'Sarah'` و `global.lastName = 'Smith'`. المتغير `sarah` لا يظل `undefined`.     
 439 | </p>
 440 | </details>
 441 | </div>
 442 | 
 443 | ---
 444 | 
 445 | <div dir='rtl'>
 446 | 13. ماهي الثلاث مراحل التي تمر بها الevent propagation?
 447 | </div>
 448 | 
 449 | - A: Target > Capturing > Bubbling
 450 | - B: Bubbling > Target > Capturing
 451 | - C: Target > Bubbling > Capturing
 452 | - D: Capturing > Target > Bubbling
 453 | 
 454 | <details><summary><b>الإجابة</b></summary>
 455 | <p>
 456 | <div dir='rtl'>
 457 | الجواب هو الخيار الرابع: D
 458 | 
 459 | أثناء مرحلة ال**capturing**, الevent تمر عبر العناصر العليا, أي العناصر الآباء إلى أن تصل الى العنصر المقصود أو المراد, حينها تتمكن من الوصول الى العنصر **target** , و حينها تبدأ عملية ال **bubbling**. 
 460 | 
 461 | <img src="https://i.imgur.com/N18oRgd.png" width="200">
 462 | 
 463 | </p>
 464 | </details>
 465 | </div>
 466 | 
 467 | ---
 468 | 
 469 | <div dir='rtl'>
 470 | 14. جميع الobjects  لديها prototypes?
 471 | </div>
 472 | 
 473 | - A: true
 474 | - B: false
 475 | 
 476 | <details><summary><b>الإجابة</b></summary>
 477 | <p>
 478 | <div dir='rtl'>
 479 | الجواب هو الخيار الثاني: B
 480 | 
 481 | جميع الobjects  لديها prototypes, عدا ال objects من نوع **base object**. الobject من نوع base object هو عبارة عن object  تم إنشاءه من قبل المستخدم, أو تم إنشاءه عن طريق إستخدام الكلمة المفتاحية `new`. الbase object  لديه حق الوصول الى بعض ال methods و الخصائص. مثال: `.toString`. هذا هو السبب الذي يمكنك من إستخدام built-in JavaScript methods, مثل هذه ال methods جميعها متاحة في ال ptototype, على الرغم من أن لغة الجافا سكريبت ليس بإمكانها أن تجدها بصورة مباشرة من الobject  الذي قمت أنت بإنشاءه, و لكنها تذهب الى سلسلة الprototype  حيث بإمكانها ان تجده هناك, مما يجعله قابل للوصول من قبلك, أي بإمكانك أن تصل إليه.   
 482 | </p>
 483 | </details>
 484 | </div>
 485 | 
 486 | ---
 487 | 
 488 | 15. ماهو الناتج؟
 489 | 
 490 | ```javascript
 491 | function sum(a, b) {
 492 |   return a + b;
 493 | }
 494 | 
 495 | sum(1, "2");
 496 | ```
 497 | 
 498 | - A: `NaN`
 499 | - B: `TypeError`
 500 | - C: `"12"`
 501 | - D: `3`
 502 | 
 503 | <details><summary><b>الإجابة</b></summary>
 504 | <p>
 505 | <div dir='rtl'>
 506 | الجواب هو الخيار الثالث: C
 507 | 
 508 | لغة الجافاسكريبت هي لغة **dynamically typed language** بمعنى أننا لا نقوم بتعريف نوع معين للمتغيرات, المتغيرات بصورة أوتوماتيكية يتم تحويلها الى أنواع أخرى بدون أن تعرف أنت ذلك, وهذا يسمى ب _implicit type coercion_. **Coercion** تعني بأنك تقوم بالتحويل من نوع الى آخر.  
 509 | 
 510 | في هذا المثال, لغة الجافاسكريبت تقوم بتحويل الرقم `1` الى string, لكي تستطيع الدالةأن تقوم بعملها و تتمكن من إرجاع قيمة. أثناء قيام عملية إضافةالمتغير من النوع number  و الذي هو (`1`) و المتغير من النوع string  والذي هو (`'2'`), الرقم تم التعامل معه ك string,  بهذه الطريقة سنتمكن من عمل عملية concatenate للمتغيرين من نوع string ك مثال `"Hello" + "World"`, لهذا مايحدث هنا هو عبارة عن `"1" + "2"` و الذي بدوره يقوم بإرجاع `"12"`.      
 511 | </p>
 512 | </details>
 513 | </div>
 514 | 
 515 | ---
 516 | 
 517 | 16. ماهو الناتج؟
 518 | 
 519 | ```javascript
 520 | let number = 0;
 521 | console.log(number++);
 522 | console.log(++number);
 523 | console.log(number);
 524 | ```
 525 | 
 526 | - A: `1` `1` `2`
 527 | - B: `1` `2` `2`
 528 | - C: `0` `2` `2`
 529 | - D: `0` `1` `2`
 530 | 
 531 | <details><summary><b>الإجابة</b></summary>
 532 | <p>
 533 | <div dir='rtl'>
 534 | الجواب هو الخيار الثالث: C
 535 | 
 536 | ال **postfix** العامل الأحادي `++`:
 537 | 
 538 | 1. تقوم بإرجاع القيمة (هذه ترجع `0`)
 539 | 2. تقوم بزيادةالقيمة (number الآن تساوي `1`)
 540 | 
 541 | ال **prefix** العامل الأحادي `++`:
 542 | 
 543 | 1. تقوم بزيادة القيمة(number الآن تساوي  `2`)
 544 | 2. تقوم بإٍرجاع القيمة (هذه ترجع  `2`)
 545 | 
 546 | هذا يقوم بإرجاع `0 2 2`.
 547 | 
 548 | </p>
 549 | </details>
 550 | </div>
 551 | 
 552 | ---
 553 | 
 554 | 17.ماهو الناتج؟   
 555 | 
 556 | ```javascript
 557 | function getPersonInfo(one, two, three) {
 558 |   console.log(one);
 559 |   console.log(two);
 560 |   console.log(three);
 561 | }
 562 | 
 563 | const person = "Lydia";
 564 | const age = 21;
 565 | 
 566 | getPersonInfo`${person} is ${age} years old`;
 567 | ```
 568 | 
 569 | - A: `"Lydia"` `21` `["", " is ", " years old"]`
 570 | - B: `["", " is ", " years old"]` `"Lydia"` `21`
 571 | - C: `"Lydia"` `["", " is ", " years old"]` `21`
 572 | 
 573 | <details><summary><b>الإجابة</b></summary>
 574 | <p>
 575 | <div dir='rtl'>
 576 | الجواب هو الخيار الثاني: B
 577 | 
 578 | اذا قمت بإستخدام tagged template literals, فإن قيمة ال argument الأول هي دائما عبارة عن array والذي نوع قيمها عبارة عن string, ماتبقى من الarguments تتحصل على القيم من الpassed expressions. 
 579 | </p>
 580 | </details>
 581 | </div>
 582 | 
 583 | ---
 584 | 
 585 | 18. ماهو الناتج؟
 586 | 
 587 | ```javascript
 588 | function checkAge(data) {
 589 |   if (data === { age: 18 }) {
 590 |     console.log("You are an adult!");
 591 |   } else if (data == { age: 18 }) {
 592 |     console.log("You are still an adult.");
 593 |   } else {
 594 |     console.log(`Hmm.. You don't have an age I guess`);
 595 |   }
 596 | }
 597 | 
 598 | checkAge({ age: 18 });
 599 | ```
 600 | 
 601 | - A: `You are an adult!`
 602 | - B: `You are still an adult.`
 603 | - C: `Hmm.. You don't have an age I guess`
 604 | 
 605 | <details><summary><b>الإجابة</b></summary>
 606 | <p>
 607 | <div dir='rtl'>
 608 | الجواب هو الخيار الثالث: C
 609 | 
 610 | عندما نقوم بإختبار المساواة أو التساوي بين طرفين, ال primitives يتم مقارنتها عن طريق قيمها, بينما ال objects  يتم مقارنتها عن طريق الreference الذي يتبع لها, لغة الجافاسكريبت تتحقق عن إذا ماكان الrefrence الذي يتبع لobject يشير الى نفس الموقع في الذاكرة. 
 611 | 
 612 | لدينا هنا اثنان من ال objects والتي نقوم بعمل مقارنة بينهما, واللذان بدورهما ليس لديهما ذلك, الobject الذي قمنا بتمريره ك parameter يشير الى موقع مختلف في الذاكرة من الموقع الذي يشير اليه الobject  الثاني و الذي تم استخدامه للتحق من شرط المساواة.
 613 | 
 614 | لهذا كلا من  `{ age: 18 } === { age: 18 }` و  `{ age: 18 } == { age: 18 }` يرجعان `false`.
 615 | 
 616 | </p>
 617 | </details>
 618 | </div>
 619 | 
 620 | ---
 621 | 
 622 | 19. ماهو الناتج؟
 623 | 
 624 | ```javascript
 625 | function getAge(...args) {
 626 |   console.log(typeof args);
 627 | }
 628 | 
 629 | getAge(21);
 630 | ```
 631 | 
 632 | - A: `"number"`
 633 | - B: `"array"`
 634 | - C: `"object"`
 635 | - D: `"NaN"`
 636 | 
 637 | <details><summary><b>الإجابة</b></summary>
 638 | <p>
 639 | <div dir='rtl'>
 640 | الجواب هو الخيار الثالث: C
 641 | 
 642 | العامل spread `...args` يقوم بإرجاع array مع  arguments. الarray  هي object, لذا فإن `typeof args` تقوم بإرجاع  `"object"`.   
 643 | </p>
 644 | </details>
 645 | </div>
 646 | 
 647 | ---
 648 | 
 649 | 20. ماهو الناتج؟ 
 650 | 
 651 | ```javascript
 652 | function getAge() {
 653 |   "use strict";
 654 |   age = 21;
 655 |   console.log(age);
 656 | }
 657 | 
 658 | getAge();
 659 | ```
 660 | 
 661 | - A: `21`
 662 | - B: `undefined`
 663 | - C: `ReferenceError`
 664 | - D: `TypeError`
 665 | 
 666 | <details><summary><b>الإجابة</b></summary>
 667 | <p>
 668 | <div dir='rtl'>
 669 | الجواب هو الخيار الثالث: C
 670 | 
 671 | بإستخدام `"use strict"`, يمكنك التأكد بأنك لن تقوم عن طريق الخطأ بتعريف global variables. نحن لم نقم قط بتعريف المتغير `age`, و بما أننا قمنا بإستخدام `"use strict"` ستقوم بإرجاع reference error. اذا لم نقم بإستخدام `"use strict"` لكانت قد أدت المطلوب, بما أن الخاصية `age` تم إضافتها لل global object.      
 672 | </p>
 673 | </details>
 674 | </div>
 675 | 
 676 | ---
 677 | 
 678 | <div dir='rtl'>
 679 | 21. ماهي القيمة التي تحملها `sum`؟ 
 680 | </div> 
 681 | 
 682 | ```javascript
 683 | const sum = eval("10*10+5");
 684 | ```
 685 | 
 686 | - A: `105`
 687 | - B: `"105"`
 688 | - C: `TypeError`
 689 | - D: `"10*10+5"`
 690 | 
 691 | <details><summary><b>الأجابة</b></summary>
 692 | <p>
 693 | <div dir='rtl'>
 694 | الجواب هو الخيار الأول : A
 695 | 
 696 | `eval` تقوم بتقييم الكود الذي تم تمريره ك string. إذا كان عبارة عن expression كما في هذه الحالة, فإنها تقوم بتقييم ال expression. ال expression هو `10 * 10 + 5`. و هذا بدوره يقوم بإرجاع الرقم `105`.   
 697 | </p>
 698 | </details>
 699 | </div>
 700 | 
 701 | ---
 702 | 
 703 | <div dir='rtl'>
 704 | 22. الى كم من المدة الزمنية ستكون "cool_secret" قابلة للوصول إليها؟  
 705 | </div>
 706 | 
 707 | ```javascript
 708 | sessionStorage.setItem("cool_secret", 123);
 709 | ```
 710 | <div dir='rtl'>
 711 |   
 712 | A - الى الأبد, فالبيانات لايمكن أن تفقد.
 713 |   
 714 | B - عندما يقوم المستخدم بقفل ال tab.
 715 | 
 716 | C - عندما يقوم المستخدم بقفل نافذه المتصفح , ليس فقط الtab.
 717 | 
 718 | D - عندما يقوم المستخدم بقفل جهاز الكمبيوتر.
 719 | </div>
 720 | 
 721 | <details><summary><b>الإجابة</b></summary>
 722 | <p>
 723 | <div dir='rtl'>
 724 | الجواب هو الخيار الثاني: B
 725 |   
 726 | البيانات التي يتم تخزينها في `sessionStorage` يتم فقدها بعد قفل ال tab. 
 727 | 
 728 | إذا قمت بإستخدام `localStorage`, البيانات ستكون مخزنة هناك الى الأبد, و لكن اذا قمت بإستثناء ان تقوم بمناداة الدالة Clear كما في التالي `localStorage.clear()` عندها ستفقد هذه البيانات.:  
 729 | </p>
 730 | </details>
 731 | </div>
 732 | 
 733 | ---
 734 | 
 735 | 23. ماهو الناتج؟ 
 736 | 
 737 | ```javascript
 738 | var num = 8;
 739 | var num = 10;
 740 | 
 741 | console.log(num);
 742 | ```
 743 | 
 744 | - A: `8`
 745 | - B: `10`
 746 | - C: `SyntaxError`
 747 | - D: `ReferenceError`
 748 | 
 749 | <details><summary><b>الإجابة</b></summary>
 750 | <p>
 751 | <div dir='rtl'>
 752 | الجواب هو الخيار الثاني: B
 753 | 
 754 | مع الكلمة المفتاحية `var` بإمكانك تريف عدد من المتغيرات تحمل نفس الإسم, و المتغير سيقوم بأخذ آخر قيمة تمت إضافتها اليه.  
 755 | 
 756 | ليس بإمكانك أن تفعل هذا مع `let` أو `const` بما أن الكلمتان المفتاحيتان عبارة عن block-scoped, بمعنى أن القيمة ستكون متاحة في نطاق الBlock  الذي تم تعريفها به.   
 757 | </p>
 758 | </details>
 759 | </div>
 760 | 
 761 | ---
 762 | 
 763 | 24. ماهو الناتج؟
 764 | 
 765 | ```javascript
 766 | const obj = { 1: "a", 2: "b", 3: "c" };
 767 | const set = new Set([1, 2, 3, 4, 5]);
 768 | 
 769 | obj.hasOwnProperty("1");
 770 | obj.hasOwnProperty(1);
 771 | set.has("1");
 772 | set.has(1);
 773 | ```
 774 | 
 775 | - A: `false` `true` `false` `true`
 776 | - B: `false` `true` `true` `true`
 777 | - C: `true` `true` `false` `true`
 778 | - D: `true` `true` `true` `true`
 779 | 
 780 | <details><summary><b>الإجابة</b></summary>
 781 | <p>
 782 | <div dir='rtl'>
 783 | الجواب هو الخيار الثالث: C
 784 | 
 785 | كل مفاتيح ال object (عدا الSymbols)هي عبارة عن strings وراء الكواليس, حتى لو لم تقم بكتابة ذلك صراحة بنفسك ك string, لهذا دائما `obj.hasOwnProperty('1')` تقوم بإرجاع القيمة true.  
 786 | 
 787 | ولكنها لا تعمل بهذا الشكل مع set, ليس هنالك `'1'` من ضمن set, لهذا `set.has('1')` تقوم بإرجاع `false`, لديها القيمة الرقمية `1` أي من النوع number, `set.has(1)` تقوم بإرجاع `true`.     
 788 | </p>
 789 | </details>
 790 | </div>
 791 | 
 792 | ---
 793 | 
 794 | 25. ماهو الناتج؟ 
 795 | 
 796 | ```javascript
 797 | const obj = { a: "one", b: "two", a: "three" };
 798 | console.log(obj);
 799 | ```
 800 | 
 801 | - A: `{ a: "one", b: "two" }`
 802 | - B: `{ b: "two", a: "three" }`
 803 | - C: `{ a: "three", b: "two" }`
 804 | - D: `SyntaxError`
 805 | 
 806 | <details><summary><b>الإجابة</b></summary>
 807 | <p>
 808 | <div dir='rtl'>
 809 | الجواب هو الخيار الثالث: C 
 810 |   
 811 | إذا كان لديك مفتاحان يحملان نفس الاسم, فإن المفتاح سيتم تبديله, سيكون المفتاح في نفس مكانه, ولكنه سيحمل فقط القيمة الأخيرة
 812 | </p>
 813 | </details>
 814 | </div>
 815 | 
 816 | ---
 817 | 
 818 | <div dir='rtl'>
 819 | 26. في سياق تنفيذ global في لغة الجافاسكريبت, فإن الجافاسكريبت تقوم بإنشاء شيئين لك: الglobal object و الكلمة المفتاحية "this". 
 820 | </div>
 821 | 
 822 | - A: true
 823 | - B: false
 824 | - C: تعتمد على 
 825 | 
 826 | <details><summary><b>الإجابة</b></summary>
 827 | <p>
 828 | <div dir='rtl'>
 829 | الجواب هو الخيارالأول: A
 830 | 
 831 | سياق التنفيذ الأساسي هو سياق تنفيذ الglobal, وهي الشيء الذي يمكن الوصول إليه من أي مكان في الكود الذي ببرنامجك.
 832 | </p>
 833 | </details>
 834 | </div> 
 835 | 
 836 | ---
 837 | 
 838 | 27. ماهو الناتج؟
 839 | 
 840 | ```javascript
 841 | for (let i = 1; i < 5; i++) {
 842 |   if (i === 3) continue;
 843 |   console.log(i);
 844 | }
 845 | ```
 846 | 
 847 | - A: `1` `2`
 848 | - B: `1` `2` `3`
 849 | - C: `1` `2` `4`
 850 | - D: `1` `3` `4`
 851 | 
 852 | <details><summary><b>الإجابة</b></summary>
 853 | <p>
 854 | <div dir='rtl'>
 855 | الجواب هو الخيار الثالث: C
 856 | 
 857 | العبارة `continue`  تقوم بتخطي دورة التكرار إذا وجد شرط معين يقوم بإرجاع `true`.  
 858 | </p>
 859 | </details>
 860 | </div>
 861 | 
 862 | ---
 863 | 
 864 | 28. ماهو الناتج؟
 865 | 
 866 | ```javascript
 867 | String.prototype.giveLydiaPizza = () => {
 868 |   return "Just give Lydia pizza already!";
 869 | };
 870 | 
 871 | const name = "Lydia";
 872 | 
 873 | console.log(name.giveLydiaPizza())
 874 | ```
 875 | 
 876 | - A: `"Just give Lydia pizza already!"`
 877 | - B: `TypeError: not a function`
 878 | - C: `SyntaxError`
 879 | - D: `undefined`
 880 | 
 881 | <details><summary><b>الإجابة</b></summary>
 882 | <p>
 883 | <div dir='rtl'>
 884 | الجواب هو الخيار الأول : A
 885 | 
 886 | `String` هي built-in constructor, و لهذا سنتمكن من إضافة خصائص لها. لقد قمت بإضافة method للprototype الخاص ب `String`. Primitive strings يتمتحويلهم بصورة اوتوماتيكية الى objects من نوع string, و التي بدورها تم انشائها عن طريق دالة ال string prototype, لهذا جميع الstrings و التي هي string objects  لديها حق الوصول الى الmethod.   
 887 | </p>
 888 | </details>
 889 | </div>
 890 | 
 891 | ---
 892 | 
 893 | 29. ماهو الناتج؟ 
 894 | 
 895 | ```javascript
 896 | const a = {};
 897 | const b = { key: "b" };
 898 | const c = { key: "c" };
 899 | 
 900 | a[b] = 123;
 901 | a[c] = 456;
 902 | 
 903 | console.log(a[b]);
 904 | ```
 905 | 
 906 | - A: `123`
 907 | - B: `456`
 908 | - C: `undefined`
 909 | - D: `ReferenceError`
 910 | 
 911 | <details><summary><b>الإجابة</b></summary>
 912 | <p>
 913 | <div dir='rtl'>
 914 | الجواب هو الخيار الثاني : B
 915 | 
 916 | مفاتيح ال object يتم تحويلها اوتوماتيكيا الى strings. نحن نحاول أن نقوم بجعل  object عبارة عن مفتاح للobject `a`, و الذي يحمل القيمة `123`.  
 917 | 
 918 | و لكن, عندما نقوم بمحاول جعل object الى نوع string, سيصبح `"[object Object]"`. لذا ما نحاول أن نقوله هنا, هو أن `a["object Object"] = 123`.
 919 | إذا, سنحاول أن نفعل هذا مرة أخرى , `c` هو object آخر سنقوم بتحويله الى string بصورة صريحة, لذا `a["object Object"] = 456`.  
 920 | 
 921 | إذاَ, نحن نقوم بعمل log ل `a[b]`, و التي هي في الحقيقة `a["object Object"]`. و نحن قبل قليل قمنا بوضع قيمتها التي تساوي `456`, لذا ستقوم بإرجاع `456`.    
 922 | </p>
 923 | </details>
 924 | </div>
 925 | 
 926 | ---
 927 | 
 928 | 30. ماهو الناتج؟
 929 | 
 930 | ```javascript
 931 | const foo = () => console.log("First");
 932 | const bar = () => setTimeout(() => console.log("Second"));
 933 | const baz = () => console.log("Third");
 934 | 
 935 | bar();
 936 | foo();
 937 | baz();
 938 | ```
 939 | 
 940 | - A: `First` `Second` `Third`
 941 | - B: `First` `Third` `Second`
 942 | - C: `Second` `First` `Third`
 943 | - D: `Second` `Third` `First`
 944 | 
 945 | <details><summary><b>الإجابة</b></summary>
 946 | <p>
 947 | <div dir='rtl'>
 948 | الجوا ب هو الخيار الثاني: B
 949 | 
 950 | لدينا الدالة `setTimeout` والتي تم استدعائها أولا, و لكن تم الخروج منها آخراً.
 951 | 
 952 | هذا لأن في المتصفح, ليس لدينا محرَك من نوع runtime, أيضا لدينا مايعرف ب `WebAPI`. هذا ال`WebAPI` يقوم بإعطائنا الدالة `setTimeout`  لكي نبدأ بها, على سبيل المثال: DOM.
 953 | 
 954 | بعد ان يتم ارسال و البدء بتنفيذ ال _callback_ الى الWebAPI, الدالة `setTimeout` نفسها (ليس ال callback!) يتم اخراجها من الstack.
 955 | 
 956 | <img src="https://i.imgur.com/X5wsHOg.png" width="200">
 957 | 
 958 | الآن, `foo` يتم إدخالها و البدء بتنفيذها, بينما `"First"` يتم تسجيل دخولها.  
 959 | 
 960 | <img src="https://i.imgur.com/Pvc0dGq.png" width="200">
 961 | 
 962 | `foo` يتم إخراجها من ال stack, بينما `baz` يتم إدخالها و البدأ بتنفيذها. `"Third"` يتم تسجيل دخولها. 
 963 | 
 964 | <img src="https://i.imgur.com/WhA2bCP.png" width="200">
 965 | 
 966 | ال WebAPI ليس بإمكانها إضافة أشياء الى ال stack عندما تكون جاهزة. في المقابل, هي تقوم بإدخال دالة الcallback الى شيء يسمى بال _queue_.
 967 | 
 968 | <img src="https://i.imgur.com/NSnDZmU.png" width="200">
 969 | 
 970 | هنا تحديدا المكان الذي تبدأ فيه الloop بالعمل. 
 971 | ال **event loop** تنظر الى الstack و ال task queue, إذا كانت الstack خاوية, فهي تقوم بأخذ أول شيء في الqueue. و تقوم بإدخاله الى stack.
 972 | 
 973 | <img src="https://i.imgur.com/uyiScAI.png" width="200">
 974 | 
 975 | `bar` يتم إدخالها و البدأ بتنفيذها, `"Second"` يتم تسجيل دخولها, و من ثم إخراجها من الstack. 
 976 | </p>
 977 | </details>
 978 | </div>
 979 | 
 980 | ---
 981 | <div dir='rtl'>
 982 | 31. ماهو ال event.target عندما نقوم بالضغط على الزر
 983 | </div>
 984 | 
 985 | ```html
 986 | <div onclick="console.log('first div')">
 987 |   <div onclick="console.log('second div')">
 988 |     <button onclick="console.log('button')">
 989 |       Click!
 990 |     </button>
 991 |   </div>
 992 | </div>
 993 | ```
 994 | 
 995 | - A:  الخارجي `div`
 996 | - B: الداخلي `div`
 997 | - C: `button`
 998 | - D: array تحتوي على جميع العناصرالمتداخلة.
 999 | 
1000 | <details><summary><b>الإجابة</b></summary>
1001 | <p>
1002 | <div dir='rtl'>
1003 | الجواب هو الخيار الثالث: C
1004 | 
1005 | العنصر المتداخل الأعمق الذي تسبب بتنفيذ الevent  هو العنصر الذي يستهدفه هذا الevent, بإمكانك إيقاف ال bubbling عن طريق `event.stopPropagation`.
1006 | </p>
1007 | </details>
1008 | </div>
1009 | 
1010 | ---
1011 | 
1012 | <div dir='rtl'>
1013 | 32. عندما تقوم بالضغط على الفقرة (P), ماهو الناتج الذي ستتحصل عليه؟
1014 | </div>
1015 | 
1016 | ```html
1017 | <div onclick="console.log('div')">
1018 |   <p onclick="console.log('p')">
1019 |     Click here!
1020 |   </p>
1021 | </div>
1022 | ```
1023 | 
1024 | - A: `p` `div`
1025 | - B: `div` `p`
1026 | - C: `p`
1027 | - D: `div`
1028 | 
1029 | <details><summary><b>الإجابة</b></summary>
1030 | <p>
1031 | <div dir='rtl'>
1032 | الجواب هو الخيار الأول: A
1033 | 
1034 | إذا قمنا بالضغط على `p` سنرى إثنان من الlogs, ألا و هما `p` و `div`, أثناء عملية event propagation, هنالك ثلاث مراحل: الا وهي capturing, target و bubbling. بصورة افتراضية, الevent handlers يتم تنفيذهم في مرحلة الbubbling (إلا في حال أنك قمت بضبط قيمة `useCapture` ل `true` ). هي تتسلسل ابتداءا من أعمق عنصر متداخل تصاعدا الى الأقل عمقاً. 
1035 | </p>
1036 | </details>
1037 | </div>
1038 | 
1039 | ---
1040 | 
1041 | 33. ماهو الناتج؟
1042 | 
1043 | ```javascript
1044 | const person = { name: "Lydia" };
1045 | 
1046 | function sayHi(age) {
1047 |   console.log(`${this.name} is ${age}`);
1048 | }
1049 | 
1050 | sayHi.call(person, 21);
1051 | sayHi.bind(person, 21);
1052 | ```
1053 | 
1054 | - A: `undefined is 21` `Lydia is 21`
1055 | - B: `function` `function`
1056 | - C: `Lydia is 21` `Lydia is 21`
1057 | - D: `Lydia is 21` `function`
1058 | 
1059 | <details><summary><b>الإجابة</b></summary>
1060 | <p>
1061 | <div dir='rtl'>
1062 | الجواب هو الخيار الرابع: D
1063 | 
1064 | في الحالتين, بإمكاننا تمرير ال object الذي نود أن تشير اليه الكلمة المفتاحية `this`, ولكن, `.call` هي أيضا تم تنفيذها حالا.  
1065 | 
1066 | `.bind.` تقوم بإرجاع نسخة من الدالة, ولكن مع سياق محدد, لذا هي لا يتم تنفيذها حالاً.
1067 | </p>
1068 | </details>
1069 | </div>
1070 | 
1071 | ---
1072 | 
1073 | 34. ماهو الناتج؟
1074 | 
1075 | ```javascript
1076 | function sayHi() {
1077 |   return (() => 0)();
1078 | }
1079 | 
1080 | console.log(typeof sayHi());
1081 | ```
1082 | 
1083 | - A: `"object"`
1084 | - B: `"number"`
1085 | - C: `"function"`
1086 | - D: `"undefined"`
1087 | 
1088 | <details><summary><b>الإجابة</b></summary>
1089 | <p>
1090 | <div dir='rtl'>
1091 | الجواب هو الخيار الثاني: B
1092 | 
1093 | دالة `sayHi` تقوم بإرجاع القيمة المرجعة من الدالة المناداة في اللحظة (IIFE). هذه الدالة تقوم بإرجاع `0`, و الذي نوعه عبارة عن `"number"`.   
1094 | 
1095 | لمعلوماتك: لدينا فقط سبعة أنواع من ال built-in و هي : `null`, `undefined`, `boolean`, `number`, `string`, `object`, و `symbol`, و `bigint`.`"function"` هي ليست نوع, وبما أن الدوال عبارة عن objects, ف هي ليست من النوع `"object"`.  
1096 | </p>
1097 | </details>
1098 | </div>
1099 | 
1100 | ---
1101 | 
1102 | 35. أي هذه القيم هي قيم خطئية؟
1103 | 
1104 | ```javascript
1105 | 0;
1106 | new Number(0);
1107 | ("");
1108 | (" ");
1109 | new Boolean(false);
1110 | undefined;
1111 | ```
1112 | 
1113 | - A: `0`, `''`, `undefined`
1114 | - B: `0`, `new Number(0)`, `''`, `new Boolean(false)`, `undefined`
1115 | - C: `0`, `''`, `new Boolean(false)`, `undefined`
1116 | - D: جميعها
1117 | 
1118 | <details><summary><b>الإجابة</b></summary>
1119 | <p>
1120 | <div dir='rtl'>
1121 | الجواب هو الخيار الأول : A
1122 | 
1123 | لدينا فقط ستة قيم خطئية:
1124 | 
1125 | - `undefined`
1126 | - `null`
1127 | - `NaN`
1128 | - `0`
1129 | - `''` (empty string)
1130 | - `false`
1131 | 
1132 | Function constructors, مثل `new Number` و  `new Boolean` هي قيم صحيحية.
1133 | 
1134 | </p>
1135 | </details>
1136 | </div>
1137 | 
1138 | ---
1139 | 
1140 | 36. ماهو الناتج؟
1141 | 
1142 | ```javascript
1143 | console.log(typeof typeof 1);
1144 | ```
1145 | 
1146 | - A: `"number"`
1147 | - B: `"string"`
1148 | - C: `"object"`
1149 | - D: `"undefined"`
1150 | 
1151 | <details><summary><b>الإجابة</b></summary>
1152 | <p>
1153 | <div dir='rtl'>
1154 | الجواب هو الخيار الثاني: B
1155 | 
1156 | `typeof 1` تقوم بإرجاع `"number"`.
1157 | `typeof "number"` تقوم بإرجاع `"string"`
1158 | 
1159 | </p>
1160 | </details>
1161 | </div>
1162 | 
1163 | ---
1164 | 
1165 | 37. ماهو الناتج؟
1166 | 
1167 | ```javascript
1168 | const numbers = [1, 2, 3];
1169 | numbers[10] = 11;
1170 | console.log(numbers);
1171 | ```
1172 | 
1173 | - A: `[1, 2, 3, 7 x null, 11]`
1174 | - B: `[1, 2, 3, 11]`
1175 | - C: `[1, 2, 3, 7 x empty, 11]`
1176 | - D: `SyntaxError`
1177 | 
1178 | <details><summary><b>الإجابة</b></summary>
1179 | <p>
1180 | <div dir='rtl'>
1181 | الجواب هو الخيار الثالث: C
1182 | 
1183 | عندما تقوم بضبط قيمة ما لعنصر في الarray , و بعد إضافة هذا العنصر انت تكون قد تجاوزت طول الarray, لغة الجافاسكريبت تنشيء شيئا يسمى ب "empty slots", أي خانة فارغة, و هي في الحقيقة تحمل القيمة `undefined`, و لكنك سترى شيئا كالتالي:
1184 | 
1185 | `[1, 2, 3, 7 x empty, 11]`
1186 | 
1187 | وذلك يعتمد على المكان الذي قمت فيه بتشغيل البرنامج ( هو مختلف لكل متصفح, node, ...الخ)
1188 | </p>
1189 | </details>
1190 | </div>
1191 | 
1192 | ---
1193 | 
1194 | 38. ماهو الناتج؟
1195 | 
1196 | ```javascript
1197 | (() => {
1198 |   let x, y;
1199 |   try {
1200 |     throw new Error();
1201 |   } catch (x) {
1202 |     (x = 1), (y = 2);
1203 |     console.log(x);
1204 |   }
1205 |   console.log(x);
1206 |   console.log(y);
1207 | })();
1208 | ```
1209 | 
1210 | - A: `1` `undefined` `2`
1211 | - B: `undefined` `undefined` `undefined`
1212 | - C: `1` `1` `2`
1213 | - D: `1` `undefined` `undefined`
1214 | 
1215 | <details><summary><b>الإجابة</b></summary>
1216 | <p>
1217 | <div dir='rtl'>
1218 | الجواب هو الخيار الأول : A
1219 | 
1220 | النطاق أو الblock `catch`يستقبل ال arguemnt الذي يساوي `x`, هذا ليس نفس القيمة `x` عندما قمنا بتمرير الarguments, هذا المتغير `x` هو متغير block-scoped, أي يتم التعامل معه أو مناداته فقط بداخل الblock الذي تم تعريفه به.
1221 | 
1222 | لاحقا, قمنا بضبط القيمة `1` لهذا المتغير من نوع block-scoped, وقمنا أيضا بضبط قيمة للمتغير `y`. الآن نحن نقوم بطباعة قيمة المتغير الذي من نوع block-scoped و الذي هو `x` عن طريق الlog, و الذي هو يساوي `1`.    
1223 | 
1224 | بخارج نطاق ال`catch` block, `x` هي لاتزال `undefined`, و قيمة ال `y` تساوي `2`. عندما نريد طباعة قيمة ال x عن طريق الlog خارج نطاق ال `catch` block, فهي تقوم بإرجاع `undefined`, و ال `y` تقوم بإرجاع `2`.      
1225 | </p>
1226 | </details>
1227 | </div>
1228 | 
1229 | ---
1230 | 
1231 | 39. كل شيء في الجافاسكريبت هو عبارة عن ...
1232 | 
1233 | - A: primitive أو object
1234 | - B: function أو object
1235 | - C: فقط objects , سؤال مخادع
1236 | - D: number or object
1237 | 
1238 | <details><summary><b>الإجابة</b></summary>
1239 | <p>
1240 | <div dir='rtl'>
1241 | الجواب هو الخيار الأول: A
1242 | 
1243 | لغة الجافاسكريبت لديها فقط primitive types و objects.
1244 | 
1245 | نقصد بال Primitive types:  `boolean`, `null`, `undefined`, `bigint`, `number`, `string`, و `symbol`.
1246 | 
1247 | مايميز ال primitive من ال object هو أن ال primitives ليس لديها أي خصائص أو methods; ولكنك ستلاحظ أن `'foo'.toUpperCase()`يتم تقييمها ومعالجتها الى `'FOO'`و لا نتحصل على الخطأ `TypeError`. هذا لأنه عندما تحاول الوصول الى خاصية أو method لمتغير من من نوع primitive مثل ال string, فإن لغة الجافاسكريبت ستقوم بشكل ضمني بعمل wrap لل object بإستخدام واحدة من ال wrapper Classes, أي مانعنيه `String`, و لاحقا بصورة مباشرة يقوم بالتخلص من الwrapper, بعد أن يتم تقييم و تنفيذ الexpression.  جميع الprimitives, ماعدا `null` و `undefined` تقوم بعمل هذه العملية.    
1248 | </p>
1249 | </details>
1250 | </div>
1251 | 
1252 | ---
1253 | 
1254 | 40. ماهو الناتج؟ 
1255 | 
1256 | ```javascript
1257 | [[0, 1], [2, 3]].reduce(
1258 |   (acc, cur) => {
1259 |     return acc.concat(cur);
1260 |   },
1261 |   [1, 2]
1262 | );
1263 | ```
1264 | 
1265 | - A: `[0, 1, 2, 3, 1, 2]`
1266 | - B: `[6, 1, 2]`
1267 | - C: `[1, 2, 0, 1, 2, 3]`
1268 | - D: `[1, 2, 6]`
1269 | 
1270 | <details><summary><b>الإجابة</b></summary>
1271 | <p>
1272 | <div dir='rtl'>
1273 | الجواب هو الخيارالثالث: C
1274 | 
1275 | `[1, 2]` هي القيمة المبدئية.هذه القيمة هي التي بدأنا بها, و هي القيمة الأولى ل `acc`. أثناء الدورة الأولى`acc` تساوي `[1,2]` و `cur` تساوي `[0, 1]`, عندما نقوم بدمجهما سويا عن طريق concat يصبح لدينا الناتج `[1, 2, 0, 1]`.
1276 | 
1277 | إذاً, `[1, 2, 0, 1]`  هي `acc` و `[2, 3]` هي `cur`. نقوم بدمجهما سوية و نتحصل على `[1, 2, 0, 1, 2, 3]`.
1278 | </p>
1279 | </details>
1280 | </div>
1281 | 
1282 | ---
1283 | 
1284 | 41. ماهو الناتج؟
1285 | 
1286 | ```javascript
1287 | !!null;
1288 | !!"";
1289 | !!1;
1290 | ```
1291 | 
1292 | - A: `false` `true` `false`
1293 | - B: `false` `false` `true`
1294 | - C: `false` `true` `true`
1295 | - D: `true` `true` `false`
1296 | 
1297 | <details><summary><b>الإجابة</b></summary>
1298 | <p>
1299 | <div dir='rtl'>
1300 | الجواب هو الخيارالثاني: B
1301 | 
1302 | `null` قيمة خطئية.
1303 | 
1304 | `!null` تقوم بإرجاع `true`. 
1305 | 
1306 | `!true` تقوم بإرجاع `false`.
1307 | *********
1308 |  
1309 | `""` قيمة خطئية.
1310 | 
1311 | `!""`تقوم بإرجاع `true`. 
1312 | 
1313 | `!true` تقوم بإرجاع `false`.
1314 | *********
1315 |    
1316 | `1` قيمة صحيحية.
1317 | 
1318 | `!1` تقوم بإرجاع `false`.
1319 | 
1320 | `!false` تقوم بإرجاع `true`. 
1321 | 
1322 | </p>
1323 | </details>
1324 | </div> 
1325 | 
1326 | ---
1327 | 
1328 | <div dir='rtl'>
1329 |   
1330 | 42. ماهو الذي تقوم الدالة `setInterval` بإرجاعه في المتصفح؟ 
1331 | </div>
1332 | 
1333 | ```javascript
1334 | setInterval(() => console.log("Hi"), 1000);
1335 | ```
1336 | 
1337 | <div dir='rtl'>
1338 | 
1339 | A - رقم فريد أو متفرد id
1340 |  
1341 |  
1342 |  B - قيمة محددة لل milliseconds
1343 | 
1344 |  C - الدالة التي تم تمريرها 
1345 | 
1346 | `undefined` - D
1347 | 
1348 | </div>
1349 | 
1350 | <details><summary><b>الإجابة</b></summary>
1351 | <p>
1352 | <div dir='rtl'>
1353 | الجواب هو الخيار الأول: A
1354 | 
1355 | تقوم بإرجاع ال id الفريد, هذا الid يمكن استخدامه لكي يقوم بتصفير عداد الفترات المفصلة أي الinterval عن طريق استخدام الدالة `clearInterval()` 
1356 | </p>
1357 | </details>
1358 | </div>
1359 | 
1360 | ---
1361 | 
1362 | 43. مالذي يتم ارجاعه بعد تنفيذ الكود أدناه؟ 
1363 | 
1364 | ```javascript
1365 | [..."Lydia"];
1366 | ```
1367 | 
1368 | - A: `["L", "y", "d", "i", "a"]`
1369 | - B: `["Lydia"]`
1370 | - C: `[[], "Lydia"]`
1371 | - D: `[["L", "y", "d", "i", "a"]]`
1372 | 
1373 | <details><summary><b>الإجابة</b></summary>
1374 | <p>
1375 | <div dir='rtl'>
1376 | الجواب هو الخيار الأول: A
1377 | 
1378 | الstring هي تكرارية, و عملية الspread (...) تقوم بتحويل اي حرف تم فيه تنفيذ فئة تكرارية الى عنصر منفرد واحد.
1379 | </p>
1380 | </details>
1381 | </div>
1382 | 
1383 | ---
1384 | 
1385 | 44. ماهو الناتج؟
1386 | 
1387 | ```javascript
1388 | function* generator(i) {
1389 |   yield i;
1390 |   yield i * 2;
1391 | }
1392 | 
1393 | const gen = generator(10);
1394 | 
1395 | console.log(gen.next().value);
1396 | console.log(gen.next().value);
1397 | ```
1398 | 
1399 | - A: `[0, 10], [10, 20]`
1400 | - B: `20, 20`
1401 | - C: `10, 20`
1402 | - D: `0, 10 and 10, 20`
1403 | 
1404 | <details><summary><b>الإجابة</b></summary>
1405 | <p>
1406 | <div dir='rtl'>
1407 | الجواب هو الخيار الثالث: C
1408 | 
1409 | الدوال العادية ليس بإمكانها ان تتوقف في وسط التنفيذ بعد أن يتم مناداتها, و لكن الدوال من نوع generator من الممكن أن يتم ايقافها وسط التنفيذ, و لاحقا يتم مواصلة تنفيذها من حيث المكان الذي توقفت به. في كل مرة تواجه فيها الدالة من نوع generator الكلمة المفتاحية `yield`, فإن الدالة تخضع أو تستسلم للقيمة المحددة بعدها. مع ملاحظة أن الدالة من نوع generator  في هذه الحالة, لاتقوم بإرجاع القيمة, بل تخضع لتلك القيمة. 
1410 | 
1411 | أولا, نقوم بإنشاء الدالة من نوع generator مع وجود المتغير `i` مساوي ل `10`. نقوم بمناداة الدالةمن نوع generator باستخدام الدالة `next()`. في المرة الأولى التي ننادي فيها الدالة من نوع generator, فإن ال `i` تساوي `10`. هي تواجه الكلمة المفتاحية `yield`, فتخضع لقيمة ال `i`. الدالة generator في هذه اللحظة تم توقيفها مؤقتا, و القيمة `10` تم طباعتها عن طريق log.
1412 | 
1413 | اذاً, نقوم بمناداة الدالة مرة أخرى عن طريق الدالة `next()`, هي تبدأ لتواصل من المكان الذي تم توقفيها فيه مؤقتا سابقاً, و ماتزال قيمة `i` تساوي `10`. الآن هي تواجه الكلمة المفتاحية `yield` التالية, و تواجه `i * 2`. `i` تساوي `10`,لهذا تقوم بإرجاع `10 * 2` و التي هي تساوي `20`, و هذا سيوصلنا للنتيجة `10, 20`.         
1414 | </p>
1415 | </details>
1416 | </div>
1417 | 
1418 | ---
1419 | 
1420 | 45. ما الذي يتم ارجاعه عند تنفيذ الكود؟
1421 | 
1422 | ```javascript
1423 | const firstPromise = new Promise((res, rej) => {
1424 |   setTimeout(res, 500, "one");
1425 | });
1426 | 
1427 | const secondPromise = new Promise((res, rej) => {
1428 |   setTimeout(res, 100, "two");
1429 | });
1430 | 
1431 | Promise.race([firstPromise, secondPromise]).then(res => console.log(res));
1432 | ```
1433 | 
1434 | - A: `"one"`
1435 | - B: `"two"`
1436 | - C: `"two" "one"`
1437 | - D: `"one" "two"`
1438 | 
1439 | <details><summary><b>الإجابة</b></summary>
1440 | <p>
1441 | <div dir='rtl'>
1442 | الجواب هو الخيار الثاني: B
1443 | 
1444 | عندما نقوم بتمرير عدد من الpromises للدالة `Promise.race`. فهي تقوم برفض أو فصل الpromise  الاولى. للدالة `setTimeout` نحن نقوم بتمرير timer: 500ms لل promise الأولى و التي هي (`firstPromise`), و 100ms اي 100ملي ثانية للpromise الثانية والتي هي (`secondPromise`) هذا يعني ان ال `secondPromise` يتم فصلها اولاً مع القيمة `'two'`. `res` الآن تحمل قيمة `'two'`, وهي التي تم طباعتها عن طريق الlog.        
1445 | </p>
1446 | </details>
1447 | </div>
1448 | 
1449 | ---
1450 | 
1451 | 46. ماهو الناتج؟
1452 | 
1453 | ```javascript
1454 | let person = { name: "Lydia" };
1455 | const members = [person];
1456 | person = null;
1457 | 
1458 | console.log(members);
1459 | ```
1460 | 
1461 | - A: `null`
1462 | - B: `[null]`
1463 | - C: `[{}]`
1464 | - D: `[{ name: "Lydia" }]`
1465 | 
1466 | <details><summary><b>الإجابة</b></summary>
1467 | <p>
1468 | <div dir='rtl'>
1469 | الجواب هو الخيار الرابع: D
1470 | 
1471 | أولا, نقوم بتعريف المتغير `person` مع قيمة عبارة عن object لديه الخاصية `name`.  
1472 | 
1473 | <img src="https://i.imgur.com/TML1MbS.png" width="200">
1474 | 
1475 | ثم ,نقوم بتعريف المتغير الذي يسمى ب `members`. نقوم بضيط قيمة أول عنصر في ال array بالقيمة التي يحملها المتغير `person`.
1476 | الobjects تتفاعل عن طريق الrefrence عندما نقوم بضبطها مساويةً لبعضها البعض, عندما تقوم بتعريف أو إنشاء refrence معين من متغير الى متغير آخر, أنت فعليا تقوم بعمل نسخة من ذلك الrefrence. (مع ملاحظة أنهم ليس لديهم نفس الrefrence)
1477 | 
1478 | <img src="https://i.imgur.com/FSG5K3F.png" width="300">
1479 | 
1480 | ثم , نقوم بضبط قمية المتغير `person` بقيمة تساوي `null`.  
1481 | 
1482 | <img src="https://i.imgur.com/sYjcsMT.png" width="300">
1483 | 
1484 | نحن فقط نقوم بتعديل قيمة المتغير `person`, وليس أول عنصر في ال array, بما أن ذلك العنصر لديه refrence منسوخ من ال object. أول عنصر في `members` لا يزال لديه refrence للobject الأصلي. و عندما نقوم بطباع الarray `members` عن طريق الlog, فإن العنصر الأول لايزال يحمل قيمة الobject, و التي سيتم طباعتها عن طريق log.  
1485 | </p>
1486 | </details>
1487 | </div>
1488 | 
1489 | ---
1490 | 
1491 | 47. ماهو الناتج؟
1492 | 
1493 | ```javascript
1494 | const person = {
1495 |   name: "Lydia",
1496 |   age: 21
1497 | };
1498 | 
1499 | for (const item in person) {
1500 |   console.log(item);
1501 | }
1502 | ```
1503 | 
1504 | - A: `{ name: "Lydia" }, { age: 21 }`
1505 | - B: `"name", "age"`
1506 | - C: `"Lydia", 21`
1507 | - D: `["name", "Lydia"], ["age", 21]`
1508 | 
1509 | <details><summary><b>الإجابة</b></summary>
1510 | <p>
1511 | <div dir='rtl'>
1512 | الجواب هو الخيار الثاني: B
1513 | 
1514 | بإستخدام `for-in` التكرارية, بامكاننا أن نصل الى جميع المفاتيح التي تخص object معين. في هذه الحالة `name` و `age`. ماوراء الكواليس, مفاتيح ال objects هي عبارة عن strings (إذا لم تكن هذه المفاتيح عبارة عن symbol), في أي حلقة من الحلقات التكرارية, نقوم بضبط القيمة `item`مساوية للمفتاح الحالي الذي هي تتكرر فيه اوعنده. أولا `item`  تساوي `name`, و يتم طباعتها عن طريق الlog, ثم `item` تساوي `age` و التي ايضا تم طباعتها عن طريق الlog.
1515 | </p>
1516 | </details>
1517 | </div>
1518 | 
1519 | ---
1520 | 
1521 | 48. ماهو الناتج؟
1522 | 
1523 | ```javascript
1524 | console.log(3 + 4 + "5");
1525 | ```
1526 | 
1527 | - A: `"345"`
1528 | - B: `"75"`
1529 | - C: `12`
1530 | - D: `"12"`
1531 | 
1532 | <details><summary><b>الإجابة</b></summary>
1533 | <p>
1534 | <div dir='rtl'>
1535 | الجواب هو الخيار الثاني: B
1536 | 
1537 | Operator associativity او ترابطية العامل هي الترتيب أو التسلسل الذي يقيم به الcompiler ال expressions, ف هو إما أن يكون من اليسار الى اليمين أو من اليمين الى اليسار. هذا يحدث فقط إذا كان جميع الoperators لديها نفس الأسبقية. لدينا فقط نوع واحد من الoperator ألا و هو `+`. بالإضافة الى التالي, الترابطية هي من اليسار الى اليمين.  
1538 | 
1539 | `3 + 4` يتم تقييمها أولا. هذا مايعطينا الناتج الذي هو عبارة عن الرقم `7`.
1540 | 
1541 | `7 + '5'` تقوم بإرجاع الناتج `"75"` بسبب عملية ال coercion وهي العمليةالتي تقوم بالتحويل من نوع الى آخر, لغة الجافاسكريبت تقوم بتحويل الرقم `7` الى النوع string, أنظرالى السؤال رقم 15 في الأعلى. بإمكاننا عمل concatenate لمتغيرين من النوع string بإستخدام العملية `+`. `"7" + "5"` سترجع الناتج `"75"`.   
1542 | </p>
1543 | </details>
1544 | </div>
1545 | 
1546 | ---
1547 | 
1548 | <div dir='rtl'>
1549 | 49. ماهي قيمة `num`؟ 
1550 | </div>
1551 | 
1552 | ```javascript
1553 | const num = parseInt("7*6", 10);
1554 | ```
1555 | 
1556 | - A: `42`
1557 | - B: `"42"`
1558 | - C: `7`
1559 | - D: `NaN`
1560 | 
1561 | <details><summary><b>الإجابة</b></summary>
1562 | <p>
1563 | <div dir='rtl'>
1564 | الجواب هو الخيار الثالث: C
1565 | 
1566 | فقط الأرقام الأولى في الstring يتم إرجاعها. بناءاً على _radix_ (الargument الثاني لكي يتم تحديدنوعية الرقم الذي نود أن نقوم بعمل parse له الى: base 10, hexadecimal, octal, binary, الخ. ). تقوم `parseInt` بالتحقق عن إذا ماكانت الحروف في الstring صالحة. و بمجرد أن تجد حرف غير صالح في ال radix, ف هي تقوم بإيقاف عملية الparsing مباشرة و تتجاهل الحروف التي تليه.   
1567 | 
1568 | `*` ليست رقم صالح. هي فقط تقوم بعمل parse ل `"7"` الى عدد عشري `7`. `num` الآن تحمل القيمة `7`.   
1569 | </p>
1570 | </details>
1571 | </div>
1572 | 
1573 | ---
1574 | 
1575 | 50. ماهو الناتج؟
1576 | 
1577 | ```javascript
1578 | [1, 2, 3].map(num => {
1579 |   if (typeof num === "number") return;
1580 |   return num * 2;
1581 | });
1582 | ```
1583 | 
1584 | - A: `[]`
1585 | - B: `[null, null, null]`
1586 | - C: `[undefined, undefined, undefined]`
1587 | - D: `[ 3 x empty ]`
1588 | 
1589 | <details><summary><b>الإجابة</b></summary>
1590 | <p>
1591 | <div dir='rtl'>
1592 | الجواب هو الخيار الثالث: C
1593 | 
1594 | عندما يتم عمل mapping لل array, فإن قيمة `num` ستساوي قيمة العنصر الذي يتم حاليا المرور به, فكما نعرف أن الmapping يدور على جميع عناصر الarray. في هذه الحالة, العناصر عبارة عن أرقام, لهذا فإن شرط ال if statement `typeof num === "number"` يقوم بإرجاع `true`. دالة map  تقوم بإنشاء array جديدة, و إدخال القيم المرجعة من الدالة في هذه الarray.
1595 | 
1596 | ولكن, لا نقوم بإرجاع قيمة. عندما لا نقوم بإرجاع قيمة من الدالة, فإن الدالة تقوم بإرجاع `undefined`. لكل عنصرٍ في الarray, فإن نطاق الدالة او نعني الfunction block يتم مناداته, لهذا لأي عنصر نقوم بإرجاع `undefined`.  
1597 | </p>
1598 | </details>
1599 | </div>
1600 | 
1601 | ---
1602 | 
1603 | 51. ماهو الناتج؟
1604 | 
1605 | ```javascript
1606 | function getInfo(member, year) {
1607 |   member.name = "Lydia";
1608 |   year = 1998;
1609 | }
1610 | 
1611 | const person = { name: "Sarah" };
1612 | const birthYear = "1997";
1613 | 
1614 | getInfo(person, birthYear);
1615 | 
1616 | console.log(person, birthYear);
1617 | ```
1618 | 
1619 | - A: `{ name: "Lydia" }, "1997"`
1620 | - B: `{ name: "Sarah" }, "1998"`
1621 | - C: `{ name: "Lydia" }, "1998"`
1622 | - D: `{ name: "Sarah" }, "1997"`
1623 | 
1624 | <details><summary><b>الإجابة</b></summary>
1625 | <p>
1626 | <div dir='rtl'>
1627 | الجواب هو الخيار الأول: A
1628 | 
1629 | الArguments يتم تمريرها عن طريق قيمها, إلا في حالة كان قيمتها عبارة عن object, ففي هذه الحالة يتم تمريرها عن طريق الrefrence. `birthYear` تم تمريرها عن طريق القيمة, و بما أنها من النوع string وليس object. عندما نقوم بتمرير الarguments عن طريق القيمة, فإن نسخة من هذه القيمة يتم إنشاءها (أنظر للسؤال رقم 46 في الاعلى).
1630 | 
1631 | المتغير `birthYear` لديه refrence للقيمة `"1997"`. الargument `year` أيضا لديه refrence للقيمة `"1997"`, لكنها ليست نفس القيمة التي `birthYear` لديها refrence لها. عندما نقوم بتحديث قيمة `year` عن طريق ضبط `year` تساوي ل `"1998"`, نحن فقط نقوم بتحديث قيمة `year`. `birthYear` لا تزال تساوي `"1997"`.
1632 | 
1633 | قيمة `person` هي object. الargument `member` لديه نسخة refrence لنفس الobject. عندما نقوم بتعديل او تحديث خاصية للobject `member`و الذي لديه refrence لها, فإن قيمة `person` ستتعدل و تتغير أيضا,بما أن كلاهما لديهما refrence لنفس الobject. الخصائص `person` و `name` هما الأىن مساويان للقيمة `"Lydia"`.      
1634 | </p>
1635 | </details>
1636 | </div>
1637 | 
1638 | ---
1639 | 
1640 | 52. ماهو الناتج؟
1641 | 
1642 | ```javascript
1643 | function greeting() {
1644 |   throw "Hello world!";
1645 | }
1646 | 
1647 | function sayHi() {
1648 |   try {
1649 |     const data = greeting();
1650 |     console.log("It worked!", data);
1651 |   } catch (e) {
1652 |     console.log("Oh no an error!", e);
1653 |   }
1654 | }
1655 | 
1656 | sayHi();
1657 | ```
1658 | 
1659 | - A: `"It worked! Hello world!"`
1660 | - B: `"Oh no an error: undefined`
1661 | - C: `SyntaxError: can only throw Error objects`
1662 | - D: `"Oh no an error: Hello world!`
1663 | 
1664 | <details><summary><b>الإجابة</b></summary>
1665 | <p>
1666 | <div dir='rtl'>
1667 | الجواب هو الخيار الرابع: D
1668 | 
1669 | مع عبارة `throw` , بإمكاننا إنشاء errors حسب الطلب, أي ليست كا الإخطاء العامة في اللغة, بإستخدام هذه العبارة بإمكانك أن تضع exception, الexception يمكن أن يكون : <b>string</b>,  <b>number</b>, <b>boolean</b> أو <b>object</b>. في هذه الحالة, الexcption لدينا هو ال string `'Hello world'`.
1670 | 
1671 | مع عبارة `catch`, بإمكاننا ان نحدد ما الذي يتوجب فعله عندما يتم وضع أو إلقاء الexception في نطاق ال `try`. تم إلقاء أو وضع exception: الstring `'Hello world'`.  `e` الآن تساوي تلك الstring,log. هذا سيعطينا النتيجة `'Oh an error: Hello world'`.  
1672 | </p>
1673 | </details>
1674 | </div>
1675 | 
1676 | ---
1677 | 
1678 | 53. ماهو الناتج؟ 
1679 | 
1680 | ```javascript
1681 | function Car() {
1682 |   this.make = "Lamborghini";
1683 |   return { make: "Maserati" };
1684 | }
1685 | 
1686 | const myCar = new Car();
1687 | console.log(myCar.make);
1688 | ```
1689 | 
1690 | - A: `"Lamborghini"`
1691 | - B: `"Maserati"`
1692 | - C: `ReferenceError`
1693 | - D: `TypeError`
1694 | 
1695 | <details><summary><b>الإجابة</b></summary>
1696 | <p>
1697 | <div dir='rtl'>
1698 | الجواب هو الخيار الثاني: B
1699 | 
1700 | عندما تقوم بإرجاع خاصية, فإن قيمة هذه الخاصية هي تساوي القيمة المرجعة, ليس القيمة التي تم ضبطها في دالة الconstructor. نقوم بإرجاع ال string `"Maserati"`, لذا فإن `myCar.make` تساوي `"Maserati"`.   
1701 | </p>
1702 | </details>
1703 | </div>
1704 | 
1705 | ---
1706 | 
1707 | 54. ماهو الناتج؟
1708 | 
1709 | ```javascript
1710 | (() => {
1711 |   let x = (y = 10);
1712 | })();
1713 | 
1714 | console.log(typeof x);
1715 | console.log(typeof y);
1716 | ```
1717 | 
1718 | - A: `"undefined", "number"`
1719 | - B: `"number", "number"`
1720 | - C: `"object", "number"`
1721 | - D: `"number", "undefined"`
1722 | 
1723 | <details><summary><b>الإجابة</b></summary>
1724 | <p>
1725 | <div dir='rtl'>
1726 | الجواب هو الخيار الأول : A
1727 | 
1728 | `let x = y = 10;` هي في الحقيقة إختصار ل: 
1729 | </div>
1730 | 
1731 | ```javascript
1732 | y = 10;
1733 | let x = y;
1734 | ```
1735 | 
1736 | <div dir='rtl'>
1737 |   
1738 | عندما نقوم بضبط قيمة`y` لكي تساوي `10`, فنحن فعليا نقوم بإضافة الخاصية `y` للglobal object. (`window` في المتصفح, `global` في Node). في المتصفح, `window.y` الآن تساوي `10`. 
1739 | 
1740 | ثم, عندما نقوم بتعريف المتغير `x` بالقيمة `y` و التي هي في الحقيقة تساوي `10`. المتغيرات التي يتم تعريفها بالكلمة المفتاحية `let`هي متغيرات block scoped, أي يتم التعامل معها في النطاق الذي تم تعريفها فيه فقط, الدالة المناداة حاليا في هذه الحالة أي immediately-invoked function (IIFE). عندما نقوم بإستخدام العملية `typeof`, فإن المعامل `x` ليس معرف, نحن نحاول الوصول الى `x` خارج النطاق الذي تم تعريفه بها. هذا يعني أن `x` ليست معرفة. المتغيرات التي لم يتم وضع قيمة لها أو لم يتم تعريفها هي من النوع `"undefined"`. `console.log(typeof x)` تقوم بإرجاع `"undefined"`.
1741 | 
1742 | ولكن, نحن قمنا بإنشاء و تعريف global variable `y` عندما قمنا بضبط قيمة `y` لتساوي `10`. هذه القيمة يمكن الوصول إليها من أي مكان في البرنامج. `y` هي معرفة, و لديها قيمة من النوع `"number"`.  `console.log(typeof y)` تقوم بإرجاع `"number"`.   
1743 | </p>
1744 | </details>
1745 | </div>
1746 | 
1747 | ---
1748 | 
1749 | 55. ماهو الناتج؟
1750 | 
1751 | ```javascript
1752 | class Dog {
1753 |   constructor(name) {
1754 |     this.name = name;
1755 |   }
1756 | }
1757 | 
1758 | Dog.prototype.bark = function() {
1759 |   console.log(`Woof I am ${this.name}`);
1760 | };
1761 | 
1762 | const pet = new Dog("Mara");
1763 | 
1764 | pet.bark();
1765 | 
1766 | delete Dog.prototype.bark;
1767 | 
1768 | pet.bark();
1769 | ```
1770 | 
1771 | - A: `"Woof I am Mara"`, `TypeError`
1772 | - B: `"Woof I am Mara"`,`"Woof I am Mara"`
1773 | - C: `"Woof I am Mara"`, `undefined`
1774 | - D: `TypeError`, `TypeError`
1775 | 
1776 | <details><summary><b>الإجابة</b></summary>
1777 | <p>
1778 | <div dir='rtl'>
1779 | الجواب هو الخيار الأول: A
1780 |   
1781 | بإمكاننا مسح خصائص object معين عن طريق استخدام الكلمة المفتاحية `delete`, أيضا يمكن فعل هذا في ال prototype. بمسح خاصية معينة من الprototype,  فهي سيتم مسحها وبالتالي لن تكون موجودة في سلسلة الprototype. في هذه الحالة فإن الدالة `bark`  لن تكون موجودة بعد الآن في الprototype بعد `delete Dog.prototype.bark`, ولكن بالرغم من هذا فنحن نحاول الوصول إليها.   
1782 | 
1783 | عندما نحاول أن ننادي شيئا ما في دالة و هو ليس موجود في هذه الدالة, فإننا سنتحصل على الخطأ `TypeError`, و في هذه الحالة `TypeError: pet.bark is not a function` بما أن `pet.bark` هي `undefined`.   
1784 | </p>
1785 | </details>
1786 | </div>
1787 | 
1788 | ---
1789 | 
1790 | 56. ماهو الناتج؟
1791 | 
1792 | ```javascript
1793 | const set = new Set([1, 1, 2, 3, 4]);
1794 | 
1795 | console.log(set);
1796 | ```
1797 | 
1798 | - A: `[1, 1, 2, 3, 4]`
1799 | - B: `[1, 2, 3, 4]`
1800 | - C: `{1, 1, 2, 3, 4}`
1801 | - D: `{1, 2, 3, 4}`
1802 | 
1803 | <details><summary><b>الإجابة</b></summary>
1804 | <p>
1805 | <div dir='rtl'>
1806 | الجواب هو الخيار الرابع: D
1807 | 
1808 | ال object `Set` هو مجموعة من القيم الفريدة, أي القيمة بإمكانها أن تتواجد مرة واحدة فقط في المجموعة. 
1809 | 
1810 | نقوم بتمرير التكراري أي نعني الiterable `[1, 1, 2, 3, 4]`  بوجود قيمة مكررة ألا وهي `1` . بما أننا لا يمكن أن نضع قيمة واحدة مرتين في مجموعة, فإن واحدة من القيم المكررة سيتم إزالتها, و سيكون الناتج: `{1, 2, 3, 4}`. 
1811 | </p>
1812 | </details>
1813 | </div>
1814 | 
1815 | ---
1816 | 
1817 | 57. ماهو الناتج؟
1818 | 
1819 | ```javascript
1820 | // counter.js
1821 | let counter = 10;
1822 | export default counter;
1823 | ```
1824 | 
1825 | ```javascript
1826 | // index.js
1827 | import myCounter from "./counter";
1828 | 
1829 | myCounter += 1;
1830 | 
1831 | console.log(myCounter);
1832 | ```
1833 | 
1834 | - A: `10`
1835 | - B: `11`
1836 | - C: `Error`
1837 | - D: `NaN`
1838 | 
1839 | <details><summary><b>الإجابة</b></summary>
1840 | <p>
1841 | <div dir='rtl'>
1842 | الجواب هو الخيار الثالث: C
1843 | 
1844 | هنا يوجد لدينا module مستورد وهو قابل للقراءة فقط, ليس بإمكانك تعديل او تحديث الmodule المستورد, أي imported module. فقط الmodule الذي قام بتصديره هو القادر على تغيير قيمته.
1845 | 
1846 | عندما نحاول أن نزيد قيمة المتغير `myCounter`, سنتحصل على الخطأ `myCounter` هو قابل للقراءة فقط و ليس من الممكن تعديله.  
1847 | </p>
1848 | </details>
1849 | </div>
1850 | 
1851 | ---
1852 | 
1853 | 58. ماهو الناتج؟
1854 | 
1855 | ```javascript
1856 | const name = "Lydia";
1857 | age = 21;
1858 | 
1859 | console.log(delete name);
1860 | console.log(delete age);
1861 | ```
1862 | 
1863 | - A: `false`, `true`
1864 | - B: `"Lydia"`, `21`
1865 | - C: `true`, `true`
1866 | - D: `undefined`, `undefined`
1867 | 
1868 | <details><summary><b>الإجابة</b></summary>
1869 | <p>
1870 | <div dir='rtl'>
1871 | الجواب هو الخيار الأول: A
1872 |   
1873 | العامل `delete` تقوم بإرجاع قيمة boolen و هي `true` عندما تتم عملية المسح بنجاح, خلاف ذلك ستقوم بإرجاع `false`, ولكن المتغيرات المعرفة بالكلمات المفتاحية `var`, `const` أو `let` ليس بالإمكان مسحها بإستخدام العامل `delete`.        
1874 | 
1875 | المتغير `name` تم تعريفه باستخدام الكلمة المفتاحية `const`, لهذا فإن عملية مسحه لم تتم بنجاح, وتم إرجاع القيمة `false`, عندما نقوم بضبط المتغير `age` ليساوي القيمة `21` فإننا فعليا نقوم بإضافة خاصية تسمى `age` للglobal object. بإمكانك أن تمسح خصائص من الobjects بنجاح بإستخدام هذه الطريقة , أيضا الglobal objects, لذا فإن `delete age` تقوم بإرجاع `true`.         
1876 | </p>
1877 | </details>
1878 | 
1879 | ---
1880 | 
1881 | 59. ماهو الناتج؟
1882 | 
1883 | ```javascript
1884 | const numbers = [1, 2, 3, 4, 5];
1885 | const [y] = numbers;
1886 | 
1887 | console.log(y);
1888 | ```
1889 | 
1890 | - A: `[[1, 2, 3, 4, 5]]`
1891 | - B: `[1, 2, 3, 4, 5]`
1892 | - C: `1`
1893 | - D: `[1]`
1894 | 
1895 | <details><summary><b>الإجابة</b></summary>
1896 | <p>
1897 | <div dir='rtl'>
1898 | الجواب هو الخيار الثالث: C
1899 | 
1900 | بإمكاننا إستخراج أو استخلاص القيم من arrays أو من objects عن طريق إستخدام الdestructing, على سبيل المثال: 
1901 | </div>
1902 | 
1903 | ```javascript
1904 | [a, b] = [1, 2];
1905 | ```
1906 | 
1907 | <div dir='rtl'>
1908 | <img src="https://i.imgur.com/ADFpVop.png" width="200">
1909 | 
1910 | قيمة `a` الآن تساوي `1`, و قيمة `b` الآن تساوي `2`. ماقمنا بفعله حقاً في هذا السؤال هو:     
1911 | </div>
1912 | 
1913 | ```javascript
1914 | [y] = [1, 2, 3, 4, 5];
1915 | ```
1916 | 
1917 | <div dir='rtl'>
1918 | <img src="https://i.imgur.com/NzGkMNk.png" width="200">
1919 | 
1920 | هذا يعني أن قيمة `y` هي مساوية للقيمة الأولى في الarray, والتي هي عبارة عن نوع رقم يساوي `1`, عندما نقوم بطباعة `y` عن طريق الlog, فإن القيمة `1` هي التي يتم إرجاعها.     
1921 | </p>
1922 | </details>
1923 | </div>
1924 | 
1925 | ---
1926 | 
1927 | 60. ماهو الناتج؟
1928 | 
1929 | ```javascript
1930 | const user = { name: "Lydia", age: 21 };
1931 | const admin = { admin: true, ...user };
1932 | 
1933 | console.log(admin);
1934 | ```
1935 | 
1936 | - A: `{ admin: true, user: { name: "Lydia", age: 21 } }`
1937 | - B: `{ admin: true, name: "Lydia", age: 21 }`
1938 | - C: `{ admin: true, user: ["Lydia", 21] }`
1939 | - D: `{ admin: true }`
1940 | 
1941 | <details><summary><b>الإجابة</b></summary>
1942 | <p>
1943 | <div dir='rtl'>
1944 | الجواب هو الخيار الثاني: B
1945 | 
1946 | من الممكن دمج الobjects بإستخدام العامل spread `...`. هي تمكنك من إنشاء نسخ من أزواج ال key/value أي أزواج المفاتيح و القيم التي تنتمي الى object معين, و إضافتهم الى object آخر. في هذه الحالة, نحن نقوم بعمل نسخ من الobject `user`, و من ثم إضافتهم الى ال obejct `admin`. ال object `admin` الآن يتضمن نسخ عبارة عن أزواج مفاتيح و قيم, و هذا ما سبب في إعطاء النتيجة `{ admin: true, name: "Lydia", age: 21 }`.  
1947 | </p>
1948 | </details>
1949 | </div>
1950 | 
1951 | ---
1952 | 
1953 | 61. ماهو الناتج؟
1954 | 
1955 | ```javascript
1956 | const person = { name: "Lydia" };
1957 | 
1958 | Object.defineProperty(person, "age", { value: 21 });
1959 | 
1960 | console.log(person);
1961 | console.log(Object.keys(person));
1962 | ```
1963 | 
1964 | - A: `{ name: "Lydia", age: 21 }`, `["name", "age"]`
1965 | - B: `{ name: "Lydia", age: 21 }`, `["name"]`
1966 | - C: `{ name: "Lydia"}`, `["name", "age"]`
1967 | - D: `{ name: "Lydia"}`, `["age"]`
1968 | 
1969 | <details><summary><b>الإجابة</b></summary>
1970 | <p>
1971 | <div dir='rtl'>
1972 | الجواب هو الخيار الثاني: B
1973 | 
1974 | مع إستخدام  `defineProperty` method, بإمكاننا إضافة خصائص جديدة لobject معين,أو تعديل خصائصه الحالية,. عندما نقوم بإضافة خاصية لobject بإستخدام `defineProperty` method, ف هي بطبيعة الحال ليست enumerable. ال `Object.keys` method تقوم بإرجاع جميع أسامي الخصائص من object معين و التي هي جميعها enumerable, في هذه الحالة `"name"` فقط.       
1975 | 
1976 | الخصائص التي تم إضافتها بإستخدام `defineProperty` method هي بطبيعة الحال غير قابلة للتغيير أو التعديل. بإمكانك عمل override بإستخدام الخصائص `writable`, `configurable` و `enumerable`.  بهذه الطريقة, ال `defineProperty` method ستعطيك تحكم أكثر بكثير على الخصائص التي قمت بإضافتها الى object معين.  
1977 | </p>
1978 | </details>
1979 | </div>
1980 | 
1981 | ---
1982 | 
1983 | 62. ماهو الناتج؟
1984 | 
1985 | ```javascript
1986 | const settings = {
1987 |   username: "lydiahallie",
1988 |   level: 19,
1989 |   health: 90
1990 | };
1991 | 
1992 | const data = JSON.stringify(settings, ["level", "health"]);
1993 | console.log(data);
1994 | ```
1995 | 
1996 | - A: `"{"level":19, "health":90}"`
1997 | - B: `"{"username": "lydiahallie"}"`
1998 | - C: `"["level", "health"]"`
1999 | - D: `"{"username": "lydiahallie", "level":19, "health":90}"`
2000 | 
2001 | <details><summary><b>الإجابة</b></summary>
2002 | <p>
2003 | <div dir='rtl'>
2004 | الجواب هو الخيار الأول : A
2005 | 
2006 | ال argument الثاني من `JSON.stringify` هو replacer أي حالٍ محل شيء آخر, الreplacer إما أن يكون دالة أو يكون array, و سيمكنك من التحكم في كيفية و ماهية امكانية عمل stringified للقيم, أي تحويلها الى string.   
2007 | 
2008 | إذا كان الreplacer هو عبارة عن array, فإن الخصائص التي أساميها مضمنة في الarray هي فقط التي يمكن إضافتها الى ال JSON string. في هذه الحالة, الخصائص التي تحمل الأسامي `"level"` و `"health"` فقط هي المضمنة, `"username"` غير مضمنة. `data` الآن تساوي `"{"level":19, "health":90}"`.   
2009 | 
2010 | إذا كان الreplacer عبارة عن دالة, فإن هذه الدالة يتم مناداتها عند أي خاصية في الobject أنت تقوم بعمل stringifying لها.القيمة المرجعة من هذه الدالة ستكون قيمة الخاصية عندما تم إضافتها ل JSON string. إذا كانت القيمة `undefined`, فإن هذه الخاصية سيتم إستبعادها من الJSON string.  
2011 | </p>
2012 | </details>
2013 | </div>
2014 | 
2015 | ---
2016 | 
2017 | 63. ماهو الناتج؟
2018 | 
2019 | ```javascript
2020 | let num = 10;
2021 | 
2022 | const increaseNumber = () => num++;
2023 | const increasePassedNumber = number => number++;
2024 | 
2025 | const num1 = increaseNumber();
2026 | const num2 = increasePassedNumber(num1);
2027 | 
2028 | console.log(num1);
2029 | console.log(num2);
2030 | ```
2031 | 
2032 | - A: `10`, `10`
2033 | - B: `10`, `11`
2034 | - C: `11`, `11`
2035 | - D: `11`, `12`
2036 | 
2037 | <details><summary><b>الإجابة</b></summary>
2038 | <p>
2039 | <div dir='rtl'>
2040 | الجواب هو الخيار الأول : A
2041 | 
2042 | العامل الأحادي `++` يقوم أولا بإرجاع قيمة المعامل, ثم يقوم بزيادة قيمة هذا المعامل. قيمة `num1` تساوي `10`, و بما أن دالة `increaseNumber` أولا تقوم بإرجاع قيمة `num` و التي هي تساوي `10`, و تقوم بزيادة قيمة `num` لاحقاً فقط.       
2043 | 
2044 | `num2` تساوي`10`, وبما أننا نقوم بتمرير `num1` ل `increasePassedNumber`. فإن `number` تساوي `10` والتي هي قيمة`num1`. مجدداً, العامل الأحادي `++`, أولاً يقوم بإرجاع قيمة المعامل, و من ثم زيادة قيمة المعامل. قيمة `number` تساوي`10`, إذاً `num2` تساوي `10`.         
2045 | </p>
2046 | </details>
2047 | </div>
2048 | 


--------------------------------------------------------------------------------
/ar-EG/README_ar-EG.md:
--------------------------------------------------------------------------------
   1 | <div dir="rtl">
   2 | 
   3 | # قائمة اسئلة جافاسكربت متقدمة
   4 | أنا بنشر أسئلة اختر جافاسكربت كل يوم على [انستجرام](https://www.instagram.com/theavocoder) واللي بدوري هنشرهم هنا
   5 | 
   6 | من البسيط للمتطور: اختبر نفسك في الجافاسكربت, افتكر حاجات كنت ناسيها, او جهز نفسك لمقابلة عمل جايه! :muscle: :rocket: 
   7 | 
   8 | الاجابات في الجزء المخفي تحت, ببساطة دوس على السؤال عشان تفتح تفاصيله. اتمنالكم حظ سعيد :heart:
   9 | 
  10 | ملحوظة المترجم: الترجمه دي معموله بمزيج من اللغه الانجليزية و اللغه العامية العربية المستخدمه في مصر. انا مشيت في اتجاه اني استخدم اللغه الانجليزية في جزئيات معينه لأن مينفعش تتكتب بالعربي بطريقة او بأخرى من غير ما تفقد المعنى او يبقى البحث عنها بعد كده صعب. لو عندك اقتراح للترجمه اعمل منشن وانت بتعمل `issue` على الموقع هنا. 
  11 | 
  12 | ---
  13 | 
  14 | ###### 1. ايه اللي هيتطبع؟
  15 | <div dir="ltr">
  16 | 
  17 | ```javascript
  18 | function sayHi() {
  19 |   console.log(name);
  20 |   console.log(age);
  21 |   var name = "Lydia";
  22 |   let age = 21;
  23 | }
  24 | 
  25 | sayHi();
  26 | ```
  27 | </div>
  28 | 
  29 | - أ: `Lydia` و `undefined`
  30 | - ب: `Lydia` و `ReferenceError`
  31 | - ج: `ReferenceError` و `21`
  32 | - د: `undefined` و `ReferenceError`
  33 | 
  34 | <details><summary><b>الاجابة</b></summary>
  35 | <p>
  36 | 
  37 | #### الاجابة الصحيحة: د
  38 | 
  39 | جوا الدالة احنا الاول عملنا متغير `name` بالكلمة الدالة `var`. ده معناه ان المتغير ده هيكون موجود في الذاكرة في مرحلة التكوين بالقيمة `undefined` قبل ما الكود يشتغل لحد ما نوصل تحديداً للسطر اللي فيه بنحط قيمة للمتغير ده. احنا بقى لحد السطر اللي بنبطع فيه المتغير ده مكانش لسه اتعمل وبالتالي كان لسه فيه قيمة `undefined`.
  40 | 
  41 | المتغيرات اللي بتتعمل بكلمة `let` و `const` بيعملوا نفس الموضوع, بس الفرق ان مبنقدرش ناخد قيم منهم الا لحد ما نضيفلهم قيم من الأساس. دي اسمها `temporal dead zone` او بالعربي "منطقة الموت المؤقتة". لما بنحاول ناخد قيمة متغير قبل ما نعمله جافاسكربت بترجع خطأ من نوع `ReferenceError`
  42 | 
  43 | </p>
  44 | </details>
  45 | 
  46 | ---
  47 | 
  48 | ###### 2. ايه اللي هيتطبع؟
  49 | <div dir="ltr">
  50 | 
  51 | ```javascript
  52 | for (var i = 0; i < 3; i++) {
  53 |   setTimeout(() => console.log(i), 1);
  54 | }
  55 | 
  56 | for (let i = 0; i < 3; i++) {
  57 |   setTimeout(() => console.log(i), 1);
  58 | }
  59 | ```
  60 | </div>
  61 | 
  62 | - أ: `0 1 2` و `0 1 2` 
  63 | - ب: `0 1 2` و `3 3 3`
  64 | - ج: `3 3 3` و `0 1 2`
  65 | 
  66 | <details><summary><b>الاجابة</b></summary>
  67 | <p>
  68 | 
  69 | #### الاجابة: ج
  70 | 
  71 | الفنكشن اللي`setTimeout` بتشغلها بيتم تشغليها _بعد_ ما اللووب تخلص بسبب قائمة الاحداث `event queue` في جافاسكربت. بما ان اول لووب اتعملت كان المتغير بتاعها معمول بكلمة `var` اذا كان `global` وبالتالي في اللوب احنا كل شوية كنا بنزود `i` لحد ما وصل ل 3 و _بعد_ كده قامت الفنكشن اللي جوا `setTimeout` اشتغلت. ده كده اول لووب. 
  72 | 
  73 | اما بقى في تاني لووب المتغير `i` كان معمول بكلمة `let` و بالتالي المنظور بتاعه `scope` محدد بالاقواس المحيطة بيه `block` وبالتالي في كل مره اللوب هتزيد هيكون في قيمة جديدة تماماً للمتغير `i` و كل قيمة من دول موجوده جوا ال`block scope` اللي هي حصلت فيه, و بالتالي هيبقى كأن البرنامج شايف 3 قيم للمتغير `i` في 3 اماكن مختلفه!
  74 | 
  75 | </p>
  76 | </details>
  77 | 
  78 | ---
  79 | 
  80 | ###### 3. ايه اللي هيتطبع؟
  81 | <div dir="ltr">
  82 | 
  83 | ```javascript
  84 | const shape = {
  85 |   radius: 10,
  86 |   diameter() {
  87 |     return this.radius * 2;
  88 |   },
  89 |   perimeter: () => 2 * Math.PI * this.radius
  90 | };
  91 | 
  92 | shape.diameter();
  93 | shape.perimeter();
  94 | ```
  95 | </div>
  96 | 
  97 | - أ: `20` و `62.83185307179586`
  98 | - ب: `20` و `NaN`
  99 | - ج: `20` و `63`
 100 | - د: `NaN` و `63`
 101 | 
 102 | <details><summary><b>الاجابة</b></summary>
 103 | <p>
 104 | 
 105 | #### الاجابة: ب
 106 | 
 107 | خلي بالك من نوعية الفنكشن `diameter` و هي `regular`و نوعية الفنكشن `perimeter` واللي هي `arrow function`.
 108 | 
 109 | في النوع الاخير, الكلمة الدالة `this` بتشاور الى المحيط بالدالة دي. وده معناه اننا لما بنشغل `perimeter` احنا مش بنشاور ب`this` على `shape` بل بنشاور على المحيط و هو `window` مثلاً! 
 110 | 
 111 | وبالتالي مفيش قيمة `radius` في النطاق ده, و بالتالي البرنامج بيدينا `undefined`.
 112 | </p>
 113 | </details>
 114 | 
 115 | ---
 116 | 
 117 | ###### 4. ايه اللي هيتطبع؟
 118 | <div dir="ltr">
 119 | 
 120 | ```javascript
 121 | +true;
 122 | !"Lydia";
 123 | ```
 124 | </div>
 125 | 
 126 | - أ: `1` و `false` 
 127 | - ب: `NaN` و `false`
 128 | - ج: `false` و `false`
 129 | 
 130 | <details><summary><b>الاجابة</b></summary>
 131 | <p>
 132 | 
 133 | #### الاجابة الصحيحة: أ
 134 | 
 135 | علامة الجمع تحاول دائما ان تغير قيم من قيم مدخلاتها الى رقم باعتبار ان اي قيمة حقيقية ايجابية `true` يتم تحويلها لرقم `1` و القيم السالبية `false` تتحول الى `0`. 
 136 | The unary plus tries to convert an operand to a number. `true` is `1`, and `false` is `0`.
 137 | 
 138 | و في الحالة دي القيمة الكتابية `'Lydia'` تعتبر ايجابية. هنا بقى السؤال: "هل القيمه الايجابيه دي سالبيه؟ و بالتالي الاجابة لا اللي هي `false`.
 139 | 
 140 | </p>
 141 | </details>
 142 | 
 143 | ---
 144 | 
 145 | ###### 5. اختر الاجابة الصحيحة
 146 | <div dir="ltr">
 147 | 
 148 | ```javascript
 149 | const bird = {
 150 |   size: "small"
 151 | };
 152 | 
 153 | const mouse = {
 154 |   name: "Mickey",
 155 |   small: true
 156 | };
 157 | ```
 158 | </div>
 159 | 
 160 | - أ: `mouse.bird.size` متنفعش
 161 | - ب: `mouse[bird.size]` متنفعش
 162 | - ج: mouse[bird["size"]]` متنفعش
 163 | - د: كلهم ينفعوا
 164 | 
 165 | <details><summary><b>الاجابة</b></summary>
 166 | <p>
 167 | 
 168 | #### الاجابة الصحيحة: أ
 169 | 
 170 | في جافاسكربت كل مفاتيح العناصر `object keys` من النوع `string` الا في حالة الـ `symbol`. وعلى الرغم من اننا ممكن منكتبهمش في شكل `string` فهما دايماً بيتحولوا ل`string`
 171 | بص المثال: 
 172 | <div dir="ltr">
 173 | 
 174 | ```javascriptlet obj = {
 175 |   size: 'big'
 176 | }
 177 | ```
 178 | </div>
 179 | 
 180 | في المثال ده احنا عملنا عنصر و كان ليه مفتاح اسمه size. شكل size احنا عاملينه من غير علامة التنصيص `""` ولكن لما البرنامج بيشتغل بيتم تحويلها الى سترنج و بالتالي بتكون في شكل `"size"`
 181 | 
 182 | غير بقى ان جافاسكربت بتفك كل جمله لوحدها. ده معناه انها لما بنستعمل علامات ال `[]` واسمها `bracket notation` هتفضل تمشي من اول `[` لحد ما توصل للي يقفله اللي هو `]`. و بعد كده هتقوم مشغله الجمله بعد ما تعرف ان الجمله دي مفيهاش اخطاء. 
 183 | 
 184 | فا عشان كده عندنا `mouse[bird.size]` الاول هتجيب `bird.size` اللي قيمته `"small"` وبالتالي تبقى الجمله `mouse["small"]` هترجع `true` 
 185 | 
 186 | ولكن لما بنستعمل ال `dot notation` مبيحصلش كده. `mouse` ملوش مفتاح اسمه `bird` و بالتالي احنا بنطلب قيمه موجوده جوا حاجه مش موجودة اصلاً و بالتالي بيرجعلنا خطأ `cannot read property of undefined`.
 187 | 
 188 | </p>
 189 | </details>
 190 | 
 191 | ---
 192 | 
 193 | ---
 194 | 
 195 | ###### 6. ايه اللي هيتطبع؟
 196 | <div dir="ltr">
 197 | 
 198 | ```javascript
 199 | let c = { greeting: "Hey!" };
 200 | let d;
 201 | 
 202 | d = c;
 203 | c.greeting = "Hello";
 204 | console.log(d.greeting);
 205 | ```
 206 | </div>
 207 | 
 208 | - أ: `Hello`
 209 | - ب: `Hey`
 210 | - ج: `undefined`
 211 | - د: `ReferenceError`
 212 | - هـ: `TypeError`
 213 | 
 214 | <details><summary><b>الاجابة</b></summary>
 215 | <p>
 216 | 
 217 | #### الاجابة الصحيحة: أ
 218 | 
 219 | في جافاسكربت كل العناصر `objects` بيتعاملوا بالـ`reference` لما بنساويهم ببعض. ده معناه ان الاوبجكت مش بيتعمل منه نسخه جديدة و انما بيتم الاشارة اليه بأسم جديد مش اكتر. 
 220 | 
 221 | في الاول المتغير `c` جواه قيمة اوبجكت و بعد كده بنقوم عاملين اشارة للاوبجكت ده عن طريق المتغير `d` 
 222 | .
 223 | 
 224 | <img src="https://i.imgur.com/ko5k0fs.png" width="200">
 225 | 
 226 | وبالتالي لما بتغير متغير واحد منهم انت بتغير الاتنين لان الاتنين بيشيروا لنفس العنصر في الميموري.
 227 | 
 228 | </p>
 229 | </details>
 230 | 
 231 | ---
 232 | 
 233 | ###### 7. ايه اللي هيتطبع؟
 234 | <div dir="ltr">
 235 | 
 236 | ```javascript
 237 | let a = 3;
 238 | let b = new Number(3);
 239 | let c = 3;
 240 | 
 241 | console.log(a == b);
 242 | console.log(a === b);
 243 | console.log(b === c);
 244 | ```
 245 | </div>
 246 | 
 247 | - أ: `true` `false` `true`
 248 | - ب: `false` `false` `true`
 249 | - ج: `true` `false` `false`
 250 | - د: `false` `true` `true`
 251 | 
 252 | <details><summary><b>الاجابة</b></summary>
 253 | <p>
 254 | 
 255 | #### الاجابة الصحيحة: ج
 256 | 
 257 | `new Number()` ده `constructor` مبني في اللغه و على الرغم من ان شكل القيمه اللي هتطلع منه مجرد رقم `primitive` لكن الحقيقه ان القيمة اللي هتيجي `object` وهيكون فيه زيادات زي ال`methods` وهكذا.
 258 | 
 259 | لما بنستعمل علامة المساواه `==` احنا بنشوف بس لو القيمتين اللي بنقارنهم ليهم نفس **القيمة** فقط ولا لا. الاتنين ليهم قيمة `3` وبالتالي هترجع `true`
 260 | 
 261 | اما بقى لما بنستعمل المساواة `===` احنا بنشوف **القيمة** و **النوع** و بالتالي بما ان الاتنين `object` بس موجودين في اماكن مختلفه في الميموري اذاً احنا مش عاملين اشارة لنفس العنصر و بالتالي هترجع `false`.
 262 | 
 263 | </p>
 264 | </details>
 265 | 
 266 | ---
 267 | 
 268 | ###### 8. ايه اللي هيتطبع؟
 269 | <div dir="ltr">
 270 | 
 271 | ```javascript
 272 | class Chameleon {
 273 |   static colorChange(newColor) {
 274 |     this.newColor = newColor;
 275 |     return this.newColor;
 276 |   }
 277 | 
 278 |   constructor({ newColor = "green" } = {}) {
 279 |     this.newColor = newColor;
 280 |   }
 281 | }
 282 | 
 283 | const freddie = new Chameleon({ newColor: "purple" });
 284 | freddie.colorChange("orange");
 285 | ```
 286 | </div>
 287 | 
 288 | - أ: `orange`
 289 | - ب: `purple`
 290 | - ج: `green`
 291 | - د: `TypeError`
 292 | 
 293 | <details><summary><b>الاجابة</b></summary>
 294 | <p>
 295 | 
 296 | #### الاجابة الصحيحة: د
 297 | 
 298 | الدالة `colorChange` من نوع `static` و بالتالي هي مموجوده فقط في ال`constructor` اللي بتتعمل فيه و مش بتروح لأي عنصر بيتعمل من ال`class` ده و بما ان `freddie` ده عنصر معمول من الكلاس ده فا الدالة `colorChange` مش بتروحله و بالتالي مش موجوده معاه و عشان كده هتدينا `TypeError`.
 299 | 
 300 | </p>
 301 | </details>
 302 | 
 303 | ---
 304 | 
 305 | ###### 9. ايه اللي هيتطبع؟
 306 | <div dir="ltr">
 307 | 
 308 | ```javascript
 309 | let greeting;
 310 | greetign = {}; // Typo!
 311 | console.log(greetign);
 312 | ```
 313 | </div>
 314 | 
 315 | - أ: `{}`
 316 | - ب: `ReferenceError: greetign is not defined`
 317 | - ج: `undefined`
 318 | 
 319 | <details><summary><b>الاجابة</b></summary>
 320 | <p>
 321 | 
 322 | #### الاجابة الصحيحة: أ
 323 | 
 324 | بتطبع العنصر الفاضي لأننا عملنا الاوبجكت ده من نوع `global` لما كتبنا `greetign` بدل `greeting` و بالتالي البرنامج شاف `greetign` على انها `window.greetign={}` لو في المتصفح. 
 325 | 
 326 | عشان نبعد عن المشكلة دي نقدر نستعمل `"use strict"` و اللي بدورها بتتأكد ان انت عملت المتغير قبل ما تحاول تتعامل معاه.
 327 | 
 328 | </p>
 329 | </details>
 330 | 
 331 | ---
 332 | 
 333 | ###### 10. ايه اللي هيحصل لما نعمل كده؟
 334 | <div dir="ltr">
 335 | 
 336 | ```javascript
 337 | function bark() {
 338 |   console.log("Woof!");
 339 | }
 340 | 
 341 | bark.animal = "dog";
 342 | ```
 343 | </div>
 344 | 
 345 | - أ: مش هيحصل اي حاجه غلط, الكود ده صحيح تماماً!
 346 | - ب:  `SyntaxError`
 347 | - ج: `undefined`
 348 | - د: `ReferenceError`
 349 | 
 350 | 
 351 | <details><summary><b>الاجابة</b></summary>
 352 | <p>
 353 | 
 354 | #### الاجابة الصحيحة: أ
 355 | 
 356 | كل حاجه في جافاسكربت عبارة عن `object` حتى الدوال و بالتالي نقدر بكل سهولة اننا نعمل اللي احنا عملناه في الكود و نضيف مفاتيح و قيم للداله على انها عنصر اوبجكت عادي جداً.
 357 | 
 358 | </p>
 359 | </details>
 360 | 
 361 | ---
 362 | 
 363 | ###### 11. ايه اللي هيتطبع؟
 364 | <div dir="ltr">
 365 | 
 366 | ```javascript
 367 | function Person(firstName, lastName) {
 368 |   this.firstName = firstName;
 369 |   this.lastName = lastName;
 370 | }
 371 | 
 372 | const member = new Person("Lydia", "Hallie");
 373 | Person.getFullName = function() {
 374 |   return `${this.firstName} ${this.lastName}`;
 375 | };
 376 | 
 377 | console.log(member.getFullName());
 378 | ```
 379 | </div>
 380 | 
 381 | - أ: `TypeError`
 382 | - ب: `SyntaxError`
 383 | - ج: `Lydia Hallie`
 384 | - د: `undefined` `undefined`
 385 | 
 386 | <details><summary><b>الاجابة</b></summary>
 387 | <p>
 388 | 
 389 | #### الاجابة الصحيحة: أ
 390 | 
 391 | مينفعش تضيف قيم لـ `constructor`بالشكل ده. لو عايز تضيف قيمة لكل الاوبجكتس اللي معمولين من الـ`constructor` ده لازم تستعمل الـ `prototype` 
 392 | 
 393 | بص  المثال ده:
 394 | <div dir="ltr">
 395 | 
 396 | ```js
 397 | Person.prototype.getFullName = function() {
 398 |   return `${this.firstName} ${this.lastName}`;
 399 | };
 400 | ```
 401 | </div>
 402 | 
 403 | في المثال ده هنقدر نضيف القيمه لكل العناصر اللي معموله من الـ`constructor` ده. ايه الفايده من ده بقى؟ تخيل معايا ان احنا عملنا كوبي من دالة دي جوا كل عنصر لوحدة --مع التغاضي عن اعتبار ان بعضهم ممكن ميكونوش محتاجينها اصلاً-- احنا كده بنستخدم ميموري كتير جداً على الفاضي بينما عن طريق الـ`prototype` بنقدر اننا نعملها مره واحدة فقط و بتكون موجوده لكل العناصر اللي معموله منها! 
 404 | 
 405 | 
 406 | </p>
 407 | </details>
 408 | 
 409 | ---
 410 | 
 411 | ###### 12. ايه اللي هيتطبع؟
 412 | <div dir="ltr">
 413 | 
 414 | ```javascript
 415 | function Person(firstName, lastName) {
 416 |   this.firstName = firstName;
 417 |   this.lastName = lastName;
 418 | }
 419 | 
 420 | const lydia = new Person("Lydia", "Hallie");
 421 | const sarah = Person("Sarah", "Smith");
 422 | 
 423 | console.log(lydia);
 424 | console.log(sarah);
 425 | ```
 426 | </div>
 427 | 
 428 | - أ: `Person {firstName: "Lydia", lastName: "Hallie"}` و `undefined`
 429 | - ب: `Person {firstName: "Lydia", lastName: "Hallie"}` و `Person {firstName: "Sarah", lastName: "Smith"}`
 430 | - ج: `Person {firstName: "Lydia", lastName: "Hallie"}` و `{}`
 431 | - د: `Person {firstName: "Lydia", lastName: "Hallie"}` و `ReferenceError`
 432 | 
 433 | <details><summary><b>الاجابة</b></summary>
 434 | <p>
 435 | 
 436 | #### الاجابة الصحيحة: أ
 437 | 
 438 | كلمة `new` بتشير الى الاوبجكت الفاضي الجديد اللي احنا بنعمله قبل ما يتم اضافة اي قيم ليه. لكن لما مش بتستعمل `new` بيتم الاشارة الى الـ`global` او `window` على حسب انت بتشغل الكود فين و بالتالي لما عملنا `this.firstName = "Sarah"` احنا كده كأننا قولنا `window.firstName = "Sarah"` وبالتالي الاوبجكت `sarah نفسه فضل `undefined` 
 439 | 
 440 | </p>
 441 | </details>
 442 | 
 443 | ---
 444 | 
 445 | ###### 13. ايه  الـ3 مراحل بتوع الـ `event propagation`؟
 446 | 
 447 | - أ: Target > Capturing > Bubbling
 448 | - ب: Bubbling > Target > Capturing
 449 | - ج: Target > Bubbling > Capturing
 450 | - د: Capturing > Target > Bubbling
 451 | 
 452 | <details><summary><b>الاجابة</b></summary>
 453 | <p>
 454 | 
 455 | #### الاجابة الصحيحة: د
 456 | 
 457 | في مرحلة الـ`capturing` الحدث بيمر الاول خلال العناصر الكبيره المحتوية على العنصر اللي حصلت فيه الحدث اصلاً لحد ما توصل للعنصر ده. بعد كده بتوصل لـ `target` واللي هو العنصر اللي عمل الحدث و بعد كده بترد تاني لفوق في مرحلة الـ`bubbling`
 458 | 
 459 | 
 460 | <img src="https://i.imgur.com/N18oRgd.png" width="200">
 461 | 
 462 | </p>
 463 | </details>
 464 | 
 465 | ---
 466 | 
 467 | ###### 14. كل العناصر `objects` ليهم `prototype`. هذه العبارة: 
 468 | 
 469 | - أ: صحيحة
 470 | - ب: خطأ
 471 | 
 472 | <details><summary><b>الاجابة</b></summary>
 473 | <p>
 474 | 
 475 | #### الاجابة الصحيحة: ب
 476 | 
 477 | كل العناصر في جافاسكربت ليها `prototype` ما عدا الـ**base object** و اللي كل العناصر بتاخد منه الدوال بتاعته. ده السبب اللي بيخليك تقدر تستعمل الدوال دي في اي عنصر تعمله.
 478 | 
 479 | 
 480 | </p>
 481 | </details>
 482 | 
 483 | ---
 484 | 
 485 | ###### 15. ايه اللي هيتطبع؟
 486 | <div dir="ltr">
 487 | 
 488 | ```javascript
 489 | function sum(a, b) {
 490 |   return a + b;
 491 | }
 492 | 
 493 | sum(1, "2");
 494 | ```
 495 | </div>
 496 | 
 497 | - أ: `NaN`
 498 | - ب: `TypeError`
 499 | - ج: `12`
 500 | - د: `3`
 501 | 
 502 | <details><summary><b>الاجابة</b></summary>
 503 | <p>
 504 | 
 505 | #### الاجابة الصحيحة: ج
 506 | 
 507 | جافاسكربت `dynamic` و بالتالي احنا مش بنحدد نوع المتغير لما بنعمله و المتغير نوعه بيتغير عادي جداً و ممكن ده يحصل من غير ما تعرف حتى و ده اسمه `implicit coercion`. 
 508 | 
 509 | في المثال ده بقى جافاسكربت هتحول رقم `1` الى `string` عشان الدالة تقدر تتعامل معاه و ترجع قيمة. و في عملية الجمع مابين القيمة العددية `1` و السترنج `"2"` الرقم هيتحول الى سترنج و بعد كده هيقوم متضاف الى السترنج التانية عشان يعمل سترنج `"12"`.
 510 | 
 511 | </p>
 512 | </details>
 513 | 
 514 | ---
 515 | 
 516 | ###### 16. ايه اللي هيتطبع؟
 517 | 
 518 | <div dir="ltr">
 519 | 
 520 | ```javascript
 521 | let number = 0;
 522 | console.log(number++);
 523 | console.log(++number);
 524 | console.log(number);
 525 | ```
 526 | </div>
 527 | 
 528 | - أ: `1` `1` `2`
 529 | - ب: `1` `2` `2`
 530 | - ج: `0` `2` `2`
 531 | - د: `0` `1` `2`
 532 | 
 533 | <details><summary><b>الاجابة</b></summary>
 534 | <p>
 535 | 
 536 | #### الاجابة الصحيحة: ج
 537 | 
 538 | العامل البعدي `x++` بيرجع القيمة الاصلية الاول بعد كده يزود واحد على المتغير
 539 | 
 540 | اما العامل القبلي `++x` بيعدل القيمة الاول و يرجع القيمة المعدلة
 541 | 
 542 | </p>
 543 | </details>
 544 | 
 545 | ---
 546 | 
 547 | ###### 17. ايه اللي هيتطبع؟ (جرب تشغل السؤال ده عشان تفهمه كويس)
 548 | 
 549 | <div dir="ltr">
 550 | 
 551 | ```javascript
 552 | function getPersonInfo(one, two, three) {
 553 |   console.log(one);
 554 |   console.log(two);
 555 |   console.log(three);
 556 | }
 557 | 
 558 | const person = "Lydia";
 559 | const age = 21;
 560 | 
 561 | getPersonInfo`${person} is ${age} years old`;
 562 | ```
 563 | </div>
 564 | 
 565 | - أ: `"Lydia"` `21` `["", " is ", " years old"]`
 566 | - ب: `["", " is ", " years old"]` `"Lydia"` `21`
 567 | - ج: `"Lydia"` `["", " is ", " years old"]` `21`
 568 | 
 569 | <details><summary><b>الاجابة</b></summary>
 570 | <p>
 571 | 
 572 | #### الاجابة الصحيحة: ب
 573 | 
 574 | 
 575 | لو بتستعمل `tagged template literals` اول قيمة داخله للدالة دايماً هتكون `array` مليانه بالسترنج اللي داخله فقط من غير اي متغيرات و الباقي هياخدوا القيم اللي داخله بالترتيب. 
 576 | 
 577 | </p>
 578 | </details>
 579 | 
 580 | ---
 581 | 
 582 | ###### 18. ايه اللي هيتطبع؟
 583 | 
 584 | <div dir="ltr">
 585 | 
 586 | ```javascript
 587 | function checkAge(data) {
 588 |   if (data === { age: 18 }) {
 589 |     console.log("You are an adult!");
 590 |   } else if (data == { age: 18 }) {
 591 |     console.log("You are still an adult.");
 592 |   } else {
 593 |     console.log(`Hmm.. You don't have an age I guess`);
 594 |   }
 595 | }
 596 | 
 597 | checkAge({ age: 18 });
 598 | ```
 599 | </div>
 600 | 
 601 | - أ: `You are an adult!`
 602 | - ب: `You are still an adult.`
 603 | - ج: `Hmm.. You don't have an age I guess`
 604 | 
 605 | <details><summary><b>الاجابة</b></summary>
 606 | <p>
 607 | 
 608 | #### الاجابة الصحيحة: ج
 609 | 
 610 | لما بنقارن في جافاسكربت, القيم الـ`primitive` زي الارقام و السترنج البسيطة بيتم مقارنة قيمتها فقط بينما الاوبجكتس بيتم مقارنة الاشارة ليهم `reference`. يعني لما بنقارن اوبجكتس ببعض جافاسكربت بتشوف هل الاتنين بيشاوروا لنفس المكان في الرام ولا لا.
 611 | 
 612 | و بما ان الاوبجكتس اللي بنقارنهم احنا هنا داخلين على انهم قيمتين مختلفتين للداله وبالتالي مش بيشيروا لنفس المكان ف الرام يبقى مش متساويين و ده السبب اللي بيخلي الاجابة بالشكل ده. المقارنه عشان تتم بشكل صحيح بقى ممكن تحولهم ل سترنج او تشوف القيم اللي جوا كل اوبجكت.
 613 | 
 614 | 
 615 | </p>
 616 | </details>
 617 | 
 618 | ---
 619 | 
 620 | ###### 19. ايه اللي هيتطبع؟
 621 | 
 622 | <div dir="ltr">
 623 | 
 624 | ```javascript
 625 | function getAge(...args) {
 626 |   console.log(typeof args);
 627 | }
 628 | 
 629 | getAge(21);
 630 | ```
 631 | </div>
 632 | 
 633 | 
 634 | - أ: `"number"`
 635 | - ب: `"array"`
 636 | - ج: `"object"`
 637 | - د: `"NaN"`
 638 | 
 639 | 
 640 | <details><summary><b>الاجابة</b></summary>
 641 | <p>
 642 | 
 643 | #### الاجابة الصحيحة: ج
 644 | 
 645 | معامل التفكيك `spread operator ...args` بيرجع `array` فيها الـقيم اللي داخله للدالة. و بما ان كل حاجه في جافاسكربت عبارة عن اوبجكت بما فيها الـ`array` يبقى القيمه اللي هترجع `"object"`
 646 | 
 647 | </p>
 648 | </details>
 649 | 
 650 | ---
 651 | 
 652 | ###### 20. ايه اللي هيتطبع؟
 653 | 
 654 | <div dir="ltr">
 655 | 
 656 | ```javascript
 657 | function getAge() {
 658 |   "use strict";
 659 |   age = 21;
 660 |   console.log(age);
 661 | }
 662 | 
 663 | getAge();
 664 | ```
 665 | </div>
 666 | 
 667 | 
 668 | - أ: `21`
 669 | - ب: `undefined`
 670 | - ج: `ReferenceError` 
 671 | - د: `TypeError`
 672 | 
 673 | <details><summary><b>الاجابة</b></summary>
 674 | <p>
 675 | 
 676 | ####  الاجابة الصحيحة: ج
 677 | 
 678 | لما بنستعمل `"use strict"` تقدر تتأكد ان انت مش بتعمل متغيرات `global` عن طريق الخطأ. احنا هنا عمرنا ما عملنا `declare` للمتغير `age` اصلاً و بما اننا بنستعمل `"use strict"` البرنامج هيدينا خطأ من نوع `ReferenceError`.
 679 | 
 680 | 
 681 | </p>
 682 | </details>
 683 | 
 684 | ---
 685 | 
 686 | ###### 21. ايه قيمة `sum`?
 687 | 
 688 | <div dir="ltr">
 689 | 
 690 | ```javascript
 691 | const sum = eval("10*10+5");
 692 | ```
 693 | </div>
 694 | 
 695 | - أ: `105`
 696 | - ب: `"105"`
 697 | - ج: `TypeError`
 698 | - د: `"10*10+5"`
 699 | 
 700 | <details><summary><b>الاجابة</b></summary>
 701 | <p>
 702 | 
 703 | #### الاجابة الصحيحة: أ
 704 | 
 705 | الدالة `eval` بتشغل الكود اللي داخلها على هيئة `string`. لو السترنج دي بتعبر عن عملية حسابية مثلاً هتقوم مشغله العملية دي و بالتالي `10 * 10 + 5` هيرجع القيمة العددية `105`.
 706 | 
 707 | 
 708 | </p>
 709 | </details>
 710 | 
 711 | ---
 712 | 
 713 | ###### 22. cool_secret هتفضل موجوده قد ايه؟
 714 | 
 715 | <div dir="ltr">
 716 | 
 717 | ```javascript
 718 | sessionStorage.setItem("cool_secret", 123);
 719 | ```
 720 | </div>
 721 | 
 722 | - أ: للأبد, عمرها ما هتتمسح 
 723 | - ب: لما المستخدم يقفل التبويب
 724 | - ج: لما المستخدم يقفل نافذة المتصفح كلها
 725 | - د: لما المستخدم يطفي الكمبيوتر بتاعه
 726 | 
 727 | <details><summary><b>الاجابة</b></summary>
 728 | <p>
 729 | 
 730 | #### الاجابة الصحيحة: ب
 731 | 
 732 | اي معلومات بيتم تخزينها في الـ`sessionStorage` بتتمسح مجرد ما المستخدم يقفل التبويب.
 733 | 
 734 | لو استخدمت `localStorage` المعلومات هتفضل موجوده للأبد او لحد ما تمسحها انت بنفسك في الكود.
 735 | 
 736 | </p>
 737 | </details>
 738 | 
 739 | ---
 740 | 
 741 | ###### 23. ايه اللي هيتطبع؟
 742 | 
 743 | <div dir="ltr">
 744 | 
 745 | ```javascript
 746 | var num = 8;
 747 | var num = 10;
 748 | 
 749 | console.log(num);
 750 | ```
 751 | </div>
 752 | 
 753 | - أ: `8`
 754 | - ب: `10`
 755 | - ج: `SyntaxError`
 756 | - د: `ReferenceError`
 757 | 
 758 | 
 759 | <details><summary><b>الاجابة</b></summary>
 760 | <p>
 761 | 
 762 | #### الاجابة الصحيحة: ب
 763 | 
 764 | مع كلمة `var` احنا بنعمل المتغير من اول و جديد بنفس الاسم و بقيم مختلفه و بالتالي اخر قيمه بس هي اللي هتكون موجودة. مش بيحصل كده مع `let` و `const`.
 765 | 
 766 | </p>
 767 | </details>
 768 | 
 769 | ---
 770 | 
 771 | ###### 24. ايه اللي هيتطبع؟
 772 | 
 773 | <div dir="ltr">
 774 | 
 775 | ```javascript
 776 | const obj = { 1: "a", 2: "b", 3: "c" };
 777 | const set = new Set([1, 2, 3, 4, 5]);
 778 | 
 779 | obj.hasOwnProperty("1");
 780 | obj.hasOwnProperty(1);
 781 | set.has("1");
 782 | set.has(1);
 783 | ```
 784 | </div>
 785 | 
 786 | - أ: `false` `true` `false` `true`
 787 | - ب: `false` `true` `true` `true`
 788 | - ج: `true` `true` `false` `true`
 789 | - د: `true` `true` `true` `true`
 790 | 
 791 | <details><summary><b>الاجابة</b></summary>
 792 | <p>
 793 | 
 794 | #### الاجابة الصحيحة: ج
 795 | 
 796 | كل مفاتيح العناصر `object keys` ما عدا اللي من نوع `Symbol` عبارة عن قيم `string` حتى لو انت مش كاتبها كسترنج. و ده السبب ان `obj.hasOwnProperty('1')` برضه بترجع `true`
 797 | 
 798 | اما بالنسبه لنوع `set` فا اللي معانا حالياً جواها قيم عددية فقط و بالتالي الـ`string` `'1'` مش موجوده.
 799 | 
 800 | </p>
 801 | </details>
 802 | 
 803 | ---
 804 | 
 805 | ###### 25. ايه اللي هيتطبع؟
 806 | 
 807 | <div dir="ltr">
 808 | 
 809 | ```javascript
 810 | const obj = { a: "one", b: "two", a: "three" };
 811 | console.log(obj);
 812 | ```
 813 | </div>
 814 | 
 815 | 
 816 | - أ: `{ a: "one", b: "two" }`
 817 | - ب: `{ b: "two", a: "three" }`
 818 | - ج: `{ a: "three", b: "two" }`
 819 | - د: `SyntaxError`
 820 | 
 821 | <details><summary><b>الاجابة</b></summary>
 822 | <p>
 823 | 
 824 | #### الاجابة الصحيحة: ج
 825 | 
 826 | لو عندك في العنصر اكتر من قيمة `object key` بنفس الاسم, هيتم استبدال القيم اللي موجوده بآخر قيمة تم تسجيلها.
 827 | 
 828 | 
 829 | </p>
 830 | </details>
 831 | 
 832 | ---
 833 | 
 834 | ###### 26. في جافاسكربت, بنلاقي حاجتين موجودين دايماً وهما الـ `global` و كلمة ال `this` المفتاحية. العبارة دي: 
 835 | 
 836 | - أ: صحيحة
 837 | - ب: خاطئة
 838 | - ج: تعتمد
 839 | 
 840 | <details><summary><b>الاجابة</b></summary>
 841 | <p>
 842 | 
 843 | ####  الاجابة الصحيحة: أ
 844 | 
 845 | و دي حاجه اسمها `global execution context` واللي يمكن اعتباره عن محيط او البيئة اللي الكوود بيشتغل فيه و بيكون فيه المتغيرات الـ`global` كلها.
 846 | 
 847 | 
 848 | </p>
 849 | </details>
 850 | 
 851 | ---
 852 | 
 853 | ###### 27. ايه اللي هيتطبع؟
 854 | 
 855 | <div dir="ltr">
 856 | 
 857 | ```javascript
 858 | for (let i = 1; i < 5; i++) {
 859 |   if (i === 3) continue;
 860 |   console.log(i);
 861 | }
 862 | ```
 863 | </div>
 864 | 
 865 | - أ: `1` `2`
 866 | - ب: `1` `2` `3`
 867 | - ج: `1` `2` `4`
 868 | - د: `1` `3` `4`
 869 | 
 870 | 
 871 | <details><summary><b>الاجابة</b></summary>
 872 | <p>
 873 | 
 874 | #### الاجابة الصحيحة: ج
 875 | 
 876 | كلمة `continue` بتخلي اللووب تكمل لو الشرط اللي هي جواه اتحقق. 
 877 | 
 878 | </p>
 879 | </details>
 880 | 
 881 | ---
 882 | 
 883 | ###### 28. ايه اللي هيتطبع؟
 884 | 
 885 | <div dir="ltr">
 886 | 
 887 | ```javascript
 888 | String.prototype.giveLydiaPizza = () => {
 889 |   return "Just give Lydia pizza already!";
 890 | };
 891 | 
 892 | const name = "Lydia";
 893 | 
 894 | console.log(name.giveLydiaPizza())
 895 | ```
 896 | </div>
 897 | 
 898 | 
 899 | 
 900 | - أ: `"Just give Lydia pizza already!"`
 901 | - ب: `TypeError: not a function`
 902 | - ج: `SyntaxError`
 903 | - د: `undefined`
 904 | 
 905 | <details><summary><b>الاجابة</b></summary>
 906 | <p>
 907 | 
 908 | #### الاجابة الصحيحة: أ
 909 | 
 910 | `String` هو فنكشن `constructor` واللي بنقدر نضيف خواص و قيم ليه. انا هنا ضيفت دالة للـ`prototype` بتاعه. المتغيرات البدائية `primitive` بيتم تحويلها بطريقة تلقائياً الى عنصر `object` وبالتالي بيكون ليها القدره انها تشغل الدوال الخاصه بالنوع ده. 
 911 | 
 912 | </p>
 913 | </details>
 914 | 
 915 | ---
 916 | 
 917 | ###### 29. ايه اللي هيتطبع؟
 918 | 
 919 | <div dir="ltr">
 920 | 
 921 | ```javascript
 922 | const a = {};
 923 | const b = { key: "b" };
 924 | const c = { key: "c" };
 925 | 
 926 | a[b] = 123;
 927 | a[c] = 456;
 928 | 
 929 | console.log(a[b]);
 930 | ```
 931 | </div>
 932 | 
 933 | - أ: `123`
 934 | - ب: `456`
 935 | - ج: `undefined`
 936 | - د: `ReferenceError`
 937 | 
 938 | <details><summary><b>الاجابة</b></summary>
 939 | <p>
 940 | 
 941 | #### الاجابة الصحيحة: ب
 942 | 
 943 | مفاتيح العناصر `Object keys` بيتم تحويلهم تلقائياً الى string. احنا هنا بنحاول نحط اوبجكت على انه مفتاح لأوبجكت تاني. بس المشكلة ان لما نعمل كده مش بيترجم لأسمه او لمحتوياته بل بيتحول الى `[object Object] و بالتالي احنا كنا كأننا بالظبط عاملين `a["object Object"]=123` و بنكرر كده مع `c` و بعد كده بنقوم طابعين `a[b]` اللي احنا لسه مخليين مفتاحها من شوية `a["object Object"]` و خلينا القيمة بتاعته 456 و بالتالي دي اللي بتطبع.
 944 | 
 945 | 
 946 | </p>
 947 | </details>
 948 | 
 949 | ---
 950 | 
 951 | ###### 30. ايه اللي هيتطبع؟
 952 | 
 953 | <div dir="ltr">
 954 | 
 955 | ```javascript
 956 | const foo = () => console.log("First");
 957 | const bar = () => setTimeout(() => console.log("Second"));
 958 | const baz = () => console.log("Third");
 959 | 
 960 | bar();
 961 | foo();
 962 | baz();
 963 | ```
 964 | </div>
 965 | 
 966 | - أ: `First` `Second` `Third`
 967 | - ب: `First` `Third` `Second`
 968 | - ج: `Second` `First` `Third`
 969 | - د: `Second` `Third` `First`
 970 | 
 971 | <details><summary><b>الاجابة</b></summary>
 972 | <p>
 973 | 
 974 | #### الاجابة الصحيحة: ب
 975 | 
 976 | عندنا دالة `setTimeout` و المفروض تشتغل الاول و لكن اللي جواها اتشغل اخر حاجه. ايه اللي حصل؟ 
 977 | 
 978 | في المتصفحات محرك الجافاسكربت مش لوحده اللي موجود, بل موجود كمان معاه حاجه اسمها `Web Application APIs` واختصارها `WebAPIs` ودي بتديلك شوية دوال و حاجات زيادة عن اللغه الاساسية زي `setTimeout` اللي مش في اللغه اصلاً. 
 979 | 
 980 | اللي بيحصل بقى ان الدالة اللي جوا `setTimeout` اللي هي الـ `callback` بتتجهز عشان تشتغل, و `setTimeout` نفسها بتخلص, و بعد كده البرنامج بينط على طول على الدالة اللي بعدها و بتشغلها و اللي بعدها و بتشغلها لحد ما ميتبقاش حاجه شاغله المتصفح بعد كده يقوم البرنامج مشغل الـ`callback` اللي كانت متجهزه. 
 981 | 
 982 | <img src="https://i.imgur.com/X5wsHOg.png" width="200">
 983 | 
 984 | <img src="https://i.imgur.com/Pvc0dGq.png" width="200">
 985 | 
 986 | <img src="https://i.imgur.com/WhA2bCP.png" width="200">
 987 | 
 988 | <img src="https://i.imgur.com/NSnDZmU.png" width="200">
 989 | 
 990 | <img src="https://i.imgur.com/uyiScAI.png" width="200">
 991 | 
 992 | </p>
 993 | </details>
 994 | 
 995 | ---
 996 | 
 997 | ###### 31. ايه قيمة `event.target` لما تدوس على الزرار؟ 
 998 | <div dir="ltr">
 999 | 
1000 | ```html
1001 | <div onclick="console.log('first div')">
1002 |   <div onclick="console.log('second div')">
1003 |     <button onclick="console.log('button')">
1004 |       Click!
1005 |     </button>
1006 |   </div>
1007 | </div>
1008 | ```
1009 | </div>
1010 | 
1011 | - أ: Outer `div`
1012 | - ب: Inner `div`
1013 | - ج: `button`
1014 | - د: اراي جواها كل العناصر اللي جوا الزرار
1015 | 
1016 | 
1017 | <details><summary><b>الاجابة</b></summary>
1018 | <p>
1019 | 
1020 | #### الاجابة الصحيحة: ج
1021 | 
1022 | هدف الحدث بيكون اخر عنصر في سلسلة الابناء و تقدر تمنع ده عن طريق `event.stopPropagation`.
1023 | 
1024 | </p>
1025 | </details>
1026 | 
1027 | ---
1028 | 
1029 | ###### 32. لما تدوس على البرجراف ايه اللي هيتطبع؟
1030 | 
1031 | <div dir="ltr">
1032 | 
1033 | ```html
1034 | <div onclick="console.log('div')">
1035 |   <p onclick="console.log('p')">
1036 |     Click here!
1037 |   </p>
1038 | </div>
1039 | ```
1040 | </div>
1041 | 
1042 | - أ: `p` `div`
1043 | - ب: `div` `p`
1044 | - ج: `p`
1045 | - د: `div`
1046 | 
1047 | <details><summary><b>الاجابة</b></summary>
1048 | <p>
1049 | 
1050 | #### الاجابة الصحيحة: أ
1051 | 
1052 | لما تدوس على البرجراف هتلاقي حاجتين ظهروا: `p` و `div`. و اثناء ما الحدث بيتم التعامل معاه بيحصل 3 مراحل زي ما قولنا في سؤال قبل كده. الاساسي ان الدوال اللي انت بتحددها عشان تتعامل مع الاحداث بتشتغل في اخر مرحله و هي الـ`Bubbling` و بالتالي هيتشغل من اعمق عنصر الى اكبر عنصر.
1053 | 
1054 | </p>
1055 | </details>
1056 | 
1057 | ---
1058 | 
1059 | ###### 33. ايه اللي هيتطبع؟
1060 | 
1061 | <div dir="ltr">
1062 | 
1063 | ```javascript
1064 | const person = { name: "Lydia" };
1065 | 
1066 | function sayHi(age) {
1067 |   console.log(`${this.name} is ${age}`);
1068 | }
1069 | 
1070 | sayHi.call(person, 21);
1071 | sayHi.bind(person, 21);
1072 | ```
1073 | </div>
1074 | 
1075 | - أ: `undefined is 21` `Lydia is 21`
1076 | - ب: `function` `function`
1077 | - ج: `Lydia is 21` `Lydia is 21`
1078 | - د: `Lydia is 21` `function`
1079 | 
1080 | <details><summary><b>الاجابة</b></summary>
1081 | <p>
1082 | 
1083 | #### الاجابة الصحيحة: د
1084 | 
1085 | في الحالتين بنقدر نحدد احنا عايزين كلمة `this` تشير لأيه بالظبط. بس الفرق ان `call` بتشتغل على طول اما `bind` بترجع نسخة جديدة من الدالة اللي دخلتلها قيمة `this` بتاعتها اللي احنا محددينها بس مش بتشتغل على طول.
1086 | 
1087 | 
1088 | </p>
1089 | </details>
1090 | 
1091 | ---
1092 | 
1093 | ###### 34. ايه اللي هيتطبع؟
1094 | 
1095 | <div dir="ltr">
1096 | 
1097 | ```javascript
1098 | function sayHi() {
1099 |   return (() => 0)();
1100 | }
1101 | 
1102 | typeof sayHi();
1103 | ```
1104 | </div>
1105 | 
1106 | - أ: `"object"`
1107 | - ب: `"number"`
1108 | - ج: `"function"`
1109 | - د: `"undefined"`
1110 | 
1111 | <details><summary><b>الاجابة</b></summary>
1112 | <p>
1113 | 
1114 | #### الاجابة الصحيحة: ب
1115 | 
1116 | الدالة `sayHi` بترجع القيمة اللي بتيجي من الدالة ذاتية التشغيل (IIFE) و اللي بدورها بترجع قيمة نوعها `"number"`. 
1117 | 
1118 | ولمعلومات القارئ: في 3 انواع فقط في الجافاسكربت: `null`, `undefined`, `boolean`, `number`, `string`, `object` و `symbol`. الدوال ليست نوع و انما هما عناصر من نوع `object`.
1119 | 
1120 | </p>
1121 | </details>
1122 | 
1123 | ---
1124 | 
1125 | ###### 35. انهي قيمة من دول سالبية `false`؟
1126 | 
1127 | <div dir="ltr">
1128 | 
1129 | ```javascript
1130 | 0;
1131 | new Number(0);
1132 | ("");
1133 | (" ");
1134 | new Boolean(false);
1135 | undefined;
1136 | ```
1137 | </div>
1138 | 
1139 | - أ: `0`, `''`, `undefined`
1140 | - ب: `0`, `new Number(0)`, `''`, `new Boolean(false)`, `undefined`
1141 | - ج: `0`, `''`, `new Boolean(false)`, `undefined`
1142 | - د: كلهم
1143 | 
1144 | <details><summary><b>الاجابة</b></summary>
1145 | <p>
1146 | 
1147 | ####  الاجابة الصحيحة: أ
1148 | 
1149 | موجود في اللغه 6 قيم سالبية `false` فقط:
1150 | 
1151 | - `undefined`
1152 | - `null`
1153 | - `NaN`
1154 | - `0`
1155 | - `''` (empty string)
1156 | - `false`
1157 | 
1158 | اي `constructor` بيكون ايجابي `truthy` علشان بيرجع قيمة مش واحدة من اللي 6 دول.
1159 | 
1160 | </p>
1161 | </details>
1162 | 
1163 | ---
1164 | 
1165 | ###### 36. ايه اللي هيتطبع؟
1166 | 
1167 | <div dir="ltr">
1168 | 
1169 | ```javascript
1170 | console.log(typeof typeof 1);
1171 | ```
1172 | </div>
1173 | 
1174 | - أ: `"number"`
1175 | - ب: `"string"`
1176 | - ج: `"object"`
1177 | - د: `"undefined"`
1178 | 
1179 | <details><summary><b>الاجابة</b></summary>
1180 | <p>
1181 | 
1182 | #### الاجابة الصحيحة: ب
1183 | 
1184 | `typeof 1` هترجع `"number"` و لاحظ ان دي مابين `""` يعني سترنج و بالتالي لما تدخل في الـ `typeof "number"` هترجع `"string"`
1185 | 
1186 | </p>
1187 | </details>
1188 | 
1189 | ---
1190 | 
1191 | ###### 37. ايه اللي هيتطبع؟
1192 | 
1193 | <div dir="ltr">
1194 | 
1195 | ```javascript
1196 | const numbers = [1, 2, 3];
1197 | numbers[10] = 11;
1198 | console.log(numbers);
1199 | ```
1200 | </div>
1201 | 
1202 | - أ: `[1, 2, 3, 7 x null, 11]`
1203 | - ب: `[1, 2, 3, 11]`
1204 | - ج: `[1, 2, 3, 7 x empty, 11]`
1205 | - د: `SyntaxError`
1206 | 
1207 | <details><summary><b>الاجابة</b></summary>
1208 | <p>
1209 | 
1210 | #### الاجابة الصحيحة: ج
1211 | 
1212 | لما بتحط قيمة في مكان في `array` و المكان ده بيتعدى عدد المساحات الموجوده في الاراي (طولها) بتقوم جافاسكربت بعمل حاجه اسمها "مساحات فارغه" "empty slots" واللي بيكونوا قيمهم `undefined` ولكن لما تبص في الكونسول بتاعت المتصفح مثلاً هتلاقي الشكل طالعلك كده: 
1213 | 
1214 | `[1, 2, 3, 7 x empty, 11]`
1215 | 
1216 | و الشكل بيعتمد على حسب انت بتشغل الكود فين. كل متصفح بيطلعها بشكل مختلف, و تقدر تجربها بنفسك.
1217 | 
1218 | 
1219 | </p>
1220 | </details>
1221 | 
1222 | ---
1223 | 
1224 | ###### 38. ايه اللي هيتطبع؟
1225 | 
1226 | <div dir="ltr">
1227 | 
1228 | ```javascript
1229 | (() => {
1230 |   let x, y;
1231 |   try {
1232 |     throw new Error();
1233 |   } catch (x) {
1234 |     (x = 1), (y = 2);
1235 |     console.log(x);
1236 |   }
1237 |   console.log(x);
1238 |   console.log(y);
1239 | })();
1240 | ```
1241 | </div>
1242 | 
1243 | - أ: `1` `undefined` `2`
1244 | - ب: `undefined` `undefined` `undefined`
1245 | - ج: `1` `1` `2`
1246 | - د: `1` `undefined` `undefined`
1247 | 
1248 | 
1249 | <details><summary><b>الاجابة</b></summary>
1250 | <p>
1251 | 
1252 | #### الاجابة الصحيحة: أ
1253 | 
1254 | جزء الـ`catch` بيستلم متغير `x` بس الفرق ان الاكس في الحاله دي مش بتاعت الداله و انما ده متغير موجود فقط لجزء الـ `catch`. بعد كده احنا قومنا مغيرين القيمة بتاعته الى `1` و غيرنا قيمة المتغير `y` الى `2`. بعد كده قومنا طابعين القيم اللي موجودة جوا جزء الـ`catch` فقط. 
1255 | 
1256 | برا الجزء بتاع الـ`catch` اكس هيفضل برضه `undefined` و `y` بما ان مفيش الا واحدة بس و هي بتاعت الدالة الاساسية واحنا غيرنا قيمتها بالتالي هتفضل على القيمة المتغيره اللي هي `2`.
1257 | 
1258 | </p>
1259 | </details>
1260 | 
1261 | ---
1262 | 
1263 | ###### 39. كل حاجه في جافاسكربت ...
1264 | 
1265 | - أ: primitive او  عنصر `object`
1266 | - ب: function او عنصر `object`
1267 | - ج: عناصر `object` بس!
1268 | - د: رقم او عنصر `object`
1269 | 
1270 | 
1271 | <details><summary><b>الاجابة</b></summary>
1272 | <p>
1273 | 
1274 | #### الاجابة الصحيحة: أ
1275 | 
1276 | جافاسكربت فيها انواع بدائية\بسيطة `primitives` و عناصر `object` فقط. الانواع البسيطة هما:  `boolean`, `null`, `undefined`, `bigint`, `number`, `string`, و `symbol` 
1277 | 
1278 | الفرق بين البسيطة و العناصر ان البسيطة مفيهاش اي دوال `methods` ولكن بنلاحظ ان لما مثلاُ بنحاول نشغل دالة على نوع بسيط زي `'foo'.toUpperCase()` الداله بتشتغل عادي جداً من غير ما تدينا خطأ `TypeError` و ده لأن زي ما قولنا في اجابة سابقه ان لما بنحاول نستغل الدوال دول جافاسكربت بتقوم تلقائياً بتحويل القيم البدائية اللي بنحاول نشغل عليها الدوال دي الى قيم من نوع `object` عشان تقدر تشغل الدوال دول و بعد كده ترجعها زي ما كانت. كل الانواع البسيطة بينطبق عليها الكلام ده ما عدا `undefined` و `null`.
1279 | 
1280 | </p>
1281 | </details>
1282 | 
1283 | ---
1284 | 
1285 | ###### 40. ايه اللي هيتطبع؟
1286 | 
1287 | <div dir="ltr">
1288 | 
1289 | ```javascript
1290 | [[0, 1], [2, 3]].reduce(
1291 |   (acc, cur) => {
1292 |     return acc.concat(cur);
1293 |   },
1294 |   [1, 2]
1295 | );
1296 | ```
1297 | </div>
1298 | 
1299 | - أ: `[0, 1, 2, 3, 1, 2]`
1300 | - ب: `[6, 1, 2]`
1301 | - ج: `[1, 2, 0, 1, 2, 3]`
1302 | - د: `[1, 2, 6]`
1303 | 
1304 | 
1305 | <details><summary><b>الاجابة</b></summary>
1306 | <p>
1307 | 
1308 | #### الاجابة الصحيحة: ج
1309 | 
1310 | الاراي `[1,2]` هي القيمه الاساسية اللي معانا و اللي هنبدأ بيها و هي برضه اول قيمة للمتغير `acc`. في الدورة الاولى المتغير `acc` قيمته `[1,2]` و المتغير `cur` قيمته `[0,1]` و لما نجمعهم سوا بيكون الناتج `[1,2,0,1]` و بعد كده المتغير `acc` بياخد القيمة دي و يقوم دامجها مع `[2,3]` اللي هي قيمة `cur` في الدورة التانية و اللي بدوره بيدي الناتج النهائي `[1, 2, 0, 1, 2, 3]`.
1311 | 
1312 | 
1313 | </p>
1314 | </details>
1315 | 
1316 | ---
1317 | 
1318 | ###### 41. ايه اللي هيتطبع؟
1319 | 
1320 | <div dir="ltr">
1321 | 
1322 | ```javascript
1323 | !!null;
1324 | !!"";
1325 | !!1;
1326 | ```
1327 | </div>
1328 | 
1329 | 
1330 | - أ: `false` `true` `false`
1331 | - ب: `false` `false` `true`
1332 | - ج: `false` `true` `true`
1333 | - د: `true` `true` `false`
1334 | 
1335 | 
1336 | <details><summary><b>الاجابة</b></summary>
1337 | <p>
1338 | 
1339 | #### الاجابة الصحيحة: ب
1340 | 
1341 | `null` قيمة سالبية `falsy` و بالتالي `!null` هترجع قيمة ايجابية `true` و بعد كده بتخش `!true` فا تتحول `false` 
1342 | 
1343 | وزي ما قولنا `""` دي قيمة سالبية لما نجيب عكسها هتتحول هي لـ`false` و بعد كده السالب بتاعها هيكون `true` و بعد كده تدخل في سالب تاني فتبقى `false`
1344 | 
1345 | بعد كده عندنا رقم `1` اللي هو قيمة ايجابية و بدوره بيتحول مره يبقى سالبية و بعد كده يبقى ايجابية `true`.
1346 | 
1347 | 
1348 | </p>
1349 | </details>
1350 | 
1351 | ---
1352 | 
1353 | ###### 42. دالة `setInterval` بترجع ايه في المتصفح؟
1354 | 
1355 | <div dir="ltr">
1356 | 
1357 | ```javascript
1358 | setInterval(() => console.log("Hi"), 1000);
1359 | ```
1360 | </div>
1361 | 
1362 | 
1363 | - أ: اسم تعريفي فريد من نوعه `unique id`
1364 | - ب: الوقت المحدد
1365 | - ج: الداله المدخله معاها
1366 | - د: `undefined`
1367 | 
1368 | <details><summary><b>الاجابة</b></summary>
1369 | <p>
1370 | 
1371 | #### الاجابة الصحيحة: أ
1372 | 
1373 | دالة `setInterval` بترجع اسم تعريفي فريد تقدر تستعمله في `clearInterval` عشان توقف بيه التكرار.
1374 | 
1375 | 
1376 | </p>
1377 | </details>
1378 | 
1379 | ---
1380 | 
1381 | ###### 43. ايه القيمة اللي هتطلع هنا؟
1382 | 
1383 | <div dir="ltr">
1384 | 
1385 | ```javascript
1386 | [..."Lydia"];
1387 | ```
1388 | </div>
1389 | 
1390 | 
1391 | - أ: `["L", "y", "d", "i", "a"]`
1392 | - ب: `["Lydia"]`
1393 | - ج: `[[], "Lydia"]`
1394 | - د: `[["L", "y", "d", "i", "a"]]`
1395 | 
1396 | <details><summary><b>الاجابة</b></summary>
1397 | <p>
1398 | 
1399 | #### الاجابة الصحيحة: أ
1400 | 
1401 | القيم اللي من نوع `string` بنقدر نعدي عليها عادي و بالتالي بنقدر نستعمل الـ Spread operator `...x` عشان نحول كل حرف الى عنصر في اراي.
1402 | 
1403 | 
1404 | </p>
1405 | </details>
1406 | </div>
1407 | 


--------------------------------------------------------------------------------
/bs-BS/README-bs_BS.md:
--------------------------------------------------------------------------------
   1 | # Popis (naprednih) JavaScript pitanja
   2 | =======================================
   3 | 
   4 | Svakodnevno postavljam JavaScript pitanja s višestrukim izborom na moj
   5 | [Instagram](https://www.instagram.com/theavocoder), koja  također objavljujem
   6 | ovdje!
   7 | 
   8 | Od osnovnog do naprednog: testirajte koliko dobro znate JavaScript, osvježite svoj
   9 | znanje malo, ili pripremiti za svoj intervju! :muscle: :rocket:
  10 | Ovaj tjedni repo ažuriram s novim pitanjima.
  11 | 
  12 | Odgovori su jednostavno dijelovima ispod pitanja
  13 | kliknite na njih da biste ih proširili. Sretno :heart:
  14 | 
  15 | - [🇸🇦 العربية](../ar-AR/README_AR.md)
  16 | - [🇪🇬 اللغة العامية](../ar-EG/README_ar-EG.md)
  17 | - [🇩🇪 Deutsch](../de-DE/README.md)
  18 | - [🇬🇧 English](../README.md)
  19 | - [🇪🇸 Español](../es-ES/README-ES.md)
  20 | - [🇫🇷 Français](../fr-FR/README_fr-FR.md)
  21 | - [🇮🇩 Indonesia](../id-ID/README.md)
  22 | - [🇮🇹 Italiano](../it-IT/README.md)
  23 | - [🇯🇵 日本語](../ja-JA/README-ja_JA.md)
  24 | - [🇰🇷 한국어](../ko-KR/README-ko_KR.md)
  25 | - [🇳🇱 Nederlands](../nl-NL/README.md)
  26 | - [🇵🇱 Polski](../pl-PL/README.md)
  27 | - [🇧🇷 Português Brasil](../pt-BR/README_pt_BR.md)
  28 | - [🇷🇺 Русский](../ru-RU/README.md)
  29 | - [🇹🇭 ไทย](../th-TH/README-th_TH.md)
  30 | - [🇹🇷 Türkçe](../tr-TR/README-tr_TR.md)
  31 | - [🇺🇦 Українська мова](../uk-UA/README.md)
  32 | - [🇻🇳 Tiếng Việt](../vi-VI/README-vi.md)
  33 | - [🇨🇳 简体中文](../zh-CN/README-zh_CN.md)
  34 | - [🇹🇼 繁體中文](../zh-TW/README_zh-TW.md)
  35 | 
  36 | * * * * *
  37 | 
  38 | ###### 1. Što je izlaz?
  39 | 
  40 | ```javascript
  41 | function sayHi() {
  42 |   console.log(name);
  43 |   console.log(age);
  44 |   var name = "Lydia";
  45 |   let age = 21;
  46 | }
  47 | 
  48 | sayHi();
  49 | ```
  50 | 
  51 | - A: "Lydia" i "undefined"
  52 | - B: "Lydia" i "ReferenceError"
  53 | - C: "ReferenceError" i "21"
  54 | - D: `undefined` i` ReferenceError`
  55 | 
  56 | <details><summary><b>Odgovor</b></summary>
  57 | <p>
  58 | 
  59 | #### Odgovor: D
  60 | 
  61 | Unutar funkcije, najprije deklarišemo varijablu `name` s` var`
  62 | ključne riječi. To znači da se varijabla podiže (memorijski prostor je postavljen
  63 | tijekom faze izrade) sa zadanom vrijednošću `undefined`,
  64 | dok zapravo ne dođemo do linije gdje definiramo varijablu. Mi
  65 | još nismo definirali varijablu na liniji gdje pokušavamo prijaviti
  66 | varijabla `name`, tako da još uvijek sadrži vrijednost` undefined`.
  67 | 
  68 | Varijable s ključnom riječi `let` (i` const`) su podignute, ali za razliku od njih
  69 | `var`, ne bivaju <i> inicijalizirane </i>. Nisu dostupni prije
  70 | linije na kojo ih proglašavamo (inicijaliziramo). To se naziva "temporal dead zone".
  71 | Kada pokušamo pristupiti varijablama prije nego što budu deklarirane,
  72 | JavaScript iz bacuje `ReferenceError`.
  73 | 
  74 | </p>
  75 | </details>
  76 | 
  77 | * * * * *
  78 | 
  79 | ###### 2. Što je izlaz?
  80 | 
  81 | ```javascript
  82 | for (var i = 0; i < 3; i++) {
  83 |   setTimeout(() => console.log(i), 1);
  84 | }
  85 | 
  86 | for (let i = 0; i < 3; i++) {
  87 |   setTimeout(() => console.log(i), 1);
  88 | }
  89 | ```
  90 | 
  91 | - A: `0 1 2` i` 0 1 2`
  92 | - B: "0 1 2" i "3 3 3"
  93 | - C: "3 3 3" i "0 1 2"
  94 | 
  95 | <details><summary><b> Odgovor</b></summary>
  96 | <p>
  97 | 
  98 | #### Odgovor: C
  99 | 
 100 | Zbog reda događaja u JavaScriptu, povratni poziv `setTimeout`
 101 | function se zove * nakon što je izvršena petlja. Od
 102 | varijabla `i` u prvoj petlji je deklarirana pomoću ključne riječi` var`,
 103 | ta je vrijednost bila globalna. Tijekom petlje povećavamo vrijednost `i`
 104 | svaki put '1', koristeći unarni operator `++`. Do vremena
 105 | Pozvana je function povratnog poziva `setTimeout`,` i` je bila jednaka `3` u
 106 | u prvom primjeru.
 107 | 
 108 | U drugoj petlji, varijabla `i` je deklarirana pomoću` let`
 109 | ključna riječ: varijable deklarirane s ključnom riječi `let` (i` const`) su
 110 | block-scoped (blok je sve između `{}`). Tijekom svake iteracije,
 111 | `i` će imati novu vrijednost, a svaka vrijednost će biti obuhvaćena unutar petlje.
 112 | 
 113 | </p>
 114 | </details>
 115 | 
 116 | * * * * *
 117 | 
 118 | ###### 3. Što je izlaz?
 119 | 
 120 | ```javascript
 121 | const shape = {
 122 |   radius: 10,
 123 |   diameter() {
 124 |     return this.radius * 2;
 125 |   },
 126 |   perimeter: () => 2 * Math.PI * this.radius
 127 | };
 128 | 
 129 | shape.diameter();
 130 | shape.perimeter();
 131 | ```
 132 | 
 133 | - A: "20" i "62.83185307179586"
 134 | - B: "20" i "NaN"
 135 | - C: "20" i "63"
 136 | - D: "NaN" i "63"
 137 | 
 138 | <details> <summary> <b> Odgovor </b> </summary>
 139 | </p>
 140 | 
 141 | #### Odgovor: B
 142 | 
 143 | Imajte na umu da je vrijednost "promjera" uobičajena function, dok je vrijednost promjera
 144 | vrijednost "perimetra" je function strelice.
 145 | 
 146 | Sa functionma strelica, ključna riječ "this" odnosi se na njegovo trenutno
 147 | okolno područje, za razliku od uobičajenih function! To znači kada
 148 | nazovemo 'perimetar', ne odnosi se na objekt oblika, već na njegov
 149 | okruženje (primjerice, prozor).
 150 | 
 151 | Na tom objektu nema vrijednosti `radius` koja vraća` undefined`.
 152 | 
 153 | </p>
 154 | </details>
 155 | 
 156 | * * * * *
 157 | 
 158 | ###### 4. Što je izlaz?
 159 | 
 160 | ```javascript
 161 | +true;
 162 | !"Lydia";
 163 | ```
 164 | 
 165 | - A: "1" i "false"
 166 | - B: "false" i "NaN"
 167 | - C: "false" i "false"
 168 | 
 169 | <details> <summary> <b> Odgovor </b> </summary>
 170 | </p>
 171 | 
 172 | #### Odgovor: A
 173 | 
 174 | Unary plus pokušava pretvoriti operand u broj. "true" je "1",
 175 | i "false" je "0".
 176 | 
 177 | Niz '' Lydia '' je istinita vrijednost. Ono što zapravo tražimo jest
 178 | "je li ta istinita vrijednost lažna?". Ovo vraća "false".
 179 | 
 180 | </p>
 181 | </details>
 182 | 
 183 | * * * * *
 184 | 
 185 | ###### 5. Koja je istina?
 186 | 
 187 | ```javascript
 188 | const bird = {
 189 |   size: "small"
 190 | };
 191 | 
 192 | const mouse = {
 193 |   name: "Mickey",
 194 |   small: true
 195 | };
 196 | ```
 197 | 
 198 | - A: `mouse.bird.size 'nije valjan
 199 | - B: `mouse [bird.size]` nije važeća
 200 | - C: `miš [bird [" veličina "]]` nije važeća
 201 | - D: Svi su valjani
 202 | 
 203 | <details> <summary> <b> Odgovor </b> </summary>
 204 | </p>
 205 | 
 206 | #### Odgovor: A
 207 | 
 208 | U JavaScriptu su svi key-evi objekta stringovi (osim ako to nije simbol). Čak
 209 | iako ih možda ne * upisujemo kao * nizove, oni se uvijek pretvaraju
 210 | u String ispod "haube".
 211 | 
 212 | JavaScript tumači (ili odlaže) izjave. Kada koristimo zagradu
 213 | notacija, on vidi prvu otvarnu zagradu ```i nastavlja dalje do nje
 214 | pronalazi završnu zagradu `]`. Tek tada će procijeniti
 215 | izjava.
 216 | 
 217 | `mouse [bird.size]`: Prvo procjenjuje `bird.size`, što je` `small``.
 218 | `mouse [" small "]` vraća "true"
 219 | 
 220 | Međutim, s točkastom notacijom, to se ne događa. `miša 'nema a
 221 | key naziva se 'bird', što znači da je `mouse.bird`` undefined`. Zatim,
 222 | tražimo "veličinu" koristeći točkovni zapis: `mouse.bird.size '. Od
 223 | `mouse.bird` je` undefined`, zapravo pitamo `undefined.size`.
 224 | To nije valjano, a bit će u pitanju pogreška slična onoj
 225 | `Cannot read property "size" of undefined`.
 226 | 
 227 | </p>
 228 | </details>
 229 | 
 230 | * * * * *
 231 | 
 232 | 
 233 | ###### 6. Što je izlaz?
 234 | 
 235 | ```javascript
 236 | let c = { greeting: "Hey!" };
 237 | let d;
 238 | 
 239 | d = c;
 240 | c.greeting = "Hello";
 241 | console.log(d.greeting);
 242 | ```
 243 | 
 244 | - A: "Zdravo"
 245 | - B: 'Hej'
 246 | - C: `undefined`
 247 | - D: "ReferenceError"
 248 | - E: `TypeError`
 249 | 
 250 | <details> <summary> <b> Odgovor </b> </summary>
 251 | </p>
 252 | 
 253 | #### Odgovor: A
 254 | 
 255 | U JavaScriptu, svi objekti međusobno djeluju * referencom * kada ih postavljaju
 256 | jednaki.
 257 | 
 258 | Prvo, varijabla `c` sadrži vrijednost objekta. Kasnije dodijelimo `d`
 259 | s istom referencom koju `c 'ima na objekt.
 260 | 
 261 | <img src = "https://i.imgur.com/ko5k0fs.png" width = "200">
 262 | 
 263 | Kada promijenite jedan objekt, mijenjate ih sve.
 264 | 
 265 | </p>
 266 | </details>
 267 | 
 268 | * * * * *
 269 | 
 270 | ###### 7. Što je izlaz?
 271 | 
 272 | ```javascript
 273 | let a = 3;
 274 | let b = new Number(3);
 275 | let c = 3;
 276 | 
 277 | console.log(a == b);
 278 | console.log(a === b);
 279 | console.log(b === c);
 280 | ```
 281 | 
 282 | - A: `true`` false` `true`
 283 | - B: `false`` false` `true`
 284 | - C: `true`` false` `false`
 285 | - D: `false`` true` `true`
 286 | 
 287 | <details> <summary> <b> Odgovor </b> </summary>
 288 | </p>
 289 | 
 290 | #### Odgovor: C
 291 | 
 292 | `new Number ()` je ugrađeni konstruktor function. Iako izgleda
 293 | kao broj, to zapravo nije broj: ima gomilu ekstra dodataka
 294 | pa je zbog toga objekt.
 295 | 
 296 | Kada koristimo `==` operatora, on samo provjerava ima li isti
 297 | *vrijednost*. Obje imaju vrijednost `3`, pa se vraća 'true'.
 298 | 
 299 | Međutim, kada koristimo `===` operator, obje vrijednosti * i * trebaju biti
 300 | isto. To nije: `new Number ()` nije broj, to je ** objekt **.
 301 | Oba vraćaju "false"
 302 | 
 303 | </p>
 304 | </details>
 305 | 
 306 | * * * * *
 307 | 
 308 | ###### 8. Što je izlaz?
 309 | 
 310 | ```javascript
 311 | class Chameleon {
 312 |   static colorChange(newColor) {
 313 |     this.newColor = newColor;
 314 |     return this.newColor;
 315 |   }
 316 | 
 317 |   constructor({ newColor = "green" } = {}) {
 318 |     this.newColor = newColor;
 319 |   }
 320 | }
 321 | 
 322 | const freddie = new Chameleon({ newColor: "purple" });
 323 | freddie.colorChange("orange");
 324 | ```
 325 | 
 326 | - A: 'narančasta'
 327 | - B: "ljubičasta"
 328 | - C: "zelena"
 329 | - D: `TypeError`
 330 | 
 331 | <details> <summary> <b> Odgovor </b> </summary>
 332 | </p>
 333 | 
 334 | #### Odgovor: D
 335 | 
 336 | function `colorChange` je statična. Namijenjene su statičkim metodama
 337 | žive samo na konstruktoru u kojem su stvoreni i ne mogu biti proslijeđeni 
 338 | bilo kojem childu. Budući da je `freddie` child, function je
 339 | nije proslijeđena, i nije dostupan na `freddie` instanci: a
 340 | Izbačen je `TypeError`.
 341 | 
 342 | </p>
 343 | </details>
 344 | 
 345 | * * * * *
 346 | 
 347 | ###### 9. Što je izlaz?
 348 | 
 349 | ```javascript
 350 | let greeting;
 351 | greetign = {}; // Typo!
 352 | console.log(greetign);
 353 | 
 354 | ```
 355 | 
 356 | - A: `{}`
 357 | - B: `ReferenceError: greetign nije definiran '
 358 | - C: `undefined`
 359 | 
 360 | <details> <summary> <b> Odgovor </b> </summary>
 361 | </p>
 362 | 
 363 | #### Odgovor: A
 364 | 
 365 | Zapisuje objekt, jer smo upravo stvorili prazan objekt na
 366 | globalni objekt! Kada smo pogrešno ukucali `pozdrav` kao` greeting`, JS
 367 | interpreter je zapravo to vidio kao `global.greeting = {}` (ili
 368 | `window.greeting = {}` u pregledniku).
 369 | 
 370 | Kako bismo to izbjegli, možemo koristiti `` use strict ''. To osigurava to
 371 | da ste deklarirali varijablu prije nego je postavite na bilo što.
 372 | 
 373 | </p>
 374 | </details>
 375 | 
 376 | * * * * *
 377 | 
 378 | ###### 10. Što se događa kada to učinimo?
 379 | 
 380 | ```javascript
 381 | function bark() {
 382 |   console.log("Woof!");
 383 | }
 384 | 
 385 | bark.animal = "dog";
 386 | ```
 387 | 
 388 | - A: Ništa, ovo je u redu!
 389 | - B: `SyntaxError`. Na ovaj način ne možete dodavati svojstva funkciji.
 390 | - C: `undefined`
 391 | - D: "ReferenceError"
 392 | 
 393 | <details> <summary> <b> Odgovor </b> </summary>
 394 | </p>
 395 | 
 396 | #### Odgovor: A
 397 | 
 398 | To je moguće u JavaScriptu, jer su funkcije objekti!
 399 | (Sve osim primitivnih tipova su objekti)
 400 | 
 401 | function je posebna vrsta objekta. Kod koji sami napišete
 402 | nije stvarna function. function je objekt sa svojstvima.
 403 | Ova nekretnina je nepovratna.
 404 | 
 405 | </p>
 406 | </details>
 407 | 
 408 | * * * * *
 409 | 
 410 | ###### 11. Kakav je rezultat?
 411 | 
 412 | ```javascript
 413 | function Person(firstName, lastName) {
 414 |   this.firstName = firstName;
 415 |   this.lastName = lastName;
 416 | }
 417 | 
 418 | const member = new Person("Lydia", "Hallie");
 419 | Person.getFullName = function() {
 420 |   return `${this.firstName} ${this.lastName}`;
 421 | };
 422 | 
 423 | console.log(member.getFullName());
 424 | ```
 425 | 
 426 | - A: `TypeError`
 427 | - B: `SyntaxError`
 428 | - C: "Lydia Hallie"
 429 | - D: `undefined`` undefined`
 430 | 
 431 | <details> <summary> <b> Odgovor </b> </summary>
 432 | </p>
 433 | 
 434 | #### Odgovor: A
 435 | 
 436 | Ne možete dodati svojstva konstruktoru kao što možete s uobičajenim
 437 | objekti. Ako želite dodati značajku svim objektima odjednom, imate
 438 | umjesto toga koristiti prototip. Dakle, u ovom slučaju,
 439 | 
 440 | ```{.js}
 441 | Person.prototype.getFullName = function () {
 442 |   return `$ {this.ime} $ {this.prezime}`;
 443 | };
 444 | ```
 445 | 
 446 | bi učinio `member.getFullName ()`. Zašto je to korisno? Reći će mo
 447 | da smo tu metodu dodali samom konstruktoru. Možda ne svaki
 448 | Primjer "Person" trebao je ovu metodu. To bi trošilo puno memorije
 449 | scopa (prostora), jer bi oni još uvijek imali tu svojinu, koja uzima memoriju
 450 | scopa za svaku instancu. Umjesto toga, ako ga samo dodamo prototipu, mi
 451 | će mo je imati na jednom mjestu u memoriji, ali svi imaju pristup!
 452 | 
 453 | </p>
 454 | </details>
 455 | 
 456 | * * * * *
 457 | 
 458 | ###### 12. Što je izlaz?
 459 | 
 460 | ```javascript
 461 | function Person(firstName, lastName) {
 462 |   this.firstName = firstName;
 463 |   this.lastName = lastName;
 464 | }
 465 | 
 466 | const lydia = new Person("Lydia", "Hallie");
 467 | const sarah = Person("Sarah", "Smith");
 468 | 
 469 | console.log(lydia);
 470 | console.log(sarah);
 471 | ```
 472 | 
 473 | - A: `Person {ime:" Lydia ", prezime:" Hallie "} i` undefined`
 474 | - B: `Person {ime:" Lydia ", prezime:" Hallie "} i
 475 |     `Person {ime:" Sarah ", prezime:" Smith "}`
 476 | - C: `Person {ime:" Lydia ", prezime:" Hallie "}` i `{}`
 477 | - D: `Person {ime:" Lydia ", prezime:" Hallie "} i
 478 |     `ReferenceError`
 479 | 
 480 | <details> <summary> <b> Odgovor </b> </summary>
 481 | </p>
 482 | 
 483 | #### Odgovor: A
 484 | 
 485 | Za `sarah` nismo koristili ključnu riječ` new`. Kada koristite "new", to
 486 | odnosi se na new prazni objekt koji stvaramo. Međutim, ako ne dodate
 487 | `new` se odnosi na ** globalni objekt **!
 488 | 
 489 | Rekli smo da je "this.ime" jednako "Sarah" i `this.prezime`
 490 | jednak je "Smithu". Ono što smo zapravo učinili jest definiranje
 491 | `global.ime = 'Sarah'` i` global.prezime =' Smith'`. `sarah`
 492 | sam je ostavljen 'undefined'.
 493 | 
 494 | </p>
 495 | </details>
 496 | 
 497 | * * * * *
 498 | 
 499 | ###### 13. Koje su tri faze propagiranja događaja?
 500 | 
 501 | - A: Target > Capturing > Bubbling
 502 | - B: Bubbling > Target > Capturing
 503 | - C: Target > Bubbling > Capturing
 504 | - D: Capturing > Target > Bubbling
 505 | 
 506 | 
 507 | <details> <summary> <b> Odgovor </b> </summary>
 508 | </p>
 509 | 
 510 | #### Odgovor: D
 511 | 
 512 | Tijekom ** capturing ** događaj prolazi kroz pretka
 513 | elemente do ciljnog elementa. Zatim doseže ** target **
 514 | i ** bubbling **.
 515 | 
 516 | <img src = "https://i.imgur.com/N18oRgd.png" width = "200">
 517 | 
 518 | </p>
 519 | </details>
 520 | 
 521 | * * * * *
 522 | 
 523 | ###### 14. Svi objekti imaju prototipove.
 524 | 
 525 | -   Istinito
 526 | - B: lažno
 527 | 
 528 | <details> <summary> <b> Odgovor </b> </summary>
 529 | </p>
 530 | 
 531 | #### Odgovor: B
 532 | 
 533 | Svi objekti imaju prototipove, osim ** osnovnog objekta **. Uporište
 534 | objekt ima pristup nekim metodama i svojstvima, kao što je `.toString`.
 535 | To je razlog zašto možete koristiti ugrađene JavaScript metode! Sve od
 536 | takve su metode dostupne na prototipu. Iako JavaScript ne može
 537 | pronaći ga izravno na vašem objektu, ide niz lanac prototipa i
 538 | nalazi ga tamo, što ga čini dostupnim.
 539 | 
 540 | </p>
 541 | </details>
 542 | 
 543 | * * * * *
 544 | 
 545 | ###### 15. Što je izlaz?
 546 | 
 547 | ```javascript
 548 | function sum(a, b) {
 549 |   return a + b;
 550 | }
 551 | 
 552 | sum(1, "2");
 553 | ```
 554 | 
 555 | - A: "NaN"
 556 | - B: `TypeError`
 557 | - C: "12"
 558 | - D: `3`
 559 | 
 560 | <details> <summary> <b> Odgovor </b> </summary>
 561 | </p>
 562 | 
 563 | #### Odgovor: C
 564 | 
 565 | JavaScript je ** dinamički upisani jezik **: ne navodimo što
 566 | vrste su određene varijable. Vrijednosti se mogu automatski pretvoriti u
 567 | drugi tip bez vašeg znanja, koji se zove * implicitni tip
 568 | prisila *. ** Prisila ** pretvara iz jednog tipa u drugi.
 569 | 
 570 | U ovom primjeru JavaScript pretvara broj `1` u niz, u
 571 | kako bi function imala smisla i vratila vrijednost. Tijekom
 572 | dodavanje numeričkog tipa (`1`) i tipa niza (` '2'`), broja
 573 | se tretira kao niz. Možemo slično spojiti
 574 | "" Zdravo "+" Svijet "`, tako da se ovdje događa ``````````````````
 575 | vraća `" 12 "`.
 576 | 
 577 | </p>
 578 | </details>
 579 | 
 580 | * * * * *
 581 | 
 582 | ###### 16. Što je izlaz?
 583 | 
 584 | ```javascript
 585 | let number = 0;
 586 | console.log(number++);
 587 | console.log(++number);
 588 | console.log(number);
 589 | ```
 590 | 
 591 | - A: `1`` 1` `2`
 592 | - B: `1`` 2` `2`
 593 | - C: `0`` 2` `2`
 594 | - D: `0`` 1` `2`
 595 | 
 596 | <details> <summary> <b> Odgovor </b> </summary>
 597 | </p>
 598 | 
 599 | #### Odgovor: C
 600 | 
 601 | ** postfix ** unarni operator `++`:
 602 | 
 603 | 1. Vraća vrijednost (ovo vraća `0`)
 604 | 2. Povećava vrijednost (broj je sada `1`)
 605 | 
 606 | ** prefiks ** unary operator `++`:
 607 | 
 608 | 1. Povećava vrijednost (broj je sada `2`)
 609 | 2. Vraća vrijednost (ovo vraća `2`)
 610 | 
 611 | Ovo vraća `0 2 2`.
 612 | 
 613 | </p>
 614 | </details>
 615 | 
 616 | * * * * *
 617 | 
 618 | ###### 17. Što je izlaz?
 619 | 
 620 | ```javascript
 621 | function getPersonInfo(one, two, three) {
 622 |   console.log(one);
 623 |   console.log(two);
 624 |   console.log(three);
 625 | }
 626 | 
 627 | const person = "Lydia";
 628 | const age = 21;
 629 | 
 630 | getPersonInfo`${person} is ${age} years old`;
 631 | ```
 632 | 
 633 | - A: `` Lydia` ``````````````````````````````````````
 634 | - B: ```````````````````````````````````````````````````````````````````````````
 635 | - C: `` Lydia` ``````````````````````````````````````````````````````````
 636 | 
 637 | <details> <summary> <b> Odgovor </b> </summary>
 638 | </p>
 639 | 
 640 | #### Odgovor: B
 641 | 
 642 | Ako koristite literale s oznakom predložaka, vrijednost prvog argumenta je
 643 | uvijek niz vrijednosti vrijednosti niza. Preostali argumenti dobivaju
 644 | vrijednosti prošlih izraza!
 645 | 
 646 | </p>
 647 | </details>
 648 | 
 649 | * * * * *
 650 | 
 651 | ###### 18. Što je izlaz?
 652 | 
 653 | ```javascript
 654 | function checkAge(data) {
 655 |   if (data === { age: 18 }) {
 656 |     console.log("You are an adult!");
 657 |   } else if (data == { age: 18 }) {
 658 |     console.log("You are still an adult.");
 659 |   } else {
 660 |     console.log(`Hmm.. You don't have an age I guess`);
 661 |   }
 662 | }
 663 | 
 664 | checkAge({ age: 18 });
 665 | ```
 666 | 
 667 | - A: "Vi ste odrasla osoba!"
 668 | - B: "Vi ste još uvijek odrasla osoba."
 669 | - C: 'Hmm .. Nemam godina za koju pretpostavljam'
 670 | 
 671 | <details> <summary> <b> Odgovor </b> </summary>
 672 | </p>
 673 | 
 674 | #### Odgovor: C
 675 | 
 676 | Prilikom ispitivanja jednakosti, primitivi se uspoređuju prema njihovoj * vrijednosti *, dok
 677 | objekti se uspoređuju prema njihovoj * referenci *. JavaScript provjerava ako
 678 | objekti imaju referencu na isto mjesto u memoriji.
 679 | 
 680 | Dva predmeta koje uspoređujemo nemaju: objekt mi
 681 | proslijeđeno kao parametar odnosi se na drugo mjesto u memoriji od
 682 | objekt koji smo koristili kako bismo provjerili jednakost.
 683 | 
 684 | Zato i `{age: 18} === {age: 18}` i
 685 | `{age: 18} == {age: 18}` return `false '.
 686 | 
 687 | </p>
 688 | </details>
 689 | 
 690 | * * * * *
 691 | 
 692 | ###### 19. Što je izlaz?
 693 | 
 694 | ```javascript
 695 | 
 696 | function getAge(...args) {
 697 |   console.log(typeof args);
 698 | }
 699 | 
 700 | getAge(21);
 701 | ```
 702 | 
 703 | - A: `" broj "
 704 | - B: `` niz ''
 705 | - C: `` objekt ''
 706 | - D: "NaN"
 707 | 
 708 | <details> <summary> <b> Odgovor </b> </summary>
 709 | </p>
 710 | 
 711 | #### Odgovor: C
 712 | 
 713 | Operator spread (`... args`.) Vraća niz s argumentima.
 714 | array je objekt, pa `typeof args` vraća` `objekt '`
 715 | 
 716 | </p>
 717 | </details>
 718 | 
 719 | * * * * *
 720 | 
 721 | ###### 20. Što je izlaz?
 722 | 
 723 | ```javascript
 724 | function getAge() {
 725 |   "use strict";
 726 |   age = 21;
 727 |   console.log(age);
 728 | }
 729 | 
 730 | getAge();
 731 | ```
 732 | 
 733 | - A: `21`
 734 | - B: `undefined`
 735 | - C: "ReferenceError"
 736 | - D: `TypeError`
 737 | 
 738 | <details> <summary> <b> Odgovor </b> </summary>
 739 | </p>
 740 | 
 741 | #### Odgovor: C
 742 | 
 743 | Sa `` use strict '', možete se uvjeriti da nije slučajno
 744 | deklarisana globalna varijabla. Nikada nismo objavili varijablu "age" i
 745 | budući da koristimo `` use strict '', ona će načiniti referentnu pogrešku. Ako mi
 746 | nije koristio "" strict ", to bi išlo od vlasništva
 747 | `age` bi se dodao u globalni objekt.
 748 | 
 749 | </p>
 750 | </details>
 751 | 
 752 | * * * * *
 753 | 
 754 | ###### 21. Što je vrijednost `suma '?
 755 | 
 756 | ```javascript
 757 | const sum = eval("10*10+5");
 758 | ```
 759 | 
 760 | - A: "105"
 761 | - B: `" 105 "`
 762 | - C: `TypeError`
 763 | - D: `" 10 * 10 + 5 "`
 764 | 
 765 | <details> <summary> <b> Odgovor </b> </summary>
 766 | </p>
 767 | 
 768 | #### Odgovor: A
 769 | 
 770 | `eval` procjenjuje kodove koji su prošli kao niz. Ako je to izraz,
 771 | kao u ovom slučaju, on ocjenjuje izraz. Izraz je
 772 | `10 * 10 + 5`. Ovo vraća broj "105".
 773 | 
 774 | </p>
 775 | </details>
 776 | 
 777 | * * * * *
 778 | 
 779 | ###### 22. Koliko dugo je cool \ _secret dostupan?
 780 | 
 781 | ```javascript
 782 | sessionStorage.setItem("cool_secret", 123);
 783 | ```
 784 | 
 785 | O: Podaci se zauvijek ne gube.
 786 | - B: Kada korisnik zatvori karticu.
 787 | - C: Kada korisnik zatvori cijeli preglednik, ne samo karticu.
 788 | - D: Kada korisnik isključi svoje računalo.
 789 | 
 790 | <details> <summary> <b> Odgovor </b> </summary>
 791 | </p>
 792 | 
 793 | #### Odgovor: B
 794 | 
 795 | Podaci spremljeni u `sessionStorage` se uklanjaju nakon zatvaranja * tab *.
 796 | 
 797 | Ako ste koristili `localStorage`, podaci bi bili tamo zauvijek, osim ako
 798 | na primjer, `localStorage.clear ()` je pozvan.
 799 | 
 800 | </p>
 801 | </details>
 802 | 
 803 | * * * * *
 804 | 
 805 | ###### 23. Što je izlaz?
 806 | 
 807 | ```javascript
 808 | var num = 8;
 809 | var num = 10;
 810 | 
 811 | console.log(num);
 812 | ```
 813 | 
 814 | - A: `8`
 815 | - B: "10"
 816 | - C: `SyntaxError`
 817 | - D: "ReferenceError"
 818 | 
 819 | <details> <summary> <b> Odgovor </b> </summary>
 820 | </p>
 821 | 
 822 | #### Odgovor: B
 823 | 
 824 | Pomoću ključne riječi `var` možete deklarirati više varijabli s istom
 825 | Ime. Varijabla će tada sadržavati zadnju vrijednost.
 826 | 
 827 | To ne možete učiniti s `let` ili` const` jer su blokirani.
 828 | 
 829 | </p>
 830 | </details>
 831 | 
 832 | * * * * *
 833 | 
 834 | ###### 24. Što je izlaz?
 835 | 
 836 | ```javascript
 837 | const obj = { 1: "a", 2: "b", 3: "c" };
 838 | const set = new Set([1, 2, 3, 4, 5]);
 839 | 
 840 | obj.hasOwnProperty("1");
 841 | obj.hasOwnProperty(1);
 842 | set.has("1");
 843 | set.has(1);
 844 | ```
 845 | 
 846 | - A: `false`` true` `false`` true`
 847 | - B: `false`` true` `true`` true`
 848 | - C: `true`` true` `false`` true`
 849 | - D: `true`` true` `true`` true`
 850 | 
 851 | <details> <summary> <b> Odgovor </b> </summary>
 852 | </p>
 853 | 
 854 | #### Odgovor: C
 855 | 
 856 | Sve tipke objekta (osim simbola) su žice ispod haube, čak i ako
 857 | ne upisujete sami kao niz znakova. To je razlog zašto
 858 | `obj.hasOwnProperty ('1')` također vraća true.
 859 | 
 860 | To ne radi tako za skup. U našem setu ne postoji "1":
 861 | `set.has ('1')` vraća `false`. Ima numerički tip "1",
 862 | `set.has (1)` vraća `true`.
 863 | 
 864 | </p>
 865 | </details>
 866 | 
 867 | * * * * *
 868 | 
 869 | ###### 25. Što je izlaz?
 870 | 
 871 | ```javascript
 872 | const obj = { a: "one", b: "two", a: "three" };
 873 | console.log(obj);
 874 | ```
 875 | 
 876 | - A: `{a:" jedan ", b:" dva "}`
 877 | - B: `{b:" dva ", a:" tri "}`
 878 | - C: `{a:" tri ", b:" dva "}`
 879 | - D: `SyntaxError`
 880 | 
 881 | <details> <summary> <b> Odgovor </b> </summary>
 882 | </p>
 883 | 
 884 | #### Odgovor: C
 885 | 
 886 | Ako imate dva ključa s istim imenom, ključ će biti zamijenjen. To
 887 | i dalje će biti na prvom mjestu, ali s posljednjom navedenom vrijednošću.
 888 | 
 889 | </p>
 890 | </details>
 891 | 
 892 | * * * * *
 893 | 
 894 | ###### 26. Globalni kontekst izvođenja JavaScripta za vas stvara dvije stvari: globalni objekt i "ovu" ključnu riječ.
 895 | 
 896 | -   Istina
 897 | - B: lažno
 898 | - C: to ovisi
 899 | 
 900 | <details> <summary> <b> Odgovor </b> </summary>
 901 | </p>
 902 | 
 903 | #### Odgovor: A
 904 | 
 905 | Kontekst izvršenja baze je kontekst globalnog izvršavanja: to je ono što je
 906 | dostupno svugdje u vašem kodu.
 907 | 
 908 | </p>
 909 | </details>
 910 | 
 911 | * * * * *
 912 | 
 913 | ###### 27. Što je izlaz?
 914 | 
 915 | ```javascript
 916 | for (let i = 1; i < 5; i++) {
 917 |   if (i === 3) continue;
 918 |   console.log(i);
 919 | }
 920 | 
 921 | ```
 922 | 
 923 | - A: `1`` 2`
 924 | - B: `1`` 2` `3`
 925 | - C: `1`` 2` `4`
 926 | - D: `1`` 3` `4`
 927 | 
 928 | <details> <summary> <b> Odgovor </b> </summary>
 929 | </p>
 930 | 
 931 | #### Odgovor: C
 932 | 
 933 | Izjava `continue` preskače iteraciju ako je određeno stanje
 934 | vraća "true".
 935 | 
 936 | </p>
 937 | </details>
 938 | 
 939 | * * * * *
 940 | 
 941 | ###### 28. Što je izlaz?
 942 | 
 943 | ```javascript
 944 | String.prototype.giveLydiaPizza = () => {
 945 |   return "Just give Lydia pizza already!";
 946 | };
 947 | 
 948 | const name = "Lydia";
 949 | 
 950 | console.log(name.giveLydiaPizza())
 951 | ```
 952 | 
 953 | - A: `` Već daj Lizijinu pizzu! ``
 954 | - B: `TypeError: nije function`
 955 | - C: `SyntaxError`
 956 | - D: `undefined`
 957 | 
 958 | <details> <summary> <b> Odgovor </b> </summary>
 959 | </p>
 960 | 
 961 | #### Odgovor: A
 962 | 
 963 | `String 'je ugrađeni konstruktor, kojem možemo dodati svojstva. ja
 964 | samo je dodao metodu u svoj prototip. Primitivni nizovi su
 965 | automatski se pretvara u string objekt, generiran stringom
 966 | prototipna function. Dakle, svi nizovi (objekti stringova) imaju pristup tome
 967 | način!
 968 | 
 969 | </p>
 970 | </details>
 971 | 
 972 | * * * * *
 973 | 
 974 | ###### 29. Što je izlaz?
 975 | 
 976 | ```javascript
 977 | const a = {};
 978 | const b = { key: "b" };
 979 | const c = { key: "c" };
 980 | 
 981 | a[b] = 123;
 982 | a[c] = 456;
 983 | 
 984 | console.log(a[b]);
 985 | ```
 986 | 
 987 | - A: '123'
 988 | - B: "456"
 989 | - C: `undefined`
 990 | - D: "ReferenceError"
 991 | 
 992 | <details> <summary> <b> Odgovor </b> </summary>
 993 | </p>
 994 | 
 995 | #### Odgovor: B
 996 | 
 997 | Tipke objekta automatski se pretvaraju u nizove. Pokušavamo
 998 | postavite objekt kao ključ za objekt "a", s vrijednošću "123".
 999 | 
1000 | Međutim, kada stringificiramo objekt, on postaje `` [Objekt objekt] '`. Tako
1001 | ono što ovdje govorimo je da je `a [" Objekt objekt "] = 123`. Onda, mi
1002 | može ponovno pokušati učiniti isto. "c" je još jedan objekt koji jesmo
1003 | implicitno ograničavaju. Dakle, `a [" Objekt objekt "] = 456`.
1004 | 
1005 | Zatim zapisujemo `a [b]`, što je zapravo `a [" Objekt objekt "]`. Upravo smo postavili
1006 | da na `456`, tako da se vraća` 456`.
1007 | 
1008 | </p>
1009 | </details>
1010 | 
1011 | * * * * *
1012 | 
1013 | ###### 30. Što je izlaz?
1014 | 
1015 | ```javascript
1016 | const foo = () => console.log("First");
1017 | const bar = () => setTimeout(() => console.log("Second"));
1018 | const baz = () => console.log("Third");
1019 | 
1020 | bar();
1021 | foo();
1022 | baz();
1023 | ```
1024 | 
1025 | - A: `Prvi`` Drugi` `Treći`
1026 | - B: `Prvi`` Treći` `Drugi`
1027 | - C: `Drugi`` Prvi` `Treći`
1028 | - D: `Drugi`` Treći` `Prvi`
1029 | 
1030 | <details> <summary> <b> Odgovor </b> </summary>
1031 | </p>
1032 | 
1033 | #### Odgovor: B
1034 | 
1035 | Imamo funkciju "setTimeout" i prvo je pozvali. Ipak, bio je prijavljen
1036 | posljednji.
1037 | 
1038 | To je zato što u preglednicima nemamo samo runtime engine, mi
1039 | također imaju nešto što se zove "WebAPI". "WebAPI" nam daje
1040 | `setTimeout` function za početak, i na primjer DOM.
1041 | 
1042 | Nakon što je * callback * preusmjeren na WebAPI, function `setTimeout`
1043 | sam (ali ne i povratni poziv!) iskače iz stog.
1044 | 
1045 | <img src = "https://i.imgur.com/X5wsHOg.png" width = "200">
1046 | 
1047 | Sada se `foo` poziva i` `Prvo`` se bilježi.
1048 | 
1049 | <img src = "https://i.imgur.com/Pvc0dGq.png" width = "200">
1050 | 
1051 | `foo` je iskačen iz stog, i` baz` se poziva. "Treći" dobiva
1052 | prijavljeni.
1053 | 
1054 | <img src = "https://i.imgur.com/WhA2bCP.png" width = "200">
1055 | 
1056 | WebAPI ne može jednostavno dodati stvari u stog kad god je spreman.
1057 | Umjesto toga, on povlači funkciju povratnog poziva u nešto što se zove
1058 | *red*.
1059 | 
1060 | <img src = "https://i.imgur.com/NSnDZmU.png" width = "200">
1061 | 
1062 | Ovo je mjesto gdje petlja događaja počinje raditi. ** ** krug događaja ** gleda
1063 | red i red za zadatke. Ako je stog prazan, uzima prvi
1064 | stvar u redu i gura je u stog.
1065 | 
1066 | <img src = "https://i.imgur.com/uyiScAI.png" width = "200">
1067 | 
1068 | `bar` se priziva,` `Second`` se bilježi, i on se pojavio
1069 | stog.
1070 | 
1071 | </p>
1072 | </details>
1073 | 
1074 | * * * * *
1075 | 
1076 | ###### 31. Što je event.target kada kliknete na gumb?
1077 | 
1078 | ```{.html}
1079 | 
1080 | <div onclick="console.log('first div')">
1081 |   <div onclick="console.log('second div')">
1082 |     <button onclick="console.log('button')">
1083 |       Click!
1084 |     </button>
1085 |   </div>
1086 | </div>
1087 | 
1088 | ```
1089 | 
1090 | - A: Vanjski 'div'
1091 | - B: Unutarnji 'div'
1092 | - C: `gumb '
1093 | - D: Niz svih ugniježđenih elemenata.
1094 | 
1095 | <details> <summary> <b> Odgovor </b> </summary>
1096 | </p>
1097 | 
1098 | #### Odgovor: C
1099 | 
1100 | Najdublji ugniježđeni element koji je uzrokovao događaj je cilj
1101 | događaj. Možete zaustaviti mjehuriće 'event.stopPropagation'
1102 | 
1103 | </p>
1104 | </details>
1105 | 
1106 | * * * * *
1107 | 
1108 | ###### 32. Kada kliknete na paragraf, što je zapisani izlaz?
1109 | 
1110 | ```{.html}
1111 | <div onclick="console.log('div')">
1112 |   <p onclick="console.log('p')">
1113 |     Click here!
1114 |   </p>
1115 | </div>
1116 | ```
1117 | 
1118 | - A: `p`` div`
1119 | - B: `div`` p`
1120 | - C: p
1121 | - D: "div"
1122 | 
1123 | <details> <summary> <b> Odgovor </b> </summary>
1124 | </p>
1125 | 
1126 | #### Odgovor: A
1127 | 
1128 | Ako kliknemo `p`, vidimo dva zapisa:` p` i `div`. Tijekom događaja
1129 | razmnožavanje, postoje 3 faze: hvatanje, ciljanje i mjehuriće. Po
1130 | zadani, rukovatelji događaja izvršavaju se u fazi mjehurića (osim ako vi
1131 | postavite `useCapture` na` true`). Ide od najdubljih ugniježđenih elemenata
1132 | van.
1133 | 
1134 | </p>
1135 | </details>
1136 | 
1137 | * * * * *
1138 | 
1139 | ###### 33. Što je izlaz?
1140 | 
1141 | ```javascript
1142 | const person = { name: "Lydia" };
1143 | 
1144 | function sayHi(age) {
1145 |   console.log(`${this.name} is ${age}`);
1146 | }
1147 | 
1148 | sayHi.call(person, 21);
1149 | sayHi.bind(person, 21);
1150 | ```
1151 | 
1152 | - A: `undefined is 21`` Lydia je 21`
1153 | - B: function funkcije
1154 | - C: `Lydia je 21`` Lydia je 21`
1155 | - D: `Lydia je 21`` function`
1156 | 
1157 | <details> <summary> <b> Odgovor </b> </summary>
1158 | </p>
1159 | 
1160 | #### Odgovor: D
1161 | 
1162 | S oba, možemo proslijediti objekt kojem želimo ključnu riječ "this"
1163 | odnosi se na. Međutim, `.call` se također * izvršava odmah *!
1164 | 
1165 | `.bind.` vraća * copy * funkcije, ali s vezanim kontekstom! To
1166 | se ne izvršava odmah.
1167 | 
1168 | </p>
1169 | </details>
1170 | 
1171 | * * * * *
1172 | 
1173 | ###### 34. Što je izlaz?
1174 | 
1175 | ```javascript
1176 | function sayHi() {
1177 |   return (() => 0)();
1178 | }
1179 | 
1180 | typeof sayHi();
1181 | ```
1182 | 
1183 | - A: `" objekt "`
1184 | - B: `" broj "
1185 | - C: function ""
1186 | - D: `" undefined "`
1187 | 
1188 | <details> <summary> <b> Odgovor </b> </summary>
1189 | </p>
1190 | 
1191 | #### Odgovor: B
1192 | 
1193 | function `sayHi` vraća vraćenu vrijednost odmah
1194 | pozvana function (IIFE). Ova function vratila je `0`, što je tip
1195 | ` "Broj"`.
1196 | 
1197 | FYI: postoji samo 7 ugrađenih tipova: `null`,` undefined`, `boolean`,
1198 | "broj", "niz", "objekt" i "simbol". `` function '' nije tip,
1199 | budući da su funkcije objekti, to je tipa `` objekta '`.
1200 | 
1201 | </p>
1202 | </details>
1203 | 
1204 | * * * * *
1205 | 
1206 | ###### 35. Koja od ovih vrijednosti su neistinite?
1207 | 
1208 | ```javascript
1209 | 0;
1210 | new Number(0);
1211 | ("");
1212 | (" ");
1213 | new Boolean(false);
1214 | undefined;
1215 | ```
1216 | 
1217 | - A: `0`,` ```,` undefined`
1218 | - B: `0`,` new Number (0) `,` '' `,` new Boolean (false) `,` undefined '
1219 | - C: `0`,` '' `,` new Boolean (false) `,` undefined`
1220 | - D: Svi su oni lažni
1221 | 
1222 | <details> <summary> <b> Odgovor </b> </summary>
1223 | </p>
1224 | 
1225 | #### Odgovor: A
1226 | 
1227 | Postoji samo šest krivotvorenih vrijednosti:
1228 | 
1229 | - `undefined`
1230 | - "null"
1231 | - "NaN"
1232 | - `0`
1233 | - `''` (prazan niz)
1234 | - "false"
1235 | 
1236 | Konstruktori function, kao što su 'new Number' i 'new Boolean' su istiniti.
1237 | 
1238 | </p>
1239 | </details>
1240 | 
1241 | * * * * *
1242 | 
1243 | ###### 36. Što je izlaz?
1244 | 
1245 | ```javascript
1246 | console.log(typeof typeof 1);
1247 | 
1248 | ```
1249 | 
1250 | - A: `" broj "
1251 | - B: niz ""
1252 | - C: `` objekt ''
1253 | - D: `" undefined "`
1254 | 
1255 | <details> <summary> <b> Odgovor </b> </summary>
1256 | </p>
1257 | 
1258 | #### Odgovor: B
1259 | 
1260 | `typeof 1` vraća` `broj ''. `typeof" number "` return `` string "`
1261 | 
1262 | </p>
1263 | </details>
1264 | 
1265 | * * * * *
1266 | 
1267 | ###### 37. Što je izlaz?
1268 | 
1269 | ```javascript
1270 | const numbers = [1, 2, 3];
1271 | numbers[10] = 11;
1272 | console.log(numbers);
1273 | ```
1274 | 
1275 | - A: `[1, 2, 3, 7 x null, 11]`
1276 | - B: `[1, 2, 3, 11]`
1277 | - C: `[1, 2, 3, 7 x prazno, 11]`
1278 | - D: `SyntaxError`
1279 | 
1280 | <details> <summary> <b> Odgovor </b> </summary>
1281 | </p>
1282 | 
1283 | #### Odgovor: C
1284 | 
1285 | Kada postavite vrijednost na element u nizu koji premašuje duljinu
1286 | iz niza, JavaScript stvara nešto što se naziva "prazni utori". To
1287 | zapravo imaju vrijednost `undefined`, ali vidjet ćete nešto poput:
1288 | 
1289 | `[1, 2, 3, 7 x prazno, 11]`
1290 | 
1291 | ovisno o tome gdje ga pokrećete (razlikuje se za svaki preglednik, čvor,
1292 | itd)
1293 | 
1294 | </p>
1295 | </details>
1296 | 
1297 | * * * * *
1298 | 
1299 | ###### 38. Što je izlaz?
1300 | 
1301 | ```javascript
1302 | (() => {
1303 |   let x, y;
1304 |   try {
1305 |     throw new Error();
1306 |   } catch (x) {
1307 |     (x = 1), (y = 2);
1308 |     console.log(x);
1309 |   }
1310 |   console.log(x);
1311 |   console.log(y);
1312 | })();
1313 | ```
1314 | 
1315 | - A: `1`` undefined `` 2`
1316 | - B: `undefined`` undefined` `undefined`
1317 | - C: `1`` 1` `2`
1318 | - D: `1`` undefined` `undefined`
1319 | 
1320 | <details> <summary> <b> Odgovor </b> </summary>
1321 | </p>
1322 | 
1323 | #### Odgovor: A
1324 | 
1325 | Blok `catch` prima argument` x`. To nije isti `x` kao
1326 | varijablu kada proslijedimo argumente. Ova varijabla `x` je blokirana.
1327 | 
1328 | Kasnije smo postavili ovu varijablu bloka koja je jednaka `1` i postavili vrijednost
1329 | varijable `y '. Sada, zapisujemo blok-scoped varijablu `x`, koja je
1330 | jednako "1".
1331 | 
1332 | Izvan 'catch' bloka, `x 'je i dalje` undefined`, a `y` je` 2`.
1333 | Kada želimo `console.log (x)` izvan `catch` bloka, to
1334 | vraća `undefined` i` y` vraća `2`.
1335 | 
1336 | </p>
1337 | </details>
1338 | 
1339 | * * * * *
1340 | 
1341 | ###### 39. Sve u JavaScriptu je ili ...
1342 | 
1343 | - A: primitivni ili objektni
1344 | - B: function ili objekt
1345 | - C: trik pitanje! samo objekti
1346 | - D: broj ili objekt
1347 | 
1348 | <details> <summary> <b> Odgovor </b> </summary>
1349 | </p>
1350 | 
1351 | #### Odgovor: A
1352 | 
1353 | JavaScript ima samo primitivne tipove i objekte.
1354 | 
1355 | Primitivni tipovi su "boolean", "null", "undefined", "bigint", "number",
1356 | 'string' i 'simbol'.
1357 | 
1358 | Ono što razlikuje primitiv od objekta je to što primitivci to ne čine
1359 | imaju bilo kakva svojstva ili metode; međutim, to ćete primijetiti
1360 | `'foo'.toUpperCase ()` vrednuje za' 'FOO'` i ne rezultira a
1361 | `TypeError`. To je zato što kada pokušate pristupiti svojstvu ili metodi
1362 | na primitivnom poput stringa, JavaScript će implicitet omotati objekt
1363 | koristeći jednu od klasa omotača, tj. `String ', a zatim odmah
1364 | odbacite omotač nakon što se izraz procijeni. Svi primitivci
1365 | osim "null" i "undefined" pokazuju ovo ponašanje.
1366 | 
1367 | </p>
1368 | </details>
1369 | 
1370 | * * * * *
1371 | 
1372 | ###### 40. Što je izlaz?
1373 | 
1374 | ```javascript
1375 | [[0, 1], [2, 3]].reduce(
1376 |   (acc, cur) => {
1377 |     return acc.concat(cur);
1378 |   },
1379 |   [1, 2]
1380 | );
1381 | ```
1382 | 
1383 | - A: `[0, 1, 2, 3, 1, 2]`
1384 | - B: `[6, 1, 2]`
1385 | - C: "[1, 2, 0, 1, 2, 3]"
1386 | - D: `[1, 2, 6]`
1387 | 
1388 | <details> <summary> <b> Odgovor </b> </summary>
1389 | </p>
1390 | 
1391 | #### Odgovor: C
1392 | 
1393 | "[1, 2]" je naša početna vrijednost. To je vrijednost s kojom počinjemo i
1394 | vrijednost prvog `acc`. Tijekom prvog kruga, "acc" je "[1,2]",
1395 | i `cur` je` [0, 1] `. Spojimo ih, što rezultira
1396 | `[1, 2, 0, 1]`.
1397 | 
1398 | Tada je `[1, 2, 0, 1]` `acc` i` [2, 3] `````. Ulančavamo se
1399 | i dobiti `[1, 2, 0, 1, 2, 3]`
1400 | 
1401 | </p>
1402 | </details>
1403 | 
1404 | * * * * *
1405 | 
1406 | ###### 41. Što je izlaz?
1407 | 
1408 | ```javascript
1409 | !!null;
1410 | !!"";
1411 | !!1;
1412 | ```
1413 | 
1414 | - A: `false`` true` `false`
1415 | - B: `false`` false` `true`
1416 | - C: `false`` true` `true`
1417 | - D: `true`` true` `false`
1418 | 
1419 | <details> <summary> <b> Odgovor </b> </summary>
1420 | </p>
1421 | 
1422 | #### Odgovor: B
1423 | 
1424 | `null` je lažan. `! null` vraća 'true'. `! true 'vraća" false ".
1425 | 
1426 | ```` je neistinit. `!" `` vraća `true '. `! true 'vraća" false ".
1427 | 
1428 | "1" je istina. `! 1` vraća 'false'. `! false 'vraća' true '.
1429 | 
1430 | </p>
1431 | </details>
1432 | 
1433 | * * * * *
1434 | 
1435 | ###### 42. Što se vraća metoda `setInterval`?
1436 | 
1437 | ```javascript
1438 | setInterval(() => console.log("Hi"), 1000);
1439 | ```
1440 | 
1441 | - A: jedinstveni ID
1442 | - B: određena količina milisekundi
1443 | - C: prošla function
1444 | - D: `undefined`
1445 | 
1446 | <details> <summary> <b> Odgovor </b> </summary>
1447 | </p>
1448 | 
1449 | #### Odgovor: A
1450 | 
1451 | Vraća jedinstveni ID. Taj se ID može koristiti za brisanje tog intervala
1452 | `clearInterval ()` function.
1453 | 
1454 | </p>
1455 | </details>
1456 | 
1457 | * * * * *
1458 | 
1459 | ###### 43. Što se to vraća?
1460 | 
1461 | ```javascript
1462 | [..."Lydia"];
1463 | ```
1464 | 
1465 | - A: `[" L "," y "," d "," i "," a "]`
1466 | - B: `[" Lydia "]`
1467 | - C: `[[]," Lydia "]`
1468 | - D: `[[" L "," y "," d "," i "," a "]]`
1469 | 
1470 | <details> <summary> <b> Odgovor </b> </summary>
1471 | </p>
1472 | 
1473 | #### Odgovor: A
1474 | 
1475 | Niz je iterabilan. Operator širenja mapira svaki znak
1476 | iterabilan na jedan element.
1477 | 
1478 | </p>
1479 | </details>
1480 | 


--------------------------------------------------------------------------------
/pl-PL/README.md:
--------------------------------------------------------------------------------
   1 | <div align="center">
   2 |   <img height="60" src="https://img.icons8.com/color/344/javascript.png">
   3 |   <h1>Pytania dotyczące JavaScript</h1>
   4 | 
   5 | ---
   6 | 
   7 | <span>Publikuję pytania wielokrotnego wyboru dotyczące JavaScriptu na swoich [Instagram](https://www.instagram.com/theavocoder) **stories**, które również zamieszczę tutaj! Ostatnia aktualizacja: <a href=#20200612><b>27 Czerwca</b></a>
   8 | 
   9 | Od podstawowych do zaawansowanych: sprawdź, jak dobrze znasz JavaScript, odśwież swoją wiedzę lub przygotuj się do rozmowy kwalifikacyjnej! :muscle: :rocket: Regularnie aktualizuję to repozytorium nowymi pytaniami. Odpowiedzi znajdują się w ukrytych zakładkach poniżej pytań - po prostu kliknij, aby je rozwinięć. To dla zabawy, powodzenia! :heart:</span>
  10 | 
  11 | Nie krępuj się ze mną kontaktować! 😊 <br />
  12 | <a href="https://www.instagram.com/theavocoder">Instagram</a> || <a href="https://www.twitter.com/lydiahallie">Twitter</a> || <a href="https://www.linkedin.com/in/lydia-hallie">LinkedIn</a> || <a href="https://www.lydiahallie.dev">Blog</a>
  13 | </div>
  14 | 
  15 | | Śmiało używaj ich w projekcie! 😃  Byłabym _bardzo_ wdzięczna za referencje do tego repozytorium, tworzę pytania i wyjaśnienia (tak, jestem smutna lol) i społeczność bardzo mi pomaga w utrzymaniu i ulepszaniu go! 💪🏼 Dziękuję i baw się dobrze!   |
  16 | |---|
  17 | 
  18 | ---
  19 | 
  20 | <details><summary><b> Zobacz 19 dostępnych tłumaczeń 🇸🇦🇪🇬🇧🇦🇩🇪🇪🇸🇫🇷🇮🇩🇯🇵🇰🇷🇳🇱🇧🇷🇷🇺🇹🇭🇹🇷🇺🇦🇻🇳🇨🇳🇹🇼</b></summary>
  21 | <p>
  22 | 
  23 | - [🇸🇦 العربية](./ar-AR/README_AR.md)
  24 | - [🇪🇬 اللغة العامية](./ar-EG/README_ar-EG.md)
  25 | - [🇧🇦 Bosanski](./bs-BS/README-bs_BS.md)
  26 | - [🇩🇪 Deutsch](./de-DE/README.md)
  27 | - [🇪🇸 Español](./es-ES/README-ES.md)
  28 | - [🇫🇷 Français](./fr-FR/README_fr-FR.md)
  29 | - [🇮🇩 Indonesia](./id-ID/README.md)
  30 | - [🇮🇹 Italiano](./it-IT/README.md)
  31 | - [🇯🇵 日本語](./ja-JA/README-ja_JA.md)
  32 | - [🇰🇷 한국어](./ko-KR/README-ko_KR.md)
  33 | - [🇳🇱 Nederlands](./nl-NL/README.md)
  34 | - [🇧🇷 Português Brasil](./pt-BR/README_pt_BR.md)
  35 | - [🇷🇺 Русский](./ru-RU/README.md)
  36 | - [🇹🇭 ไทย](./th-TH/README-th_TH.md)
  37 | - [🇹🇷 Türkçe](./tr-TR/README-tr_TR.md)
  38 | - [🇺🇦 Українська мова](./uk-UA/README.md)
  39 | - [🇻🇳 Tiếng Việt](./vi-VI/README-vi.md)
  40 | - [🇨🇳 简体中文](./zh-CN/README-zh_CN.md)
  41 | - [🇹🇼 繁體中文](./zh-TW/README_zh-TW.md)
  42 | 
  43 | </p>
  44 | </details>
  45 | 
  46 | ---
  47 | 
  48 | ###### 1. Jaki jest wynik?
  49 | 
  50 | ```javascript
  51 | function sayHi() {
  52 |   console.log(name);
  53 |   console.log(age);
  54 |   var name = 'Lydia';
  55 |   let age = 21;
  56 | }
  57 | 
  58 | sayHi();
  59 | ```
  60 | 
  61 | - A: `Lydia` and `undefined`
  62 | - B: `Lydia` and `ReferenceError`
  63 | - C: `ReferenceError` and `21`
  64 | - D: `undefined` and `ReferenceError`
  65 | 
  66 | <details><summary><b>Odpowiedź</b></summary>
  67 | <p>
  68 | 
  69 | #### Odpowiedź: D
  70 | 
  71 | Wewnątrz funkcji najpierw deklarujemy zmienną `name` za pomocą słowa kluczowego `var`. Oznacza to, że zmienna jest "wyciągana" (przestrzeń pamięci jest tworzona) z domyślną wartością `undefined` podczas fazy tworzenia, aż do momentu, gdy naprawdę definiujemy zmienną. W linii, w której próbujemy wyświetlić w konsoli zmienną `name`, jeszcze jej nie zdefiniowaliśmy, więc nadal przechowuje wartość `undefined`.
  72 | 
  73 | Zmienne zadeklarowane za pomocą słowa kluczowego `let` (i `const`) są wyciągane, ale w przeciwieństwie do `var`, nie są <i>inicjalizowane</i>. Nie są dostępne przed linią, na której je deklarujemy (inicjalizujemy). Nazywa się to "czasową strefą martwą" (temporal dead zone). Gdy próbujemy uzyskać dostęp do zmiennych przed ich zadeklarowaniem, JavaScript generuje błąd `ReferenceError`.
  74 | 
  75 | </p>
  76 | </details>
  77 | 
  78 | ---
  79 | 
  80 | ###### 2. Jaki jest wynik?
  81 | 
  82 | ```javascript
  83 | for (var i = 0; i < 3; i++) {
  84 |   setTimeout(() => console.log(i), 1);
  85 | }
  86 | 
  87 | for (let i = 0; i < 3; i++) {
  88 |   setTimeout(() => console.log(i), 1);
  89 | }
  90 | ```
  91 | 
  92 | - A: `0 1 2` and `0 1 2`
  93 | - B: `0 1 2` and `3 3 3`
  94 | - C: `3 3 3` and `0 1 2`
  95 | 
  96 | <details><summary><b>Odpowiedź</b></summary>
  97 | <p>
  98 | 
  99 | #### Odpowiedź: C
 100 | 
 101 | Ze względu na kolejkę zdarzeń w JavaScript, funkcja zwrotna `setTimeout` jest wywoływana _po_ wykonaniu pętli. Ponieważ zmienna `i` w pierwszej pętli została zadeklarowana za pomocą słowa kluczowego `var`, jej wartość była globalna. Podczas pętli inkrementowaliśmy wartość `i` o `1` za każdym razem, używając operatora jednoargumentowego `++`. W momencie wywołania funkcji zwrotnej `setTimeout`, `i` miało wartość `3` w pierwszym przykładzie.
 102 | 
 103 | W drugiej pętli zmienna `i` została zadeklarowana za pomocą słowa kluczowego `let`: zmienne zadeklarowane za pomocą słowa kluczowego `let` (i `const`) mają zakres blokowy (blokiem jest cokolwiek między `{ }`). Podczas każdej iteracji `i` będzie miało nową wartość, a każda wartość będzie miała zakres wewnątrz pętli.
 104 | 
 105 | </p>
 106 | </details>
 107 | 
 108 | ---
 109 | 
 110 | ###### 3. Jaki jest wynik?
 111 | 
 112 | ```javascript
 113 | const shape = {
 114 |   radius: 10,
 115 |   diameter() {
 116 |     return this.radius * 2;
 117 |   },
 118 |   perimeter: () => 2 * Math.PI * this.radius,
 119 | };
 120 | 
 121 | console.log(shape.diameter());
 122 | console.log(shape.perimeter());
 123 | ```
 124 | 
 125 | - A: `20` and `62.83185307179586`
 126 | - B: `20` and `NaN`
 127 | - C: `20` and `63`
 128 | - D: `NaN` and `63`
 129 | 
 130 | <details><summary><b>Odpowiedź</b></summary>
 131 | <p>
 132 | 
 133 | #### Odpowiedź: B
 134 | 
 135 | Zwróć uwagę, że wartość `diameter` jest zwykłą funkcją, podczas gdy wartość `perimeter` jest funkcją strzałkową.
 136 | 
 137 | W przypadku funkcji strzałkowych, słowo kluczowe `this` odnosi się do bieżącego otaczającego zakresu, w przeciwieństwie do zwykłych funkcji! Oznacza to, że gdy wywołujemy `perimeter`, nie odnosi się ono do obiektu shape, ale do swojego otaczającego zakresu (np. okna).
 138 | 
 139 | Na tym obiekcie nie ma wartości `radius`, co powoduje zwrócenie `NaN` (Not a Number).
 140 | 
 141 | </p>
 142 | </details>
 143 | 
 144 | ---
 145 | 
 146 | ###### 4. Jaki jest wynik?
 147 | 
 148 | ```javascript
 149 | +true;
 150 | !'Lydia';
 151 | ```
 152 | 
 153 | - A: `1` and `false`
 154 | - B: `false` and `NaN`
 155 | - C: `false` and `false`
 156 | 
 157 | <details><summary><b>Odpowiedź</b></summary>
 158 | <p>
 159 | 
 160 | #### Odpowiedź: A
 161 | 
 162 | Operator jednoargumentowy plus próbuje przekonwertować operand na liczbę. `true` jest równoważne `1`, a `false` jest równoważne `0`.
 163 | 
 164 | Łańcuch znaków `'Lydia'` jest wartością prawdziwą. Tak naprawdę pytamy, "czy ta wartość prawdziwa jest fałszywa?". To zwraca `false`.
 165 | 
 166 | </p>
 167 | </details>
 168 | 
 169 | ---
 170 | 
 171 | ###### 5. Które jest prawdziwe?
 172 | 
 173 | ```javascript
 174 | const bird = {
 175 |   size: 'small',
 176 | };
 177 | 
 178 | const mouse = {
 179 |   name: 'Mickey',
 180 |   small: true,
 181 | };
 182 | ```
 183 | 
 184 | - A: `mouse.bird.size` is not valid
 185 | - B: `mouse[bird.size]` is not valid
 186 | - C: `mouse[bird["size"]]` is not valid
 187 | - D: All of them are valid
 188 | 
 189 | <details><summary><b>Odpowiedź</b></summary>
 190 | <p>
 191 | 
 192 | #### Odpowiedź: A
 193 | 
 194 | W JavaScript wszystkie klucze obiektów są stringami (chyba że są to symbole). Nawet jeśli nie wpisujemy ich jako stringi, zawsze są one konwertowane na stringi wewnątrz.
 195 | 
 196 | JavaScript interpretuje (lub "odpakuowuje") instrukcje. Gdy używamy notacji nawiasów kwadratowych, interpreter widzi pierwszy otwierający nawias `[` i kontynuuje do momentu znalezienia zamykającego nawiasu `]`. Dopiero wtedy ocenia tę instrukcję.
 197 | 
 198 | `mouse[bird.size]`: Najpierw ocenia `bird.size`, które wynosi `"small"`. `mouse["small"]` zwraca `true`.
 199 | 
 200 | Jednakże, w przypadku notacji kropkowej, to się nie dzieje. `mouse` nie ma klucza o nazwie `bird`, co oznacza, że `mouse.bird` jest `undefined`. Następnie pytamy o `size` używając notacji kropkowej: `mouse.bird.size`. Ponieważ `mouse.bird` jest `undefined`, tak naprawdę pytamy o `undefined.size`. To nie jest poprawne i spowoduje błąd podobny do `Cannot read property "size" of undefined` (Nie można odczytać właściwości "size" z undefined).
 201 | 
 202 | </p>
 203 | </details>
 204 | 
 205 | ---
 206 | 
 207 | ###### 6. Jaki jest wynik?
 208 | 
 209 | ```javascript
 210 | let c = { greeting: 'Hey!' };
 211 | let d;
 212 | 
 213 | d = c;
 214 | c.greeting = 'Hello';
 215 | console.log(d.greeting);
 216 | ```
 217 | 
 218 | - A: `Hello`
 219 | - B: `Hey!`
 220 | - C: `undefined`
 221 | - D: `ReferenceError`
 222 | - E: `TypeError`
 223 | 
 224 | <details><summary><b>Odpowiedź</b></summary>
 225 | <p>
 226 | 
 227 | #### Odpowiedź: A
 228 | 
 229 | W JavaScript wszystkie obiekty komunikują się ze sobą przez _referencje_, gdy są sobie przypisywane.
 230 | 
 231 | Na początku zmienna `c` przechowuje referencję do obiektu. Później przypisujemy zmiennej `d` tę samą referencję, którą ma `c`, do tego obiektu.
 232 | 
 233 | <img src="https://i.imgur.com/ko5k0fs.png" width="200">
 234 | 
 235 | Kiedy zmieniasz jeden obiekt, zmieniasz je wszystkie.
 236 | 
 237 | </p>
 238 | </details>
 239 | 
 240 | ---
 241 | 
 242 | ###### 7. Jaki jest wynik?
 243 | 
 244 | ```javascript
 245 | let a = 3;
 246 | let b = new Number(3);
 247 | let c = 3;
 248 | 
 249 | console.log(a == b);
 250 | console.log(a === b);
 251 | console.log(b === c);
 252 | ```
 253 | 
 254 | - A: `true` `false` `true`
 255 | - B: `false` `false` `true`
 256 | - C: `true` `false` `false`
 257 | - D: `false` `true` `true`
 258 | 
 259 | <details><summary><b>Odpowiedź</b></summary>
 260 | <p>
 261 | 
 262 | #### Odpowiedź: C
 263 | 
 264 | `new Number()` jest wbudowanym konstruktorem funkcji. Chociaż wygląda jak liczba, nie jest faktycznie liczbą: ma wiele dodatkowych funkcji i jest obiektem.
 265 | 
 266 | Gdy używamy operatora `==` (operator równości), sprawdza on jedynie, czy mają tą samą _wartość_. Oba mają wartość `3`, więc zwraca `true`.
 267 | 
 268 | Jednak gdy używamy operatora `===` (operator ścisłej równości), zarówno wartość, jak i typ powinny być takie same. Tutaj nie są: `new Number()` nie jest liczbą, lecz **obiektem**. Oba zwracają `false`.
 269 | 
 270 | </p>
 271 | </details>
 272 | 
 273 | ---
 274 | 
 275 | ###### 8. Jaki jest wynik?
 276 | 
 277 | ```javascript
 278 | class Chameleon {
 279 |   static colorChange(newColor) {
 280 |     this.newColor = newColor;
 281 |     return this.newColor;
 282 |   }
 283 | 
 284 |   constructor({ newColor = 'green' } = {}) {
 285 |     this.newColor = newColor;
 286 |   }
 287 | }
 288 | 
 289 | const freddie = new Chameleon({ newColor: 'purple' });
 290 | console.log(freddie.colorChange('orange'));
 291 | ```
 292 | 
 293 | - A: `orange`
 294 | - B: `purple`
 295 | - C: `green`
 296 | - D: `TypeError`
 297 | 
 298 | <details><summary><b>Odpowiedź</b></summary>
 299 | <p>
 300 | 
 301 | #### Odpowiedź: D
 302 | 
 303 | Funkcja `colorChange` jest statyczna. Metody statyczne są zaprojektowane tak, aby istniały tylko w konstruktorze, w którym zostały utworzone, i nie mogą być przekazywane do żadnych potomków (children) ani wywoływane na instancjach klasy. Ponieważ `freddie` jest instancją klasy Chameleon, funkcja nie może być na niej wywołana. Otrzymujemy błąd `TypeError`.
 304 | 
 305 | </p>
 306 | </details>
 307 | 
 308 | ---
 309 | 
 310 | ###### 9. Jaki jest wynik?
 311 | 
 312 | ```javascript
 313 | let greeting;
 314 | greetign = {}; // Celowa Literówka!
 315 | console.log(greetign);
 316 | ```
 317 | 
 318 | - A: `{}`
 319 | - B: `ReferenceError: greetign is not defined`
 320 | - C: `undefined`
 321 | 
 322 | <details><summary><b>Odpowiedź</b></summary>
 323 | <p>
 324 | 
 325 | #### Odpowiedź: A
 326 | 
 327 | Kod wypisuje w konsoli obiekt, ponieważ właśnie utworzyliśmy pusty obiekt w obiekcie globalnym! Gdy pomyłkowo wpisaliśmy `greeting` jako `greetign`, interpreter JavaScript faktycznie zobaczył to jako:
 328 | 
 329 | 1. `global.greetign = {}` w Node.js.
 330 | 2. `window.greetign = {}`, `frames.greetign = {}` i `self.greetign` w przeglądarkach.
 331 | 3. `self.greetign` w web workerach.
 332 | 4. `globalThis.greetign` we wszystkich środowiskach.
 333 | 
 334 | Aby temu zapobiec, możemy użyć `"use strict"`. Powoduje to, że musisz zadeklarować zmienną przed jej przypisaniem.
 335 | 
 336 | </p>
 337 | </details>
 338 | 
 339 | ---
 340 | 
 341 | ###### 10. Co się dzieje, gdy to zrobimy?
 342 | 
 343 | ```javascript
 344 | function bark() {
 345 |   console.log('Woof!');
 346 | }
 347 | 
 348 | bark.animal = 'dog';
 349 | ```
 350 | 
 351 | - A: Nothing, this is totally fine!
 352 | - B: `SyntaxError`. You cannot add properties to a function this way.
 353 | - C: `"Woof"` gets logged.
 354 | - D: `ReferenceError`
 355 | 
 356 | <details><summary><b>Odpowiedź</b></summary>
 357 | <p>
 358 | 
 359 | #### Odpowiedź: A
 360 | 
 361 | Jest to możliwe w JavaScript, ponieważ funkcje są obiektami! (Wszystko oprócz typów prymitywnych jest obiektem)
 362 | 
 363 | Funkcja jest specjalnym rodzajem obiektu. Kod, który sam piszesz, nie jest właściwą funkcją. Funkcja jest obiektem posiadającym właściwość, która jest wywoływalna.
 364 | 
 365 | </p>
 366 | </details>
 367 | 
 368 | ---
 369 | 
 370 | ###### 11. Jaki jest wynik?
 371 | 
 372 | ```javascript
 373 | function Person(firstName, lastName) {
 374 |   this.firstName = firstName;
 375 |   this.lastName = lastName;
 376 | }
 377 | 
 378 | const member = new Person('Lydia', 'Hallie');
 379 | Person.getFullName = function() {
 380 |   return `${this.firstName} ${this.lastName}`;
 381 | };
 382 | 
 383 | console.log(member.getFullName());
 384 | ```
 385 | 
 386 | - A: `TypeError`
 387 | - B: `SyntaxError`
 388 | - C: `Lydia Hallie`
 389 | - D: `undefined` `undefined`
 390 | 
 391 | <details><summary><b>Odpowiedź</b></summary>
 392 | <p>
 393 | 
 394 | #### Odpowiedź: A
 395 | 
 396 | W JavaScript funkcje są obiektami, więc metoda `getFullName` jest dodawana do samego obiektu funkcji konstruktora. Dlatego możemy wywołać `Person.getFullName()`, ale `member.getFullName` zwraca błąd `TypeError`.
 397 | 
 398 | Jeśli chcesz, aby metoda była dostępna dla wszystkich instancji obiektów, musisz dodać ją do właściwości prototype:
 399 | 
 400 | ```js
 401 | Person.prototype.getFullName = function() {
 402 |   return `${this.firstName} ${this.lastName}`;
 403 | };
 404 | ```
 405 | 
 406 | </p>
 407 | </details>
 408 | 
 409 | ---
 410 | 
 411 | ###### 12. Jaki jest wynik?
 412 | 
 413 | ```javascript
 414 | function Person(firstName, lastName) {
 415 |   this.firstName = firstName;
 416 |   this.lastName = lastName;
 417 | }
 418 | 
 419 | const lydia = new Person('Lydia', 'Hallie');
 420 | const sarah = Person('Sarah', 'Smith');
 421 | 
 422 | console.log(lydia);
 423 | console.log(sarah);
 424 | ```
 425 | 
 426 | - A: `Person {firstName: "Lydia", lastName: "Hallie"}` and `undefined`
 427 | - B: `Person {firstName: "Lydia", lastName: "Hallie"}` and `Person {firstName: "Sarah", lastName: "Smith"}`
 428 | - C: `Person {firstName: "Lydia", lastName: "Hallie"}` and `{}`
 429 | - D: `Person {firstName: "Lydia", lastName: "Hallie"}` and `ReferenceError`
 430 | 
 431 | <details><summary><b>Odpowiedź</b></summary>
 432 | <p>
 433 | 
 434 | #### Odpowiedź: A
 435 | 
 436 | Dla `sarah`, nie użyliśmy słowa kluczowego `new`. Kiedy używamy `new`, `this` odwołuje się do nowego pustego obiektu, który tworzymy. Jednak jeśli nie dodajemy `new`, `this` odwołuje się do **globalnego obiektu**!
 437 | 
 438 | Mówiliśmy, że `this.firstName` równa się `"Sarah"`, a `this.lastName` równa się `"Smith"`. Czyli faktycznie zdefiniowaliśmy `global.firstName = 'Sarah'` i `global.lastName = 'Smith'`. `sarah` pozostaje `undefined`, ponieważ nie zwracaliśmy żadnej wartości z funkcji `Person`.
 439 | 
 440 | </p>
 441 | </details>
 442 | 
 443 | ---
 444 | 
 445 | ###### 13. Jakie są trzy fazy propagacji zdarzeń?
 446 | 
 447 | - A: Target > Capturing > Bubbling
 448 | - B: Bubbling > Target > Capturing
 449 | - C: Target > Bubbling > Capturing
 450 | - D: Capturing > Target > Bubbling
 451 | 
 452 | <details><summary><b>Odpowiedź</b></summary>
 453 | <p>
 454 | 
 455 | #### Odpowiedź: D
 456 | 
 457 | W fazie **capturing (przechwytywanie)**, zdarzenie przechodzi przez elementy nadrzędne w doł do elementu docelowego. Następnie dociera do elementu **target (cel)** i rozpoczyna się **bubbling (bąbelkowanie)**.
 458 | 
 459 | <img src="https://i.imgur.com/N18oRgd.png" width="200">
 460 | 
 461 | </p>
 462 | </details>
 463 | 
 464 | ---
 465 | 
 466 | ###### 14. Wszystkie obiekty mają prototypy.
 467 | 
 468 | - A: true
 469 | - B: false
 470 | 
 471 | <details><summary><b>Odpowiedź</b></summary>
 472 | <p>
 473 | 
 474 | #### Odpowiedź: B
 475 | 
 476 | Wszystkie obiekty mają prototypy, z wyjątkiem **obiektu bazowego**. Obiekt bazowy jest obiektem utworzonym przez użytkownika lub obiektem utworzonym przy użyciu słowa kluczowego `new`. Obiekt bazowy ma dostęp do niektórych metod i właściwości, takich jak `.toString`. Jest to powód, dla którego można używać wbudowanych metod JavaScript! Wszystkie takie metody są dostępne w prototypie. Chociaż JavaScript nie może znaleźć ich bezpośrednio w twoim obiekcie, przechodzi w dół łańcucha prototypów i je tam znajduje, co czyni je dostępnymi dla ciebie.
 477 | 
 478 | </p>
 479 | </details>
 480 | 
 481 | ---
 482 | 
 483 | ###### 15. Jaki jest wynik?
 484 | 
 485 | ```javascript
 486 | function sum(a, b) {
 487 |   return a + b;
 488 | }
 489 | 
 490 | sum(1, '2');
 491 | ```
 492 | 
 493 | - A: `NaN`
 494 | - B: `TypeError`
 495 | - C: `"12"`
 496 | - D: `3`
 497 | 
 498 | <details><summary><b>Odpowiedź</b></summary>
 499 | <p>
 500 | 
 501 | #### Odpowiedź: C
 502 | 
 503 | JavaScript jest językiem **dynamicznie typowanym**: nie określamy typów niektórych zmiennych. Wartości mogą być automatycznie konwertowane na inny typ bez wiedzy użytkownika, co nazywa się _implicit type coercion_. **Koercja (Wymuszenie)** to konwersja z jednego typu na inny.
 504 | 
 505 | W tym przykładzie JavaScript konwertuje liczbę `1` na string, aby funkcja miała sens i zwróciła wartość. Podczas dodawania typu liczbowego (`1`) i typu łańcuchowego (`'2'`), liczba traktowana jest jako string. Możemy łączyć stringi takie jak `"Hello" + "World"`, więc to co się tutaj dzieje to `"1" + "2"`, które zwraca `"12"`.
 506 | 
 507 | </p>
 508 | </details>
 509 | 
 510 | ---
 511 | 
 512 | ###### 16. Jaki jest wynik?
 513 | 
 514 | ```javascript
 515 | let number = 0;
 516 | console.log(number++);
 517 | console.log(++number);
 518 | console.log(number);
 519 | ```
 520 | 
 521 | - A: `1` `1` `2`
 522 | - B: `1` `2` `2`
 523 | - C: `0` `2` `2`
 524 | - D: `0` `1` `2`
 525 | 
 526 | <details><summary><b>Odpowiedź</b></summary>
 527 | <p>
 528 | 
 529 | #### Odpowiedź: C
 530 | 
 531 | Operator jednoargumentowy **Postfix** `++`:
 532 | 
 533 | 1. Zwraca wartość (ten zwraca `0`)
 534 | 2. Zwiększa wartość (liczba wynosi teraz `1`)
 535 | 
 536 | Operator jednoargumentowy **Prefix**  `++`:
 537 | 
 538 | 1. Zwiększa wartość (liczba wynosi teraz `2`)
 539 | 2. Zwraca wartość (to zwraca `2`)
 540 | 
 541 | number zwraca `0 2 2`.
 542 | 
 543 | </p>
 544 | </details>
 545 | 
 546 | ---
 547 | 
 548 | ###### 17. Jaki jest wynik?
 549 | 
 550 | ```javascript
 551 | function getPersonInfo(one, two, three) {
 552 |   console.log(one);
 553 |   console.log(two);
 554 |   console.log(three);
 555 | }
 556 | 
 557 | const person = 'Lydia';
 558 | const age = 21;
 559 | 
 560 | getPersonInfo`${person} is ${age} years old`;
 561 | ```
 562 | 
 563 | - A: `"Lydia"` `21` `["", " is ", " years old"]`
 564 | - B: `["", " is ", " years old"]` `"Lydia"` `21`
 565 | - C: `"Lydia"` `["", " is ", " years old"]` `21`
 566 | 
 567 | <details><summary><b>Odpowiedź</b></summary>
 568 | <p>
 569 | 
 570 | #### Odpowiedź: B
 571 | 
 572 | W przypadku użycia `template strings`, wartością pierwszego argumentu jest zawsze tablica wartości łańcuchowych (string). Pozostałe argumenty otrzymują wartości przekazanych wyrażeń!
 573 | 
 574 | </p>
 575 | </details>
 576 | 
 577 | ---
 578 | 
 579 | ###### 18. Jaki jest wynik?
 580 | 
 581 | ```javascript
 582 | function checkAge(data) {
 583 |   if (data === { age: 18 }) {
 584 |     console.log('You are an adult!');
 585 |   } else if (data == { age: 18 }) {
 586 |     console.log('You are still an adult.');
 587 |   } else {
 588 |     console.log(`Hmm.. You don't have an age I guess`);
 589 |   }
 590 | }
 591 | 
 592 | checkAge({ age: 18 });
 593 | ```
 594 | 
 595 | - A: `You are an adult!`
 596 | - B: `You are still an adult.`
 597 | - C: `Hmm.. You don't have an age I guess`
 598 | 
 599 | <details><summary><b>Odpowiedź</b></summary>
 600 | <p>
 601 | 
 602 | #### Odpowiedź: C
 603 | 
 604 | Podczas testowania równości, liczby i ciągi znaków są porównywane przez ich _wartości_, a obiekty są porównywane przez ich _referencję_. JavaScript sprawdza, czy obiekty mają odwołanie do tej samej lokalizacji w pamięci.
 605 | 
 606 | Dwa obiekty, które porównujemy, nie mają tej samej lokalizacji w pamięci: obiekt, który przekazujemy jako parametr, odwołuje się do innej lokalizacji w pamięci niż obiekt, którego użyliśmy do sprawdzenia równości.
 607 | 
 608 | Dlatego też zarówno `{ age: 18 } == { age: 18 }` i `{ age: 18 } == { age: 18 }` zwracają `false`.
 609 | 
 610 | </p>
 611 | </details>
 612 | 
 613 | ---
 614 | 
 615 | ###### 19. Jaki jest wynik?
 616 | 
 617 | ```javascript
 618 | function getAge(...args) {
 619 |   console.log(typeof args);
 620 | }
 621 | 
 622 | getAge(21);
 623 | ```
 624 | 
 625 | - A: `"number"`
 626 | - B: `"array"`
 627 | - C: `"object"`
 628 | - D: `"NaN"`
 629 | 
 630 | <details><summary><b>Odpowiedź</b></summary>
 631 | <p>
 632 | 
 633 | #### Odpowiedź: C
 634 | 
 635 | Parametr reszty (`...args`) pozwala nam "zbierać" wszystkie pozostałe argumenty do tablicy. Tablica to obiekt, więc `typeof args` zwraca `"object"`.
 636 | 
 637 | </p>
 638 | </details>
 639 | 
 640 | ---
 641 | 
 642 | ###### 20. Jaki jest wynik?
 643 | 
 644 | ```javascript
 645 | function getAge() {
 646 |   'use strict';
 647 |   age = 21;
 648 |   console.log(age);
 649 | }
 650 | 
 651 | getAge();
 652 | ```
 653 | 
 654 | - A: `21`
 655 | - B: `undefined`
 656 | - C: `ReferenceError`
 657 | - D: `TypeError`
 658 | 
 659 | <details><summary><b>Odpowiedź</b></summary>
 660 | <p>
 661 | 
 662 | #### Odpowiedź: C
 663 | 
 664 | Dzięki `"use strict"` możesz upewnić się, że przypadkowo nie zadeklarujesz zmiennych globalnych. Nigdy nie zadeklarowaliśmy zmiennej `age`, a ponieważ używamy `"use strict"`, zostanie zgłoszony błąd referencji. Gdybyśmy nie użyli `"use strict"`, to by zadziałało, ponieważ właściwość `age` zostałaby dodana do obiektu globalnego.
 665 | 
 666 | </p>
 667 | </details>
 668 | 
 669 | ---
 670 | 
 671 | ###### 21. Jaka jest wartość `sum`?
 672 | 
 673 | ```javascript
 674 | const sum = eval('10*10+5');
 675 | ```
 676 | 
 677 | - A: `105`
 678 | - B: `"105"`
 679 | - C: `TypeError`
 680 | - D: `"10*10+5"`
 681 | 
 682 | <details><summary><b>Odpowiedź</b></summary>
 683 | <p>
 684 | 
 685 | #### Odpowiedź: A
 686 | 
 687 | `eval` oblicza kod, który przekazywany jest jako ciąg znaków. Jeśli jest to wyrażenie, tak jak w tym przypadku, oblicza ono wyrażenie. Wyrażenie to `10 * 10 + 5`. Zwraca liczbę `105`.
 688 | 
 689 | </p>
 690 | </details>
 691 | 
 692 | ---
 693 | 
 694 | ###### 22. Jak długo cool_secret jest dostępny?
 695 | 
 696 | ```javascript
 697 | sessionStorage.setItem('cool_secret', 123);
 698 | ```
 699 | 
 700 | - A: Dane nigdy nie zostaną utracone.
 701 | - B: Gdy użytkownik zamyka kartę.
 702 | - C: Gdy użytkownik zamyka cały przeglądarkę, a nie tylko kartę.
 703 | - D: Gdy użytkownik wyłącza swój komputer.
 704 | 
 705 | <details><summary><b>Odpowiedź</b></summary>
 706 | <p>
 707 | 
 708 | #### Odpowiedź: B
 709 | 
 710 | Dane przechowywane w `sessionStorage` są usuwane po zamknięciu _zakładki_.
 711 | 
 712 | Gdybyś użył `localStorage`, dane pozostałyby tam na zawsze, chyba że na przykład wywołano by `localStorage.clear()`.
 713 | 
 714 | </p>
 715 | </details>
 716 | 
 717 | ---
 718 | 
 719 | ###### 23. Jaki jest wynik?
 720 | 
 721 | ```javascript
 722 | var num = 8;
 723 | var num = 10;
 724 | 
 725 | console.log(num);
 726 | ```
 727 | 
 728 | - A: `8`
 729 | - B: `10`
 730 | - C: `SyntaxError`
 731 | - D: `ReferenceError`
 732 | 
 733 | <details><summary><b>Odpowiedź</b></summary>
 734 | <p>
 735 | 
 736 | #### Odpowiedź: B
 737 | 
 738 | Za pomocą słowa kluczowego `var` można zadeklarować wiele zmiennych o tej samej nazwie. Zmienna będzie wtedy przechowywać najnowszą wartość.
 739 | 
 740 | Nie można tego zrobić za pomocą `let` lub `const`, ponieważ są one blokowe.
 741 | 
 742 | </p>
 743 | </details>
 744 | 
 745 | ---
 746 | 
 747 | ###### 24. Jaki jest wynik?
 748 | 
 749 | ```javascript
 750 | const obj = { 1: 'a', 2: 'b', 3: 'c' };
 751 | const set = new Set([1, 2, 3, 4, 5]);
 752 | 
 753 | obj.hasOwnProperty('1');
 754 | obj.hasOwnProperty(1);
 755 | set.has('1');
 756 | set.has(1);
 757 | ```
 758 | 
 759 | - A: `false` `true` `false` `true`
 760 | - B: `false` `true` `true` `true`
 761 | - C: `true` `true` `false` `true`
 762 | - D: `true` `true` `true` `true`
 763 | 
 764 | <details><summary><b>Odpowiedź</b></summary>
 765 | <p>
 766 | 
 767 | #### Odpowiedź: C
 768 | 
 769 | Wszystkie klucze obiektów (z wyjątkiem symboli) są łańcuchami znaków pod względem samego obiektu, nawet jeśli nie napiszesz ich samodzielnie jako łańcucha znaków. Dlatego `obj.hasOwnProperty('1')` również zwraca true.
 770 | 
 771 | Nie działa to w ten sam sposób dla zbioru. W zbiorze nie ma klucza `'1'`:`set.has('1')`, dlatego zwraca wartość false. Zawiera on liczbę całkowitą `1`, `set.has(1)` zwraca wartość true.
 772 | 
 773 | </p>
 774 | </details>
 775 | 
 776 | ---
 777 | 
 778 | ###### 25. Jaki jest wynik?
 779 | 
 780 | ```javascript
 781 | const obj = { a: 'one', b: 'two', a: 'three' };
 782 | console.log(obj);
 783 | ```
 784 | 
 785 | - A: `{ a: "one", b: "two" }`
 786 | - B: `{ b: "two", a: "three" }`
 787 | - C: `{ a: "three", b: "two" }`
 788 | - D: `SyntaxError`
 789 | 
 790 | <details><summary><b>Odpowiedź</b></summary>
 791 | <p>
 792 | 
 793 | #### Odpowiedź: C
 794 | 
 795 | Jeśli masz dwa klucze o takiej samej nazwie, zostanie on zastąpiony. Nadal będzie umieszczony na pierwszej pozycji, ale z ostatnią zdefiniowaną wartością.
 796 | 
 797 | </p>
 798 | </details>
 799 | 
 800 | ---
 801 | 
 802 | ###### 26. Globalny kontekst wykonania JavaScript tworzy dwie rzeczy: obiekt globalny i słowo kluczowe "this".
 803 | 
 804 | - A: true
 805 | - B: false
 806 | - C: it depends
 807 | 
 808 | <details><summary><b>Odpowiedź</b></summary>
 809 | <p>
 810 | 
 811 | #### Odpowiedź: A
 812 | 
 813 | Globalny kontekst wykonania jest dostępny wszędzie w kodzie.
 814 | 
 815 | </p>
 816 | </details>
 817 | 
 818 | ---
 819 | 
 820 | ###### 27. Jaki jest wynik?
 821 | 
 822 | ```javascript
 823 | for (let i = 1; i < 5; i++) {
 824 |   if (i === 3) continue;
 825 |   console.log(i);
 826 | }
 827 | ```
 828 | 
 829 | - A: `1` `2`
 830 | - B: `1` `2` `3`
 831 | - C: `1` `2` `4`
 832 | - D: `1` `3` `4`
 833 | 
 834 | <details><summary><b>Odpowiedź</b></summary>
 835 | <p>
 836 | 
 837 | #### Odpowiedź: C
 838 | 
 839 | Instrukcja `continue` pomija iterację, jeśli określony warunek zwróci `true`.
 840 | 
 841 | </p>
 842 | </details>
 843 | 
 844 | ---
 845 | 
 846 | ###### 28. Jaki jest wynik?
 847 | 
 848 | ```javascript
 849 | String.prototype.giveLydiaPizza = () => {
 850 |   return 'Just give Lydia pizza already!';
 851 | };
 852 | 
 853 | const name = 'Lydia';
 854 | 
 855 | console.log(name.giveLydiaPizza())
 856 | ```
 857 | 
 858 | - A: `"Just give Lydia pizza already!"`
 859 | - B: `TypeError: not a function`
 860 | - C: `SyntaxError`
 861 | - D: `undefined`
 862 | 
 863 | <details><summary><b>Odpowiedź</b></summary>
 864 | <p>
 865 | 
 866 | #### Odpowiedź: A
 867 | 
 868 | `String` jest wbudowanym konstruktorem, do którego możemy dodawać właściwości. Dodana została metoda do jego prototypu. Prymitywne ciągi znaków są automatycznie konwertowane na obiekt typu string, generowany przez funkcję prototypu ciągu znaków. Tak więc wszystkie ciągi (obiekty typu string) mają dostęp do tej metody!
 869 | 
 870 | </p>
 871 | </details>
 872 | 
 873 | ---
 874 | 
 875 | ###### 29. Jaki jest wynik?
 876 | 
 877 | ```javascript
 878 | const a = {};
 879 | const b = { key: 'b' };
 880 | const c = { key: 'c' };
 881 | 
 882 | a[b] = 123;
 883 | a[c] = 456;
 884 | 
 885 | console.log(a[b]);
 886 | ```
 887 | 
 888 | - A: `123`
 889 | - B: `456`
 890 | - C: `undefined`
 891 | - D: `ReferenceError`
 892 | 
 893 | <details><summary><b>Odpowiedź</b></summary>
 894 | <p>
 895 | 
 896 | #### Odpowiedź: B
 897 | 
 898 | Klucze obiektów są automatycznie konwertowane na ciągi znaków. Próbujemy ustawić obiekt jako klucz do obiektu `a`, z wartością `123`.
 899 | 
 900 | Jednakże, kiedy stringujemy obiekt, staje się on `"[obiekt Object]"`. Mówimy więc, że `a["[obiekt Object]"] = 123`. Następnie próbujemy zrobić to samo. `c` jest kolejnym obiektem, który niejawnie stringujemy. Zatem `a["[obiekt Object]"] = 456`.
 901 | 
 902 | Następnie wyświetlamy w konsoli `a[b]`, co w rzeczywistości jest `a["[obiekt Object]"]`, ustawiony wcześniej na `456`, więc zwraca `456`.
 903 | 
 904 | </p>
 905 | </details>
 906 | 
 907 | ---
 908 | 
 909 | ###### 30. Jaki jest wynik?
 910 | 
 911 | ```javascript
 912 | const foo = () => console.log('First');
 913 | const bar = () => setTimeout(() => console.log('Second'));
 914 | const baz = () => console.log('Third');
 915 | 
 916 | bar();
 917 | foo();
 918 | baz();
 919 | ```
 920 | 
 921 | - A: `First` `Second` `Third`
 922 | - B: `First` `Third` `Second`
 923 | - C: `Second` `First` `Third`
 924 | - D: `Second` `Third` `First`
 925 | 
 926 | <details><summary><b>Odpowiedź</b></summary>
 927 | <p>
 928 | 
 929 | #### Odpowiedź: B
 930 | 
 931 | Mamy funkcję `setTimeout` i wywołaliśmy ją jako pierwszą. Została jednak wyświetlona jako ostatnia.
 932 | 
 933 | Dzieje się tak, ponieważ w przeglądarkach mamy nie tylko silnik wykonawczy, ale także coś, co nazywa się `WebAPI`. Interfejs `WebAPI` daje nam na początek funkcję `setTimeout`.
 934 | 
 935 | Po przesłaniu _callback_ do WebAPI, sama funkcja `setTimeout` (ale nie callback!) jest usuwana ze stosu.
 936 | 
 937 | <img src="https://i.imgur.com/X5wsHOg.png" width="200">
 938 | 
 939 | Teraz, `foo` jest wywoływane, a `"First"` jest wyświetlane.
 940 | 
 941 | <img src="https://i.imgur.com/Pvc0dGq.png" width="200">
 942 | 
 943 | `foo` jest zdejmowane ze stosu, a `baz` jest wywoływane. "Third" zostaje wyświetlony.
 944 | 
 945 | <img src="https://i.imgur.com/WhA2bCP.png" width="200">
 946 | 
 947 | WebAPI nie może dodawać rzeczy do stosu, gdy jest gotowy. Zamiast tego przesuwa funkcję zwrotną do czegoś zwanego _kolejką_.
 948 | 
 949 | <img src="https://i.imgur.com/NSnDZmU.png" width="200">
 950 | 
 951 | W tym miejscu zaczyna działać pętla zdarzeń. **Pętla zdarzeń** patrzy na stos i kolejkę zadań. Jeśli stos jest pusty, pobiera pierwszą rzecz z kolejki i przesuwa ją na stos.
 952 | 
 953 | <img src="https://i.imgur.com/uyiScAI.png" width="200">
 954 | 
 955 | `bar` zostaje wywołany, `"Second"` zostaje wyświetlony i zdjęty ze stosu.
 956 | 
 957 | </p>
 958 | </details>
 959 | 
 960 | ---
 961 | 
 962 | ###### 31. Co zostanie wyświetlone w konsoli po kliknięciu przycisku?
 963 | 
 964 | ```html
 965 | <div onclick="console.log('first div')">
 966 |   <div onclick="console.log('second div')">
 967 |     <button onclick="console.log('button')">
 968 |       Click!
 969 |     </button>
 970 |   </div>
 971 | </div>
 972 | ```
 973 | 
 974 | - A: Zewnętrzny `div`
 975 | - B: Wewnętrzny `div`
 976 | - C: `button`
 977 | - D: Tablica wszystkich zagnieżdżonych elementów.
 978 | 
 979 | <details><summary><b>Odpowiedź</b></summary>
 980 | <p>
 981 | 
 982 | #### Odpowiedź: C
 983 | 
 984 | Najgłębiej zagnieżdżony element, który spowodował zdarzenie jest celem zdarzenia. Możesz zatrzymać bąbelkowanie poprzez `event.stopPropagation`
 985 | 
 986 | </p>
 987 | </details>
 988 | 
 989 | ---
 990 | 
 991 | ###### 32. Co zostanie wyświetlone w konsoli po kliknięciu akapitu?
 992 | 
 993 | ```html
 994 | <div onclick="console.log('div')">
 995 |   <p onclick="console.log('p')">
 996 |     Click here!
 997 |   </p>
 998 | </div>
 999 | ```
1000 | 
1001 | - A: `p` `div`
1002 | - B: `div` `p`
1003 | - C: `p`
1004 | - D: `div`
1005 | 
1006 | <details><summary><b>Odpowiedź</b></summary>
1007 | <p>
1008 | 
1009 | #### Odpowiedź: A
1010 | 
1011 | Jeśli klikniemy `p`, zobaczymy dwa logi: `p` i `div`. Podczas propagacji zdarzeń istnieją 3 fazy: przechwytywanie, cel i bąbelkowanie (capturing, target, and bubbling). Domyślnie, event handlery są wykonywane w fazie bąbelkowania (chyba że ustawisz `useCapture` na `true`). Przebiega ona od najgłębiej zagnieżdżonego elementu na zewnątrz.
1012 | 
1013 | </p>
1014 | </details>
1015 | 
1016 | ---
1017 | 
1018 | ###### 33. Jaki jest wynik?
1019 | 
1020 | ```javascript
1021 | const person = { name: 'Lydia' };
1022 | 
1023 | function sayHi(age) {
1024 |   return `${this.name} is ${age}`;
1025 | }
1026 | 
1027 | console.log(sayHi.call(person, 21));
1028 | console.log(sayHi.bind(person, 21));
1029 | ```
1030 | 
1031 | - A: `undefined is 21` `Lydia is 21`
1032 | - B: `function` `function`
1033 | - C: `Lydia is 21` `Lydia is 21`
1034 | - D: `Lydia is 21` `function`
1035 | 
1036 | <details><summary><b>Odpowiedź</b></summary>
1037 | <p>
1038 | 
1039 | #### Odpowiedź: D
1040 | 
1041 | W obu przypadkach możemy przekazać obiekt, do którego ma się odnosić słowo kluczowe `this`. Jednakże, `.call` jest _wykonywane natychmiast_!
1042 | 
1043 | `.bind.` zwraca _kopię_ funkcji, ale z powiązanym kontekstem! Nie jest ona wykonywana natychmiast.
1044 | 
1045 | </p>
1046 | </details>
1047 | 
1048 | ---
1049 | 
1050 | ###### 34. Jaki jest wynik?
1051 | 
1052 | ```javascript
1053 | function sayHi() {
1054 |   return (() => 0)();
1055 | }
1056 | 
1057 | console.log(typeof sayHi());
1058 | ```
1059 | 
1060 | - A: `"object"`
1061 | - B: `"number"`
1062 | - C: `"function"`
1063 | - D: `"undefined"`
1064 | 
1065 | <details><summary><b>Odpowiedź</b></summary>
1066 | <p>
1067 | 
1068 | #### Odpowiedź: B
1069 | 
1070 | Funkcja `sayHi` zwraca zwróconą wartość natychmiast wywołanego wyrażenia funkcyjnego (IIFE). Ta funkcja zwróciła wartość `0`, która jest typu `"number"`.
1071 | 	
1072 | FYI: `typeof` może zwrócić następującą listę wartości: `undefined`, `boolean`, `number`, `bigint`, `string`, `symbol`, `function` i `object`. Zauważ, że `typeof null` zwraca `"object"`.
1073 | 
1074 | </p>
1075 | </details>
1076 | 
1077 | ---
1078 | 
1079 | ###### 35. Które z tych wartości są fałszywe?
1080 | 
1081 | ```javascript
1082 | 0;
1083 | new Number(0);
1084 | ('');
1085 | (' ');
1086 | new Boolean(false);
1087 | undefined;
1088 | ```
1089 | 
1090 | - A: `0`, `''`, `undefined`
1091 | - B: `0`, `new Number(0)`, `''`, `new Boolean(false)`, `undefined`
1092 | - C: `0`, `''`, `new Boolean(false)`, `undefined`
1093 | - D: Wszystkie są fałszywe
1094 | 
1095 | <details><summary><b>Odpowiedź</b></summary>
1096 | <p>
1097 | 
1098 | #### Odpowiedź: A
1099 | 
1100 | Istnieje 8 fałszywych wartości:
1101 | 
1102 | - `undefined`
1103 | - `null`
1104 | - `NaN`
1105 | - `false`
1106 | - `''` (pusty ciąg)
1107 | - `0`
1108 | - `-0`
1109 | - `0n` (BigInt(0))
1110 | 
1111 | Konstruktory funkcji, takie jak `new Number` i `new Boolean` są prawdziwe.
1112 | 
1113 | </p>
1114 | </details>
1115 | 
1116 | ---
1117 | 
1118 | ###### 36. Jaki jest wynik?
1119 | 
1120 | ```javascript
1121 | console.log(typeof typeof 1);
1122 | ```
1123 | 
1124 | - A: `"number"`
1125 | - B: `"string"`
1126 | - C: `"object"`
1127 | - D: `"undefined"`
1128 | 
1129 | <details><summary><b>Odpowiedź</b></summary>
1130 | <p>
1131 | 
1132 | #### Odpowiedź: B
1133 | 
1134 | `typeof 1` zwraca `"number"`.
1135 | `typeof "number"` zwraca `"string"`.
1136 | 
1137 | </p>
1138 | </details>
1139 | 
1140 | ---
1141 | 
1142 | ###### 37. Jaki jest wynik?
1143 | 
1144 | ```javascript
1145 | const numbers = [1, 2, 3];
1146 | numbers[10] = 11;
1147 | console.log(numbers);
1148 | ```
1149 | 
1150 | - A: `[1, 2, 3, null x 7, 11]`
1151 | - B: `[1, 2, 3, 11]`
1152 | - C: `[1, 2, 3, empty x 7, 11]`
1153 | - D: `SyntaxError`
1154 | 
1155 | <details><summary><b>Odpowiedź</b></summary>
1156 | <p>
1157 | 
1158 | #### Odpowiedź: C
1159 | 
1160 | Po ustawieniu wartości elementu w tablicy, która przekracza długość tablicy, JavaScript tworzy coś, co nazywa się "pustymi slotami". W rzeczywistości mają one wartość `undefined`, ale zobaczysz coś takiego jak:
1161 | 
1162 | `[1, 2, 3, puste x 7, 11]`.
1163 | 
1164 | w zależności od tego, gdzie go uruchomisz (jest inny dla każdej przeglądarki, node itp.).
1165 | 
1166 | </p>
1167 | </details>
1168 | 
1169 | ---
1170 | 
1171 | ###### 38. Jaki jest wynik?
1172 | 
1173 | ```javascript
1174 | (() => {
1175 |   let x, y;
1176 |   try {
1177 |     throw new Error();
1178 |   } catch (x) {
1179 |     (x = 1), (y = 2);
1180 |     console.log(x);
1181 |   }
1182 |   console.log(x);
1183 |   console.log(y);
1184 | })();
1185 | ```
1186 | 
1187 | - A: `1` `undefined` `2`
1188 | - B: `undefined` `undefined` `undefined`
1189 | - C: `1` `1` `2`
1190 | - D: `1` `undefined` `undefined`
1191 | 
1192 | <details><summary><b>Odpowiedź</b></summary>
1193 | <p>
1194 | 
1195 | #### Odpowiedź: A
1196 | 
1197 | Blok `catch` otrzymuje argument `x`. Nie jest to ten sam `x` co zmienna, gdy przekazujemy argumenty. Ta zmienna `x` jest blokowa.
1198 | 
1199 | Później, ustawiamy tę blokową zmienną równą `1` i ustawiamy wartość zmiennej `y`. Teraz wyświetlamy w konsoli zmienną blokową `x`, która jest równa `1`.
1200 | 
1201 | Poza blokiem `catch`, `x` jest wciąż `undefined`, a `y` wynosi `2`. Gdy chcemy wykonać `console.log(x)` poza blokiem `catch`, zwraca on `undefined`, a `y` zwraca `2`.
1202 | 
1203 | </p>
1204 | </details>
1205 | 
1206 | ---
1207 | 
1208 | ###### 39. Wszystko w JavaScript jest...
1209 | 
1210 | - A: prymitywem lub obiektem
1211 | - B: funkcją lub obiektem
1212 | - C: podchwytliwe pytanie! tylko obiektem
1213 | - D: numerem lub obiektem
1214 | 
1215 | <details><summary><b>Odpowiedź</b></summary>
1216 | <p>
1217 | 
1218 | #### Odpowiedź: A
1219 | 
1220 | JavaScript ma tylko prymitywne typy i obiekty.
1221 | 
1222 | Typy prymitywne to `boolean`, `null`, `undefined`, `bigint`, `number`, `string` i `symbol`.
1223 | 
1224 | To, co odróżnia prymityw od obiektu, to fakt, że prymitywy nie mają żadnych właściwości ani metod; zauważysz jednak, że `'foo'.toUpperCase()` wylicza `'FOO'` i nie powoduje `TypeError`. Dzieje się tak dlatego, że gdy próbujesz uzyskać dostęp do właściwości lub metody na prymitywie takim jak ciąg znaków, JavaScript niejawnie opakuje prymitywny typ za pomocą jednej z klas opakowujących, tj. `String`, a następnie natychmiast odrzuci opakowanie po ocenie wyrażenia. Wszystkie prymitywy z wyjątkiem `null` i `undefined` wykazują to zachowanie.
1225 | 
1226 | </p>
1227 | </details>
1228 | 
1229 | ---
1230 | 
1231 | ###### 40. Jaki jest wynik?
1232 | 
1233 | ```javascript
1234 | [[0, 1], [2, 3]].reduce(
1235 |   (acc, cur) => {
1236 |     return acc.concat(cur);
1237 |   },
1238 |   [1, 2],
1239 | );
1240 | ```
1241 | 
1242 | - A: `[0, 1, 2, 3, 1, 2]`
1243 | - B: `[6, 1, 2]`
1244 | - C: `[1, 2, 0, 1, 2, 3]`
1245 | - D: `[1, 2, 6]`
1246 | 
1247 | <details><summary><b>Odpowiedź</b></summary>
1248 | <p>
1249 | 
1250 | #### Odpowiedź: C
1251 | 
1252 | `[1, 2]` jest naszą wartością początkową. Jest to wartość, z którą zaczynamy i wartość pierwszego `acc`.Podczas pierwszej rundy, `acc` to `[1, 2]`, a `cur` to `[0, 1]`.Łączymy je, co daje `[1, 2, 0, 1]`.
1253 | 
1254 | Następnie `[1, 2, 0, 1]` to `acc`, a `[2, 3]` to `cur`. Łączymy je i otrzymujemy `[1, 2, 0, 1, 2, 3]`.
1255 | 
1256 | </p>
1257 | </details>
1258 | 
1259 | ---
1260 | 
1261 | ###### 41. Jaki jest wynik?
1262 | 
1263 | ```javascript
1264 | !!null;
1265 | !!'';
1266 | !!1;
1267 | ```
1268 | 
1269 | - A: `false` `true` `false`
1270 | - B: `false` `false` `true`
1271 | - C: `false` `true` `true`
1272 | - D: `true` `true` `false`
1273 | 
1274 | <details><summary><b>Odpowiedź</b></summary>
1275 | <p>
1276 | 
1277 | #### Odpowiedź: B
1278 | 
1279 | `null` jest fałszywe. `!null` zwraca `true`. `!true` zwraca `false`.
1280 | 
1281 | `""` jest fałszywe. `!""` zwraca `true`. `!true` zwraca `false`.
1282 | 
1283 | `1` jest prawdziwe. `!1` zwraca `false`. `!false` zwraca `true`.
1284 | 
1285 | </p>
1286 | </details>
1287 | 
1288 | ---
1289 | 
1290 | ###### 42. Co zwraca metoda `setInterval` w przeglądarce?
1291 | 
1292 | ```javascript
1293 | setInterval(() => console.log('Hi'), 1000);
1294 | ```
1295 | 
1296 | - A: unikalny identyfikator
1297 | - B: określona ilość milisekund
1298 | - C: przekazana funkcja
1299 | - D: `undefined`
1300 | 
1301 | <details><summary><b>Odpowiedź</b></summary>
1302 | <p>
1303 | 
1304 | #### Odpowiedź: A
1305 | 
1306 | Zwraca unikalny identyfikator. Ten identyfikator może być użyty do wyczyszczenia tego interwału za pomocą funkcji `clearInterval()`.
1307 | 
1308 | </p>
1309 | </details>
1310 | 
1311 | ---
1312 | 
1313 | ###### 43. Co to zwróci?
1314 | 
1315 | ```javascript
1316 | [...'Lydia'];
1317 | ```
1318 | 
1319 | - A: `["L", "y", "d", "i", "a"]`
1320 | - B: `["Lydia"]`
1321 | - C: `[[], "Lydia"]`
1322 | - D: `[["L", "y", "d", "i", "a"]]`
1323 | 
1324 | <details><summary><b>Odpowiedź</b></summary>
1325 | <p>
1326 | 
1327 | #### Odpowiedź: A
1328 | 
1329 | Łańcuch znaków jest iterowalny. Operator spread odwzorowuje każdy znak iterable na jeden element.
1330 | 
1331 | </p>
1332 | </details>
1333 | 
1334 | ---
1335 | 
1336 | ###### 44. Jaki jest wynik?
1337 | 
1338 | ```javascript
1339 | function* generator(i) {
1340 |   yield i;
1341 |   yield i * 2;
1342 | }
1343 | 
1344 | const gen = generator(10);
1345 | 
1346 | console.log(gen.next().value);
1347 | console.log(gen.next().value);
1348 | ```
1349 | 
1350 | - A: `[0, 10], [10, 20]`
1351 | - B: `20, 20`
1352 | - C: `10, 20`
1353 | - D: `0, 10 and 10, 20`
1354 | 
1355 | <details><summary><b>Odpowiedź</b></summary>
1356 | <p>
1357 | 
1358 | #### Odpowiedź: C
1359 | 
1360 | Zwykłe funkcje nie mogą zostać zatrzymane w połowie wywoływania. Jednak funkcja generatora może zostać "zatrzymana" w połowie, a następnie kontynuować od miejsca, w którym się zatrzymała. Za każdym razem, gdy funkcja generująca napotka słowo kluczowe `yield`, funkcja zwraca wartość określoną po nim.
1361 | 
1362 | Najpierw inicjalizujemy funkcję generatora z `i` równym `10`. Wywołujemy funkcję generatora za pomocą metody `next()`. Przy pierwszym wywołaniu funkcji generatora, `i` jest równe `10`. Funkcja napotyka pierwsze słowo kluczowe `yield`: zwraca wartość `i`. Generator jest teraz "wstrzymany", a wartość `10` zostaje zarejestrowana.
1363 | 
1364 | Następnie ponownie wywołujemy funkcję za pomocą metody `next()`. Kontynuuje ona tam, gdzie zatrzymała się poprzednio, wciąż z `i` równym `10`. Teraz napotyka następne słowo kluczowe `yield` i zwraca `i * 2`. `i` jest równe `10`, więc zwraca `10 * 2`, czyli `20`. Wynikiem jest `10, 20`.
1365 | 
1366 | </p>
1367 | </details>
1368 | 
1369 | ---
1370 | 
1371 | ###### 45. Co to zwróci?
1372 | 
1373 | ```javascript
1374 | const firstPromise = new Promise((res, rej) => {
1375 |   setTimeout(res, 500, 'one');
1376 | });
1377 | 
1378 | const secondPromise = new Promise((res, rej) => {
1379 |   setTimeout(res, 100, 'two');
1380 | });
1381 | 
1382 | Promise.race([firstPromise, secondPromise]).then(res => console.log(res));
1383 | ```
1384 | 
1385 | - A: `"one"`
1386 | - B: `"two"`
1387 | - C: `"two" "one"`
1388 | - D: `"one" "two"`
1389 | 
1390 | <details><summary><b>Odpowiedź</b></summary>
1391 | <p>
1392 | 
1393 | #### Odpowiedź: B
1394 | 
1395 | Kiedy przekazujemy wiele 'promise' do metody `Promise.race`, rozwiązuje ona/odrzuca _pierwszą_ 'promise'. Do metody `setTimeout` przekazujemy timer: 500ms dla `firstPromise` i 100ms dla `secondPromise`. Oznacza to, że `secondPromise` zostanie rozwiązana jako pierwsza z wartością `'two'`. `res` przechowuje teraz wartość `'two'`, która jest wyświetlona w konsoli.
1396 | 
1397 | </p>
1398 | </details>
1399 | 
1400 | ---
1401 | 
1402 | ###### 46. Jaki jest wynik?
1403 | 
1404 | ```javascript
1405 | let person = { name: 'Lydia' };
1406 | const members = [person];
1407 | person = null;
1408 | 
1409 | console.log(members);
1410 | ```
1411 | 
1412 | - A: `null`
1413 | - B: `[null]`
1414 | - C: `[{}]`
1415 | - D: `[{ name: "Lydia" }]`
1416 | 
1417 | <details><summary><b>Odpowiedź</b></summary>
1418 | <p>
1419 | 
1420 | #### Odpowiedź: D
1421 | 
1422 | Najpierw deklarujemy zmienną `person` z wartością obiektu, który ma właściwość `name`.
1423 | 
1424 | <img src="https://i.imgur.com/TML1MbS.png" width="200">
1425 | 
1426 | Następnie deklarujemy zmienną o nazwie `members`. Ustawiamy pierwszy element tej tablicy równy wartości zmiennej `person`. Obiekty oddziałują na siebie poprzez _referencję_, gdy ustawiamy je równe sobie. Kiedy przypisujesz referencję z jednej zmiennej do drugiej, tworzysz _kopię_ tej referencji. (Zauważ, że nie mają one _tej samej_ referencji!).
1427 | 
1428 | <img src="https://i.imgur.com/FSG5K3F.png" width="300">
1429 | 
1430 | Następnie ustawiamy zmienną `person` równą `null`.
1431 | 
1432 | <img src="https://i.imgur.com/sYjcsMT.png" width="300">
1433 | 
1434 | Modyfikujemy tylko wartość zmiennej `person`, a nie pierwszy element w tablicy, ponieważ ten element ma inną (skopiowaną) referencję do obiektu. Pierwszy element w `members` wciąż posiada referencję do oryginalnego obiektu. Kiedy wyświetlamy tablicę `members`, pierwszy element nadal przechowuje wartość obiektu, który jest wyświetlany.
1435 | 
1436 | </p>
1437 | </details>
1438 | 
1439 | ---
1440 | 
1441 | ###### 47. Jaki jest wynik?
1442 | 
1443 | ```javascript
1444 | const person = {
1445 |   name: 'Lydia',
1446 |   age: 21,
1447 | };
1448 | 
1449 | for (const item in person) {
1450 |   console.log(item);
1451 | }
1452 | ```
1453 | 
1454 | - A: `{ name: "Lydia" }, { age: 21 }`
1455 | - B: `"name", "age"`
1456 | - C: `"Lydia", 21`
1457 | - D: `["name", "Lydia"], ["age", 21]`
1458 | 
1459 | <details><summary><b>Odpowiedź</b></summary>
1460 | <p>
1461 | 
1462 | #### Odpowiedź: B
1463 | 
1464 | Za pomocą pętli `for-in` możemy iterować po kluczach obiektów, w tym przypadku `name` i `age`. Klucze obiektów są łańcuchami (jeśli nie są symbolami). W każdej pętli ustawiamy wartość `item` równą bieżącemu kluczowi, który iterujemy. Najpierw `item` jest równy `name`. Następnie, `item` jest równy `age`.
1465 | 
1466 | </p>
1467 | </details>
1468 | 
1469 | ---
1470 | 
1471 | ###### 48. Jaki jest wynik?
1472 | 
1473 | ```javascript
1474 | console.log(3 + 4 + '5');
1475 | ```
1476 | 
1477 | - A: `"345"`
1478 | - B: `"75"`
1479 | - C: `12`
1480 | - D: `"12"`
1481 | 
1482 | <details><summary><b>Odpowiedź</b></summary>
1483 | <p>
1484 | 
1485 | #### Odpowiedź: B
1486 | 
1487 | Asocjatywność operatorów to kolejność, w jakiej kompilator ocenia wyrażenia, od lewej do prawej lub od prawej do lewej. Dzieje się tak tylko wtedy, gdy wszystkie operatory mają _takie samo_ pierwszeństwo. Mamy tylko jeden typ operatora: `+`. Dla dodawania, asocjatywność jest od lewej do prawej.
1488 | 
1489 | `3 + 4` jest obliczane jako pierwsze. Wynikiem jest liczba `7`.
1490 | 
1491 | `7 + '5'` skutkuje `"75"` z powodu przymusu. JavaScript konwertuje liczbę `7` na ciąg znaków, patrz pytanie 15. Możemy połączyć dwa ciągi znaków za pomocą operatora `+`. "7" + "5"` daje w wyniku "75"`.
1492 | 
1493 | </p>
1494 | </details>
1495 | 
1496 | ---
1497 | 
1498 | ###### 49. Jaka jest wartość `num`?
1499 | 
1500 | ```javascript
1501 | const num = parseInt('7*6', 10);
1502 | ```
1503 | 
1504 | - A: `42`
1505 | - B: `"42"`
1506 | - C: `7`
1507 | - D: `NaN`
1508 | 
1509 | <details><summary><b>Odpowiedź</b></summary>
1510 | <p>
1511 | 
1512 | #### Odpowiedź: C
1513 | 
1514 | Zwracana jest tylko pierwsza liczba w łańcuchu. W oparciu o _radix_ (drugi argument w celu określenia typu liczby, którą chcemy przetworzyć: podstawa 10, szesnastkowy, ósemkowy, binarny itp.), `parseInt` sprawdza, czy znaki w łańcuchu są prawidłowe. Gdy napotka znak, który nie jest prawidłową liczbą w radix, zatrzymuje parsowanie i ignoruje następujące znaki.
1515 | 
1516 | `*` nie jest prawidłową liczbą. Przetwarza tylko `"7"` na dziesiętne `7`. `num` posiada teraz wartość `7`.
1517 | 
1518 | </p>
1519 | </details>
1520 | 
1521 | ---
1522 | 
1523 | ###### 50. Jaki jest wynik?
1524 | 
1525 | ```javascript
1526 | [1, 2, 3].map(num => {
1527 |   if (typeof num === 'number') return;
1528 |   return num * 2;
1529 | });
1530 | ```
1531 | 
1532 | - A: `[]`
1533 | - B: `[null, null, null]`
1534 | - C: `[undefined, undefined, undefined]`
1535 | - D: `[ 3 x empty ]`
1536 | 
1537 | <details><summary><b>Odpowiedź</b></summary>
1538 | <p>
1539 | 
1540 | #### Odpowiedź: C
1541 | 
1542 | Podczas mapowania tablicy, wartość `num` jest równa elementowi, nad którym aktualnie wykonywana jest pętla. W tym przypadku elementami są liczby, więc warunek instrukcji if `typeof num == "number"` zwraca `true`. Funkcja map tworzy nową tablicę i wstawia do niej wartości zwrócone przez funkcję.
1543 | 
1544 | Nie zwracamy jednak żadnej wartości. Gdy nie zwracamy wartości z funkcji, funkcja zwraca `undefined`. Dla każdego elementu w tablicy wywoływany jest blok funkcji, więc dla każdego elementu zwracamy `undefined`.
1545 | 
1546 | </p>
1547 | </details>


--------------------------------------------------------------------------------
/uk-UA/README.md:
--------------------------------------------------------------------------------
   1 | # Список (просунутих) питань з JavaScript
   2 | 
   3 | Я публікую щодня завдання з JavaScript в моєму [Instagram](https://www.instagram.com/theavocoder), які також додаю тут!
   4 | 
   5 | Від базового до просунутого: перевірте, наскільки добре ви знаєте JavaScript, трохи оновіть свої знання або підготуйтеся до інтерв'ю! :muscle: :rocket: Щотижня я доповнюю цей репозиторій новими питаннями.
   6 | 
   7 | Відповіді знаходяться в згорнутій секції нижче питань. Просто натисни на відповідь, щоб розгорнути. Успіхів! :heart:
   8 | 
   9 | - [🇸🇦 العربية](../ar-AR/README_AR.md)
  10 | - [🇪🇬 اللغة العامية](../ar-EG/README_ar-EG.md)
  11 | - [🇧🇦 Bosanski](../bs-BS/README-bs_BS.md)
  12 | - [🇩🇪 Deutsch](../de-DE/README.md)
  13 | - [🇬🇧 English](../README.md)
  14 | - [🇪🇸 Español](../es-ES/README-ES.md)
  15 | - [🇫🇷 Français](../fr-FR/README_fr-FR.md)
  16 | - [🇮🇩 Indonesia](../id-ID/README.md)
  17 | - [🇮🇹 Italiano](../it-IT/README.md)
  18 | - [🇯🇵 日本語](../ja-JA/README-ja_JA.md)
  19 | - [🇰🇷 한국어](../ko-KR/README-ko_KR.md)
  20 | - [🇳🇱 Nederlands](../nl-NL/README.md)
  21 | - [🇵🇱 Polski](../pl-PL/README.md)
  22 | - [🇧🇷 Português Brasil](../pt-BR/README_pt_BR.md)
  23 | - [🇷🇺 Русский](../ru-RU/README.md)
  24 | - [🇹🇭 ไทย](../th-TH/README-th_TH.md)
  25 | - [🇹🇷 Türkçe](../tr-TR/README-tr_TR.md)
  26 | - [🇻🇳 Tiếng Việt](../vi-VI/README-vi.md)
  27 | - [🇨🇳 简体中文](../zh-CN/README-zh_CN.md)
  28 | - [🇹🇼 繁體中文](../zh-TW/README_zh-TW.md)
  29 | 
  30 | ---
  31 | 
  32 | ###### 1. Що буде в консолі?
  33 | 
  34 | ```javascript
  35 | function sayHi() {
  36 |   console.log(name);
  37 |   console.log(age);
  38 |   var name = "Lydia";
  39 |   let age = 21;
  40 | }
  41 | 
  42 | sayHi();
  43 | ```
  44 | 
  45 | - A: `Lydia` та `undefined`
  46 | - B: `Lydia` та `ReferenceError`
  47 | - C: `ReferenceError` та `21`
  48 | - D: `undefined` та `ReferenceError`
  49 | 
  50 | <details><summary><b>Відповідь</b></summary>
  51 | <p>
  52 | 
  53 | #### Відповідь: D
  54 | 
  55 | Всередині функції ми спершу визначаємо змінну `name` за допомогою ключового слова `var`. Це означає, що змінна буде знайдена (область пам'яті під змінну буде виділена під час створення) зі значенням `undefined` за замовчуванням, до тих пір поки виконання коду не дійде до рядка, де визначається змінна. Ми ще не визначили значення `name`, коли намагаємося вивести її в консоль, тому в консолі буде `undefined`.
  56 | 
  57 | Змінні, визначені за допомогою `let` (і `const`), також знаходяться, але на відміну від `var`, не <i>створюються</i>. Доступ до них неможливий до тих пір, поки не виконається рядок їх визначення (ініціалізації). Це називається "тимчасова мертва зона". Коли ми намагаємося звернутися до змінних до того моменту як вони визначені, JavaScript видає `ReferenceError`.
  58 | 
  59 | </p>
  60 | </details>
  61 | 
  62 | ---
  63 | 
  64 | ###### 2. Що буде в консолі?
  65 | 
  66 | ```javascript
  67 | for (var i = 0; i < 3; i++) {
  68 |   setTimeout(() => console.log(i), 1);
  69 | }
  70 | 
  71 | for (let i = 0; i < 3; i++) {
  72 |   setTimeout(() => console.log(i), 1);
  73 | }
  74 | ```
  75 | 
  76 | - A: `0 1 2` та `0 1 2`
  77 | - B: `0 1 2` та `3 3 3`
  78 | - C: `3 3 3` та `0 1 2`
  79 | 
  80 | <details><summary><b>Відповідь</b></summary>
  81 | <p>
  82 | 
  83 | #### Відповідь: C
  84 | 
  85 | Через черги подій в JavaScript, функція `setTimeout` викликається _після того_ як цикл буде завершено. Так як змінна `i` в першому циклі була визначена за допомогою `var`, вона буде глобальною. У циклі ми кожен раз збільшуємо значення `i` на `1`, використовуючи унарний оператор `++.` До моменту виконання функції `setTimeout` значення `i` дорівнюватиме `3`, як показано в першому прикладі.
  86 | 
  87 | У другому циклі змінна `i` визначена за допомогою `let`. Такі змінні (а також `const`) мають блокову область видимості (блок це що завгодно між `{}`). З кожною ітерацією `i` матиме нове значення, і кожне значення буде замкнуто у своїй області видимості всередині циклу.
  88 | 
  89 | </p>
  90 | </details>
  91 | 
  92 | ---
  93 | 
  94 | ###### 3. Що буде в консолі?
  95 | 
  96 | ```javascript
  97 | const shape = {
  98 |   radius: 10,
  99 |   diameter() {
 100 |     return this.radius * 2;
 101 |   },
 102 |   perimeter: () => 2 * Math.PI * this.radius
 103 | };
 104 | 
 105 | shape.diameter();
 106 | shape.perimeter();
 107 | ```
 108 | 
 109 | - A: `20` та `62.83185307179586`
 110 | - B: `20` та `NaN`
 111 | - C: `20` та `63`
 112 | - D: `NaN` та `63`
 113 | 
 114 | <details><summary><b>Відповідь</b></summary>
 115 | <p>
 116 | 
 117 | #### Відповідь: B
 118 | 
 119 | Зауваж, що `diameter` це звичайна функція, в той час як `perimeter` це стрілкова функція.
 120 | 
 121 | У стрілкових функцій значення `this` вказує на навколишню область видимості, на відміну від звичайних функцій! Це означає, що при виклику `perimeter` значення `this` у цій функції вказує не на об'єкт `shape`, а на зовнішню область видимості (наприклад, window).
 122 | 
 123 | У цього об'єкта немає ключа `radius`, тому повертається `undefined`.
 124 | 
 125 | </p>
 126 | </details>
 127 | 
 128 | ---
 129 | 
 130 | ###### 4. Що буде в консолі?
 131 | 
 132 | ```javascript
 133 | +true;
 134 | !"Lydia";
 135 | ```
 136 | 
 137 | - A: `1` та `false`
 138 | - B: `false` та `NaN`
 139 | - C: `false` та `false`
 140 | 
 141 | <details><summary><b>Відповідь</b></summary>
 142 | <p>
 143 | 
 144 | #### Відповідь: A
 145 | 
 146 | Унарний плюс призводить операнд до числа. `true` це `1`, а `false` це `0`.
 147 | 
 148 | Строка `'Lydia'` це "справжнє" значення. Ми запитуємо "справжнє значення є помилковим"? Відповідь: `false`.
 149 | 
 150 | </p>
 151 | </details>
 152 | 
 153 | ---
 154 | 
 155 | ###### 5. Що з цього не є коректним?
 156 | 
 157 | ```javascript
 158 | const bird = {
 159 |   size: "small"
 160 | };
 161 | 
 162 | const mouse = {
 163 |   name: "Mickey",
 164 |   small: true
 165 | };
 166 | ```
 167 | 
 168 | - A: `mouse.bird.size` не є коректно
 169 | - B: `mouse[bird.size]` не є коректно
 170 | - C: `mouse[bird["size"]]` не є коректно
 171 | - D: Все варіант коректні
 172 | 
 173 | <details><summary><b>Відповідь</b></summary>
 174 | <p>
 175 | 
 176 | #### Відповідь: A
 177 | 
 178 | В JavaScript все ключі об'єкта є рядками (крім `Symbol`). І хоча ми не _набираємо_ їх як рядки, вони завжди перетворюються до рядків під капотом.
 179 | 
 180 | JavaScript інтерпретує (або розпаковує) оператори. При використанні квадратних дужок JS зауважує `[` і продовжує поки не зустріне `]`. Тільки після цього він вирахує то, що знаходиться всередині дужок.
 181 | 
 182 | `mouse[bird.size]`: Спершу визначається `bird.size`, що дорівнює `"small"`. `mouse["small"]` повертає `true`.
 183 | 
 184 | Але із записом через крапку так не відбувається. У `mouse` немає ключа `bird`. Таким чином, `mouse.bird` дорівнює `undefined`. Потім ми запитуємо ключ `size`, використовуючи крапкову нотацію: `mouse.bird.size`. Так як `mouse.bird` це `undefined`, ми запитуємо `undefined.size`. Це не є дійсним, тому ми отримуємо помилку типу: `Can not read property "size" of undefined`.
 185 | 
 186 | </p>
 187 | </details>
 188 | 
 189 | ---
 190 | 
 191 | ###### 6. Що буде в консолі?
 192 | 
 193 | ```javascript
 194 | let c = { greeting: "Hey!" };
 195 | let d;
 196 | 
 197 | d = c;
 198 | c.greeting = "Hello";
 199 | console.log(d.greeting);
 200 | ```
 201 | 
 202 | - A: `Hello`
 203 | - B: `Hey`
 204 | - C: `undefined`
 205 | - D: `ReferenceError`
 206 | - E: `TypeError`
 207 | 
 208 | <details><summary><b>Відповідь</b></summary>
 209 | <p>
 210 | 
 211 | #### Відповідь: A
 212 | 
 213 | В JavaScript всі об'єкти є _посилальними_ типами даних.
 214 | 
 215 | Спершу змінна `c` вказує на об'єкт. Потім ми вказуємо змінної `d` посилатися на той самий об'єкт, що і `c`.
 216 | 
 217 | <img src="https://i.imgur.com/ko5k0fs.png" width="200">
 218 | 
 219 | Коли ти змінюєш один об'єкт, то змінюються значення всіх посилань, що вказують на цей об'єкт.
 220 | 
 221 | </p>
 222 | </details>
 223 | 
 224 | ---
 225 | 
 226 | ###### 7. Що буде в консолі?
 227 | 
 228 | ```javascript
 229 | let a = 3;
 230 | let b = new Number(3);
 231 | let c = 3;
 232 | 
 233 | console.log(a == b);
 234 | console.log(a === b);
 235 | console.log(b === c);
 236 | ```
 237 | 
 238 | - A: `true` `false` `true`
 239 | - B: `false` `false` `true`
 240 | - C: `true` `false` `false`
 241 | - D: `false` `true` `true`
 242 | 
 243 | <details><summary><b>Відповідь</b></summary>
 244 | <p>
 245 | 
 246 | #### Відповідь: C
 247 | 
 248 | `new Number()` це вбудований конструктор функції. І хоча він виглядає як число, це не справжнє число: у нього є ряд додаткових фіч і це об'єкт.
 249 | 
 250 | Оператор `==` призводить типи даних до якогось одного і перевіряє рівність _значень_. Обидва значення рівні `3`, тому повертається `true`.
 251 | 
 252 | При використанні оператора `===` значення і тип повинні бути однаковими. Але в нашому випадку це не так: `new Number()` це не число, це **об'єкт**. Тому обидва повертають `false`.
 253 | 
 254 | </p>
 255 | </details>
 256 | 
 257 | ---
 258 | 
 259 | ###### 8. Яким буде результат?
 260 | 
 261 | ```javascript
 262 | class Chameleon {
 263 |   static colorChange(newColor) {
 264 |     this.newColor = newColor;
 265 |     return this.newColor;
 266 |   }
 267 | 
 268 |   constructor({ newColor = "green" } = {}) {
 269 |     this.newColor = newColor;
 270 |   }
 271 | }
 272 | 
 273 | const freddie = new Chameleon({ newColor: "purple" });
 274 | freddie.colorChange("orange");
 275 | ```
 276 | 
 277 | - A: `orange`
 278 | - B: `purple`
 279 | - C: `green`
 280 | - D: `TypeError`
 281 | 
 282 | <details><summary><b>Відповідь</b></summary>
 283 | <p>
 284 | 
 285 | #### Відповідь: D
 286 | 
 287 | Функція `colorChange` є статичною. Статичні методи не мають доступу до екземплярів класу. Так як `freddie` це екземпляр, то статичний метод там не доступний. Тому результатом є помилка `TypeError`.
 288 | 
 289 | </p>
 290 | </details>
 291 | 
 292 | ---
 293 | 
 294 | ###### 9. Що буде в консолі?
 295 | 
 296 | ```javascript
 297 | let greeting;
 298 | greetign = {}; // Typo!
 299 | console.log(greetign);
 300 | ```
 301 | 
 302 | - A: `{}`
 303 | - B: `ReferenceError: greetign is not defined`
 304 | - C: `undefined`
 305 | 
 306 | <details><summary><b>Відповідь</b></summary>
 307 | <p>
 308 | 
 309 | #### Відповідь: A
 310 | 
 311 | В консолі виведеться об'єкт, тому що ми щойно створили порожній об'єкт в глобальному об'єкті! Коли ми замість `greeting` написали `greetign`, інтерпретатор JS насправді виконав `global.greetign = {}` (або `window.greetign = {}` в браузері).
 312 | 
 313 | Потрібно використовувати `"use strict"`, щоб уникнути такої поведінки. Цей запис допоможе бути впевненим в тому, що змінна була визначена перед тим як їй присвоїли значення.
 314 | 
 315 | </p>
 316 | </details>
 317 | 
 318 | ---
 319 | 
 320 | ###### 10. Що станеться?
 321 | 
 322 | ```javascript
 323 | function bark() {
 324 |   console.log("Woof!");
 325 | }
 326 | 
 327 | bark.animal = "dog";
 328 | ```
 329 | 
 330 | - A: Нічого, все ок.
 331 | - B: `SyntaxError`. Не можна додавати властивості функцій таким способом.
 332 | - C: `undefined`
 333 | - D: `ReferenceError`
 334 | 
 335 | <details><summary><b>Відповідь</b></summary>
 336 | <p>
 337 | 
 338 | #### Відповідь: A
 339 | 
 340 | В JavaScript це можливо, тому що функції це об'єкти! (Все є об'єктами крім примітивів).
 341 | 
 342 | Функція - це спеціальний тип об'єкта, який можна викликати. Крім того, функція - це об'єкт з властивостями. Властивість такого об'єкта не можна викликати, так як воно не є функцією.
 343 | 
 344 | </p>
 345 | </details>
 346 | 
 347 | ---
 348 | 
 349 | ###### 11. Що буде в консолі?
 350 | 
 351 | ```javascript
 352 | function Person(firstName, lastName) {
 353 |   this.firstName = firstName;
 354 |   this.lastName = lastName;
 355 | }
 356 | 
 357 | const member = new Person("Lydia", "Hallie");
 358 | Person.getFullName = function() {
 359 |   return `${this.firstName} ${this.lastName}`;
 360 | };
 361 | 
 362 | console.log(member.getFullName());
 363 | ```
 364 | 
 365 | - A: `TypeError`
 366 | - B: `SyntaxError`
 367 | - C: `Lydia Hallie`
 368 | - D: `undefined` `undefined`
 369 | 
 370 | <details><summary><b>Відповідь</b></summary>
 371 | <p>
 372 | 
 373 | #### Відповідь: A
 374 | 
 375 | Не можна додавати властивості конструктору, як звичайному об'єкту. Якщо потрібно додати фічу до всіх об'єктів, то необхідно використовувати прототипи. В даному випадку,
 376 | 
 377 | ```js
 378 | Person.prototype.getFullName = function() {
 379 |   return `${this.firstName} ${this.lastName}`;
 380 | };
 381 | ```
 382 | 
 383 | зробить метод `member.getFullName()` чинним. У чому тут перевага? Припустимо, що ми додали цей метод до конструктора. Можливо, не кожному екземпляру `Person` потрібен цей метод. Це призведе до великих втрат пам'яті, тому що всі екземпляри будуть мати цю властивість. Навпаки, якщо ми додамо цей метод тільки до прототипу, у нас буде тільки одне місце в пам'яті, до якого зможуть звертатися всі екземпляри!
 384 | 
 385 | </p>
 386 | </details>
 387 | 
 388 | ---
 389 | 
 390 | ###### 12. Що буде в консолі?
 391 | 
 392 | ```javascript
 393 | function Person(firstName, lastName) {
 394 |   this.firstName = firstName;
 395 |   this.lastName = lastName;
 396 | }
 397 | 
 398 | const lydia = new Person("Lydia", "Hallie");
 399 | const sarah = Person("Sarah", "Smith");
 400 | 
 401 | console.log(lydia);
 402 | console.log(sarah);
 403 | ```
 404 | 
 405 | - A: `Person {firstName: "Lydia", lastName: "Hallie"}` та `undefined`
 406 | - B: `Person {firstName: "Lydia", lastName: "Hallie"}` та `Person {firstName: "Sarah", lastName: "Smith"}`
 407 | - C: `Person {firstName: "Lydia", lastName: "Hallie"}` та `{}`
 408 | - D:`Person {firstName: "Lydia", lastName: "Hallie"}` та `ReferenceError`
 409 | 
 410 | <details><summary><b>Відповідь</b></summary>
 411 | <p>
 412 | 
 413 | #### Відповідь: A
 414 | 
 415 | Для `sarah` ми не використали ключове слово `new`. Використання `new` призводить до створення нового об'єкта. Але без `new` він вказує на **глобальний об'єкт**!
 416 | 
 417 | Ми вказали, що `this.firstName` дорівнює `"Sarah"` і `this.lastName` дорівнює `"Smith"`. Насправді ми визначили `global.firstName = 'Sarah'` і `global.lastName = 'Smith'`. `sarah` залишилася `undefined`.
 418 | 
 419 | </p>
 420 | </details>
 421 | 
 422 | ---
 423 | 
 424 | ###### 13. Назвіть три фази поширення подій
 425 | 
 426 | - A: Мета (Target) > Захоплення (Capturing) > Спливання (Bubbling)
 427 | - B: Спливання (Bubbling) > Мета (Target) > Захоплення (Capturing)
 428 | - C: Мета (Target) > Спливання (Bubbling) > Захоплення (Capturing)
 429 | - D: Захоплення (Capturing) > Мета (Target) > Спливання (Bubbling)
 430 | 
 431 | <details><summary><b>Відповідь</b></summary>
 432 | <p>
 433 | 
 434 | #### Відповідь: D
 435 | 
 436 | Під час фази **захоплення** подія поширюється від батьківського елемента до елемента мети. Після досягнення **мети** починається фаза **спливання**.
 437 | 
 438 | <img src="https://i.imgur.com/N18oRgd.png" width="200">
 439 | 
 440 | </p>
 441 | </details>
 442 | 
 443 | ---
 444 | 
 445 | ###### 14. Всі об'єкти мають прототипи?
 446 | 
 447 | - A: Так
 448 | - B: Ні
 449 | 
 450 | <details><summary><b>Відповідь</b></summary>
 451 | <p>
 452 | 
 453 | #### Відповідь: B
 454 | 
 455 | Всі об'єкти мають прототипи, крім **базового об'єкта**. Базовий об'єкт має доступ до деяких методів і властивостей, таких як `.toString`. Саме тому ми можемо використовувати вбудовані методи JavaScript! Всі ці методи доступні в прототипі. Якщо JavaScript не може знайти метод безпосередньо у об'єкту, він продовжує пошук по ланцюжку прототипів поки не знайде.
 456 | 
 457 | </p>
 458 | </details>
 459 | 
 460 | ---
 461 | 
 462 | ###### 15. Результат коду?
 463 | 
 464 | ```javascript
 465 | function sum(a, b) {
 466 |   return a + b;
 467 | }
 468 | 
 469 | sum(1, "2");
 470 | ```
 471 | 
 472 | - A: `NaN`
 473 | - B: `TypeError`
 474 | - C: `"12"`
 475 | - D: `3`
 476 | 
 477 | <details><summary><b>Відповідь</b></summary>
 478 | <p>
 479 | 
 480 | #### Відповідь: C
 481 | 
 482 | JavaScript це **динамічно типізована мова**: ми не визначаємо тип змінних. Змінні можуть автоматично бути перетворені з одного типу в інший без нашої участі, що називається _неявним приведенням типів_. **Приведення** це перетворення з одного типу в інший.
 483 | 
 484 | У цьому прикладі, JavaScript конвертувати число `1` в рядок, щоб операція всередині функції мала сенс і повернула значення. Під час складання числа (`1`) і рядки (`'2'`) число перетворюється до рядка. Ми можемо додавати рядки ось так: `"Hello" + "World"`. Таким чином, "`1"` + `"2"` повертає "`12"`.
 485 | 
 486 | </p>
 487 | </details>
 488 | 
 489 | ---
 490 | 
 491 | ###### 16. Що буде в консолі?
 492 | 
 493 | ```javascript
 494 | let number = 0;
 495 | console.log(number++);
 496 | console.log(++number);
 497 | console.log(number);
 498 | ```
 499 | 
 500 | - A: `1` `1` `2`
 501 | - B: `1` `2` `2`
 502 | - C: `0` `2` `2`
 503 | - D: `0` `1` `2`
 504 | 
 505 | <details><summary><b>Відповідь</b></summary>
 506 | <p>
 507 | 
 508 | #### Відповідь: C
 509 | 
 510 | **Постфіксний** унарний оператор `++`:
 511 | 
 512 | 1. Повертає значення (`0`)
 513 | 2. Інкрементує значення (тепер число дорівнює `1`)
 514 | 
 515 | **Префіксний** унарний оператор `++`:
 516 | 
 517 | 1. Інкрементує значення (тепер число дорівнює `2`)
 518 | 2. Повертає значення (`2`)
 519 | 
 520 | Результат: `0 2 2`.
 521 | 
 522 | </p>
 523 | </details>
 524 | 
 525 | ---
 526 | 
 527 | ###### 17. Що буде в консолі?
 528 | 
 529 | ```javascript
 530 | function getPersonInfo(one, two, three) {
 531 |   console.log(one);
 532 |   console.log(two);
 533 |   console.log(three);
 534 | }
 535 | 
 536 | const person = "Lydia";
 537 | const age = 21;
 538 | 
 539 | getPersonInfo`${person} is ${age} years old`;
 540 | ```
 541 | 
 542 | - A: `"Lydia"` `21` `["", " is ", " years old"]`
 543 | - B: `["", " is ", " years old"]` `"Lydia"` `21`
 544 | - C: `"Lydia"` `["", " is ", " years old"]` `21`
 545 | 
 546 | <details><summary><b>Відповідь</b></summary>
 547 | <p>
 548 | 
 549 | #### Відповідь: B
 550 | 
 551 | При використанні тегованих шаблонних літералів першим аргументом завжди буде масив строкових значень. Решта аргументів будуть значення мати переданих виразів!
 552 | 
 553 | </p>
 554 | </details>
 555 | 
 556 | ---
 557 | 
 558 | ###### 18. Що буде в консолі?
 559 | 
 560 | ```javascript
 561 | function checkAge(data) {
 562 |   if (data === { age: 18 }) {
 563 |     console.log("You are an adult!");
 564 |   } else if (data == { age: 18 }) {
 565 |     console.log("You are still an adult.");
 566 |   } else {
 567 |     console.log(`Hmm.. You don't have an age I guess`);
 568 |   }
 569 | }
 570 | 
 571 | checkAge({ age: 18 });
 572 | ```
 573 | 
 574 | - A: `You are an adult!`
 575 | - B: `You are still an adult.`
 576 | - C: `Hmm.. You don't have an age I guess`
 577 | 
 578 | <details><summary><b>Відповідь</b></summary>
 579 | <p>
 580 | 
 581 | #### Відповідь: C
 582 | 
 583 | В операціях порівняння примітиви порівнюються за їх _значенням_, а об'єкти за _посиланнями_. JavaScript перевіряє, щоб об'єкти вказували на одну і ту ж область пам'яті.
 584 | 
 585 | Порівнювані об'єкти в нашому прикладі не такі: об'єкт, переданий як параметр, вказує на іншу область пам'яті, ніж об'єкти, що використовуються в порівнянні.
 586 | 
 587 | Тому `{age: 18} === {age: 18}` і `{age: 18} == {age: 18}` повертають `false`.
 588 | 
 589 | </p>
 590 | </details>
 591 | 
 592 | ---
 593 | 
 594 | ###### 19. Що буде в консолі?
 595 | 
 596 | ```javascript
 597 | function getAge(...args) {
 598 |   console.log(typeof args);
 599 | }
 600 | 
 601 | getAge(21);
 602 | ```
 603 | 
 604 | - A: `"number"`
 605 | - B: `"array"`
 606 | - C: `"object"`
 607 | - D: `"NaN"`
 608 | 
 609 | <details><summary><b>Відповідь</b></summary>
 610 | <p>
 611 | 
 612 | #### Відповідь: C
 613 | 
 614 | Оператор поширення (`... args`) повертає масив з аргументами. Масив це об'єкт, тому `typeof args` повертає `"object"`.
 615 | 
 616 | </p>
 617 | </details>
 618 | 
 619 | ---
 620 | 
 621 | ###### 20. Що буде в консолі?
 622 | 
 623 | ```javascript
 624 | function getAge() {
 625 |   "use strict";
 626 |   age = 21;
 627 |   console.log(age);
 628 | }
 629 | 
 630 | getAge();
 631 | ```
 632 | 
 633 | - A: `21`
 634 | - B: `undefined`
 635 | - C: `ReferenceError`
 636 | - D: `TypeError`
 637 | 
 638 | <details><summary><b>Відповідь</b></summary>
 639 | <p>
 640 | 
 641 | #### Відповідь: C
 642 | 
 643 | Використовуючи `"use strict"`, можна бути впевненим, що ми помилково не оголосимо глобальні змінні. Ми раніше ніде не оголошували змінну `age`, тому з використанням `"use strict"` виникне ReferenceError. Без використання `"use strict"` помилки не виникне, а змінна `age` додасться в глобальний об'єкт.
 644 | 
 645 | </p>
 646 | </details>
 647 | 
 648 | ---
 649 | 
 650 | ###### 21. Чому дорівнюватиме sum?
 651 | 
 652 | ```javascript
 653 | const sum = eval("10*10+5");
 654 | ```
 655 | 
 656 | - A: `105`
 657 | - B: `"105"`
 658 | - C: `TypeError`
 659 | - D: `"10*10+5"`
 660 | 
 661 | <details><summary><b>Відповідь</b></summary>
 662 | <p>
 663 | 
 664 | #### Відповідь: A
 665 | 
 666 | `eval` виконує код, переданий у вигляді рядка. Якщо це рядок (як в такому випадку), то обчислюється вираз. Вираз `10 * 10 + 5` поверне число `105`.
 667 | 
 668 | </p>
 669 | </details>
 670 | 
 671 | ---
 672 | 
 673 | ###### 22. Як довго буде доступний cool_secret?
 674 | 
 675 | ```javascript
 676 | sessionStorage.setItem("cool_secret", 123);
 677 | ```
 678 | 
 679 | - A: Завжди, дані не загубляться.
 680 | - B: Поки користувач не закриває вкладку.
 681 | - C: Поки користувач не закриє браузер, а не тільки вкладку.
 682 | - D: Поки користувач не вимикає комп'ютер.
 683 | 
 684 | <details><summary><b>Відповідь</b></summary>
 685 | <p>
 686 | 
 687 | #### Відповідь: B
 688 | 
 689 | Дані, збережені в `sessionStorage` очищаються після закриття _вкладки_.
 690 | 
 691 | При використанні `localStorage` дані зберігаються назавжди. Очистити їх можна, наприклад, використовуючи `localStorage.clear()`.
 692 | 
 693 | </p>
 694 | </details>
 695 | 
 696 | ---
 697 | 
 698 | ###### 23. Що буде в консолі?
 699 | 
 700 | ```javascript
 701 | var num = 8;
 702 | var num = 10;
 703 | 
 704 | console.log(num);
 705 | ```
 706 | 
 707 | - A: `8`
 708 | - B: `10`
 709 | - C: `SyntaxError`
 710 | - D: `ReferenceError`
 711 | 
 712 | <details><summary><b>Відповідь</b></summary>
 713 | <p>
 714 | 
 715 | #### Відповідь: B
 716 | 
 717 | За допомогою ключового слова `var`, можна визначати скільки завгодно змінних з одним і тим же ім'ям. Змінна зберігатиме останнє присвоєне значення.
 718 | 
 719 | Ви не можете зробити це з `let` або` const`, оскільки вони блочні.
 720 | 
 721 | </p>
 722 | </details>
 723 | 
 724 | ---
 725 | 
 726 | ###### 24. Що буде в консолі?
 727 | 
 728 | ```javascript
 729 | const obj = { 1: "a", 2: "b", 3: "c" };
 730 | const set = new Set([1, 2, 3, 4, 5]);
 731 | 
 732 | obj.hasOwnProperty("1");
 733 | obj.hasOwnProperty(1);
 734 | set.has("1");
 735 | set.has(1);
 736 | ```
 737 | 
 738 | - A: `false` `true` `false` `true`
 739 | - B: `false` `true` `true` `true`
 740 | - C: `true` `true` `false` `true`
 741 | - D: `true` `true` `true` `true`
 742 | 
 743 | <details><summary><b>Відповідь</b></summary>
 744 | <p>
 745 | 
 746 | #### Відповідь: C
 747 | 
 748 | Всі ключі об'єктів (крім `Symbols`) є рядками, навіть якщо задано не в вигляді рядків. Тому `obj.hasOwnProperty('1')` так само повертає `true`.
 749 | 
 750 | Але це не працює для `set`. Значення `"1"` немає в `set`: `set.has ('1')`, тому повертається `false`. Але `set.has(1)` поверне `true`.
 751 | 
 752 | </p>
 753 | </details>
 754 | 
 755 | ---
 756 | 
 757 | ###### 25. Що буде в консолі?
 758 | 
 759 | ```javascript
 760 | const obj = { a: "one", b: "two", a: "three" };
 761 | console.log(obj);
 762 | ```
 763 | 
 764 | - A: `{ a: "one", b: "two" }`
 765 | - B: `{ b: "two", a: "three" }`
 766 | - C: `{ a: "three", b: "two" }`
 767 | - D: `SyntaxError`
 768 | 
 769 | <details><summary><b>Відповідь</b></summary>
 770 | <p>
 771 | 
 772 | #### Відповідь: C
 773 | 
 774 | Якщо є два ключі з однаковим ім'ям, то ключ буде перезаписаний. Його позиція збережеться, але значенням буде встановлено останнім.
 775 | 
 776 | </p>
 777 | </details>
 778 | 
 779 | ---
 780 | 
 781 | ###### 26. Глобальний контекст виконання створює дві речі: глобальний об'єкт і this
 782 | 
 783 | - A: Так
 784 | - B: Ні
 785 | - C: В залежності від ситуації
 786 | 
 787 | <details><summary><b>Відповідь</b></summary>
 788 | <p>
 789 | 
 790 | #### Відповідь: A
 791 | 
 792 | Базовий контекст виконання це глобальний контекст виконання: це те, що є де завгодно у твоєму коді.
 793 | 
 794 | </p>
 795 | </details>
 796 | 
 797 | ---
 798 | 
 799 | ###### 27. Що буде в консолі?
 800 | 
 801 | ```javascript
 802 | for (let i = 1; i < 5; i++) {
 803 |   if (i === 3) continue;
 804 |   console.log(i);
 805 | }
 806 | ```
 807 | 
 808 | - A: `1` `2`
 809 | - B: `1` `2` `3`
 810 | - C: `1` `2` `4`
 811 | - D: `1` `3` `4`
 812 | 
 813 | <details><summary><b>Відповідь</b></summary>
 814 | <p>
 815 | 
 816 | #### Відповідь: C
 817 | 
 818 | Оператор `continue` пропускає ітерацію, якщо умова повертає `true`.
 819 | 
 820 | </p>
 821 | </details>
 822 | 
 823 | ---
 824 | 
 825 | ###### 28. Яким буде результат?
 826 | 
 827 | ```javascript
 828 | String.prototype.giveLydiaPizza = () => {
 829 |   return "Just give Lydia pizza already!";
 830 | };
 831 | 
 832 | const name = "Lydia";
 833 | 
 834 | console.log(name.giveLydiaPizza())
 835 | ```
 836 | 
 837 | - A: `"Just give Lydia pizza already!"`
 838 | - B: `TypeError: not a function`
 839 | - C: `SyntaxError`
 840 | - D: `undefined`
 841 | 
 842 | <details><summary><b>Відповідь</b></summary>
 843 | <p>
 844 | 
 845 | #### Відповідь: A
 846 | 
 847 | `String` це вбудований конструктор, до якого можна додавати властивості. Я додала метод до його прототипу. Рядки-примітиви автоматично конвертуються до рядків-об'єктів. Тому всі рядки (строкові об'єкти) мають доступ до цього методу!
 848 | 
 849 | </p>
 850 | </details>
 851 | 
 852 | ---
 853 | 
 854 | ###### 29. Що буде в консолі?
 855 | 
 856 | ```javascript
 857 | const a = {};
 858 | const b = { key: "b" };
 859 | const c = { key: "c" };
 860 | 
 861 | a[b] = 123;
 862 | a[c] = 456;
 863 | 
 864 | console.log(a[b]);
 865 | ```
 866 | 
 867 | - A: `123`
 868 | - B: `456`
 869 | - C: `undefined`
 870 | - D: `ReferenceError`
 871 | 
 872 | <details><summary><b>Відповідь</b></summary>
 873 | <p>
 874 | 
 875 | #### Відповідь: B
 876 | 
 877 | Ключі об'єкта автоматично конвертуються в рядки. Ми збираємося додати об'єкт в якості ключа до об'єкта `a` зі значенням `123`.
 878 | 
 879 | Проте, коли ми наводимо об'єкт до рядка, він стає `"[object Object]"`. Таким чином, ми говоримо, що `a["object Object"] = 123`. Потім ми робимо те ж саме. `c` це інший об'єкт, який ми неявно наводимо до рядка. Тому `a["object Object"] = 456`.
 880 | 
 881 | Потім, коли ми виводимо `a[b]`, ми маємо на увазі `a["object Object"]`. Ми тільки що встановили туди значення `456`, тому в результаті отримуємо `456`.
 882 | 
 883 | </p>
 884 | </details>
 885 | 
 886 | ---
 887 | 
 888 | ###### 30. Яким буде результат?
 889 | 
 890 | ```javascript
 891 | const foo = () => console.log("First");
 892 | const bar = () => setTimeout(() => console.log("Second"));
 893 | const baz = () => console.log("Third");
 894 | 
 895 | bar();
 896 | foo();
 897 | baz();
 898 | ```
 899 | 
 900 | - A: `First` `Second` `Third`
 901 | - B: `First` `Third` `Second`
 902 | - C: `Second` `First` `Third`
 903 | - D: `Second` `Third` `First`
 904 | 
 905 | <details><summary><b>Відповідь</b></summary>
 906 | <p>
 907 | 
 908 | #### Відповідь: B
 909 | 
 910 | Ми викликаємо функцію `setTimeout` першою. Тим не менш, вона виводиться в консоль останньою.
 911 | 
 912 | Це відбувається через те, що в браузерах у нас є не тільки рантайм движок, але і `WebAPI`. `WebAPI` надає нам функцію `setTimeout` і багато інших можливостей. Наприклад, DOM.
 913 | 
 914 | Після того як _коллбек_ відправлений в `WebAPI`, функція `setTimeout` (але не коллбек!) виймається з стека.
 915 | 
 916 | <img src="https://i.imgur.com/X5wsHOg.png" width="200">
 917 | 
 918 | Тепер викликається `foo`, і `"First"` виводиться в консоль.
 919 | 
 920 | <img src="https://i.imgur.com/Pvc0dGq.png" width="200">
 921 | 
 922 | `foo` дістається з стека, і викликається `baz`. `"Third"` виводиться в консоль.
 923 | 
 924 | <img src="https://i.imgur.com/WhA2bCP.png" width="200">
 925 | 
 926 | `WebAPI` не може додавати вміст в стек коли захоче. Замість цього він відправляє коллбек-функцію в так звану _чергу_.
 927 | 
 928 | <img src="https://i.imgur.com/NSnDZmU.png" width="200">
 929 | 
 930 | Тут на сцену виходить цикл подій (event loop). **Event loop** перевіряє стек і черга завдань. Якщо стек порожній, то він бере перший елемент з черги і відправляє його в стек.
 931 | 
 932 | <img src="https://i.imgur.com/uyiScAI.png" width="200">
 933 | 
 934 | Викликається `bar`, в консоль виводиться `"Second"` і ця функція дістається з стека.
 935 | 
 936 | </p>
 937 | </details>
 938 | 
 939 | ---
 940 | 
 941 | ###### 31. Що буде в `event.target` після кліка на кнопку?
 942 | 
 943 | ```html
 944 | <div onclick="console.log('first div')">
 945 |   <div onclick="console.log('second div')">
 946 |     <button onclick="console.log('button')">
 947 |       Click!
 948 |     </button>
 949 |   </div>
 950 | </div>
 951 | ```
 952 | 
 953 | - A: Зовнішній `div`
 954 | - B: Внутрішній `div`
 955 | - C: `button`
 956 | - D: Масив з усіма вкладеними елементами
 957 | 
 958 | <details><summary><b>Відповідь</b></summary>
 959 | <p>
 960 | 
 961 | #### Відповідь: C
 962 | 
 963 | Метою події є **найглибший** вкладений елемент. Зупинити поширення подій можна за допомогою `event.stopPropagation`
 964 | 
 965 | </p>
 966 | </details>
 967 | 
 968 | ---
 969 | 
 970 | ###### 32. Що буде в консолі після кліка по параграфу?
 971 | 
 972 | ```html
 973 | <div onclick="console.log('div')">
 974 |   <p onclick="console.log('p')">
 975 |     Click here!
 976 |   </p>
 977 | </div>
 978 | ```
 979 | 
 980 | - A: `p` `div`
 981 | - B: `div` `p`
 982 | - C: `p`
 983 | - D: `div`
 984 | 
 985 | <details><summary><b>Відповідь</b></summary>
 986 | <p>
 987 | 
 988 | #### Відповідь: A
 989 | 
 990 | Після кліка по `p` буде виведено `p` та `div`. У циклі життя події є три фази: **захоплення**, **мета** і **спливання**. За замовчуванням обробники подій виконуються на фазі спливання (якщо не встановлено параметр `useCapture` в `true`). Спливання йде з найглибшого елемента вгору.
 991 | 
 992 | </p>
 993 | </details>
 994 | 
 995 | ---
 996 | 
 997 | ###### 33. Що буде в консолі?
 998 | 
 999 | ```javascript
1000 | const person = { name: "Lydia" };
1001 | 
1002 | function sayHi(age) {
1003 |   console.log(`${this.name} is ${age}`);
1004 | }
1005 | 
1006 | sayHi.call(person, 21);
1007 | sayHi.bind(person, 21);
1008 | ```
1009 | 
1010 | - A: `undefined is 21` `Lydia is 21`
1011 | - B: `function` `function`
1012 | - C: `Lydia is 21` `Lydia is 21`
1013 | - D: `Lydia is 21` `function`
1014 | 
1015 | <details><summary><b>Відповідь</b></summary>
1016 | <p>
1017 | 
1018 | #### Відповідь: D
1019 | 
1020 | В обох випадках ми передаємо об'єкт, на який буде вказувати `this`. Але `.call` виконується _відразу ж_!
1021 | 
1022 | `.bind` повертає _копію_ функції, але з прив'язаним контекстом. Вона не виконується негайно.
1023 | 
1024 | </p>
1025 | </details>
1026 | 
1027 | ---
1028 | 
1029 | ###### 34. Яким буде результат?
1030 | 
1031 | ```javascript
1032 | function sayHi() {
1033 |   return (() => 0)();
1034 | }
1035 | 
1036 | typeof sayHi();
1037 | ```
1038 | 
1039 | - A: `"object"`
1040 | - B: `"number"`
1041 | - C: `"function"`
1042 | - D: `"undefined"`
1043 | 
1044 | <details><summary><b>Відповідь</b></summary>
1045 | <p>
1046 | 
1047 | #### Відповідь: B
1048 | 
1049 | Функція `sayHi` повертає значення, що повертається з _негайно викликаного функціонального виразу_ (IIFE). Результатом є `0` типу `"number"`.
1050 | 
1051 | Для інформації: в JS 7 вбудованих типів: `null`, `undefined`, `boolean`, `number`, `string`, `object`, `symbol`, та `bigint`. `"Function"` не є окремим типом, тому що функції є об'єктами типу `"object"`.
1052 | 
1053 | </p>
1054 | </details>
1055 | 
1056 | ---
1057 | 
1058 | ###### 35. Які з цих значень є "помилковими"?
1059 | 
1060 | ```javascript
1061 | 0;
1062 | new Number(0);
1063 | ("");
1064 | (" ");
1065 | new Boolean(false);
1066 | undefined;
1067 | ```
1068 | 
1069 | - A: `0`, `''`, `undefined`
1070 | - B: `0`, `new Number(0)`, `''`, `new Boolean(false)`, `undefined`
1071 | - C: `0`, `''`, `new Boolean(false)`, `undefined`
1072 | - D: Всі значення.
1073 | 
1074 | <details><summary><b>Відповідь</b></summary>
1075 | <p>
1076 | 
1077 | #### Відповідь: A
1078 | 
1079 | Є тільки шість "помилкових" значень:
1080 | 
1081 | - `undefined`
1082 | - `null`
1083 | - `NaN`
1084 | - `0`
1085 | - `''` (порожній рядок)
1086 | - `false`
1087 | 
1088 | Конструктори функцій, такі як new `Number` та `new Boolean` є "істинними".
1089 | 
1090 | </p>
1091 | </details>
1092 | 
1093 | ---
1094 | 
1095 | ###### 36. Що буде в консолі?
1096 | 
1097 | ```javascript
1098 | console.log(typeof typeof 1);
1099 | ```
1100 | 
1101 | - A: `"number"`
1102 | - B: `"string"`
1103 | - C: `"object"`
1104 | - D: `"undefined"`
1105 | 
1106 | <details><summary><b>Відповідь</b></summary>
1107 | <p>
1108 | 
1109 | #### Відповідь: B
1110 | 
1111 | `typeof 1` повертає `"number"`.
1112 | `typeof "number"` повертає `"string"`
1113 | 
1114 | </p>
1115 | </details>
1116 | 
1117 | ---
1118 | 
1119 | ###### 37. Що буде в консолі?
1120 | 
1121 | ```javascript
1122 | const numbers = [1, 2, 3];
1123 | numbers[10] = 11;
1124 | console.log(numbers);
1125 | ```
1126 | 
1127 | - A: `[1, 2, 3, 7 x null, 11]`
1128 | - B: `[1, 2, 3, 11]`
1129 | - C: `[1, 2, 3, 7 x empty, 11]`
1130 | - D: `SyntaxError`
1131 | 
1132 | <details><summary><b>Відповідь</b></summary>
1133 | <p>
1134 | 
1135 | #### Відповідь: C
1136 | 
1137 | Коли в масив додається значення, яке виходить за межі довжини масиву, JavaScript створює так звані "порожні клітинки". Насправді вони мають значення `undefined`, але в консолі виводяться так:
1138 | 
1139 | `[1, 2, 3, 7 x empty, 11]`
1140 | 
1141 | в залежності від місця використання (може відрізнятися для браузерів, Node, і т.д.).
1142 | 
1143 | </p>
1144 | </details>
1145 | 
1146 | ---
1147 | 
1148 | ###### 38. Що буде в консолі?
1149 | 
1150 | ```javascript
1151 | (() => {
1152 |   let x, y;
1153 |   try {
1154 |     throw new Error();
1155 |   } catch (x) {
1156 |     (x = 1), (y = 2);
1157 |     console.log(x);
1158 |   }
1159 |   console.log(x);
1160 |   console.log(y);
1161 | })();
1162 | ```
1163 | 
1164 | - A: `1` `undefined` `2`
1165 | - B: `undefined` `undefined` `undefined`
1166 | - C: `1` `1` `2`
1167 | - D: `1` `undefined` `undefined`
1168 | 
1169 | <details><summary><b>Відповідь</b></summary>
1170 | <p>
1171 | 
1172 | #### Відповідь: A
1173 | 
1174 | Блок `catch` отримує аргумент `x`. Це не той же `x`, який визначено в якості змінної перед рядком `try`.
1175 | 
1176 | Потім ми присвоюємо даному аргументу значення `1` та встановлюємо значення для змінної `y`. Потім виводимо в консоль значення аргументу `x`, що дорівнює `1`.
1177 | 
1178 | За межами блоку `catch` змінна `x` все ще `undefined`, а `y` дорівнює `2`. Коли ми викликаємо` console.log(x)` за межами блоку `catch`, цей виклик повертає `undefined`, а `y` повертає `2`.
1179 | 
1180 | </p>
1181 | </details>
1182 | 
1183 | ---
1184 | 
1185 | ###### 39. Все в JavaScript це...
1186 | 
1187 | - A: примітив або об'єкт
1188 | - B: функція або об'єкт
1189 | - C: питання з підступом! тільки об'єкти
1190 | - D: число або об'єкт
1191 | 
1192 | <details><summary><b>Відповідь</b></summary>
1193 | <p>
1194 | 
1195 | #### Відповідь: A
1196 | 
1197 | В JavaScript є тільки примітиви й об'єкти.
1198 | 
1199 | Типи примітивів: `boolean`, `null`, `undefined`, `bigint`, `number`, `string`, та `symbol`.
1200 | 
1201 | Відмінністю примітиву від об'єкта є те, що примітиви не мають властивостей або методів. Проте, `'foo'.toUpperCase()` перетворюється в `'FOO'` та не викликає `TypeError`. Це відбувається тому, що при спробі отримання властивості або методу у примітиву (наприклад, рядки), JavaScript неявно оберне примітив об'єктом, використовуючи один з класів-обгорток (наприклад, `String`), а потім відразу ж знищить обгортку після обчислення виразу. Всі примітиви крім `null` та `undefined` поводяться таким чином.
1202 | 
1203 | </p>
1204 | </details>
1205 | 
1206 | ---
1207 | 
1208 | ###### 40. Що буде в консолі?
1209 | 
1210 | ```javascript
1211 | [[0, 1], [2, 3]].reduce(
1212 |   (acc, cur) => {
1213 |     return acc.concat(cur);
1214 |   },
1215 |   [1, 2]
1216 | );
1217 | ```
1218 | 
1219 | - A: `[0, 1, 2, 3, 1, 2]`
1220 | - B: `[6, 1, 2]`
1221 | - C: `[1, 2, 0, 1, 2, 3]`
1222 | - D: `[1, 2, 6]`
1223 | 
1224 | <details><summary><b>Відповідь</b></summary>
1225 | <p>
1226 | 
1227 | #### Відповідь: C
1228 | 
1229 | `[1, 2]` - початкове значення, з яким ініціалізується змінна `acc`. Після першого проходу `acc` дорівнюватиме `[1,2]`, а `cur` буде `[0,1]`. Після конкатенації результат буде `[1, 2, 0, 1]`.
1230 | 
1231 | Потім `acc` дорівнює `[1, 2, 0, 1]`, а cur `[2, 3]`. Після злиття отримаємо `[1, 2, 0, 1, 2, 3]`.
1232 | 
1233 | </p>
1234 | </details>
1235 | 
1236 | ---
1237 | 
1238 | ###### 41. Що буде в консолі?
1239 | 
1240 | ```javascript
1241 | !!null;
1242 | !!"";
1243 | !!1;
1244 | ```
1245 | 
1246 | - A: `false` `true` `false`
1247 | - B: `false` `false` `true`
1248 | - C: `false` `true` `true`
1249 | - D: `true` `true` `false`
1250 | 
1251 | <details><summary><b>Відповідь</b></summary>
1252 | <p>
1253 | 
1254 | #### Відповідь: B
1255 | 
1256 | `null` "НЕправдивий". `!null` повертає `true`. `!true` повертає `false`.
1257 | 
1258 | `""` "НЕправдивий". `!""` повертає `true`. `!true` повертає `false`.
1259 | 
1260 | `1` "правдивий". `!1` повертає `false`. `!false` повертає `true`.
1261 | 
1262 | </p>
1263 | </details>
1264 | 
1265 | ---
1266 | 
1267 | ###### 42. Що повертає метод `setInterval`?
1268 | 
1269 | ```javascript
1270 | setInterval(() => console.log("Hi"), 1000);
1271 | ```
1272 | 
1273 | - A: унікальний id
1274 | - B: вказану кількість мілісекунд
1275 | - C: передану функцію
1276 | - D: `undefined`
1277 | 
1278 | <details><summary><b>Відповідь</b></summary>
1279 | <p>
1280 | 
1281 | #### Відповідь: A
1282 | 
1283 | Цей метод повертає унікальний id, який може бути використаний для очищення інтервалу за допомогою функції `clearInterval()`.
1284 | 
1285 | </p>
1286 | </details>
1287 | 
1288 | ---
1289 | 
1290 | ###### 43. Що повернеться?
1291 | 
1292 | ```javascript
1293 | [..."Lydia"];
1294 | ```
1295 | 
1296 | - A: `["L", "y", "d", "i", "a"]`
1297 | - B: `["Lydia"]`
1298 | - C: `[[], "Lydia"]`
1299 | - D: `[["L", "y", "d", "i", "a"]]`
1300 | 
1301 | <details><summary><b>Відповідь</b></summary>
1302 | <p>
1303 | 
1304 | #### Відповідь: A
1305 | 
1306 | Рядок є ітерабельною сутністю. Оператор поширення перетворює кожен символ в окремий елемент.
1307 | 
1308 | </p>
1309 | </details>
1310 | 
1311 | ---
1312 | 
1313 | ###### 44. Що буде в консолі?
1314 | 
1315 | ```javascript
1316 | function* generator(i) {
1317 |   yield i;
1318 |   yield i * 2;
1319 | }
1320 | 
1321 | const gen = generator(10);
1322 | 
1323 | console.log(gen.next().value);
1324 | console.log(gen.next().value);
1325 | ```
1326 | 
1327 | - A: `[0, 10], [10, 20]`
1328 | - B: `20, 20`
1329 | - C: `10, 20`
1330 | - D: `0, 10 and 10, 20`
1331 | 
1332 | <details><summary><b>Answer</b></summary>
1333 | <p>
1334 | 
1335 | #### Відповідь: C
1336 | 
1337 | Звичайні функції не можна зупинити "на півдорозі" після виклику. Однак функція-генератор може зупинитися "на півдорозі", а потім продовжити з того місця, де вона зупинилась. Кожного разу, коли функція-генератор зустрічає ключове слово `yield`, функція видає значення, що вказане після нього. Зауважте, що функція-генератор в цьому випадку не _повертає_ (return) значення, вона _дає_ (yields) значення.
1338 | 
1339 | Спочатку ми ініціалізуємо функцію-генератор з `i` рівним `10`. Ми викликаємо функцію-генератор за допомогою методу `next()`. Коли ми вперше викликаємо функцію генератора, `i` дорівнює `10`. Перше ключове слово `yield`: воно дає значення `i`. Генератор тепер "призупинено", і `10` записується у консоль.
1340 | 
1341 | Потім ми знову викликаємо функцію за допомогою методу `next()`. Виконання коду продовжується там, де зупинилося раніше, все ще з `i` що дорівнює `10`. Тепер функція зустрічає наступне ключове слово `yield` і дає `i * 2`. `i` дорівнює `10`, тож віддається `10 * 2`, що дорівнює `20`. У результаті: `10, 20`.
1342 | 
1343 | </p>
1344 | </details>
1345 | 
1346 | 
1347 | ---
1348 | 
1349 | ###### 45. Що повернеться?
1350 | 
1351 | ```javascript
1352 | const firstPromise = new Promise((res, rej) => {
1353 |   setTimeout(res, 500, 'one');
1354 | });
1355 | 
1356 | const secondPromise = new Promise((res, rej) => {
1357 |   setTimeout(res, 100, 'two');
1358 | });
1359 | 
1360 | Promise.race([firstPromise, secondPromise]).then(res => console.log(res));
1361 | ```
1362 | 
1363 | - A: `"one"`
1364 | - B: `"two"`
1365 | - C: `"two" "one"`
1366 | - D: `"one" "two"`
1367 | 
1368 | <details><summary><b>Answer</b></summary>
1369 | <p>
1370 | 
1371 | #### Відповідь: B
1372 | 
1373 | Коли ми передаємо кілька промісів методу `Promise.race`, він вирішує/відхиляє _перший_ проміс, яки вирішився/відхилився. Методу `setTimeout` ми передаємо таймер: 500 мс для першого промісу (`firstPromise`) та 100 мс для другого промісу (`secondPromise`). Це означає, що `secondPromise` вирішиться першим зі значенням `'two'`. `res` тепер містить значення `'two'`, яке буде зображено у консолі.
1374 | 
1375 | </p>
1376 | </details>
1377 | 
1378 | ---
1379 | 
1380 | ###### 46. Що буде на виході?
1381 | 
1382 | ```javascript
1383 | let person = { name: 'Lydia' };
1384 | const members = [person];
1385 | person = null;
1386 | 
1387 | console.log(members);
1388 | ```
1389 | 
1390 | - A: `null`
1391 | - B: `[null]`
1392 | - C: `[{}]`
1393 | - D: `[{ name: "Lydia" }]`
1394 | 
1395 | <details><summary><b>Answer</b></summary>
1396 | <p>
1397 | 
1398 | #### Відповідь: D
1399 | 
1400 | Спочатку ми оголошуємо змінну `person` що містить об'єкта, який має властивість `name`.
1401 | 
1402 | <img src="https://i.imgur.com/TML1MbS.png" width="200">
1403 | 
1404 | Потім ми оголошуємо змінну `members`. Ми встановлюємо перший елемент масиву рівним значенню змінної `person`. Об'єкти взаємодіють за допомогою _посилання_, коли їх встановлюють рівними один одному. Коли ви призначаєте посилання з однієї змінної на іншу, ви робите _копію_ цього посилання. (зверніть увагу, що вони не мають _однакового_ посилання!)
1405 | 
1406 | <img src="https://i.imgur.com/FSG5K3F.png" width="300">
1407 | 
1408 | Далі ми встановлюємо змінну `person` рівною `null`.
1409 | 
1410 | <img src="https://i.imgur.com/sYjcsMT.png" width="300">
1411 | 
1412 | Ми лише змінюємо значення змінної `person`, а не перший елемент у масиві, оскільки цей елемент має інше (скопійоване) посилання на об’єкт.Перший елемент у `members` все ще містить своє посилання на вихідний об’єкт. Коли ми виводимо у консоль масив `members`, перший елемент усе ще містить значення об'єкта, який і показується у консолі.
1413 | 
1414 | </p>
1415 | </details>
1416 | 


--------------------------------------------------------------------------------