JavaScript 외부 객체 데이터 가져와서 연산하기

mh·2021년 12월 9일

JavaScript array for json object push 객체 배열

멋쟁이사자 프론트엔드 1기

목록 보기

12/12

photo by danica tanjutco - unsplash

오늘은 JSON형식으로 만든 js파일을 가져와 데이터에 접근하는 방법과 간단한 연산을 연습해봤다.

js파일 불러오기
키,값에 접근해서 순회해보기
가져온 데이터로 연산하기 (나이평균값 구하기)
가져온 데이터로 새 배열만들어 보기

외부객체 데이터data.js는 JSON GENERATOR에서 가지고 왔다.

//data.js
let data = [
    {
      "_id": "61ad9e21d562f0311e770971",
      "index": 0,
      "picture": "http://placehold.it/32x32",
      "age": 26,
      "eyeColor": "blue",
      "name": "Hines Hampton",
      "gender": "male",
      "company": "BIFLEX",
      "email": "hineshampton@biflex.com",
      "phone": "+1 (922) 584-2106",
      "address": "623 Jerome Street, Evergreen, Puerto Rico, 5308"
    },
    {
      "_id": "61ad9e213d4d9171c9abe0f2",
      "index": 1,
      "picture": "http://placehold.it/32x32",
      "age": 37,
      "eyeColor": "blue",
      "name": "Kendra Stone",
      "gender": "female",
      "company": "POOCHIES",
      "email": "kendrastone@poochies.com",
      "phone": "+1 (847) 551-2575",
      "address": "226 Rockaway Parkway, Dana, Virginia, 287"
    },
    {
      "_id": "61ad9e213277d346f5df83ae",
      "index": 2,
      "picture": "http://placehold.it/32x32",
      "age": 29,
      "eyeColor": "blue",
      "name": "Selma Avery",
      "gender": "female",
      "company": "ESCENTA",
      "email": "selmaavery@escenta.com",
      "phone": "+1 (995) 451-3103",
      "address": "933 Mill Lane, Advance, Indiana, 4845"
    },
    {
      "_id": "61ad9e21b2a817cf9e301f62",
      "index": 3,
      "picture": "http://placehold.it/32x32",
      "age": 21,
      "eyeColor": "blue",
      "name": "Ellis Pacheco",
      "gender": "male",
      "company": "COMVEY",
      "email": "ellispacheco@comvey.com",
      "phone": "+1 (958) 583-3238",
      "address": "461 Berry Street, Hannasville, New York, 2213"
    },
    {
      "_id": "61ad9e217f841271f2bb28c4",
      "index": 4,
      "picture": "http://placehold.it/32x32",
      "age": 31,
      "eyeColor": "green",
      "name": "Mccarthy Farmer",
      "gender": "male",
      "company": "ISOTRACK",
      "email": "mccarthyfarmer@isotrack.com",
      "phone": "+1 (848) 419-2632",
      "address": "397 Saratoga Avenue, Kylertown, Palau, 853"
    },
    {
      "_id": "61ad9e21f769b8b03f51a6c5",
      "index": 5,
      "picture": "http://placehold.it/32x32",
      "age": 28,
      "eyeColor": "green",
      "name": "Wells Mcintosh",
      "gender": "male",
      "company": "PHUEL",
      "email": "wellsmcintosh@phuel.com",
      "phone": "+1 (858) 578-3765",
      "address": "666 Lorimer Street, Kaka, Kentucky, 5675"
    },
    {
      "_id": "61ad9e215e7c01f9d63f3662",
      "index": 6,
      "picture": "http://placehold.it/32x32",
      "age": 39,
      "eyeColor": "brown",
      "name": "Emily Olsen",
      "gender": "female",
      "company": "TETRATREX",
      "email": "emilyolsen@tetratrex.com",
      "phone": "+1 (909) 524-2208",
      "address": "191 Rapelye Street, Grapeview, Tennessee, 4118"
    },
    {
      "_id": "61ad9e21256ec75db2b512cb",
      "index": 7,
      "picture": "http://placehold.it/32x32",
      "age": 34,
      "eyeColor": "green",
      "name": "Huff Jensen",
      "gender": "male",
      "company": "SUPPORTAL",
      "email": "huffjensen@supportal.com",
      "phone": "+1 (867) 595-3348",
      "address": "203 Plymouth Street, Tecolotito, Missouri, 4523"
    }
  ]

외부데이터에서 나이값만 뽑아서 평균구해보기

HTML 작성

//index.html
<button onclick="averageAge(data)">나이의 평균</button>
<button onclick="arrAge(data)">나이배열만들기</button> //누르면 함수가 실행되는 버튼

<script>data.js</script> //스크립트불러오기
<script>
  function averageAge(data) {} // 연산연습 
  function sArrAge(data) {} // 배열만들어보기
