https://virgool.io/feed/@thismoj هر باگی مخرب نیست. بعضی باگ ها باید بیان و برن تا قدر فیچر های زندگیمون رو بدونیم :) fa 2026-06-17 04:43:43 https://files.virgool.io/upload/users/135149/avatar/qkjoQC.png?height=120&width=120 https://virgool.io/@thismoj https://virgool.io/@thismoj/function-composition-fsnusdpusitt ترکیب توابع، فرایند ترکیب دویا چند تابع برای تولید تابعی جدید است.این کار مانند این می ماند که چند لوله را از یک یا چند لوله برای ترکیب مواد داخل هم استفاده کنیم.گاهی ممکن است در مصاحبه های کاری برنامه نویسی یا یه همچین جاهایی از شما راجب composition سوالاتی بپرسن، یا حتی زمان کد نویسی نیاز به الگویی برای طراحی راحتر ( یا شایدم جاگیزین :) ) ارث بری داشته باشید.اگه همینطوره، این مقاله برای شماست.اول بیاین با هم دو تابع رو ' f ' و ' g ' رو ترکیب کنیم:‌ ` f(g(x)) `که میدونیم به ترتیب: اول x بعد g و بعدش f محاسبه میشه.مثال زیر را به زبان جاوااسکریپت نگاه کنید:‌ function swimmer({ name }) { return { swim: () => console.log(`${name} swam`) } } function swimmerPersonCreator(name) { const person = { name } return { ...person, ...swimmer(person) } } const person = swimmingPersonCreator(&quotAli&quot) person.swim()به سادگی میتونیم متوجه بشیم که برای قابلیت های دیگه هم میتونیم توابع دیگری اضافه کنیم.مثلا میتونیم تابع runner به معنای دونده رو دقیقا مثل تابع swimmer بسازیم و تابعی برای سازنده ی اون.همچنین امکان استفاده مجدد از توابع برای سازنده های دیگر هم وجود دارد و این نقطه قوت Function composition هستش.فقط یادمون باشه زمان نوشتن توابع اونها باید به صورت خام مورد استفاده قرار بگیرن ( تمامی ورودی ها باید فقط توسط تابع اصلی قابل تغییر باشد ).اگر مثل من به Functional Programming در جاوااسکریپت علاقه مند هستید، پیشنهاد میکنم راجب به ابزار هایی مثل loadash و mori اطلاعات بیشتری کسب کنید. ( شایدم یه مقاله راجبش نوشتم :×) ) Mojtaba Shafiee Mojtaba Shafiee Fri, 30 Oct 2020 16:58:48 +0330 https://virgool.io/@thismoj/%D8%AA%D9%88%D8%A7%D8%A8%D8%B9-%DA%A9%D9%84%D8%A7%D8%B3-%D8%A7%D9%88%D9%84-first-class-functions-rnpwzg1bxmpv به هر زبان برنامه نویسی که با توابع خود مثل شهروند درجه اول برخورد کند؛ میگوییم آن زبان برنامه نویسی داراری توابع کلاس اول میباشد. در واقع باید زبان مورد نظر از این ویژگی ها ساپورت کند:اختصاص دادن مقدار یک تابع به یک متغیر.فرستادن تابع به عنوان آرگومان تابعی دیگر.برگردانندن یک تابع به عنوان مقدار نهایی یک تابع دیگر.ذخیره کردن تابع در داده ساختار های مختلف.بتواند متد ها و ویژگی های خاص خودش را نگه دارد.// Function definition function speak() { console.log('Hello'); } speak(); // logs &quotHello&quot // Store in a variable var talk = speak; talk(); // logs &quotHello&quot // Pass as an argument to a function function functionCaller(fn) { fn(); } functionCaller(speak); // logs &quotHello&quot // Return from a function function functionReturner(fn) { return function(name) { return `${fn()} ${name}`; } } function returnHi() { return 'Hi'; } let greeting = functionReturner(returnHi)('Ali'); console.log(greeting); // logs &quotHello Ali&quot // Store in a data structure const myFuncs = [talk]; myFuncs[0](); // logs &quotHello&quot // Owns properties talk.myProperty = &quotbananas" console.log(talk.myProperty); // logs &quotbananas&quotابتدا در خط دوم تابع ()speak رو تعریف کردیم که عبارت "Hello" رو چاپ میکنه؛ و توی خط ۵ اون رو صدا زدیم (call). در خط ۸ همانطور که میبینید توانستیم تابع رو به یک متغیر نسبت بدیم و همواره talk === speak صحیح میباشد.در خط ۱۲ ویژگی مورد علاقه من نمایش داده شده (پاس دادن تابع به تابعی دیگر به عنوان آرگومان :))به همین خاطره که در توابعی مثل setTimeout آرگومان اول یک تابع است.(نکته اخلاقی: هیچوقت برای پاس دادن یک تابع به عنوان آرگومان از پرانتز استفاده نکنید! چون به معنای فراخوانی اون تابع محسوب میشه و همونجا اجرا میشه)خط هفدهم یک تابع به عنوان مقدار نهایی یک تابع دیگر برگشت داده میشود که خود دارای یک آرگومان دیگر است و در خط ۲۵ به نحو نمایش داده شده آرگومان ها به تابع پاس داده میشوند.خط ۲۸ تابع talk که در بالا تر تعریف کردیم به عنوان مقدار صفرم آرایه myFuncs ست میشود که نشان دهنده همان ویژگی "ذخیره کردن تابع در داده ساختار های مختلف" میباشد.در خط ۳۱ یک ویژگی یا property به تابع (اینجا مثل آبجکت:)) نسبت داده میشه و در خط بعدی داخل کنسول نمایش داده میشود.امیدوارم این مقاله مورد پسنده شما بوده باشه؛ سعی کردم از توضیحاتم کم کنم... اما اگر مشتاقید راجب first-class functions حتی در زبان های برنامه نویسی دیگه اطلاعات کسب کنید میتونید از ویکی پدیااستفاده کنید. Mojtaba Shafiee Mojtaba Shafiee Wed, 12 Aug 2020 16:24:28 +0430 https://virgool.io/@thismoj/%D8%AD%D8%A7%D8%B6%D8%B1%DB%8C-%D8%AA%D9%88%DB%8C-object-%D9%87%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%B9%D9%85%DB%8C%D9%82-%D8%AA%D8%B1%DB%8C-%D8%B4%DB%8C-ewx7gzcs4rzc سلام دوستان عزیز :) امروز قصد دارم راجب بحث پرکاربرد Object ها در جاوا اسکریپت (کمی بیشتر از یه ذره) باهاتون صحبت کنم.استفاده از آبجکت ها در جاوا اسکریپت خیلی ساده و بدون درد سر (نسبت به زبان های دیگه) هست که همین باعث میشه اکثر توسعه دهنده ها کمتر به مسائل ریز دقت کنند و به همین مقدار کم بسنده میکنن. توی این مقاله سعی میکنم راجب برخی مفاهیم اطلاعاتم رو در اختیار شما بزارم.خب هممون از تعریف کلیشه ای آبجکت که میگن خسته شدیم و هممون میدونیم که اشیاء دارای ویژگی (property) و عملکرد (method) هستند که ... ؛ اما بزارید کمی وارد محیط کد زنی بشیم (که برنامه نویسا با کد حال میکنن :))) )const obj= { a: 5, b: 6, add: function() { return this.a + this.b; }} // obj -> { a: 5, b: 6, add: [Function: add] }آره؛ به همین سادگی. اگر با زبان های سطح پایین کار کرده باشید میدونید چقدر برای همین آبجکت ساده باید بجنگید! (فلسفه زبان های اسکریپتی هم همینه که کمتر درگیر مسائل سطح پاین بشیم ؛))خب حالا بریم سراغ معرفی چنتا ویژگی از همین آبجکت ها؛استفاده از setters and getters:const obj= { _name: &quotMojtaba&quot, get name() { return this._name; }, set name(value) { this._name= value; } } console.log(obj.name); // &quotMojtaba&quot obj.name= &quotAli&quot console.log(obj.name); // &quotMojtaba&quot // obj -> { _name: 'Mojtaba', name: [Getter/Setter] }توضیح این قطعه کد خیلی سادس؛ اول بزارید روش سنتی و قدیمی رو هم ببینیم تا بیشتر راجبش صحبت کنیم.const obj= { _name: &quotMojtaba&quot, getName() { return this._name }, setName(value) { this._name= value } } console.log(obj.getName()); // &quotMojtaba&quot obj.setName('Ali');console.log(obj.getName()); // &quotAli&quot /* obj -> { _name: 'Mojtaba', getName: [Function: getName], setName: [Function: setName] } */ بارز ترین تفاوتی که میتونیم متوجه بشیم اینه که برای گرفتن مقدار name در getter بدون پرانتز این کارو انجام میدیم ولی توی روش قدیمی دقیقا function call انجام میشه؛ همچنین برای ست کردن name در setter سمت راست مساوی ("obj.name= "Ali) که "Ali" هست به عنوان آرگومان به تابع set name پاس داده میشود؛ اما در روش سنتی این کار باز هم توسط function call انجام میشود.(باید گفت که این ویژگی ها در کلاس ها هم به همین صورت صدق میکنه)تابع سازنده (constructor) :تا اینجای کار ما به صورت مستقیم دست به ساخت ابجکت ها میزدیم؛ اما اگه بتونیم یه سازنده داشته باشیم که خودکار این کارو انجام بده ایده ی بدی نیست :)function Person(name, age) { this.name= name; this.age= age; this.presentation= function() { return `Hello, my name is ${this.name} and i'm ${this.age} years old.` } } const ali= new Person('Ali', 24); console.log(ali.presentation()); // Hello, my name is Ali and i'm 24 years old.توابع سازنده رو که بیشتر از کلاس ها میشناسیم؛ قبل از استاندارد ES6 به صورت بالا پیاده سازی میشد؛ اما میتونیم از سازنده ها توی ساختار کلاس ها به صورت زیر کد نویسی کنیم: class Person { constructor(name, age) { this.name= name; this.age= age; } get presentation() { return `Hello, my name is ${this.name} and i'm ${this.age} years old.` } } const sara= new Person('Sara', 21); console.log(sara.presentation);ساختار بالا ساختار تمیز تری به نظر میاد و کار باهاش منطقی تره و از اونجایی که هدف این مقاله توضیح ساختار کلاس ها نیست ازش عبور میکنیم :)برسی متد ها و ویژگی های Object:تابع سازنده ()Object:با استفاده از این تابع سازنده میتونیم بهش یه آبجکتی پاس بدیم؛ که برامون همون آبجکت رو بسازه (چه مسخره). اما اگه هیچ مقداری پاس ندیم یا null و یا undefined پاس بدیم؛ یه آبجکت خالی برامون میسازه.const obj1= new Object() // obj is an empty object -> {} const obj2= new Object(value) // value can be an objectمتد ()Object.assign:این متد برعکس ویژگی قبلی پر کاربرده و برای کپی کردن یک یا چند آبجکت به یک آبجکت مورد استفاده قرار میگیره؛‌ همونطور که در مثال زیر میبینید آبجکت مقدار source داخل آبجکت target کپی شده و مقدار اصلی آبجکت target رو تغیر داده و همونطور که میبینید (key) های مشترک رو فاکتور میگیره و آخرین مقدار رو میگیره (منظور از آخرین مقدار؛‌ مقدارِ آخرین آبجکت برای key مشترک هست)مقدار بازگشتی این property هم همون target هست :)const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 }متد ()Object.create:این متد مربوط میشه به بحث مفصل prototype ها که (حتما) توی مقاله های بعد اون رو کامل توضیح میدم؛ اما تعریف کلی این ویژگی این هستش که میتونیم ویژگی های یک آبجکت رو به صورت prototype برای آبجکت جدیدمون به ارث بزاریم. (تاکید میکنم که از یه آبجکت و نه از یه سازنده!)const person = { isHuman: false, printIntroduction: function() { console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); } }; const me = Object.create(person); me.name = 'Matthew'; // &quotname&quot is a property set on &quotme&quot, but not on &quotperson&quot me.isHuman = true; // inherited properties can be overwritten me.printIntroduction(); // expected output: &quotMy name is Matthew. Am I human? true&quotهمونطور که میبینید آبجکت me به صورت prototype هر دو تا ویژگی printIntroduction و isHuman رو به ارث میبره. متد ()Object.entries:متد ()Object.entries یک آرایه از آبجکت های (enumerable) به صورت [key, value] بر میگرداند (توجه کنید که هر آبجکت enumerable! که میتونه حتی یه string باشه.)؛‌ به مثال زیر توجه کنید:const object1 = { a: 'somestring', b: 42 }; console.log(Object.entries(object1)) /* [ [ 'a', 'somestring' ], [ 'b', 42 ] ] */متد ()Object.fromEntrie:این متد دقیقا برعکس متد قبلی هست؛ یعنی اگه چیزی مثل خروجی بالا رو بهش پاس بدیم یه آبجکت به ما بر میگردونه :)const entries = new Map([ ['foo', 'bar'], ['baz', 42] ]); const obj = Object.fromEntries(entries); console.log(obj); // expected output: Object { foo: &quotbar&quot, baz: 42 }متد ()Object.is:زمانی که میخواهیم دو آبجکت رو از نظر برابری property و محتوا برسی کنیم ازش استفاده میکنیم. خروجی این متد مقدار Boolean میباشد.Object.is('foo', 'foo'); // true Object.is(window, window); // true Object.is('foo', 'bar'); // false Object.is([], []); // false var foo = { a: 1 }; var bar = { a: 1 }; Object.is(foo, foo); // true Object.is(foo, bar); // false Object.is(null, null); // true // Special Cases Object.is(0, -0); // false Object.is(-0, -0); // true Object.is(NaN, 0/0); // trueمتد ()Object.keys:این متد یه آرایه از key های یک آبجکت رو به ما بر میگردونه. (میتونیم با استفاده ازش طول یه آبجکت یعنی تعداد property هاش رو به دست بیاریم).const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1)); // expected output: Array [&quota&quot, &quotb&quot, &quotc&quot]متد ()Object.values:این متد هم بر عکس متد بالا فقط value های یک آبجکت رو در قالب یک آراریه بر میگردونه :)const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.values(object1)); // expected output: Array [&quotsomestring&quot, 42, false]نتیجه کلی:‌ امیدوارم از این مقاله استفاده لازم رو کرده باشید؛ توی مقاله های بعدی راجب آبجکت ها بیشتر صحبت میکنیم. Mojtaba Shafiee Mojtaba Shafiee Fri, 07 Aug 2020 18:11:00 +0430