پست‌های انتشارات من و جاوااسکریپت

کش(Cache) کردن اطلاعات در جاوااسکریپت

Ali Khoshgoftar — Sat, 16 Apr 2022 23:35:03 +0430

Memoization in Javascript گاهی اوقات نیاز داریم یکسری اطلاعات رو در زمان اجرا کدهامون Cache کنیم و هربار محاسبه انجام نشه به این کار Memoization هم میگن.برای مثال یک تابع داریم که یک رشته رو از کاربر میگیره و یک پردازش سنگین که ممکنه چند ثانیه طول بکشه روی این رشته انجام میده و در نهایت یک خروج خروجی برمیگردونه.مشکل زمانی به وجود میاد که این تابع یک تابع ضروری باشه و بارها در طول برنامه اجرا بشه و هر مرتبه باعث ایجاد تاخیر چند ثانیه ای و درگیر شدن منابع میشه یکی از راه حل هایی که داریم Cache کردن خروجی تابع به ازای ورودی های مختلفه به این صورت که این تابع با هر ورودی مرتبه اول محاسبه را به طور کامل انجام میده و همچنین مقدار خروجی رو با استفاده از کلوژر در حافظه Cache میکنه دفعه بعد که این تابع صدا زده شد ابتدا به مقادیر Cache شده نگاه کرده و اگر خروجی متناسب با این ورودی داشت بدون اجرای مجدد تابع مقدار رو برمیگردونه و اگر مقداری برای این مقادیر ورودی وجود نداشت محاسبه رو انجام میده.برای مثال ما تابع sum رو داریم که مقادیر num1,num2 رو میگیره و حاصل جمع این دو عدد رو برمیگردونهconst sum = (num1, num2) => { return num1 + num2; };حالا احتیاج داریم یک تابع داشته باشیم که بجای هربار محاسبه این عملیات مرتبه اول این پردازش رو انجام بده و خروجی رو هم کش کنه و مرتبه های بعدی ازبجای پردازش مجدد این مقدار رو از کش بخونهconst memo = (func) => { const cache = {}; return (param1, param2) => { if (cache[`${param1}-${param2}`]) { return cache[`${param1}-${param2}`]; } else { let res = func(param1, param2); cache[`${param1}-${param2}`] = res; return res; } }; }; همچنین تابع memo رو داریم که کارش اینه میاد به عنوان ورودی تابعی رو از ما میگیره که قصد Cache کزدن خروجی هاشو داریم (به عنوان مثال تابع sum که بالاتر تعریفش کردیم) و یک تابع به عنوان کلوژر میسازیم که از ما دیتا های ورودی این تابع رو دریافت میکنه به همین سادگی :)خب کار تمومه بریم از این تابع استفاده کنیمconst getSum = memo(sum); console.log(getSum(10, 20)); //return 30 after process console.log(getSum(10, 20)); //return 30 from cache console.log(getSum(10, 20)); //return 30 from cache console.log(getSum(10, 5)); //return 15 after process console.log(getSum(10, 5)); //return 15 from cache console.log(getSum(10, 5)); //return 15 from cacheبرای استفاده از این تابع ابتدا باید یک متغیر تعریف کنیم و تابع sum رو به این کلوژر پاس بدیم و کار تمومه از این به بعد دیتا بعد از محاسبه Cache میشه و کد ما بهینه تر میشه.به این نکته دقت کنید متد memo طوری نوشته شده که حتما باید دو متغیر به اون پاس بدیم این یعنی همه جا نمیتونیم ازش استفاده کنیم و بهتره با استفاده از spread operator این متد رو داینامیک کنیمconst memo = (func) => { const cache = {}; return (...params) => { if (cache[params.join("-")]) { return cache[params.join("-")]; } else { let res = func(...params); cache[params.join("-")] = res; return res; } }; };به کمک قابلیت spread operator که از ES6 به جاوا اسکریپت اضافه شد یک تابع داینامیک نوشتیم که میتونیم برای Cache کردن دیتا همه تابع ها ازش استفاده کنیمکد کامل پیاده سازی این تابع:const memo = (func) => { const cache = {}; return (...params) => { if (cache[params.join("-")]) { return cache[params.join("-")]; } else { let res = func(...params); cache[params.join("-")] = res; return res; } }; }; const sum = (num1, num2) => { return num1 + num2; }; const getSum = memo(sum); console.log(getSum(10, 20)); //return 30 after process console.log(getSum(10, 20)); //return 30 from cache console.log(getSum(10, 20)); //return 30 from cache console.log(getSum(10, 5)); //return 15 after process console.log(getSum(10, 5)); //return 15 from cache console.log(getSum(10, 5)); //return 15 from cacheخیلی خوشحالم که زمان گذاشتی و این مقاله رو کامل خوندی لطفا هر موردی که به نظرت نیاز به بهبود داره توی کامنت برام بنویس.

