SELECT keyName, valueArray(keyName, array) FROM array GROUP BY keyName Array Grouping will soon be KansaiTS#5 @jiko21 arriving at TypeScript

About jiko21… Name: Daiki Kojima (jiko21) Multistack Engineer @ AppBrew.inc Love: Guitar, TypeScript, baseball @jiko21 @jiko_21

Array grouping

About array grouping method • ڈ೥ʹͳͬͯECMAScriptʹೖͬͨproposal • Α͏΍͘TypeScript 5.4Ͱܕ৘ใ͕௥Ճ͞ΕΔʂ • ରԠ͞ΕͯΔϒϥ΢β͸͔ͳΓݶఆత https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

About array grouping method • ഑ྻ಺ཁૉΛgroupԽͨ͠object(Object.groupBy)΍ map(Map.groupBy)͕ੜ੒Ͱ͖Δ • SQLͰ͍͏GroupByͬΆ͍ (sumͱ͔count͕Ͱͯ͘ΔΘ͚Ͱ͸ͳ͍͕) const array = [1, 2, 3, 4, 5]; const groupByResult = Object.groupBy(array, (nu m ) => { return num % 2 === 0 ? 'even': 'odd'; }); /** * { * 'even': [2, 4], * 'odd': [1, 3, 5], * } */ console.log(groupByResult)

ࠓ·Ͱͩͱ… const array = [1, 2, 3, 4, 5]; const result = { even: [] as number[], odd: [] as number[], }; array.forEach((value) => { if (value % 2 === 0 ) { result.even.push(value) } else { result.odd.push(value) } }); GPS&BDIͰճͯͦ͠ΕͧΕཁૉΛQVTI

ࠓ·Ͱͩͱ… const array = [1, 2, 3, 4, 5]; const result = array.reduce((prevValue, currentValue) => { if (currentValue % 2 === 0 ) { prevValue.even.push(currentValue) } else { prevValue.odd.push(currentValue) } return prevValue; }, { even: [] as number[], odd: [] as number[], }); "SSBZSFEVDFͰແཧ΍Γ͓͠ΌΕʹ

ͳΜͰstatic methodͳͷ͔ʁ • ౰ॳ͸Array.prototype.groupByΛߟ͍͕͑ͯͨ͢Ͱʹsugar ͱ͍͏ϥΠϒϥϦ͕groupByΛmonkey patchͰ౰ͯͯͨ • Array.prototype.group΋ߟ͕͑ͨ഑ྻΛHashMapʹ͢Δίʔυɹ ʹͿ͔ͭΔͷͰ݁ہstatic methodʹ • https://github.com/tc39/proposal-array-grouping/ ʹ΋ৄࡉ͕ࡌ ͬͯ·͢

࢖͍ॴ

͜͏͍͏σʔλΛද͍ࣔͨ͠… const todos = [ { status: 'TODO', text: 'إΛચ͏', }, { status: 'TODO', text: 'ࣃΛຏ͘', }, { status: 'DOING', text: '෩࿊ʹೖΔ', }, { status: 'DONE', text: 'ञΛҿΉ', }, ];

݁ߏ؆୯ʹॻ͚·͢! function App() { const groupedTodos: { 'TODO': Todo[]; 'DOING': Todo[]; 'DONE': Todo[]; } = Object.groupBy(todos, (ite m ) => { return ite m .status; }); return ( ) } 'JMUFS஍ࠈ͔Βൈ͚ग़ͤΔʂ

ύϑΥʔϚϯε

ύϑΥʔϚϯε • ৽͍͠method͕ੜ͑ͯɺܕ৘ใ΋௥Ճ͞Εͨͱ͍͏͜ͱ͸ɺɹɹɹ ͦΕ૬Ԡʹ͍͍…͸ͣʂ • ύϑΥʔϚϯεʹ໰୊͕͋Δͱ৽͍͠ϝιου͕͋ͬͯ΋࢖͏ͷ͕ɹ ͨΊΒΘΕΔ…

࣮ݧͯ͠ΈΔ • 0, 1, …, N-1͕ೖͬͨ഑ྻ͔ΒҎԼͷΑ͏ͳobjectΛੜ੒͢Δ • ࣮ߦ؀ڥ • bun: v1.0.25 • ϚγϯεϖοΫ: Apple M1 Pro / 32GB { even: [ 0 , 2, ...], odd: [1, 3, ...] }

Object.groupBy͸͜ΕͰൺֱ inputArray.reduce((prevValue, currentValue) => { if (currentValue % 2 === 0 ) { prevValue.even.push(currentValue) } else { prevValue.odd.push(currentValue) } return prevValue; }, { even: [] as number[], odd: [] as number[], }) Object.groupBy(inputArray, (nu m ) => { return num % 2 === 0 ? "even": "odd"; }) WT

ύϑΥʔϚϯε ͳΜ͔શൠతʹॏ͍ʜ

