javascript reduce return 값이 빈값으로 나오는 이유..?

Question

나름대로 비동기에 대해 잘 이해하고 있진 못해도 어느정도는 구글링을 통해 오류는 해결해왔다고 생각하는데이렇게 저렇게 해봐도 이유도 모르겠고 해결방법도 모르겠어서 조언 구하고자 질문 드립니다! function extractNumber(text) { const result &#61; text.match(/\d&#43;/g) return parseInt(result) } function extractString(text) { const result &#61; text.match(/[a-zA-Z]&#43;/g) return result } let data &#61; { second0_image0: 'images/original/87f1da85-7edf-42e6-a6ec-cf8aca70c496.jpeg', second0_title0: '200', second0_description0: 'this is description', second0_image1: 'images/original/87f1da85-7edf-42e6-a6ec-cf8aca70c496.jpeg', second0_title1: '210', second0_description1: 'this is description', second0_image2: 'images/original/87f1da85-7edf-42e6-a6ec-cf8aca70c496.jpeg', second0_title2: '220', second0_description2: 'this is description', second1_image0: 'images/original/87f1da85-7edf-42e6-a6ec-cf8aca70c496.jpeg', second1_title0: 'RED', second1_description0: 'this is description', second1_image1: 'images/original/87f1da85-7edf-42e6-a6ec-cf8aca70c496.jpeg', second1_title1: 'BLUE', second1_description1: 'this is description' } Object.entries(data).reduce((result, [key, value], index) &#61;> { let rowName &#61; key.split('_')[0] let rowIndex &#61; extractNumber(rowName) let optionName &#61; key.split('_')[1] let optionIndex &#61; extractNumber(optionName) if (!result[rowName]) result[rowName] &#61; [] if (!result[rowName][&#96;option${optionIndex}&#96;]) result[rowName][&#96;option${optionIndex}&#96;] &#61; {} result[rowName][&#96;option${optionIndex}&#96;][extractString(optionName)] &#61; value console.log('result &#61; ', result) console.log('JSON result &#61; ', JSON.stringify(result)) return result }, {}) 결과적으로 console에 나오는 내용이 모두 빈 배열로 들어가게 되는데요왜 빈배열로 들어가는지를 모르겠습니다.. 다른 메소드로 따로 빼내서 return new Promise() 를 사용하더라도 계속 값이 빈배열로 되던데..짤막히 나마 선후배님들의 조언 부탁드리겠습니다!

IT공부중 · Answer

비동기가 왜 나오는지 잘 모르겠네요.if (!result[rowName]) result[rowName] &#61; [] 에서 빈 배열로 넣어서 그런거 아닌가요? 배열에서 [&#96;option${optionIndex}&#96;]이 값에 어떻게 접근하는건지 궁금합니다.

jslovers · Answer

그대로 붙여넣었는데 값나옵니다.

lua928908 · Answer

아아 작업환경이 react 였는데 콘솔에서 클릭해서 볼 때는 값이 나오긴 하는데 이걸 react에 state로 담거나 redux-form에서 담으려고 하면 빈배열로 값이 담기더라구요 제 생각에는 타이밍이슈가 아닐까 생각해서 찾다가 질문드린거였습니다..! 올려주신 이미지에서도 console에는 빈배열로 찍히는데 클릭하면 제대로 나오잖아요JSON.stringify()로 확인해보면 계속 빈배열로 나오더라구요

엡실론 · Answer

윗분 말대로 result[rowName] &#61; [] 으로 배열을 만들고, 쓸 때는 object 마냥 result[rowName][&#96;option${optionIndex}&#96;] 으로 쓰고 있네요. 배열로 쓸거면 index는 숫자로, object로 쓸거면 object를 만드세요.

lua928908 · Answer

말씀해주신대로 제가 착각하고 빈배열넣는 부분을 잘못만듯거같네요

lua928908 · Answer

혹~~~~시나 도움이 되는분도 있으실까 해서 최종적으로 만들었던 코드 납겨봅니다. const resultData &#61; await Object.entries(values).reduce((result, [key, value], index) &#61;> { const rowName &#61; key.split('_')[0] const rowIndex &#61; extractNumber(rowName) const optionName &#61; key.split('_')[1] const optionIndex &#61; extractNumber(optionName) if (!key.startsWith('second')) return result if (!result[rowName]) result[rowName] &#61; [] if (!result[rowName][&#96;option${optionIndex}&#96;]) result[rowName].push({[&#96;option${result[rowName].length}&#96;]: {}}) result[rowName][optionIndex][&#96;option${optionIndex}&#96;][extractString(optionName)] &#61; value return result }, {}) Object.keys(resultData).forEach((v, i) &#61;> { resultData[v].forEach((vv, ii) &#61;> { Object.keys(vv).forEach((vvv, iii) &#61;> { if (Object.values(vv[vvv]).length &#61;&#61;&#61; 0) delete resultData[v][ii] }) }) }) Object.keys(resultData).forEach((v, i) &#61;> { const filter &#61; resultData[v].filter((el) &#61;> el !&#61; null) resultData[v] &#61; filter })

javascript reduce return 값이 빈값으로 나오는 이유..?

6개의 답변

Q&A 목록