First Javascript program. What am I doing wrong?

Question

I have finally gotten around to creating my first little practice program in Javascript. I know it's not elegant as it could be. I have gotten most of this code to work, but I still get an "undefined" string when I run it a few times. I don't know why. Would someone be kind enough to explain to me where this undefined is coming from?

var work = new Array();
work[1] = "product design";
work[2] = "product system design";
work[3] = "product social media post x5";
work[4] = "product Agent Recruitment system design";
work[5] = "product profile system design";
work[6] = "product Agent testing design";
work[7] = "product customer support";
work[8] = "product promotion";
var course = new Array();
course[1] = "javascript";
course[2] = "mandarin";
course[3] = "javascript practical-Code Academy";
course[4] = "javascript practical-learn Street";
course[5] = "mandarin practical-memrise";
course[6] = "new stuff with audiobooks";
var activity = new Array();
activity[1] = "listen to podcasts";
activity[2] = "chat online";
activity[3] = "Exercise";
activity[4] = "take a walk";
activity[5] = "call a friend";
var picker1 = Math.floor(Math.random()*3+1);
var picker2 = Math.floor(Math.random()*work.length+1);
var picker3 = Math.floor(Math.random()*course.length+1);
var picker4 = Math.floor(Math.random()*activity.length+1);
var group_pick = function(){
  if(picker1 === 1){
    return "Time to work on ";
  } else if(picker1 === 2){
    return "Time to learn some ";
  } else if (picker1 === 3){
    return "Lets relax and ";
  } else {
    return "error in group_pick";
  }
};
var item_pick = function() {
  if (picker1 === 1) {
    return work[picker2] ;
  } else if (picker1 === 2) {
    return course [picker3] ;
  } else if (picker1 === 3) {
    return activity[picker4] ;
  } else {
    return "error in item_pick";
  }
};
var task = group_pick() + item_pick();
document.write(task);

Answer 1

Array's start with an index of zero. When you assign a value to the 1 index, a 0 index is created you, with no value (undefined).

var arr = new Array();
arr[1] = 'hi!';
console.log(arr); // [undefined, "hi!"]
console.log(arr.length) // 2

Length is 2, check that out. You thought you had one item in that array but length is 2.

Usually it's easier to not manage the array indices yourself. And the array literal syntax is usually preferred for a number of reasons.

var arr = [];
arr.push('hi!');
console.log(arr); // ["hi!"]
console.log(arr.length) // 1

Or just create the array with the items in it directly, very handy.

var arr = [
  "hi",
  "there!"
];
console.log(arr); // ["hi", "there"]
console.log(arr.length) // 2

---

Once you are making the arrays properly, you can get a random item with simply:

var arr = ['a','b','c'];
var index = Math.floor(Math.random() * arr.length);
console.log(arr[index]); // "a", "b" or possibly "c"

This works because var index will be calculated by a random value of between 0.0 and up to but not including 1.0 times 3 (the length of the array). Which can give you a 0, 1 or a 2.

So this arr right here, has 3 items, one at 0, one at 1, and one at 2.

Learning to address arrays from zero can be mentally tricky. You sort of get used to it. Eventually.

---

A working example using these tips here: http://jsfiddle.net/du5Jb/

I changed how the arrays are declared, and removed the unneeded +1 from var pickerX calculations.