کلوژر کلوژر که میگن چیه؟؟؟

Ali Khoshgoftar — Tue, 05 Apr 2022 10:41:51 +0430

Javascript Closuresهمه چیز برمیگرده به حوزه دید متغیر ها در جاوا اسکریپتبه صورت خلاصه در جاوا اسکریپت دو نوع متغیر Private و Global داریم:متغیر های Global در ابتدای اجرای برنامه ساخته میشه و سر تا سر برنامه قابل دسترسی و تغییر هستن و همچنین تا زمانی که پنجره مرورگر بسته نشه در حافظه باقی میمونن و فضا اشغال میکننمتغیر های Private داخل هر اسکوپ تعریف میشه و با پایان همان اسکوپ، از بین میرنفرض کنید میخوایم یک برنامه رزرو بنویسیم و نیاز به یک تابعی داریم که نوبت های رزرو شده رو حساب کنه برای این کار کد زیر رو مینویسیمfunction reservation() { let counter = 0 counter++ return counter } console.log(reservation()); // 1 console.log(reservation()); // 1 console.log(reservation()); // 1این که هر دفعه 1 رو برمیگردونه :( مثل اینکه یک جای کار میلنگهطبق مدیریت حافظه در جاوااسکریپت میدونیم که " متغیر های Private داخل هر اسکوپ تعریف میشه و با پایان همان اسکوپ، از بین میرن "خب بزار دوباره امتحان کنیمlet counter = 0 function reservation() { counter++ return counter } console.log(reservation()); // 1 console.log(reservation()); // 2 console.log(reservation()); // 3خبببببب جواب داد، با تعریف متغیر عمومی همه چیز درست شد و طبق قانون نانوشته برنامه نویس ها " اگه کار میکنه بهش دست نزن " کارمون به پایان رسید.اما بعداز چند وقت میخوایم برنامه رو توسعه بدیم و یک تابع دیگه بنویسیم که تعداد کنسلی ها رو هم نشون بده این تابع هم نیاز به شمارنده داره این که کاری نداره با یک متغیر عمومی جدید حلش میکنیم . اما این کار میتونه یکسری مشکل به وجود بیاره مثلااگر این متغیر های عمومی از نوع var باشن که میتونن بدون هیچ اروری چندبار تعریف بشن و کل کارکرد برنامه بهم بریزهاگر از let استفاده کنیم باعث Memory Leaks و هدر رفتن حافظه میشهیکی از راه حل هایی که متغیر هامون ثبات و امنیت بیشتری دارن استفاده از کلوژر هستش پس بریم بنویسیمشاساس کار closure اینه که میتونیم یک متغیر داخل تابع بسازیم که بعد از هربار اجرا شدن Garbage collection این متغیر از بین نمیرهfunction reservation() { let counter = 0; return function () { counter++; return counter; }; } let reservationCount = reservation(); console.log(reservationCount()); // 1 console.log(reservationCount()); // 2 console.log(reservationCount()); // 3 با این روش مشکلمون حل میشه و در نهایت یک متغیری ساختیم که ثبات و امنیت بیشتری داره و برناممون قابل توسعه تر میشه

