Javascript array method에 대한 질문입니다.

미해결질문
류명한 프로필

수업을 통해서 자바스크립트 함수형 프로그래밍을 배우고 나서 Array를 다룰 일이 생길 경우에는 거의 항상 함수형으로 map, forEach, filter 등을 사용하고 있는데요. D3에서 데이터 처리를 하는 부분 코드를 작성하다가 제가 이해한 것을 바탕으로 예상한 것과 다르게 작동하는 부분이 있어서 여쭤보려고 합니다. 

dataSet = await d3.json("./USAir97.json").then(data => {
    let columnsWithNumbers = ["id", "latitude", "longitude", "x", "y"];

    data.nodes.map(row => {
      // external effect happens.. why?
      columnsWithNumbers.forEach(c => {
        row[c] = +row[c];
      });
      return row;
    });
    return data;
  });

불러오는 json파일의 경우는 { "nodes": [ { id: 1, "latitude": "123123", "longitude": "123123"}, ...], "links": [ ...]}

이런 형식이고요. 그런데 여기에서 return row; 부분을 생략해도 dataSet에 저장되는 데이터가 string으로 되어 있는 columnsWithNumbers에 해당하는 값들이 숫자로 바뀌어있더라고요. 함수형 프로그래밍에 대해서 배운 대로라면 map 함수에서 row를 가지고 와서 row에 어떤 일을 하더라도 그 row를 리턴해주지 않으면 row의 갯수만큼의 undefined가 들어있는 Array가 리턴이 되어야할 것 같은데 이 경우는 그렇지 않아서 이상하게 느껴집니다. 

게다가 또 한 가지 이상한 점은 map 함수는 data.nodes에 대해서 호출하였는데 이것을 return하는 것이 아니라 data를 return 했는데 data.nodes에 대해서 호출한 map함수의 연산 결과가 data에 반영이 되어 있는 것입니다. data.nodes 함수를 리턴하고 싶어도 d3.json 함수의 특성인 건지 다른 걸 리턴하면 값이 깨지는 게 생기더라고요. 작동이 안 되는 것보다는 잘 되고 있는 건 다행이겠습니다만 이런 식으로 제가 생각했던 것과는 다른 식으로 작동하는 것에 대해서 어떻게 이해해야할까요? 

그리고 함수형 프로그래밍 코드를 짜려고 하다보니 for-loop은 코드에서 전혀 사용하지 않게 되고, 그러다보니 왠지 괜히 forEach도 쓰기가 꺼려지는데 좋은 방향인 것인지 궁금합니다. 위의 코드처럼 전체 데이터에서 일부분에 해당하는 키들을 가져와서 그것에 대해서만 부분적으로 row에서 처리를 해줄 때 위처럼 Array에 해당하는 키값들을 저장하고 이에 대해서 forEach를 호출하는 식으로 많이 처리했는데요. 혹시 함수형 프로그래밍의 관점에서 더 깔끔하게 짤 수 있는 방법이 있을까요? 

질문이 많은 것 같은데, 마지막으로 혹시 3편 강의는 언제쯤 올라오는지도 궁금합니다.

감사합니다.

유인동 프로필
유인동 2달 전

로그를 찍어가면서 확인해보세요. 코드에 row를 변경하는 코드가 있어보입니다. 함수형 프로그래밍에서는 = (대입)을 최소화해야하구요. forEach는 효과가 일어날 곳을 구분하기 위해서만 사용하면 좋습니다. :)

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스