{"id":23522,"date":"2019-01-11T12:15:17","date_gmt":"2019-01-11T10:15:17","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=23522"},"modified":"2019-01-11T11:15:55","modified_gmt":"2019-01-11T09:15:55","slug":"easy-functional-programming-javascript","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/","title":{"rendered":"Not so easy functional programming in JavaScript"},"content":{"rendered":"

Introduction<\/h2>\n

JavaScript allows for operating on arrays in a functional way, e.g. using filter<\/code> or map<\/code> functions. As an argument for these functions we can pass lambda expression or function reference. Is there a difference between them? The answer is yes.<\/p>\n

What’s the problem?<\/h2>\n

In our project we are builing a mapping using String.fromCharCode<\/code> function. To simplify the usage of this function looked similar to:<\/p>\n

[66, 67, 68].map(v => String.fromCharCode(v))<\/pre>\n
When we run this code with node we received [ 'B', 'C', 'D' ]<\/code>, but when we decided to refactor it to use function reference the result was different:<\/p>\n
> [66, 67, 68].map(String.fromCharCode)\n[ 'B\\u0000\\u0000', 'C\\u0001\\u0000', 'D\\u0002\\u0000' ]<\/pre>\n
What happened?<\/h2>\n
To find the reason of this behavior, let’s first play with function String.fromCharCode<\/code> alone:<\/p>\n
> String.fromCharCode(66)\n'B'\n> String.fromCharCode([66, 67, 68])\n'\\u0000'\n> String.fromCharCode(66, 67, 68)\n'BCD'<\/pre>\n
String.fromCharCode<\/code> deals with various types and numbers of arguments.<\/p>\n
Now, let’s examine the function map<\/code>:<\/p>\n
> [66, 67, 68].map(v => v)\n[ 66, 67, 68 ]\n> [66, 67, 68].map((v, u) => [v, u])\n[ [ 66, 0 ], [ 67, 1 ], [ 68, 2 ] ]\n> [66, 67, 68].map((v, u, w) => [v, u, w])\n[ [ 66, 0, [ 66, 67, 68 ] ],\n  [ 67, 1, [ 66, 67, 68 ] ],\n  [ 68, 2, [ 66, 67, 68 ] ] ]<\/pre>\n
map<\/code>, like many other array functions, passes always three arguments to function<\/a>. First is current value, second is the index of current value and third is the whole array.<\/p>\n
It means that passing String.fromCharCode<\/code> to map<\/code> function under the hood looks like this:<\/p>\n
> [66, 67, 68].map((v, u, w) => String.fromCharCode(v, u, w))\n[ 'B\\u0000\\u0000', 'C\\u0001\\u0000', 'D\\u0002\\u0000' ]<\/pre>\n
and it is equal to the initial example.<\/p>\n
Conclusion<\/h2>\n
We have to be careful when we want to use a function which can take more than one argument, but we want to pass only the value. We have to pass the function as a lambda expression:<\/p>\n
> [66, 67, 68].map(v => String.fromCharCode(v))\n[ 'B', 'C', 'D' ]<\/pre>\n
or create another function which ensures that only the first argument will be passed to desired function:<\/p>\n
> const useOnlyValue = f => v => f(v);\nundefined\n> [66, 67, 68].map(useOnlyValue(String.fromCharCode))\n[ 'B', 'C', 'D' ]<\/pre>\n
\n\n\n\n
Published on Web Code Geeks with permission by Dominik Przybysz, partner at our WCG program<\/a>. See the original article here: Not so easy functional programming in JavaScript<\/a><\/p>\n
Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Introduction JavaScript allows for operating on arrays in a functional way, e.g. using filter or map functions. As an argument for these functions we can pass lambda expression or function reference. Is there a difference between them? The answer is yes. What’s the problem? In our project we are builing a mapping using String.fromCharCode function. …<\/p>\n","protected":false},"author":10920,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-23522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"\nNot so easy functional programming in JavaScript - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn about functional programming? Check our article explaining the differences between lambda expression or function reference in javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Not so easy functional programming in JavaScript - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn about functional programming? Check our article explaining the differences between lambda expression or function reference in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-11T10:15:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Dominik Przybysz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@alien11689\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dominik Przybysz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/\"},\"author\":{\"name\":\"Dominik Przybysz\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1f34270399e7cd13c62d5b12d5b3e2a1\"},\"headline\":\"Not so easy functional programming in JavaScript\",\"datePublished\":\"2019-01-11T10:15:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/\"},\"wordCount\":265,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/\",\"name\":\"Not so easy functional programming in JavaScript - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2019-01-11T10:15:17+00:00\",\"description\":\"Interested to learn about functional programming? Check our article explaining the differences between lambda expression or function reference in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Not so easy functional programming in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1f34270399e7cd13c62d5b12d5b3e2a1\",\"name\":\"Dominik Przybysz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93a378c8af563bf9ef4ebdef774d90de157c19eca54497e69e031d097266a381?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93a378c8af563bf9ef4ebdef774d90de157c19eca54497e69e031d097266a381?s=96&d=mm&r=g\",\"caption\":\"Dominik Przybysz\"},\"description\":\"Dominik is a software developer in TouK, committer in Apache Aries and contributor in some open source projects. He writes code using generally the JVM languages, occasionally also makes some scripts in python or shell. Dominik loves testing (especially written in Spock) and any automation in the software development process. He takes care of the clean code (his or someone's else) through frequent code review\",\"sameAs\":[\"http:\/\/przybyszd.blogspot.com\",\"https:\/\/www.linkedin.com\/in\/alien11689\/\",\"https:\/\/x.com\/alien11689\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/dominik-przybysz\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Not so easy functional programming in JavaScript - Web Code Geeks - 2026","description":"Interested to learn about functional programming? Check our article explaining the differences between lambda expression or function reference in javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Not so easy functional programming in JavaScript - Web Code Geeks - 2026","og_description":"Interested to learn about functional programming? Check our article explaining the differences between lambda expression or function reference in javascript","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2019-01-11T10:15:17+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Dominik Przybysz","twitter_card":"summary_large_image","twitter_creator":"@alien11689","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Dominik Przybysz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/"},"author":{"name":"Dominik Przybysz","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1f34270399e7cd13c62d5b12d5b3e2a1"},"headline":"Not so easy functional programming in JavaScript","datePublished":"2019-01-11T10:15:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/"},"wordCount":265,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/","name":"Not so easy functional programming in JavaScript - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2019-01-11T10:15:17+00:00","description":"Interested to learn about functional programming? Check our article explaining the differences between lambda expression or function reference in javascript","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/easy-functional-programming-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Not so easy functional programming in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1f34270399e7cd13c62d5b12d5b3e2a1","name":"Dominik Przybysz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/93a378c8af563bf9ef4ebdef774d90de157c19eca54497e69e031d097266a381?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93a378c8af563bf9ef4ebdef774d90de157c19eca54497e69e031d097266a381?s=96&d=mm&r=g","caption":"Dominik Przybysz"},"description":"Dominik is a software developer in TouK, committer in Apache Aries and contributor in some open source projects. He writes code using generally the JVM languages, occasionally also makes some scripts in python or shell. Dominik loves testing (especially written in Spock) and any automation in the software development process. He takes care of the clean code (his or someone's else) through frequent code review","sameAs":["http:\/\/przybyszd.blogspot.com","https:\/\/www.linkedin.com\/in\/alien11689\/","https:\/\/x.com\/alien11689"],"url":"https:\/\/www.webcodegeeks.com\/author\/dominik-przybysz\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/23522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/10920"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=23522"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/23522\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=23522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=23522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=23522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}