Demo: https://jsfiddle.net/yxm9d4L0/2/
Given a 2D 3x3 array:
let arr = [
[null, null, null],
[null, {'hello': 'world'}, null],
[null, null, null]
]
and new sizes greater than current length:
width = 10; height = 8;
or less than to current length:
width = 1; height = 2;
and a default fill value of null
.
How would you resize this array immutably
based on the new widths or heights?
function handleArrUpdate(h,w) {
let currentArr = [
[null, null, null],
[null, {'hello': 'world'}, null],
[null, null, null]
];
let currentArrWidth = currentArr[0].length;
let currentArrHeight = currentArr.length;
let updatedArr = [...currentArr];
if (h > currentArrHeight) {
let arr = createArray(w, null);
for (let i = 0; i <= h; i++) {
updatedArr.concat(arr)
}
} else if (h < currentArrHeight) {
let arr = createArray(w, null);
for (let i = 0; i <= h; i++) {
updatedArr.concat(arr)
}
}
if (w > currentArrWidth) {
let arr = createArray(w, null);
for (let i = 0; i <= h; i++){
updatedArr[i].concat(arr)
}
} else if (w < currentArrWidth) {
let arr = createArray(w, null);
for (let i = 0; i <= h; i++) {
updatedArr[i].concat(arr)
}
}
console.log('updated array', updatedArr);
function createArray(size, defaultVal) {
let arr = new Array(size);
for (let i = 0; i < size; i++) {
arr[i] = defaultVal;
}
return arr;
}
}
handleArrUpdate(10,8);
handleArrUpdate(1,2);
handleArrUpdate(3,3);
Currently this code only works for concatenating higher values. I am getting Cannot read property 'concat' of undefined
.
Desired Outputs:
//10x8
[
[null, null, null, null, null, null, null, null, null, null],
[null, { 'hello': 'world' }, null, null, null, null, null, null, null, null],
[null, null, null, null, null, null, null, null, null, null],
[null, null, null, null, null, null, null, null, null, null],
[null, null, null, null, null, null, null, null, null, null],
[null, null, null, null, null, null, null, null, null, null],
[null, null, null, null, null, null, null, null, null, null],
[null, null, null, null, null, null, null, null, null, null]
];
// 1x2
[
[null, null]
]
// 3x3
[
[null, null, null],
[null, { 'hello': 'world' }, null],
[null, null, null]
]
// 4x2
[
[null, null],
[null, { 'hello': 'world' }],
[null, null],
[null, null]
]