بررسی event propagation در جاوااسکریپت

Davood Habbabi — Wed, 16 Mar 2022 17:11:54 +0330

مفهوم event propagation خیلی ساده و در عین حال کاربردیه و اگر ازش مطلع نباشیم واقعا ازار دهنده خواهد بود اگر بخوایم به زبان ساده این مفهوم رو توضیح بدیم در واقع وقتی یک ایونتی روی یک المت اتفاق می افته فقط روی همون یه دونه المنت اتفاق نمی افته بلکه توی المنت های والدش هم اتفاق می افته به عنوان مثال به کد زیر دقت کنید.

This is P element This is span element

با توجه به کد بالا اگر فانکش log رو به صورت زیر در نظر بگیریم function(text){ console.log(text) }وقتی روی نوشته This is P element کلیک کنیم توقع داریم توی کنسول مقدار "p" رو ببینیم ولی اینطور نیست و ما به ترتیب دو مقدار p و div رو خواهیم دید دلیلش پدیده ای هست که بهش می گیم event bubbling تعریف event bubblingدر واقع وقتی یه ایونتی توی صفحه اتفاق می افته (مثلا کلیک) اون ایونت از المنت target (المنتی که ایونت از اون شروع شده) به سمت والد خودش حرکت می کنه تا به document و window برسه و اگر ما برای والد های المنت target ایونت تعریف کرده باشیم همه اون ها اجرا خواهند شد تعریف event capturingبه برعکس همین پدیده می گن event capturing در واقع مسیر حرکت ایونت ها برعکسه یعنی ایونت از window شروع می شه و به المنت target می رسه یعنی توی مثال بالا اگر event capturing اتفاق بیفته ما به ترتیب دو مقدار div و p رو خواهیم داشت (ترتیب مهمه)توی مرورگر ها به صورت پیشفرض event bubbling اتفاق می افته و برای این که بتونیم event capturing داشته باشیم باید ارگومان سوم تابع addeventlistener رو true کنیم به مثال دقت کنید element.addEventListener("click", log, true);و اگر بخوایم کلا event propagation اتفاق نیفته و جلوگیری بشه ازش باید از کد event.stopPropagation();استفاده کنیمامیدوارم مفید باشه :)آقا داود

آبجکت لیترال‌ها در جاوا اسکریپت

الهام زین‌الدینی — Sat, 10 Jul 2021 12:39:07 +0430

