edit-article
Home
Up
Delete
Article Name:
Article Description:
This is part one of a four-part series introducing ‘functional’ programming in JavaScript. In this article we take a look at the building blocks that make JavaScript a ‘functional’ language, and examine why that might be useful.-
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<h1 style="text-align: center;">a gentle introduction to functional programming in javascript</h1> <h2>[WHAT]</h2> <ol> <li>[] This is part one of a four-part series introducing ‘functional’ programming in JavaScript. In this article we take a look at the building blocks that make JavaScript a ‘functional’ language, and examine why that might be useful.</li> </ol> <h2>[WHY]</h2> <ol> <li>[] </li> </ol> <h2>[WHERE]</h2> <ol> <li><strong>[] READ THE FULL ARTICLE</strong></li> <ol> <li>[] <a href="https://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-intro/" target="_blank">https://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-intro/</a></li> </ol></ol> <h2>[WHEN]</h2> <ol> <li>[] 2014-04-22 - original linked part 3 article @ different site</li> <li>[] 2019-11-23 - replaced original link with</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li>[] excerpt by <a href="https://smmry.com/" target="_blank">smmry.com</a></li> </ol> <div><strong><span id="sm_flash_130" style="background-color: transparent; cursor: pointer;">In</span> <span id="sm_flash_131" style="background-color: transparent; cursor: pointer;">JavaScript</span> <span id="sm_flash_132">we</span> <span id="sm_flash_133">have</span> <span id="sm_flash_134">two</span> <span id="sm_flash_135">key</span> <span id="sm_flash_136">building</span> <span id="sm_flash_137">blocks</span>: <span id="sm_flash_138" style="background-color: transparent; cursor: pointer;">variables</span> <span id="sm_flash_139">and</span> <span id="sm_flash_140" style="background-color: transparent; cursor: pointer;">functions</span>.</strong><br /><br /> <span id="sm_flash_175">Now</span>, <span id="sm_flash_176">a</span> <span id="sm_flash_177" style="background-color: transparent; cursor: pointer;">function</span>, <span id="sm_flash_178">on</span> <span id="sm_flash_179">the</span> <span id="sm_flash_180" style="background-color: transparent; cursor: pointer;">other</span> <span id="sm_flash_181">hand</span>, <span id="sm_flash_182">is</span> <span id="sm_flash_183">a</span> <span id="sm_flash_184">way</span> <span id="sm_flash_185">to</span> <span id="sm_flash_186">bundle</span> <span id="sm_flash_187">up</span> <span id="sm_flash_188">some</span> <span id="sm_flash_189">instructions</span> <span id="sm_flash_190">so</span> <span id="sm_flash_191">you</span> <span id="sm_flash_192">can</span> <span id="sm_flash_193">use</span> <span id="sm_flash_194">them</span> <span id="sm_flash_195">again</span>, <span id="sm_flash_196">or</span> <span id="sm_flash_197" style="background-color: transparent; cursor: pointer;">just</span> <span id="sm_flash_198" style="background-color: transparent; cursor: pointer;">keep</span> <span id="sm_flash_199">things</span> <span id="sm_flash_200">organised</span> <span id="sm_flash_201">so</span> <span id="sm_flash_202">you're</span> <span id="sm_flash_203">not</span> <span id="sm_flash_204">trying</span> <span id="sm_flash_205">to</span> <span id="sm_flash_206">think</span> <span id="sm_flash_207">about</span> <span id="sm_flash_208">everything</span> <span id="sm_flash_209">all</span> <span id="sm_flash_210">at</span> <span id="sm_flash_211">once</span>.<br /><br /> <span id="sm_flash_259">Our</span> <span id="sm_flash_260">log</span>() <span id="sm_flash_261" style="background-color: transparent; cursor: pointer;">function</span> <span id="sm_flash_262">is</span> <span id="sm_flash_263">a</span> <span id="sm_flash_264" style="background-color: transparent; cursor: pointer;">variable</span>; <span id="sm_flash_265">which</span> <span id="sm_flash_266" style="background-color: transparent; cursor: pointer;">means</span> <span id="sm_flash_267">that</span> <span id="sm_flash_268">we</span> <span id="sm_flash_269">can</span> <span id="sm_flash_270">do</span> <span id="sm_flash_271">the</span> <span id="sm_flash_272" style="background-color: transparent; cursor: pointer;">same</span> <span id="sm_flash_273">things</span> <span id="sm_flash_274">with</span> <span id="sm_flash_275">it</span> <span id="sm_flash_276">that</span> <span id="sm_flash_277">we</span> <span id="sm_flash_278">can</span> <span id="sm_flash_279">do</span> <span id="sm_flash_280">with</span> <span id="sm_flash_281" style="background-color: transparent; cursor: pointer;">other</span> <span id="sm_flash_282" style="background-color: transparent; cursor: pointer;">variables</span>.<br /><br /> <span id="sm_flash_283">Could</span> <span id="sm_flash_284">we</span>, <span id="sm_flash_285">maybe</span>, <span id="sm_flash_286">pass</span> <span id="sm_flash_287">a</span> <span id="sm_flash_288" style="background-color: transparent; cursor: pointer;">function</span> <span id="sm_flash_289">as</span> <span id="sm_flash_290">a</span> <span id="sm_flash_291" style="background-color: transparent; cursor: pointer;">parameter</span> <span id="sm_flash_292">to</span> <span id="sm_flash_293">another</span> <span id="sm_flash_294" style="background-color: transparent; cursor: pointer;">function</span>?<br /><br /> <strong><span id="sm_flash_335">This</span> <span id="sm_flash_336">ability</span> <span id="sm_flash_337">to</span> <span id="sm_flash_338">put</span> <span id="sm_flash_339" style="background-color: transparent; cursor: pointer;">functions</span> <span id="sm_flash_340">into</span> <span id="sm_flash_341" style="background-color: transparent; cursor: pointer;">variables</span> <span id="sm_flash_342" style="background-color: transparent; cursor: pointer;">is</span> <span id="sm_flash_343" style="background-color: transparent; cursor: pointer;">sometimes</span> <span id="sm_flash_344">described</span> <span id="sm_flash_345">by</span> <span id="sm_flash_346">saying</span> "<span id="sm_flash_347" style="background-color: transparent; cursor: pointer;">Functions</span> <span id="sm_flash_348">are</span> <span id="sm_flash_349">first</span> <span id="sm_flash_350">class</span> <span id="sm_flash_351">objects</span> <span id="sm_flash_352">in</span> <span id="sm_flash_353" style="background-color: transparent; cursor: pointer;">JavaScript</span>."</strong> <span id="sm_flash_354" style="background-color: transparent; cursor: pointer;">What</span> <span id="sm_flash_355">that</span> <span id="sm_flash_356" style="background-color: transparent; cursor: pointer;">means</span> <span id="sm_flash_357">is</span> <span id="sm_flash_358">just</span> <span id="sm_flash_359">that</span> <span id="sm_flash_360" style="background-color: transparent; cursor: pointer;">functions</span> <span id="sm_flash_361">aren't</span> <span id="sm_flash_362">treated</span> <span id="sm_flash_363">differently</span> <span id="sm_flash_364">to</span> <span id="sm_flash_365">other</span> <span id="sm_flash_366" style="background-color: transparent; cursor: pointer;">data</span> <span id="sm_flash_367">types</span> <span id="sm_flash_368" style="background-color: transparent; cursor: pointer;">like</span> <span id="sm_flash_369">objects</span> <span id="sm_flash_370">or</span> <span id="sm_flash_371">strings</span>.<br /><br /> <span id="sm_flash_469">We</span> <span id="sm_flash_470">want</span> <span id="sm_flash_471">to</span> <span id="sm_flash_472">initialise</span> <span id="sm_flash_473">a</span> <span id="sm_flash_474" style="background-color: transparent; cursor: pointer;">carousel</span> <span id="sm_flash_475">for</span> <span id="sm_flash_476">the</span> <span id="sm_flash_477">elements</span> <span id="sm_flash_478" style="background-color: transparent; cursor: pointer;">on</span> <span id="sm_flash_479">the</span> <span id="sm_flash_480" style="background-color: transparent; cursor: pointer;">page</span>, <span id="sm_flash_481">each</span> <span id="sm_flash_482">one</span> <span id="sm_flash_483">with</span> <span id="sm_flash_484">a</span> <span id="sm_flash_485">specific</span> <span id="sm_flash_486">ID.</span> <span id="sm_flash_487">So</span>, <span id="sm_flash_488">let's</span> <span id="sm_flash_489">describe</span> <span id="sm_flash_490">how</span> <span id="sm_flash_491">to</span> <span id="sm_flash_492">initialise</span> <span id="sm_flash_493">a</span> <span id="sm_flash_494" style="background-color: transparent; cursor: pointer;">carousel</span> <span id="sm_flash_495">in</span> <span id="sm_flash_496">a</span> <span id="sm_flash_497" style="background-color: transparent; cursor: pointer;">function</span>, <span id="sm_flash_498">and</span> <span id="sm_flash_499">then</span> <span id="sm_flash_500" style="background-color: transparent; cursor: pointer;">call</span> <span id="sm_flash_501">that</span> <span id="sm_flash_502" style="background-color: transparent; cursor: pointer;">function</span> <span id="sm_flash_503">for</span> <span id="sm_flash_504">each</span> <span id="sm_flash_505">ID.</span> <span id="sm_flash_506" style="background-color: transparent; cursor: pointer;">function</span> <span id="sm_flash_507" style="background-color: transparent; cursor: pointer;">initialiseCarousel(id</span>, <span id="sm_flash_508" style="background-color: transparent; cursor: pointer;">frequency</span>) <span id="sm_flash_509">initialiseCarousel('main-carousel</span>', <span id="sm_flash_510">3000</span>); <span id="sm_flash_511" style="background-color: transparent; cursor: pointer;">initialiseCarousel('news-carousel</span>', <span id="sm_flash_512">5000</span>); <span id="sm_flash_513">initialiseCarousel('events-carousel</span>', <span id="sm_flash_514">7000</span>);.<br /><br /> <span id="sm_flash_515">We</span> <span id="sm_flash_516">have</span> <span id="sm_flash_517">a</span> <span id="sm_flash_518">pattern</span> <span id="sm_flash_519">to</span> <span id="sm_flash_520">follow</span>: <span id="sm_flash_521">when</span> <span id="sm_flash_522">we</span> <span id="sm_flash_523">have</span> <span id="sm_flash_524">the</span> <span id="sm_flash_525" style="background-color: transparent; cursor: pointer;">same</span> <span id="sm_flash_526">set</span> <span id="sm_flash_527">of</span> <span id="sm_flash_528" style="background-color: transparent; cursor: pointer;">actions</span> <span id="sm_flash_529" style="background-color: transparent; cursor: pointer;">we</span> <span id="sm_flash_530">want</span> <span id="sm_flash_531">to</span> <span id="sm_flash_532">take</span> <span id="sm_flash_533">on</span> <span id="sm_flash_534">different</span> <span id="sm_flash_535">sets</span> <span id="sm_flash_536">of</span> <span id="sm_flash_537" style="background-color: transparent; cursor: pointer;">data</span>, <span id="sm_flash_538">we</span> <span id="sm_flash_539">can</span> <span id="sm_flash_540">wrap</span> <span id="sm_flash_541">those</span> <span id="sm_flash_542" style="background-color: transparent; cursor: pointer;">actions</span> <span id="sm_flash_543">up</span> <span id="sm_flash_544">in</span> <span id="sm_flash_545">a</span> <span id="sm_flash_546" style="background-color: transparent; cursor: pointer;">function</span>.<br /><br /> <span id="sm_flash_581">There</span> <span id="sm_flash_582">is</span> <span id="sm_flash_583">definitely</span> <span id="sm_flash_584">a</span> <span id="sm_flash_585">repeated</span> <span id="sm_flash_586">pattern</span>, <span id="sm_flash_587">but</span> <span id="sm_flash_588">we're</span> <span id="sm_flash_589" style="background-color: transparent; cursor: pointer;">calling</span> <span id="sm_flash_590">a</span> <span id="sm_flash_591">different</span> <span id="sm_flash_592" style="background-color: transparent; cursor: pointer;">function</span> <span id="sm_flash_593">for</span> <span id="sm_flash_594">each</span> <span id="sm_flash_595">element</span>.<br /><br /> <span id="sm_flash_618" style="background-color: transparent; cursor: pointer;">Function</span> <span id="sm_flash_619">addMagicClass(id</span>) <span id="sm_flash_620">var</span> <span id="sm_flash_621">unicornEl</span> <span id="sm_flash_622">=</span> <span id="sm_flash_623" style="background-color: transparent; cursor: pointer;">addMagicClass('unicorn</span>'); <span id="sm_flash_624">spin(unicornEl</span>); <span id="sm_flash_625">var</span> <span id="sm_flash_626">fairyEl</span> <span id="sm_flash_627">=</span> <span id="sm_flash_628">addMagicClass('fairy</span>'); <span id="sm_flash_629">sparkle(fairyEl</span>); <span id="sm_flash_630">var</span> <span id="sm_flash_631">kittenEl</span> <span id="sm_flash_632">=</span> <span id="sm_flash_633">addMagicClass('kitten</span>'); <span id="sm_flash_634">rainbow(kittenEl</span>);.<br /><br /> <strong><span id="sm_flash_635">The</span> <span id="sm_flash_636">ability</span> <span id="sm_flash_637">to</span> <span id="sm_flash_638">pass</span> <span id="sm_flash_639" style="background-color: transparent; cursor: pointer;">functions</span> <span id="sm_flash_640">around</span> <span id="sm_flash_641">as</span> <span id="sm_flash_642" style="background-color: transparent; cursor: pointer;">variables</span> <span id="sm_flash_643" style="background-color: transparent; cursor: pointer;">opens</span> <span id="sm_flash_644" style="background-color: transparent; cursor: pointer;">up</span> <span id="sm_flash_645" style="background-color: transparent; cursor: pointer;">a</span> <span id="sm_flash_646">lot</span> <span id="sm_flash_647">of</span> <span id="sm_flash_648" style="background-color: transparent; cursor: pointer;">possibilities</span>.</strong></div> <h2>[HOW-TO]</h2> <ol> <li>[]</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>[] src = hn comments</li> </ol> <div>By Tech.pro - Apply(), Call() and the arguments object</div> <h1 style="text-align: center;"> </h1>