How to filter and change the elements in the array?

There is an array containing odd and even numbers:
const arr = [1, 2, 5, 6, 8, 9, 10, 23, 32, 12, 65, 8, 4, 3, 65, 43, 23, 22, 55, 43, 66];

You want to filter and change the elements so that the result is an array of the words "boom" and "wow"
where "boom" - it was an odd number less than 10,
and "wow" - it was an odd number greater than 10.

In the end it should be an array:
["boom", "boom", "boom", "wow" "wow" "boom" "wow" "wow" "wow" "wow" "wow"]


Tried to write, it turned out, but something like that is not very nice.
Whether it is possible to implement it all differently, more like that beautiful?

The implementation via the normal cycle for:

const boom = arr => {
 let result = [];

 for (let i = 0; i < arr.length; i += 1) {
 if (arr[i] % 2 !== 0) {
 if (arr[i] < 10) {
result.push("boom");
 } else {
result.push("wow");
}
}
}

 return result;
};


Implementation with functional techniques:

let result = arr.filter(item => {
 if (item % 2 !== 0) {
 return item;
}
}).map(item => {
 if (item < 10) {
 return "boom"
 } else {
 return "wow";
}
});


You can write this in compact functional style?
Wrote on Haskell:
boom arr = [if x < 10 then "boom" else "wow" | x <- arr, odd x]

Is it possible to do something similar in compactness in JS. Native method in JS as I know no, which would be filtered and changed data list. How to write such a method with a callback?
June 14th 19 at 20:01
2 answers
June 14th 19 at 20:03
Solution
Of course functionalso js poorer than haskell, but in this case you can do this:
const result = arr
 .filter(x => x % 2)
 .map(x => x < 10 ? 'boom' : 'wow')


In a conventional imperative style
const result = []
for (let item of arr) {
 if (item % 2) {
 result.push(item < 10 ? 'boom' : 'wow')
}
}
June 14th 19 at 20:05
Solution
[1, 2, 5, 6, 8, 9, 10, 23, 32, 12, 65, 8, 4, 3, 65, 43, 23, 22, 55, 43, 66].reduce((x, y) => { return (y % 2 == 0) ? x : x.concat((y < 10) ? 'boom' : 'wow') }, [])
Unable to explain a little bit this code? - Jace43 commented on June 14th 19 at 20:08
not the most elegant solution
arr.reduce((x, y) => { // Reduser. x is the original value (zapisyvaetsya bottom), y is the next value in the iteration
 return y % 2 == 0 // Reject even numbers
 ? x // Returns the array unchanged, which was part of originally
 x.concat(y < 10 ? 'boom' : 'wow') // Add the desired values in the array x
}, []) // [] — initial value. That is to say, here is recorded the result.
 // This is where it gets to x in the first iteration
- matt_Bahringer commented on June 14th 19 at 20:11
thanks , out of my head just fell out that initially, x is the initial value and the y list item. - Jace43 commented on June 14th 19 at 20:14

Find more questions by tags JavaScript