Map.groupBy͸͜ΕͰൺֱ const map = new Map(); const evenArray: number[] = []; const oddArray: number[] = []; inputArray.forEach((currentValue) => { if (currentValue % 2 === 0 ) { evenArray.push(currentValue); } else { oddArray.push(currentValue); } }); map.set('even', evenArray); map.set('odd', oddArray); Map.groupBy(inputArray, (nu m ) => { return num % 2 === 0 ? "even": "odd"; }) WT

ύϑΥʔϚϯε ͋Μ·Γ͕ࠩͳ͍

͋ΕΕɺɺɺ

݁Ռ͸ඍົ • Map.groupBy͸ͦΜͳʹେࠩͳ͠… • Object.groupBy͚ͩ࿐ࠎʹ஗͘ͳͬͯͦ͏…

TC39 Array GroupingΛಡΜͰΈΔ… https://tc39.es/proposal-array-grouping/

ٖࣅίʔυΛॻ͍ͯΈΔͱ… function Object.groupBy(array, callback) { groups = GroupBy(array, callback, property); obj = {}; for (g of groups) { elements = g.elements obj[g.key] = elements; } return obj } function Map.groupBy(array, callback) { groups = GroupBy(array, callback, property); map = new Map(); for (g of groups) { elements = g.elements map.set(g.key, elements); } return map; } GroupByΛڞ௨ͯ͠ݺΜͰΔ…

GroupByΛ೷͍ͯΈΔͱ… function GroupBy(arr: T [], callback): {key: string; elements: T [] }[] { groups = []; for(k = 0; k < arr.length(); k++) { /* ࡉ͔͍ॲཧ */ key = callback(arr[k]); AddValueToKeyedGroup(groups, key, arr[k]). } return groups } AddValueToKeyedGroupΛݺΜͰΔ… 0 / ճݺͼग़͞ΕΔ

AddValueToKeyedGroupΛ೷͍ͯΈΔͱ… function AddValueToKeyedGroup(groups: {key: string; elements: T [] }[], key, value): { for(group: groups) { if (group.key === key) { group.elements.push(value); return } } group = { key: key, elements: [value] } groups.push(group) } LFZͷݸ਺ . ճ LFZ͕ͳ͚Ε͹৽ͨʹHSPVQTʹ௥Ճ

ͭ·Γ͜͏ͳΔ… "EE7BMVF5P,FZFE(SPVQ 0 . 0CKFDUHSPVQ#ZPS.BQHSPVQ#Z (SPVQ#Z 0 / 0 . 0 //. ˠ0 /. Ͱ͸͋Δ ͜Ε·Ͱͩͱ.ͳͷͰ0 / Ͱ΋Αͦ͞͏ ͨͩ͠ϧʔϓ͕༨ܭʹଟΊʹճͬͯͦ͏

ͳΜͰ͜Μͳ͜ͱͯ͠Δͷ͔…(ߟ࡯) • ObjectͱMapͰಉ͡࢓༷(ͱ͍͏͔ڍಈ)ʹ͍ͨ͠ • key஋͕࣮૷࣌ʹະఆͰ΋ରԠͰ͖ΔΑ͏ʹ • ॻ͔ΕͯΔίʔυ͸2஋෼ྨͰࣗ໌ͳͷͰྑ͍ྫͱ͸ݴ͍ʹ͍͘ • ͜ͷΑ͏ʹ࣮૷͓͚ͯ͠͹৽͍͠key͕iteration࣌ʹݟ͔ͭͬͯ΋ɹ ରԠͰ͖Δ

ͪΐͬͱෆརͳϕϯν͔ͩͬͨͳ…

reduceଆΛվྑͯ͠ΈΔ inputArray.reduce((prevValue, currentValue) => { const key = currentValue % 2 === 0 ? 'even' : 'odd' if (prevValue.hasOwnProperty(key)) { prevValue[key].push(currentValue); } else { prevValue[key] = [currentValue]; } return prevValue; }, {}) LFZ஋͕࣮૷࣌ʹະఆͰ΋͍͍Α͏ʹ 0CKFDUHSPVQ#Zͷڍಈʹ߹ΘͤͯΔ

ύϑΥʔϚϯε ·͊·͊ಉ͘͡Β͍ ༗ҙͳࠩ͸ͳͦ͞͏

·ͱΊ

Array grouping Method͸·͍͍͊ͧʂ • groupingܥָ͕ʹ͔͚Δ • ͦΕҎ֎Ͱ΋ fi lter஍ࠈ͔Β͸ൈ͚ग़͢ʹ΋࢖͑ͦ͏ • ύϑΥʔϚϯε͸ҎԼʹ஫ҙ • O(NM)Ͱ͸͋Δ͕ϧʔϓճ਺͕ωοΫ? • keyͷछྨ͕࣮ߦ࣌ʹ෼͔Δ৔߹Ͱ΋͍͍Α͏ʹ… • ↑छྨ͕ݻఆͩͱͪΐͬͱ͋Εͳؾ͢Δ…

ࢀߟ • https://tc39.es/proposal-array-grouping/ • https://devblogs.microsoft.com/typescript/announcing- typescript-5-4-beta/#objectgroupby-and-mapgroupby • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Global_Objects/Object/groupBy • https://github.com/tc39/proposal-array-grouping/