آبجکت لیترال لیستی از جفت name-value هایی است که با کاما از هم جدا میشن و درون curly brace یا ({}) قرار دارند. valueها میتونن خصوصیات (properties) و توابع (functions) باشند. در قطعه کد زیر آبجکت لیترالی با یک property و یک function رو مشاهده می‌کنید :an object literal with one property and one valueو در قطعه کد زیر از آبجکتی که ایجاد کردیم برای لاگ (log) کردن fullName و فراخوانی (call) متد Greet با مقدار fullName استفاده می‌کنیم :فرض کنید می‌خواهیم که به خصوصیت fullName داخل متد Greet دسترسی داشته باشیم، به جای اینکه اون رو از یک پارامتر بخونیم . اگر بخوایم به این روش بهش دسترسی داشته باشیم خطای ReferenceError fullName is not defined دریافت میکنیم :به جای این‌کار می‌توان تابعی به نام ()getFullName ایجاد کرد که به مقدار پراپرتی fullName از طریق this دسترسی دارد :و خروجی قطعه کد بالا مطابق زیر خواهد بود :تمامی اعضای یک آبجکت لیترال ( چه property و چه value ) عمومی هستند. تنها جایی که می‌توانید یک عضو را به صورت خصوصی تعریف کنید درون یک تابع است. برای مثال در قطعه کد زیر یک متغیر خصوصی درون متد Greet تعریف کرده‌ایم تا پیام (message) را کاستومایزتر کنیم :متغیر customeMessage فقط در اسکوپ متد Greet قابل دسترسی است، اما اگر خارج از این متد و به عنوان یک خصوصیت (property) قرار گرفته بود دارای دسترسی عمومی بود. تخصیص یک آبجکت لیترال به یک متغیر دیگر تنها یک کپی سطحی ایجاد می‌شود یعنی یک متغیر ساخته می‌شود و به مکانی در حافظه، که مقدار متغیر قبلی در آن قرار گرفته است، اشاره می‌کند. پس اگر شما مقدار متغیر اول را تغییر دهید، متغیر دوم هم تغییر می‌کند. و همین‌طور اگر مقدار متغیر دوم را تغییر دهید، مقدار متغیر اول هم تغییر می‌کند، یعنی به جای خود مقدار (value) یک رفرنس از آن دریافت می‌کنید. فرضا می‌خواهیم با استفاده از آبجکتی که تا کنون ایجاد کردیم (greetings) یک آبجکت دیگر به نام anotherGreeting ایجاد کنیم :انجام این‌کار ممکن است در وهله اول بدون اشکال به نظر برسد، اما نکته اینجاست که هر تغییری در anotherGreeting رخ دهد در greetings نیز اعمال خواهد شد :و در آخر، می‌تونید اعضای یک آبجکت لیترال رو دستکاری کنید، یعنی می‌تونید اون‌ها رو به دلخواه خودتون و مثل قطعه کد زیر حذف یا اضافه کنید : آبجکت لیترال‌ها باید در مواقعی استفاده بشن که نمی‌خواهید مقادیر (values) اون‌ها رو در یک آبجکت دیگه کپی کنید . اگر هم به نمونه‌های متعدد (multiple instances) از آبجکتی خاص احتیاج دارید از سازنده یا constructor استفاده کنید.

