https://virgool.ir/feed/@AFeSHfa2026-11-11 02:36:21https://virgool.ir/images/default-avatar.jpghttps://virgool.ir/@AFeSHhttps://virgool.ir/@AFeSH/برداشت-های-من-از-کتاب-ydkjs-async-performance-ugyz7rnn8gdwChapter 1: Asynchrony: Now & Laterدرباره مفهوم asynchrony و concorrency ، یکم راجع به event loop و event queue گفته. فک کنم همش رو فهمیدم. سخت نبود! ولی جا داره یکم راجع به concorrency و Job queue بیشتر حرف بزنیمChapter 2: Callbacksکلی حرف زده که چرا کالبک چیز مزخرفی هست و چه مشکلاتی بوجود میاره:\نمی خوندمشم چیزی نمیشد.Chapter 3: Promisesمن دانشم از promise خیلی محدود بود و فکر میکردم با وجود async / await دیگه promise API زیاد کاربردی نداره...! ولی با خوندن این بخش فهمیدم خیلی کاربرد دارن و خیلی جاها بدرد بخورن. برای فهمیدن اینکه async /await چطور کار میکنه و چطور باید ازشون استفاده کرد، فهمیدن promise خیلی مهمه!Chapter 4: Generatorsخفن‌ترین قسمت کتاب!! خیلی چیز قدرتمندیه!! خود generator ها که فکر نمی کنم زیاد کاربرد داشته باشن ولی ترکیب Generator + Promise که حاصلش همون async/await هست خیلی چیز قدرتمندیه!! فک کنم الان دقیقا فهمیدم چطور باید async/await استفاده کرد:))یه مفهموم دیگه‌ای بنام thunk روهم معرفی کرد که نمیدونم به چه درد میخوره و فک نکنم کاربردی باشه.دو چاپتر اخیر مفیدترین و کاربردی‌ترین بخش کل این سری برای من بود. افشین جلیلیافشین جلیلیThu, 01 Apr 2021 17:18:33 +0430https://virgool.ir/@AFeSH/برداشت-های-من-از-کتاب-ydkjs-this-object-prototypes-fsrk4c7lneouChapter 1: this Or That?فقط همین هارو توضیح داد و ثابت کرد:this is neither a reference to the function itself, nor is it a reference to the function's lexical scope.this is actually a binding that is made when a function is invoked, and what it references is determined entirely by the call-site where the function is called.Chapter 2: this All Makes Sense Now!درباره اینکه چطور بفهمیم this داره به چی رفرنس میده توضیح میده که خیلی خیلی مهمه و یه مقداری گیج‌ کننده‌ست(چکیده نکات) . Chapter 3: Objectsیسری توضیحات راجع به object ، ویژگی‌هاش و یسری از متودهای "کاربردیش". بیشتر جنبه یاداوری داشت برام.Chapter 4: Mixing (Up) "Class" Objectsخلاصه مطلب: کلاس‌ها تو جاوااسکریپت خیلیییییی با اون چیزی که فکر می کنید فرق دارن:))))Chapter 5: Prototypesآقاااا!! این مفهوم prototype و prototypal inheritence توی JS هیچ ربطی و شباهتی به Class/instace توی زبان ‌های class-oriented نداره. سعی نکنید ربطش بدید، تعمیمش بدید یا... فقط یادش بگیرید!خیلی ساده‌ست(یا من اینجوری برداشت کردم!)!!!!میشه گفت فقط یه لینک هست که دوتا ابجکت رو بهم ربط میده. همین! چیزی کپی نمیشه، اینستنسی ساخته نمیشه، فقط یه رفرنس هست از یه آبجکت به یه آبجکت دیگه که بدرد میخوره بعضی جاها! Chapter 6: Behavior Delegationاین Behavior Delegation افشین جلیلیافشین جلیلیTue, 16 Mar 2021 01:40:43 +0330https://virgool.ir/@AFeSH/برداشت-های-من-از-ydkjsy-scope-closures-r1mslkg4zlzzChapter 1: What's the Scope?About This BookJS is typically classified as an interpreted scripting language, so it's assumed by most that JS programs are processed in a single, top-down pass. But JS is in fact parsed/compiled in a separate phase before execution begins. میدونستم که JS ابتدا کامپایل میشه ولی هربار که بهش فکر می کنم برام چیزای جدید داره.Functions maintain their original scope no matter where in the program the functions are eventually executed. This is called closure. کلوژر واقعا گیج کنندس و درکش یه کوچولو برام سخته واسه همین به همه نکاتش توجه می کنم.Compiled vs. Interpreted تصویر خیلی کوتاه و مفید مفهوم رو میرسونه! Compiling CodeScope is primarily determined during compilation, so understanding how compilation and execution relate is key in mastering scope. همیشه سوالم بود چه فرقی می کنه حالا چه کامپایل بشه! چه تفسیر بشه...! چه فرقی داره؟!!a program is processed by a compiler in three basic stages:1. Tokenizing/Lexing 2. Parsing(generating AST) 3. Code Generation(generating Binary code) کلا مبجث کامپایلر برام جالبه!!You'll see shortly why these details about compilation and execution we do cover, even at a high level are relevant.منتظرم بدونم چرا مهمه؟؟؟!!!JS engines use all kinds of tricks (like JITs, which lazy compile and even hot re-compile)processing of JS programs is that it occurs in (at least) two phases: parsing/compilation first, then execution.برای سادگی خوبه اینجوری به قضیه نگاه کنیم.While the JS specification does not require "compilation" explicitly, it requires behavior that is essentially only practical with a compile-then-execute approach.There are three program characteristics you can observe to prove this to yourself: 1. syntax errors, 2. early errors, 3. and hoisting.این دلیل‌هاش و مثال هایی که میاره برام تازه و جالب بودن!In fact, the only way the JS engine could know about the syntax error on the third line, before executing the first and second lines, is by the JS engine first parsing the entire program before any of it is executed.strict-mode forbids, among many other things, functions to have duplicate parameter names; this has always been allowed in non-strict-mode.Could JS parse a program, but then execute that program by interpreting operations represented in the AST without first compiling the program? Yes, that is possible. But it's extremely unlikelywhat the engine is doing in processing JS programs is much more alike compilation than not.Compiler Speakتو این بخش راجع به LHS , RHS و source refrence و target refrence حرف زده که برام جدید بودOther than declarations, all occurrences of variables/identifiers in a program serve in one of two "roles": either they're the target of an assignment or they're the source of a value.assignment targets and sources don't always literally appear on the left or right of an =.How do you know if a variable is a target? Check if there is a value that is being assigned to it; if so, it's a target. If not, then the variable is a source.A function declaration is a special case of a target referenceIn case you were wondering, objects properties are not variable references.Lexical ScopeThe key idea of "lexical scope" is that it's controlled entirely by the placement of functions, blocks, and variable declarations, in relation to one another.In other words, while scopes are identified during compilation, they're not actually created until runtime, each time a scope needs to run.Chapter 2: Illustrating Lexical Scopeتو این بخش راجع به scope و نحوه ساخته شدنش توضیح داده... کلا نکته جدیدی برام نداشت! بنظرم ساده‌ست.به رفتار احمقانه جاوااسکریپت در نبود "use strict" پی بردم.Chapter 3: The Scope Chainدو این بخش ۲ تا مبحث رو مطرح کرده بود:shadowing : که بنظرم ساده‌ست! من می فهممش !و راجع به function expression و function declartion و arrow functoins توضیح میده و راجع به اسکوپشون بحث می کنه... . من به این نتیجه رسیدم که همیشه از function declation استفاده کنم مگر جایی که مجبور باشم.Chapter 5: The (Not So) Secret Lifecycle of Variablesfunction hoisting attachs its name identifiers to the nearest enclosing function scope (or, if none, the global scope), not a block scope.فهمیدم function declartion بلاک اسکوپ نیست.راجع به TDZ توضیح داده که چیز مهمیه ولی من بلدش بودم قبلا و برداشت کلیم اینه که همیشه از const استفاده کنم و اگر مجبور شدم از let . Chapter 6: Limiting Scope Exposureراجع به POLE(Principle Of Least Exposure) صحبت کرده که خیلی خیلی چیز بدرد بخور و مهمیه!! من تا حالا کد خیلی پیچیده‌ای نزدم که که این اصل رو توش نیاز باشه رعایت کنم ولی قطعا چیز بدرد بخوریه!در همین راستا یکی از کاربرد های IIFE رو یادگرفتم (برای ساختن یه اسکوپ میانی و cache کردن دیتا بدرد میخورن)درباره FiB(Function decraltions in Block) کلی حرف زده:\ که نتیجه‌ش این شد:never place a function declaration directly inside any block. Always place function declarations anywhere in the top-level scope of a function (or in the global scope).FiB is not worth it, and should be avoided.Chapter 7: Using Closuresکلا راجع به کلوژر توضیح داده بود؛ از نظر من همش مهم بود واسه همین با دقت و آرامش خوندم. و بعضی نکاتی که فکر کردم برای درک و یادآوری مفهوم کلوژر لازم هست رو اینجا آوردم:(خلاصه مبحث)Closure is a behavior of functions and only functionsFor closure to be observed, a function must be invoked, and specifically it must be invoked in a different branch of the scope chain from where it was originally defined.Closure allows a function to continue to access those outer variables even after the outer scope is finished.closure is associated with an instance of a function, rather than its single lexical definition. For each new instance, a new closure.Closure is actually a live link, preserving access to the full variable itself. By closing over a variable in a function, we can keep using that variable (read and write).Closure is variable-oriented not value-oriented.If a closure exists but it cannot be observed in our programs, does it matter? Nowe should look and plan for the direct, concrete effects closure has on our program behaviorSince closure is inherently tied to a function instance, its closure over a variable lasts as long as there is still a reference to that function.Conceptually, closure is per variable rather than per scope.if you don't need that value anymore and don't want that memory held, it's safer (memory usage) to manually discard the value rather than relying on closure optimization/GC.Appendix A: Exploring Furtherکلی توضیح داده راجع به اینکه کجاها از var یا let یا const استفاده کنیم و نظرش اینه که توی اکثر جاها از var و let استفاده بشه و خیلی محدود از const استفاده بشه بهتره! جالبه که گفته استفاده از const تاثیری تو پرفورمنس نداره!من کلا با نظرش مخالفم ولی حالا جای بحث داره! :)افشین جلیلیافشین جلیلیWed, 10 Mar 2021 23:34:20 +0330https://virgool.ir/@AFeSH/معرفی-asyncawait-و-چند-نکته-درین-باب-ejvgnpphyhsbفرض کنید می خواید چنتا عملیات رو به صورت متوالی انجام بدید که هر کدوم به نتیجه عملیات قبلی نیاز داره! به احتمال خیلی قوی یه همچین کاری می کنید:`const result1 = do1stThing()const result2 = do2ndThing(result1)const result3 = do3rdThing(result2)...`خب برای مغز‌ما این روند خیلی طبیعیه، قابل درکه و خواناست. و توی خیلی زبان‌های برنامه نویسی(synchronus) این روش درست انجام دادن کارهاست؛ کار اول رو شروع می کنی و منتظر می‌مونی تا تموم شه! کار دوم رو شروع می‌کنی منتظر می‌مونی تا تموم شه... ولی صبر کن! چرا منتظر بمونیم تموم شه؟؟!asynchronus programming، نگرشی متفاوت!! خب چرا باید صبر کنیم و منتظر بمونیم تا یک عملیات تموم شه!!؟؟‌ فرض کنید به دیتابیس درخواست دادیم تا یکسری دیتا‌هارو واسمون پیدا کنه. خب نیازی نیست برنامه ما معطل بمونه تا دیتابیس کارش رو انجام بده و نتیجه رو برگردونه! به جاش میتونه بره کارای دیگه رو انجام بده و از دیتابیس بخواد که وقتی کارش تموم شد اونو خبر کنه تا بیاد نتیجه رو ازش بگیره! ایده جالبیه!!... آره ؟؟!!! خب این رو میگن asynchronus . خیلی جذاب و کاربردی هست و خیلی جاها کاربرد داره! ولی...مشکل کجاست!؟؟مشکل اینجاست که مغز ما asynchronusly کار نمیکنه! در واقع زیاد با روندهای این‌چنینی جور نیست و براش سخته که درک کنه دقیقا چه اتفاقی میوفته! برای اینکه درک این روندها برای خودمون آسون‌تر کنیم تمام تلاشمون رو کردیم تا قیافه کدهای async رو شبیه کدهای همیشگی،آشنا و خوانای sync کینم.async / awaitتو زبان جاوااسکریپت واسه سادگی و خوانایی برنامه‌نویسی asynchronus یه ابزار خیلی خفن داریم async /await ! اینجوری کار می‌کنه که هرکاری دلت می‌خواد می کنی و نهایتا پشت تعریف توابع و زمان صدا زدنشون یه async یا await میزاری و همین خودش بقیه کار رو انجام میده!به همین سادگی!!:)))) `async function doManyThings() { const result1 = await do1stThing() const result2 = await do2ndThing(result1) const result3 = await do3rdThing(result2) ...}doManyThings();`خب حالا واقعا به همین سادگی!؟؟ نه دقیقا! باید بدونید کجا و چطوری و چرا ازش استفاده کنید. حواستون باشه گاهی اوقات فریب‌تون میده و کدی که باهاشون نوشتید اصلا async نیست!! خب حالا من نمی‌خوام وارد جزیيات async/await بشم ولی چنتا نکته که یادگرفتم رو براتون میگمتوابع async همیشه یه Promise به عنوان خروجی برمیگردونن!توابع async از یک Promise ضمنی برای برگردوندن نتایج استفاده می کنن. حتی اگه Promise رو به طور واضح برنگردونید ، تابع async اطمینان میده که کدتون از طریق Promise منتقل شده.توجه کنید که `await` فرایند اجرای کد توی یه تابع async رو متوقف می کنه و فرمون رو میده دست تابع صدازننده اون تابع async.می تونیم توی یه تابع async چندین تا await استفاده کنیم.وقتی از `async await` استفاده می کنید حواستون باشه از `try catch` برای ارورهندلینگ استفاده کنید.اگه که کدتون دارای عملیات مسدودکننده(blocking operation) بهتره که تبدیل کنید به یه تابع async. با این کار مطمعن میشید دیگران می تونن از تابعتون به صورت asyncronus استفاده کنن.با async کردن توابع‌تون شما این امکان رو به کاربر(استفاده کننده از کد شما) که سطح asynchronocity که مورد نیازش هست رو انتخاب کنه.وقتی از `await` توی لوپ و ایتریتورها استفاده می کنید خیلی مراقب باشید. امکانش هست خیلی راحت تو تله‌ی «نوشتن کد متوالی» بیوفتید درصورتی که خیلی رحت میتونستید از parallelism استفاده کنید.حواستون باشه `await` همیشه واسه یک promise هست. اگه می خواید چندین promise رو await کنید یک آرایه از اون promise ها بسازید و اون رو به promise.all پاس بدید.دقت کنید که `await` فقط از ادامه اجرای کد تو تابع async جلوکیری می کنه و مطمعن میشه که تا زمانی که نتیجه promise برگردونده نشده خط های بعدی کد اجرا نشن. پس اگه یه فرایند asyncronus خودش قبلا شروع شده `await` هیچ تاثیری روش نداره.امیدوارم مفید بوده باشه!!لینک منابعی که مطالع کردم و ارشون استفاده کردم: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await https://betterprogramming.pub/understanding-async-await-in-javascript-1d81bb079b2c https://medium.com/@rafaelvidaurre/truly-understanding-async-await-491dd580500e https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Concepts qqافشین جلیلیافشین جلیلیThu, 04 Mar 2021 11:29:01 +0330