Range of Years in JavaScript for a select box

Question

I'm trying to create a dynamic select box in JavaScript with a range of years starting with 'some' year and ending with the current year. Is there anything like Ruby's range class in JavaScript or do I have to loop trough the years using a for loop?

Here's what I've come up with though I think it's a bit much considering in Ruby I can just use a range.

    this.years = function(startYear){
        startYear = (typeof(startYear) == 'undefined') ? 1980 : startYear
        var currentYear = new Date().getFullYear();
        var years = []
        for(var i=startYear;i<=currentYear;i++){
            years.push(i);
        } 
        return years;
    }

Answer 1

You can provide a range method in javascript, but you would need to use it a lot to pay for its inclusion in your source code.

var A= Array.from(-5,5) >>> return value:

(Array) -5,-4,-3,-2,-1,0,1,2,3,4,5

var B= Array.from(10,100,10) >>> return value:

(Array) 10,20,30,40,50,60,70,80,90,100

var C= Array.from('a','z') >>> return value:

(Array)a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z

Array.from= function(what, n, step){
    var A= [];
    if(arguments.length){
        if(n){
            return A.range(what, n, step)
        }
        L= what.length;
        if(L){
            while(L){
                A[--L]= what[L];
            }
            return A;
        }
        if(what.hasOwnProperty){
            for(var p in what){
                if(what.hasOwnProperty(p)){
                    A[A.length]= what[p];
                }
            }
            return A;
        }
    }
    return A;
}

Array.prototype.range= function(what, n, step){
    this[this.length]= what;
    if(what.split && n.split){
        what= what.charCodeAt(0);
        n= n.charCodeAt(0);
        while(what<n){
            this[this.length]= String.fromCharCode(++what);
        }
    }
    else if(isFinite(what)){
        step= step || 1;
        while(what <n) this[this.length]= what+= step;
    }
    return this;
}

Answer 2

Use Array.fill() if you're transpiling or not worried about IE users.

const now = new Date().getUTCFullYear();    
const years = Array(now - (now - 20)).fill('').map((v, idx) => now - idx);

// (20) [2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002, 2001, 2000]

TypeScript

get years() {
  const now = new Date().getUTCFullYear();
  return Array(now - (now - 20)).fill('').map((v, idx) => now - idx) as Array<number>;
}

Answer 3

JavaScript does have a Range object, but it refers to an arbitrary portion of the DOM and is not supported in IE 6/7.

If you want, you can simplify your function to this, but it's all the same really.

this.years = function(startYear) {
    var currentYear = new Date().getFullYear(), years = [];
    startYear = startYear || 1980;  
    while ( startYear <= currentYear ) {
        years.push(startYear++);
    }   
    return years;
}
 
console.log( this.years(2019-20));

Answer 4

    getYear(){
       var currentYear = new Date().getFullYear(),
       var years = [];
       var startYear = 1980;
       for(var i=startYear; i<= currentYear; i++){
          year.push(startYear++);
       }
    }

Answer 5

Unfortunately, no, there's no "range" function in Javascript that's comparable to Ruby's, so you'll have to do it with a loop. It looks like what you're doing should work, though.

Answer 6

Use Array.from

const currentYear = (new Date()).getFullYear();
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
console.log(range(currentYear, currentYear - 50, -1)); 
// [2019, 2018, 2017, 2016, ..., 1969]