Frööt Lööps

About me

FE Engineer @ Shopee

Singaporean 🇸🇬

https://twitter.com/tzyinc

https://tenzhiyang.com/

http://codepen.io/tzyinc

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);
}

https://stackoverflow.com/questions/6973942/is-optimizing-javascript-for-loops-really-necessary

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);
}

https://jsben.ch/VHjDp

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();

Resöurces

Made with Slides.com