</script>

수업시간에 따라가다 놓쳐서 그런지
처음에는 이렇게 되어있었다.

그중에

function averageAge(data) { 
  //averageAge라는 함수인데 data를 인자로 받는다
  let tAverageAgeData = []; 
  //tAverageAgeData라는 변수 선언 =[]; 빈 배열로 만들었다.
  for (const iterator of data) { 
    //for of문을 사용해 data 내부를 data의 모든 index를 순회한다. 맞나?
    //console.log(iterator.age)
    tAverageAgeData += iterator.age
    //iterator.age는 data의 age키의 value를 받아온다. 그것을 taverageAgeData에 더함
  }

처음엔 콘솔주석을 풀고 iterator가 어떤 값을 순회하는지 살펴보았다.
그리고 tAverageAgeData += iterator.age이 부분이 스트링을 더한것처럼 나와서
typeof로 iterator가 순회하는 age값의 타입을 체크해보았다.(혹시 문자열취급인가 싶었다)
그리고 마지막으로 더해주는 age값이 숫자가 아닌값일수도 있겠다 싶어서 parseInt도 써봤다.

하지만 data.gs의age의 값은 'number'로 숫자가 확실했고
모든 나이를 더한값은 여전히 문자열처럼 더해지고 있었다.

let tAverageAgeData = []; 때문이였다.
빈 배열에 들어가면서 나이값이 문자열이 되고..문자열끼리 +연산을 하니 붙어서 들어가서 그렇게 된거였다...

그래서 let tAverageAgeData = 0으로 초기화 후 다시 계산해보았다.

뭐야 이거 왜 NaN이 나오지 했는데 보시다시피 let tAverageAgeData; 할당을 안해놨었다..

다시 0으로 재할당

이제 제대로 나온다. tAverageAgeData는 0으로 시작해서 각각 26 37 29 21 31 29 39 34의 값을 더해나간다.
총합은 245

이제 사람숫자대로 나누기만하면 평균을 구할 수 있다. 총합(tAverageAgeData)/사람수
여기서 사람수가 iterator의 길이인지 확인해보기위해 콘솔을 찍었다.

응 아니야~
저렇게 쓰면 data의 length라는 키의 값을 가르키게 된다. data.js에 length라는 키와 밸류는 없으니 당연히 undefined로 나온다.

그렇다. data의 배열의 길이를 알면된다. data.length로 바꿔보면

data 객체에 배열이 8개 있는걸 볼 수 있다.

그렇다면 이제 총합/ 인원 (data.length)로 평균을 구해보면

아 여기서 length를 legnth로 오타내서 한동한 해멨다... 꼼꼼히 확인하자

오타 하나때문에 별별군데에 콘솔을찍어가며 헤멘흔적..
totalAverageAgeData라고 새로 변수까지 선언해보고
tAverageAgeData와 data.length값이 스코프 바깥에서 변하는줄 알고 콘솔도 찍어봤다.
다행히 그냥 오타 하나때문이였다..

정상적으로 출력된다.

요렇게 짧게 줄여봤다
평균값 30.625다. 잘 나온다.

원하는 데이터만 뽑아서 새 배열만들고 합 구해보기

처음에 써져있던 tAverageAgeData = []; 이 부분이 너무 찝찝해서
여기서부턴 뽑아낸 데이터로 새로 배열을 만들어보고, 계산도 해보았다.

먼저 arrAge라는 함수를 만들었다.
이터레이터를 돌려보고 데이터값을 잘 받아오는지 콘솔로그로 확인해봤다.

흠 잘 받아온다

뭐지? 이건 왜 찍어본거지? 당연히 아무짓도 안했으니 tArrAge는 빈 배열인데? 왜 값이 들어갔을거라 생각하는것이지?

근데 그러면 배열안에 새 값은 어떻게 넣느냐하면..

고것은 갓갓갓 문서 를 찾아보면 되는것
MDN | 배열 객체의 메서드

tArrAge.push(iterator.age);
이터레이터가 data를 순회할때마다 갖고오는 나이값을 tArrAge의 배열에 하나씩 넣어준다.

이렇게 값이 하나씩 잘 들어오고 있는걸 볼 수 있고, 나이값으로만 이루어진 새 배열을 만들었다.
tArrAge = [26, 37, 29, 21, 31 ,28, 39, 34]
아니 여기선 숫자값으로 잘 들어오는데 위에선 왜 더하기가 안됐을까...왜안되는거야

여기서 다시 배열의 합을 구하려고 for문을 한번 더 돌리려는 순간
iterator 변수를 한번 더 쓰면 혹시 스코프 바깥에도 값이 남아있을까 싶어서 체크해보았다.
스코프확인. 정의가 안됐다고 나온다. 굿