Initializing a multidimensional with many default values

I need to create a \${n} \times {n}\$ multidimensional array filled with default values.

Right now, I'm using this code:

//--- how many columns?
var colNumber = 10;
//--- how many rows?
var rowNumber = 20;

//--- default value
var defaultValue = "default";

var defRow = [];
var defaultArray = [];

for(var x = 0; x < colNumber; x++){
    defRow.push(defaultValue);   
}
for(var x = 0; x < rowNumber; x++){
    defaultArray.push(defRow);
}
console.log(defaultArray);

find fiddle here

Is there any better approach to do this?

Yes, there's a better approach. The problem you have here is that each row is the same value, so a change to one row will be seen in all rows. For example, I added the following to your code to illustrate this:

console.log(JSON.stringify(defaultArray));
defaultArray[5][5] = "Fubar";
console.log(JSON.stringify(defaultArray));

This should change the value in the middle of the 'matrix', but instead the result is:

"[["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"],
["default","default","default","default","default","Fubar","default","default","default","default"]]"

You need to have a fresh array instance for each row.

Even though it is mundane, the logical way to do it is:

var defaultArray = [];

for(var x = 0; x < rowNumber; x++){
    var defRow = [];
    for(var y = 0; y < colNumber; y++){
        defRow.push(defaultValue);   
    }
    defaultArray.push(defRow);
}

Edit: Based on the benchmarks for my browser (Firefox), a decrementing while-loop is much faster than alternatives. I would use:

var defaultArray = [];

for(var row = rowNumber - 1; row >= 0; row--){
    var defRow = [];
    for(var col = colNumber - 1; col >= 0; col--){
        defRow[col] = defaultValue;   
    }
    defaultArray[row] = defRow);
}

By working backwards over the array you reduce the amount of space allocations that happen as the array grows. Here's the results of that benchmark for me:

StackExchange Code Review Q#72131, answer score: 6