امنیت (node.js (Injections

Alireza Taji — Sun, 20 Dec 2020 19:17:46 +0330

چند نوع از injection ها رو در این قسمت مقاله بررسی می کنیم :JS Injectionهرگز هرگز هرگز ورودی های یوزر رو به عنوان یک پارامتر از eval , setTimeout , setInterval عبور ندید!!!تابع eval یک استرینگ رو می گیره و اون رو اجرا می کنهتوابع setTImeout, setInterval یک فانکشن به عنوان کالبک میگیرند و اون رو اجرا می کنندیک مثال ساده ://... const username = 'process.exit()'; eval(username); //...وقتی که شما کد رو اجرا کنید پراسس نود جی اس بسته میشه.FS Injectionمانند مثال بالا اگر ورودی یوزر رو به عنوان پارامتر از توابع eval , setTimeout , setInterval عبور بدیم هکر می تونه فایل های داخل سرور رو ببینه ، اون ها رو بخونه و اون ها رو تغییر بده یا حذف کنه‌!یک مثال برای این نوع از حملات ://... router.post('/get-username', (req, res) => { res.send(eval(req.body.username)); }اگر یوزر به این روتر در خواست بزنه و username این عبارت بذاره :request-body : { username : "require('fs').readdirSync('.').toString()" }می تونه تمام فایل های داخل مسیر فعلی کد ببینه.چطور باید از این حملات جلوگیری کنیم‌‌؟۱. ورودی های یوزر رو validate کنید ( می تونید از پکیج هایی مثل joi , fastest-validator‌‌ استفاده کنید )۲. ورودی های یوزر رو از توابعی که بالا گفته شد به عنوان پارامتر عبور ندیدNoSql Injectionهکر می تونه با استفاده از این ترفند به اطلاعاتی که نباید دسترسی پیدا کنه ، دسترسی پیدا کنه یا تغییر در اون ها اعمال کنه!به طور مثال حمله کننده می خواد با استفاده از نام کاربری یکی دیگه وارد بشه ولی رمزش رو نداره.//... router.post('/login', (req, res) => { User.findOne({ username : req.body.username, password : req.body.password }).then(user => res.send(user); }هکر از این ترفند استفاده می کنه تا به حساب کاربری دسترسی پیدا کنه :request-body : { username : "alireza", password : { $gt : "" } }مانگو دی بی اطلاعات یوزری رو می فرسته که :username اون alireza باشه و password اون بزرگتر از "" باشه (یعنی هر پسوردی)چطور باید از این حملات جلوگیری کنیم‌‌؟1. ورودی های یوزر رو sanitize کنید ( می تونید از پکیج های mongo-sanitize , express-mongo-sanitize استفاده کنید)۲. از $eq استفاده کنید۳. یک ورودی رو به عنوان کوئری پیدا کنید و بقیه اطلاعاتی که باید چک کنید رو از طریق if چک کنیدتوی سری های بعدی امنیت در وب سایت های node.js به سایر مباحث امنیتی هم می پردازیم‌:)

پرامیس ها در جاوااسکریپت | Promises in JavaScript

Alireza Taji — Tue, 15 Dec 2020 23:35:47 +0330

برای این که پرامیس ها رو بفهمیم باید اول این موضوعات رو بررسی کنیم :Blocking vs Non-Blockingعملگر هایی که یک ترد thread اپلیکیشن جاوا اسکریپت رو مشغول می کنند ( به اصطلاح بلاک می کنند ) ‌، عملگر های blocking هستند.حالا مشکل این عملگر ها کجاست‌؟- جاوااسکریپت فقط یک ترد داره و وقتی اون ترد درگیر بشه باید صبر کنه تا اون ترد آزاد بشه بعد به بقیه در خواست ها پاسخ بده!ولی ما این مشکل رو با عملگر های non-blocking نداریم چون این عملگر ها ترد رو به طور کامل مشغول نمی کنند.عملگر های blocking به صورت synchronous کار می کنند و عملگر های non-blocking به صورت asynchronous کار می کنند.به طور ساده تر بخوام بگم ، یک رستوران گارسون های زیادی داره و برای ثبت سفارش مشتری ها گارسون کم نمیاره پس هر گارسون به سراغ یک میز میره و منو غذا ها رو تحویل میده و منتظر می مونه تا مشتری سفارش رو بده‌ (مثال برای synchronous) ، تا وقتی که تعداد گارسون ها زیاد باشه مشکلی پیش نمیاد ولی اگر گارسون ها کم باشن راه حل اینه :گارسون سراغ یک میز میره و منو رو تحویل میده و سراغ میز بعدی میره ، وقتی مشتری سفارشش رو انتخاب کرد گارسون رو خبر می کنه تا سفارش رو ثبت کنه‌ (مثال برای asynchronous)Talk is cheap show me the code!یک مثال از متد های synchronous :const fs = require('fs'); const data = fs.readFileSync('/file.txt');وقتی متد readFileSync اجرا میشه process (روند) اپلیکیشن جاوا اسکریپت متوقف میشه تا فایل file.txt رو بخونه.یک مثال از متد های asynchronous :const fs = require('fs'); function callback(err, data) { if (err) throw err; } fs.readFile('/file.md', callback); ولی وقتی متد readFile اجرا میشه روند اپلیکیشن متوقف نمیشه و ادامه پیدا می کنه و زمانی که اطلاعات مورد نظر بدست اومد ، تابع callback صدا زده میشه و اطلاعات مورد نظر رو میشه از پارامتر data بدست آورد.نکته : تا جای ممکن از متد های asynchronous استفاده کنید تا پراسس مشغول نشه!!بجز callback ها روش های دیگه ای هم برای گرفتن مقدار از متد های asynchronous هست ....حالا بر می گردیم به بحث پرامیس ها :پرامیس معنی لغویش "قول دادن" هست ، در عمل یعنی پرامیس ها به شما قول میدن که یک جواب در ازای متدی که صدا زدید میده (چه اون جواب یک ارور باشه یا یک مقدار).دو راه برای گرفتن مقدار پرامیس ها : then, catchasync, await then, catchنکته : کلاس Promise یک کلاس گلوبال جاوااسکرپیته برای ساختن پرامیس هایک مثال برای این نوع :var p1 = new Promise((resolve, reject) => { resolve('Success!'); // or // reject(new Error("Error!")) }); p1.then(value => { console.log(value); // Success! }) .catch(reason => { console.error(reason); // Error! });اگر عملیات موفق بود .then اجرا میشه ولی اگر موفق نبود .catchasync, awaitیک مثال برای این نوع :var p1 = new Promise((resolve, reject) => { resolve('Success!'); // or // reject(new Error("Error!")) }); async function getValue() { const value = await p1; console.log(value); } getValue();وقتی تابع getValue صدا زده میشه پرامیس مقداری که باید رو میده (برای catch کردن ارور ها باید از try, catch استفاده کنید)توی این مقاله به صورت خیلی سطحی به این مبحث پرداختیم در مقاله های بعدی به صورت کامل تر توضیح میدم :)

مشکل نصب eslint

Davood Habbabi — Sat, 21 Nov 2020 14:08:39 +0330

خب ظاهر این ارور این شکلیه در واقع داره توضیح می ده که به صورت دستی eslint رو تغییر ندید و node modules رو پاک کنید و روندی که هیچ کمکی به حل مشکل نمی کنه و در واقع این یه پیشنهاد عمومی برای رفع مشکلاته کلی گشتم یه جوابی پیدا کردم که نمی دونم چه تاثیراتی روی پروژه می ذاره ولی کار کردروند اینه توی پروژه فایل env. رو پیدا کنید و اگر نیست ایجاد کنید این خط رو بهش اضافه کنید SKIP_PREFLIGHT_CHECK=trueسیو کنید npm start رو متوقف و از نو npm start بزنید :)لطفا اگر کسی اطلاع داره این چه تاثیری روی پروژه می ذاره بهم توی کامنت ها بگید

تفاوت var و let و const در جاوا اسکریپت

Alireza Taji — Mon, 29 Jun 2020 21:52:05 +0430

پیش نیاز ها : (این مقاله ها رو قبل خوندن این پست مطالعه کنین)اسکوپ ها در جاوا اسکریپتمتغیر ها رو می تونیم به چند صورت تعریف کنیم ، با استفاده از :varletconstWithout declaring (بدون دکلار کردن)ساختن متغیر بدون دکلار کردن :تنها استفاده این نوع تعریف کردن متغیر، استفاده در فانکشن هاست.این نوع متغیر ها تنها نوعی هستند که می تونن در function scope تعریف بشن و همینطور در global scope بشه ازشون استفاده کرد.function name(){ x = 10; } name(); console.log(x);نکته : حتما باید تابع رو صدا بزنید تا متغیر تعریف بشهامااگر strict mode فعال باشه حتما باید متغیر ها رو با استفاده از var , const یا letاستفاده کنید و نمی تونین به این شکل تعریف کنینتفاوت var با let :اگر تفاوت این دو تا رو یاد بگیرین تفاوت const با var هم یاد می گیرید.Let و const فقط یک تفاوت دارنمتغیر هایی که با var تعریف میشن ویژگی هایی داره که let نداره :Hoisting :فقط و فقط این قابلیت رو var داره ،این ویژگی باعث میشه که متغیر هایی که دکلار میشن به بالا ترین خط اسکوپ خودشون برن ، به عبارتی شما می تونین یه متغیر رو تعریف کنین قبل از این که دکلارش کنینfunction run() { console.log(foo); // undefined var foo = "Foo" console.log(foo); // Foo } run();اما حالا با let تست کنیم :function run() { console.log(foo); // RefrenceError let foo = "Foo" console.log(foo); // Foo } run();Block scope :وقتی یک متغیر رو با var داخل block scope دکلار کنیم اون متغیر به صورت گلوبال ذخیره میشه ولی اگر با let دکلار بشه ، اون متغیر توی block scope ذخیره میشه{ var n1 = 5; let n2 = 6; } console.log(n1) //5 console.log(n2) //RefrenceErrorGlobal object :وقتی ما میگیم یه متغیر گلوباله یعنی اون متغیر توی global execution contextذخیره شده و هر دوی متغیر های let , var توی گلوبال اسکوپ ، در global execution contextذخیره میشنولی Global object با global execution context فرق داره ، گلوبال آبجکت همون window یا globalThis (در commad line node)متغیر let به عنوان یه property داخل گلوبال آبجکت ذخیره نمیشه ولی var میشهvar a = 2; console.log(window.a) // 2 let b = 3; console.log(window.b) //undefinedRedeclaration :فقط var قابلیت redeclaration داره و letنداره (redeclaration به معنای مجددا دکلار کردن یه متغیره)var foo = "foo1" var foo = "foo2" // OK let bar = "bar1" let bar = "bar2" // SyntaxErrorسوال : وقتی let هیچکدوم از قابلیت هایی که varداره رو نداره برای چی ازش استفاده کنیم؟این باعث میشه که مقدار کمتری از حافظه برنامه استفاده بشه و در مواقعی باعث جلوگیری از ساخت متغیر گلوبال اضافه میشه!خب گفتیم let و const فقط یک تفاوت دارن :Reassignable :متغیر هایی که با const ساخته میشن این ویژگی رو دارن که باعث میشه نتونیم مقدار اون ها رو عوض کنیمconst v = “a”; v = “b”; // TypeErrorنکته : در object ها می تونیم مقدار property ها رو عوض کنیم ولی نمی تونیم object رو دوباره assignکنیمconst obj = {type : 'string'} obj = {type : 'number'} // TypeError obj.type = 'number'; //OKبا آرزوی موفقیت :))-انتشارات توسعه دهندگان وب-

چگونه توابع (functions) در جاوا اسکریپت کار می کنند؟؟

Alireza Taji — Sat, 27 Jun 2020 11:58:52 +0430

تا حالا به این فکر کردید وقتی یه متغیر رو صدا می زنید چه اتفاقاتی میفته تا اجرا بشه ؟همه فانکشن ها یه نوع متغیر حساب میشن.وقتی که برنامه اجرا میشه ، از اونجایی که جاوا اسکریپت asynchronous کار می کنه (در یه مقاله دیگه توضیح میدم)به همین دلیل اول از همه تمام متغیر ها رو به صورت undefined دکلار می کنه و همینطور اسم متغیر ها رو داخل global execution context ذخیره می کنه به همراه اون خطی که متغیر اونجا دکلار شده.function double(a) { let myvar = a * 2; return myvar; } let b = doube(2); alert(b);طبق مثال بالا برنامه اجرا میشه و توی خط اول یه متغیر به نام double داخل exection context ایجاد میشه که مقدارش undefined ئه و بعد برنامه تشخیص میده که این متغیر یک تابعه، پس تمام مقادیر داخل {} به این متغیر اختصاص می گیره ولی نه اجرا میشه نه خونده میشه فقط و فقط داخل exection context ذخیره میشه.برنامه اجرا میشه و جلو تر یه متغیر به نام b میرسه و دوباره با مقدار undefined ذخیره می کنه و وقتی جلو تر میره ، عملگر = رو می بینه که مقدار (double(2 رو به b نسبت داده و مقدار b در execution context تغییر می کنهخب برنامه وقتی که () می بینه متوجه میشه که این یه تابعه و داخل global exection context دنبال اسم double میگرده و اون رو پیدا می کنه و خطی که اون فانکشن اونجا قرار داره رو می گیره (خط یک برنامه) اجرای برنامه به خط یک میره و اونجا 2 به عنوان یک argument وارد فانکشن میشه.خب الان execution context عوض شدچون ما از گلوبال اسکوپ به لوکال اسکوپ رفتیم (پست مربوط به اسکوپ ها رو بخونید) و این بار متغیر ها در local execution context ذخیره میشن.متغیر myvar مثل بقیه متغیر ها ذخیره میشه.و برنامه به return میرسه ، وقتی return انجام میشه local execution context از بین میره (با متغیر هایی که داخلش ساخته شده)و اجرای برنامه دوباره به جایی که این فانکشن رو صدا زدیم بر می گرده و مقدار خارج شده از return به b تعلق می گیره.در نهایت (alert(b اجرا میشه.-انتشارات توسعه دهندگان وب-

اسکوپ ها (scope) در جاوا اسکریپت

Alireza Taji — Wed, 24 Jun 2020 20:38:26 +0430

امروز می خوام scope ها در جاوااسکریپت رو به زبان ساده توضیح بدم.معادل فارسی اسکوپ محدوده هست که مشخص می کنه هر متغیر در این زبان در چه محدوده ای قابل استفادست.یعنی نمیشه همه جای محیط برنامه به یه سری متغیر ها دسترسی پیدا کرد.خب ما در کل توی جاوااسکریپت چهار نوع اسکوپ :Global scopeFunction scope (local scope)Lexical scopeBlock scope (ES6)خب هر کدوم از این scope ها قواعد و ویژگی های مخصوص خودشون رو دارند، که به ترتیب توضیح میدمGlobal scopeاین اسکوپ تمام اسکوپ های برنامه رو در بر می گیره ، به عبارتی هر اسکوپی که شما می سازید زیر مجموعه این اسکوپ قرار می گیرهمیشه گفت شهری که شما داخلش زندگی می کنید یه گلوبال اسکوپه و تمام خونه ها و مغازه های داخل شهر سایر اسکوپ ها هستنددر برنامه نویسی سمت کلاینت object window اسکوپ گلوبال محسوب میشهنکته : object document گلوبال نیست و جزو زیر مجموعه window محسوب میشهBlock scopeما با ساختن هر کدوم از این موارد یه block scope ساختیم:If, else statementBlock scope {}Labled scopeTry, catchاگر متغیری رو با const یا let داخل بلاک اسکوپ تعریف (declare کردن) کنیم، داخل گلوبال اسکوپ قابل استفاده نیستند !اما اگر متغیر ها رو تعریف نکنیم (مستقیما یه مقدار به متغیر بدیم بدون استفاده از var , let یا const) یا اون رو با var تعریف کنیم اون ها در گلوبال اسکوپ قابل استفاده هستند.مثل لوازم خونه شما می مونه همه مردم شهر نمی تونند از لوازمی که توی خونه شما هست استفاده کنن اما اعضای خونه می تونننکته : اگر strict mode رو فعال کنید باید حتما متغیر ها رو تعریف کنید و نمی تونید مستقیم به اون ها یه مقدار بدینFunction scope (local scope)خب این اسکوپ یکی از تفاوت هایی که داره اینه که توی این اسکوپ متغیر var متغیر گلوبال محسوب نمیشه اما شما می تونید متغیر رو بیرون این اسکوپ تعریف کنید (توی محیط برنامه ، گلوبال اسکوپ) و داخل اسکوپ به اون یه مقدار بدین و از اون توی اسکوپ گلوبال استفاده کنیدیامی تونید متغیر رو تعریف نکنید ( از var , let , const استفاده نکنید) و مستقیما داخل تابع بهش یه مقدار بدیدنکته : برای استفاده از متغیر های function scope باید اول فانکشن رو صدا بزنید تا برنامه اون فانکشن رو اجرا کنه وگرنه هیچ متغیری وجود نخواهد داشتLexical scopeاین ویژگی باعث میشه که هر اسکوپی به تمام متغیر های اسکوپ های بالا تر از خودش (اسکوپ هایی که خود اسکوپ زیر مجموعه اون حساب میشن) دسترسی پیدا کنهمثال : هر عضو از خونه شما می تونه به امکاناتی که در شهر وجود داره دسترسی پیدا کنهبرای این که اسکوپ ها رو بفهمید باید خودتون کد های مختلف در اسکوپ های مختلف بنویسید و اسکوپ ها رو تست کنید!!امیدوارم این پست براتون مفید بوده باشه :))