A lot of time when writing different functions, we might want to create ranges in order to work with some data. A range represents data in an array or object with a beginning and end value. <\/p>\n\n\n\n
A lot of languages have built in methods to create ranges, for example JavaScript doesn’t have a specific built-in method for this, but there are many ways we can build ranges. We\u2019ll show you three.<\/p>\n\n\n\n If we want to create a range of numbers and we want them as fast as possible we can use the Lodash This method returns an array and takes three arguments: The first for the start<\/strong> of the range, second for end<\/strong> of range (up to) and third for step<\/strong>, or value incremented\/decremented by. Note how if only one argument is provided it will create a range up to the number specified. Also, remember Lodash is a JavaScript library that we need to install separately!<\/p>\n\n\n\n If we want to save some overhead, we can create our own number range function. It turns out that making our own range is pretty easy. This is easy to write and we can avoid importing libraries such as Lodash for just one function!<\/p>\n\n\n\n Now you might be asking, what about non-number ranges, like characters? There are some options for us to implement that with JavaScript. <\/p>\n\n\n\n Here we will use the That was easier than you thought right?<\/p>\n\n\n\n Now you know how easy it can be to create ranges yourself with JavaScript. Please make sure you save these handy functions, we are sure they’ll be of use at some point!<\/p>\n","protected":false},"excerpt":{"rendered":"A lot of time when writing different functions, we might want to create ranges in order to work with some data. A range represents data in an array or object with a beginning and end value. A lot of languages have built in methods to create ranges, for example to_a in Ruby: ('a'..'e').to_a => ["a",…","protected":false},"author":86,"featured_media":2039,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-23164","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nto_a<\/code> in Ruby: <\/p>\n\n\n\n('a'..'e').to_a => ["a", "b", "c", "d", "e"]<\/pre><\/div>\n\n\n\n_.range()<\/strong> – Lodash<\/strong><\/h2>\n\n\n\n
_.range()<\/code> util method.<\/p>\n\n\n\n
<\/p>\n\n\n\n_.range(-2);\n\/\/ => [0, -1]\n \n_.range(1, 3);\n\/\/ => [1, 2]\n \n_.range(1, 10, 4);\n\/\/ => [1, 5, 9]<\/pre><\/div>\n\n\n\n
Creating our own <\/strong>range()<\/strong> function.<\/strong><\/h2>\n\n\n\n
<\/p>\n\n\n\nfunction range(start, end, step = 1){\n if(start === end) return [start];\n const range = [];\n for(let i = start; i <= end; i += step){\n range.push(i);\n }\n \n return range;\n}\n\nrange(1, 10, 4)\n\/\/ => [1, 5, 9]\nrange(1, 10)\n\/\/ => [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]<\/pre><\/div>\n\n\n\nCreating a Non-number Range Function<\/strong><\/h2>\n\n\n\n
charCodeAt()<\/code> method to get a number that we will then increase and then push to an array using the String.fromCharCode()<\/code>, which returns a character from a character code.
<\/p>\n\n\n\nfunction charRange(start, stop) {\n const range = [];\n const end = stop.charCodeAt(0)\n for (let i = start.charCodeAt(0); i <= end; i++){\n range.push(String.fromCharCode(i));\n }\n return range;\n};\n\ncharRange('A','F')\n\/\/ => [ 'A', 'B', 'C', 'D', 'E', 'F' ]<\/pre><\/div>\n\n\n\nConclusion<\/strong><\/h2>\n\n\n\n