Frööt Lööps
About me
FE Engineer @ Shopee
Singaporean 🇸🇬
https://youtu.be/qaGjS7-qWzg
Array & Lööp trivia
For these cases (pun intended)
for (let i=0, len = testArray.length; i< len; i++) {
let curr = testArray[i];
curr = someOperation(curr);
}
for (let i=0; i< testArray.length; i++) {
let curr = testArray[i];
curr = someOperation(curr);
}
Weird valid for loop
for (let i = 10; i--; ) {
console.log(i);
}
Array to Obj and back
const entries = [
['key1', 'value'],
['key2', 42]
];
const obj = Object.fromEntries(entries);
// {
// key1: 'value',
// key2: 42
// }
const entriesAgain = Object.entries(obj);
// [
// ['key1', 'value'],
// ['key2', 42]
// ];
.some() and .every()
function someFn(arr) {
let filteredArr = arr
.filter(condition1)
.filter(condition2);
return filteredArr.length > 0;
}
const someFn2 = (arr) =>
arr.some((item) => condition1(item) && condition2(item));
Peförmance
let testArray = [];
let count = 0;
while (count < 100000) {
testArray.push(count);
count++;
}
const someOperation = (inNum) => inNum + 10;
for (let i=0; i< testArray.length; i++) {
let curr = testArray[i];
curr = someOperation(curr);
}
for (let curr of testArray) {
curr = someOperation(curr);
}
testArray = testArray.map(someOperation);
for (let i in testArray) {
let curr = testArray[i];
curr = someOperation(curr);
}
for (let i=0, len = testArray.length; i< len; i++) {
let curr = testArray[i];
curr = someOperation(curr);
}
Cöde Readability
arr.reduce((acc, curr) => acc + curr, 0);
let count = 0;
for (let item of arr) {
count += item;
}
Sum
arr.reduce((acc, curr) => acc += curr, '');
arr.join('')
let str = ''
for (let item of arr) {
str += item
}
"Collecting"
arr.reduce((largest, item) => Math.max(largest, item), 0);
Math.max(...arr);
Math.max(...arr);
Largest
arr.reduce((obj, item) => {
obj[item] = null
return obj
,
{}
}
Object.fromEntries(
arr.map(item => [item, null])
)
const obj = {};
for (const item of arr) {
obj[item] = null
}
arr.reduce((obj, item) => ({
...obj,
obj[item]: null
})
,
{}
}
Creating object
Fröm real cödebase
I abused
.reduce()
itemGroups.reduce((accumulator, itemGroup) => {
if (itemGroup && itemGroup.someid) {
const someid = itemGroup.someid.toString();
accumulator[someid] = itemGroup;
}
return accumulator;
}, {});
Object.fromEntries(
itemGroups
.filter((item) => item.someid)
.map((item) => [[item.someid], item])
);
const collection = {};
for (let i = 0, len = itemGroups.length; i < len; i++) {
if (itemGroups[i].someid) {
const itemid = itemGroups[i].someid;
collection[itemid] = itemGroups[i];
}
}
let ans = listOfList.reduce(
(acc, list) => acc || list.find(someCondition),
null
);
listOfList.flat().find(someCondition);
ans = [].concat(...listOfList).find(someCondition);
sampledata.reduce((acc, items) => {
items.forEach((data) => {
acc.push({
key1: data.key1,
key2: data.key2,
key3: data.key3
});
});
return acc;
}, []);
let sampleans2 = sampledata.flat();
arr.reduce(
(acc, curr) =>
acc.concat(
curr.map((value, index) => ({
value,
index
}))
),
[]
);
arr
.map((curr) => curr.map((value, index) => ({ value, index })))
.flat();
- More-controversial-than-politics tweet
https://twitter.com/jaffathecake/status/1213077702300852224 - Is reduce() bad? HTTP 203
https://www.youtube.com/watch?v=qaGjS7-qWzg - 3 JavaScript Performance Mistakes You Should Stop Doing
https://hackernoon.com/3-javascript-performance-mistakes-you-should-stop-doing-ebf84b9de951 - Javascript performance test - for vs for each vs (map, reduce, filter, find).
https://hackernoon.com/javascript-performance-test-for-vs-for-each-vs-map-reduce-filter-find-32c1113f19d7 - Flattening multidimensional Arrays in JavaScript
https://www.jstips.co/en/javascript/flattening-multidimensional-arrays-in-javascript/ - Array functions
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Resöurces
Froot Loops
By tzyinc
Froot Loops
- 1,203