https://virgool.io/feed/@yousef-gheibi برنامه نویس فرانت اند fa 2026-06-16 05:36:02 https://files.virgool.io/upload/users/3093283/avatar/sSgvIs.jpg?height=120&width=120 https://virgool.io/@yousef-gheibi https://virgool.io/@yousef-gheibi/conditional-types-in-typescript-aypsbpmfr0wt یک ویژگی قدرتمند هستند که به شما امکان می‌دهند بر اساس شرایط خاص، نوعی را انتخاب کنید. این ویژگی به ویژه در مواقعی مفید است که می‌خواهید نوعی را بر اساس ورودی‌های دیگر تعیین کنید.T extends U ? X : Y نوع T نوعی است که بررسی می‌شود.نوع U نوعی است که T با آن مقایسه می‌شود.اگر T از U گسترش یابد ، نوع X انتخاب می‌شود.در غیر این صورت، نوع Y انتخاب می‌شود.مثال : فرض کنید می‌خواهید تابعی بنویسید که اگر ورودی یک عدد باشد، نوع خروجی number باشد و اگر رشته باشد، نوع خروجی string باشد: یوسف غیبی یوسف غیبی Fri, 24 Jan 2025 11:21:02 +0330 https://virgool.io/@yousef-gheibi/execution-context-in-javascript-sf4mkqtazq9r به طور خلاصه و مفید محیطی است که کدهای جاوااسکریپت در آن اجرا می‌شوند: در این پست، به بررسی Execution Context، انواع آن و مراحل تشکیل آن می‌پردازیم تا با نحوه عملکرد پشت صحنه جاوااسکریپت آشنا شوید.1 - Global Execution Contextبه محض شروع اجرای یک اسکریپت جاوااسکریپت، یک GEC ایجاد می‌شود. این محیط شامل موارد زیر است:Global Object (در مرورگر، این شیء window است).this (که در این سطح به Global Object اشاره می‌کند).2 - Function Execution Contextهر زمان که یک تابع فراخوانی شود، یک Execution Context جدید برای آن تابع ایجاد می‌شود ،که شامل محیطی برای اجرای کدهای داخل تابع است.3- Eval Execution Contextزمانی که کد با استفاده از تابع eval اجرا شود، یک Execution Context جداگانه ایجاد می‌گردد.مراحل ایجاد یک Execution Contextبه دو فاز اصلی تقسیم می شود: 1- مرحله ایجاد (Creation Phase) 2- مرحله اجرا (Execution Phase)1- Creation Phaseدر این مرحله جاوااسکریپت محیط لازم را برای اجرا کد تنظیم می کند. سه کار اصلی در این مرحله انجام می شود.الف - ایجاد Activation Objectجاوااسکریپت ابتدا یک شیء به نام Activation Object ایجاد می‌کند که تمامی متغیرها، توابع و پارامترهای ورودی تابع را در آن ذخیره می‌نماید. این شیء در حافظه (شامل Call Stack و Heap و Stack) اختصاص داده می‌شود. با این حال، مقدار متغیرها در این مرحله undefined است.(به خاطر فرایند Hoisting)ب - ایجاد Scope Chainجاوااسکریپت برای دسترسی به متغیرها در سطوح مختلف، یک Scope Chain (زنجیره محدوده) ایجاد می‌کند. این زنجیره به موتور جاوااسکریپت کمک می‌کند تا متغیرها و توابع را در محدوده‌های بالاتر (Outer Scopes) جستجو و پیدا کند. به عبارت دیگر، اگر متغیری در محدوده فعلی یافت نشود، موتور جاوااسکریپت به صورت خودکار به محدوده‌های بالاتر مراجعه می‌کند تا آن متغیر را پیدا کند. این مکانیزم باعث می‌شود متغیرها و توابع تعریف‌شده در سطوح بیرونی‌تر، درون توابع داخلی نیز قابل دسترسی باشند.ج - This bindingدر این مرحله، مقدار this مشخص می‌شود. مقدار this بستگی به نحوه‌ی فراخوانی تابع یا اجرای کد دارد و می‌تواند در شرایط مختلف متفاوت باشد.2- Execution Phaseپس از اتمام موفقیت‌آمیز مرحله ایجاد (Creation Phase)، کد شروع به اجرا می‌کند. در این مرحله، اتفاقات زیر رخ می‌دهد:الف - مقدار دهی متغییر هامتغیرهایی که در مرحله ایجاد مقدار undefined گرفته بودند، اکنون مقادیر واقعی خود را دریافت می‌کنند. هر زمان که به یک متغیر یا تابع دسترسی داشته باشیم، جاوااسکریپت ابتدا Scope Chain را بررسی می‌کند تا موقعیت آن متغیر یا تابع را پیدا کند.ب - اجرای خط به خط کد هادر این مرحله، کدها به ترتیب و به صورت خط به خط اجرا می‌شوند. هر دستور به نوبت پردازش شده و عملیات مربوط به آن انجام می‌شود. یوسف غیبی یوسف غیبی Thu, 16 Jan 2025 11:20:08 +0330 https://virgool.io/@yousef-gheibi/object-oriented-programming-in-javascript-cphhbviqg7en برنامه‌نویسی شیءگرا (Object-Oriented Programming یا OOP) یکی از پارادایم‌های اصلی برنامه‌نویسی است که تمرکز آن بر روی اشیاء (Objects) است. در این پارادایم، اشیاء به عنوان ترکیبی از داده‌ها (Properties) و توابع (Methods) تعریف می‌شوند که با یکدیگر تعامل دارند. این رویکرد به توسعه‌دهندگان کمک می‌کند تا کدهای ساختارمند، قابل استفاده مجدد و قابل نگهداری بنویسند.کلاس (Class)در جاوااسکریپت، کلاس‌ها با استفاده از کلمه کلیدی class تعریف می‌شوند. کلاس‌ها در واقع الگوهایی هستند که برای ایجاد اشیاء استفاده می‌شوند. هر کلاس می‌تواند شامل خصوصیات (Properties) و متدها (Methods) باشد.کانستراکتور (Constructor)کانستراکتور یک تابع خاص در کلاس است که هنگام ایجاد یک شیء جدید به طور خودکار فراخوانی می‌شود. این تابع برای مقداردهی اولیه به خصوصیات شیء استفاده می‌شود. در جاوااسکریپت، کانستراکتور با استفاده از کلمه کلیدی constructor تعریف می‌شود.مراحل کار کانستراکتور:۱. ایجاد شیء جدید: با استفاده از کلمه کلیدی new، یک شیء جدید ایجاد می‌شود.۲. اتصال this به شیء جدید: درون کانستراکتور، this به شیء جدید اشاره می‌کند.۳. مقداردهی اولیه: با استفاده از this، مقادیر اولیه به شیء اختصاص داده می‌شوند.۴. بازگشت خودکار شیء: کانستراکتور به طور خودکار شیء جدید را برمی‌گرداند (نیازی به return نیست).کپسوله سازی (Encapsulation)کپسوله‌سازی به معنای مخفی کردن جزئیات داخلی یک شیء و ارائه‌ی یک رابط کنترل‌شده برای دسترسی به داده‌ها است. در جاوااسکریپت، این کار با استفاده از نماد # برای تعریف خصوصیات و متدهای خصوصی (Private) انجام می‌شود.ارث‌بری (Inheritance)ارث‌بری به کلاس‌ها این امکان را می‌دهد تا ویژگی‌ها و رفتارهای کلاس‌های دیگر را به ارث ببرند. در جاوااسکریپت، این کار با استفاده از کلمه کلیدی extends انجام می‌شود.چندشکلی (Polymorphism)چندشکلی به این معناست که یک متد می‌تواند رفتارهای مختلفی داشته باشد، بسته به این که روی کدام شیء فراخوانی شود. این ویژگی معمولاً از طریق ارث‌بری و بازنویسی متدها (Method Overriding) پیاده‌سازی می‌شود.استاتیک (Static Methods and Properties)متدها و خصوصیات استاتیک متعلق به خود کلاس هستند و نه به نمونه‌های آن. این متدها و خصوصیات با استفاده از کلمه کلیدی static تعریف می‌شوند و بدون ایجاد نمونه‌ای از کلاس قابل دسترسی هستند.برنامه‌نویسی شیءگرا در جاوااسکریپت به توسعه‌دهندگان کمک می‌کند تا کدهای خود را به صورت ساختارمند، قابل استفاده مجدد و قابل نگهداری بنویسند. با استفاده از مفاهیمی مانند کلاس‌ها، کانستراکتورها، کپسوله‌سازی، ارث‌بری، چندشکلی و متدهای استاتیک، می‌توان برنامه‌های پیچیده‌تری را با سهولت بیشتری توسعه داد. این مفاهیم پایه‌ای OOP، جاوااسکریپت را به یک زبان قدرتمند و انعطاف‌پذیر برای توسعه‌ی نرم‌افزار تبدیل می‌کنند. یوسف غیبی یوسف غیبی Fri, 10 Jan 2025 11:53:35 +0330 https://virgool.io/@yousef-gheibi/prototype-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-gz2hycp3tzkx در جاوااسکریپت، زمانی که آبجکت‌ها ایجاد می‌شوند، برخی از پراپرتی‌ها و متدها را از آبجکت prototype به ارث می‌برند. آبجکت prototype مانند یک طرح و الگو برای سایر آبجکت‌ها عمل می‌کند، مشابه کلاس‌ها در ES6+. به عنوان مثال، همه رشته‌ها دارای متدهای پیش‌فرضی مانند replace و split و همچنین یک پراپرتی به نام length هستند. هنگامی که یک رشته ساخته می‌شود، متدها و پراپرتی‌ها از String.prototype به ارث می‌آیند. بنابراین، اگر ما آبجکت String.prototype را ویرایش کرده و به آن یک متد اضافه کنیم، آن متدها و پراپرتی‌ها در سایر رشته‌ها نیز در دسترس خواهند بود.در جاوااسکریپت هر آبجکتی یک پراپرتی مخفی داره به اسم [(prototype)] داره که به عنوان یک لینک یا واسط برای دسترسی به نمونه ای والد در نظر گرفته می شود. برا اینکه prototype یا نمونه اولیه یا به زبان ساده والد آبجکت را ببینیم به این شکل عمل میکنیم:prototype chainingهر آبجکت در جاوااسکریپت یک پراپرتی داخلی به نام [(prototype )] دارد که به یک آبجکت دیگر اشاره می‌کند. این آبجکت معمولاً به عنوان prototype معروف است.اگر یک ویژگی یا متد در آبجکت پیدا نشود، جاوااسکریپت به طور خودکار به prototype آبجکت و سپس به prototype آن prototype مراجعه می‌کند و این روند ادامه پیدا می‌کند. این زنجیره را "prototype chain" می‌نامیم.چطوری میتونیم یک آبجکت بدون prototype بسازیم؟const obj = Object.create(null); یوسف غیبی یوسف غیبی Sat, 28 Dec 2024 21:39:42 +0330 https://virgool.io/@yousef-gheibi/function-closures-%D8%A8%D9%87-%D8%B2%D8%A8%D8%A7%D9%86-%D8%A8%D8%B3%DB%8C%D8%A7%D8%B1-%D8%B3%D8%A7%D8%AF%D9%87-evt7yy3yk4pm کلوژر ، تابعی که توی یک تابع دیگه تعریف و اجرا میشه که علاوه بر متغیر های scope خودش به متغیر های تابع بیرونی هم دسترسی داشته باشد.یک سری کاربرد داره که این زیر بهش اشاره میکنیم :1 - حفظ وضعیت : امکان حفظ وضعیت بین فراخوانی‌ها2- محافظت از داده‌ها : جلوگیری از دسترسی مستقیم مغیرهادر این کد، وضعیت شمارنده counter با استفاده از closure حفظ می‌شود. به این معنی است که تابع jump_counter به متغیر counter که در داخل init تعریف شده است، دسترسی دارد و می‌تواند آن را حفظ کند و تغییر دهد، حتی بعد از آنکه تابع init تمام شده است.متغیر counter به دلیل اینکه در scope تابع init قرار دارد، از دسترسی خارج از آن محافظت شده است. هیچ کدی نمی‌تواند مستقیماً به counter دسترسی پیدا کند و تنها راه دسترسی به آن از طریق تابع jump_counter است. این موضوع باعث می‌شود که داده‌ها از تغییرات ناخواسته محافظت شوند. یوسف غیبی یوسف غیبی Tue, 24 Dec 2024 20:58:16 +0330 https://virgool.io/@yousef-gheibi/pure-functions-and-referential-transparency-glgks2zfyltn توابع خالص (pure functions) دو ویژگی اصلی دارند :1- side effects freeهیچ اثر جانبی قابل مشاهده بیرون از scope تابع ایجاد نمی کند.به این معنی که هیچ تغییری متغیرهای سراسری ایجاد نمی کند.2- referential transparencyیا همان شفافیت مرجعی ، به این معنی است که می‌توان هر تابع خالص را با نتیجه‌اش جایگزین کرد، بدون اینکه رفتار برنامه تغییر کند. به عبارتی دیگر، اگر در یک قسمت از کد به تابعی اشاره کنیم، می‌توانیم به‌جای آن، مقدار خروجی تابع را قرار دهیم و برنامه هنوز به درستی کار خواهد کرد.توابع خالص به ما این امکان را میدن که کدهای قابل اطمینان‌تر، قابل تست‌تر و قابل نگهداری‌تری بنویسیم.با حذف کردن اثرات جانبی و دادن شفافیت به مرجع، میتونیم کد رو توی واحدهای کوچیک‌تر تست کنیم. اینجوری خیلی راحت‌تر می‌تونیم منطق برنامه رو درک کنیم و از بازنویسی‌های پیچیده و دردسرای اشکال‌زدایی جلوگیری کنیم. این ویژگی‌ها به بهبود کیفیت کد کمک میکنه و باعث افزایش کارایی و کاهش خطاها در طول فرآیند توسعه میشه. یوسف غیبی یوسف غیبی Tue, 24 Dec 2024 20:22:33 +0330 https://virgool.io/@yousef-gheibi/functional-programming-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D8%AA%D8%A7%D8%A8%D8%B9%DB%8C-np7ryitbfssp برنامه نویسی تابعی یا همان functional Programming یکی از پارادیم های برنامه نویسی است که تو این روش توابع به عنوان شی اصلی تلقی میشن. یک سری ویژگی های کلیدی دارن که بهشون می پردازیم.1- First Class Functionدر این پارادیم ، توابع به عنوان اولین کلاس مد نظر قرار می‌گیرن. یعنی میتونیم آن‌ها را به عنوان آرگومان به توابع دیگر بدیم، خروجی برگردانیم یا در متغیرها ذخیره کنیم.2- State-less (pure function)برنامه های تابعی تلاش میکنن که state-less باشن به این معنی که توابع باید فقط به ورودی‌هایی که می‌گیرد وابسته باشن و هیچ حالت داخلی یا متغیر جهانی را تغییر ندهد.این رویکرد به ما کمک می‌کند تا کدهایی با قابلیت تست و نگهداری آسان‌تر بنویسیم، زیرا توابع همیشه یک نتیجه ثابت را برای ورودی‌های ثابت بازمی‌گردانند.3- Declarative and Control Flowبرنامه نویسی Declarative ، جریان کنترلی را انتزاع میدهد و که به برنامه نویس اجازه میدهد که منطق را بدون اینکه جزئیات مرحله به مرحله را به صورت صریح تعریف کند، استفاده کند. (high-level)برنامه نویسی Imperative ، جریان کنترلی را به صوت صریح و با جزئیات بیشتری استفاده کند. (low-level)برنامه نویسی تابعی بیشتر به صورت Declarative و کمتر به صورت Imperative استفاده میشن.4- Functional Compositionبرنامه نویسی تابعی ترجیح میدهد که توابع را به راحتی ترکیب شوند تا عمکلرد های پیچیده تری را انجام دهند. ترکیب دو یا چند تابع به گونه‌ای است که خروجی تابع اول به عنوان ورودی تابع دوم عمل می‌کند. در نهایت، برنامه‌نویسی تابعی یک انتخاب مناسب برای ساخت برنامه‌ های پیچیده و مقیاس‌پذیر است، به‌ خصوص الان که نیاز به قابلیت تست و نگهداری کد ها بیشتر از همیشه احساس میشه. یوسف غیبی یوسف غیبی Sun, 22 Dec 2024 22:38:35 +0330 https://virgool.io/@yousef-gheibi/%D9%85%D9%81%D9%87%D9%88%D9%85-%DA%A9%D9%84%DB%8C-event-loop-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-udx7eluslc8u حلقه رویداد (Event Loop) یکی از مفاهیم کلیدی در جاوا اسکریپت است که نحوه اجرای کد ها و تعامل با مرورگر را تعیین می کند. درک این مفهوم برای نوشتن کد های کارآمد و پاسخگو ضرروی است.نحوه عملکرد حقله رویداد :اجرای کد همزمان (synchronous) از بالا به چک کردن صف وظایف (Task Queue)اگر وظیفه ای در صف وجود داشته باشد : - اجرای وظیفه - چک کردن مجدد صف وظایفاگر صف وظایف خالی باشد ، حلقه به اجرای کد همزمان باز میگردد.یک مثال ساده از صف وظایف (Task Queue) :مفهوم Task Queueصف وظایف (Task Queue) یک ساختار داده در برنامه نویسی است که وظایف (Tasks) را به ترتیب اولین ورودی ، اولین خروجی (FIFO) ذخیره میکند.نحوه عملکرد صف وظایفاضافه کردن وظایف : وظایف جدید به انتهای صف وظایف اضافه می شوند.اجرای وظایف : یک پردازنده وظایف را از ابتدای صف خارج می کند و آنها را اجرا میکند.حذف وظایف : پس از اتمام اجرای وظیفه ، از صف وظایف حذف می شود.انواع صف وظایف (Task Queue)در جاو اسکریپت ، دو نوع صف وظایف اصلی وجود دارد : صف وظایف ماکرو (Macro Task Queue)وظایف سنگین تری هستند که می توانند منابع سیستم را اشغال کنند.شامل موارد زیر می باشند :- setTimeout- setInterval- درخواست های شبکه- وظایف مربوط به DOMصف وظایف ماکرو (Micro Task Queue)وظایف سبک تری هستند و به سرعت اجرا می شوند.شامل موارد زیر می باشند :- callbacks مربوط به Promise ها- MutationObserver- وظایف مربوط به web worksعلاوه بر دو نوع صف وظایف اصلی ، صف های دیگری نیز وجود دارند: - صف وظایف رندر- صف وظایف انیمیشنترتیب اجرای کد در این صف ها- وظایف میکرو- وظایف رندر- وظایف ماکرو- وظایف انیمیشن یوسف غیبی یوسف غیبی Mon, 26 Feb 2024 16:32:36 +0330