개발일기 5월 27일자 배열 메소드 활용

이전에 제출한 코딩테스트 문제를 오늘 배운 배열 ,객체 함수를 활용해 수정해 보았다...

😂ㅇㅏ쉬워라 코딩테스트...내 배움의 부족이여..

 

코테 문제의 내용은 아래와 같다

서버를 호출할때마다 다른 respose가 오는데 그걸 100번 호출하고 중복되는 값을 계산해서 중복된 값이 큰 순으로  정렬 출력해라. <결과는 아래 사진참고>

전에 제출했던 코드는 아래와 같다 😢정렬에 실패했다고 한다... 

let responsedata = [];
let idsInResdata = [];
let total = 0;

function onClickActBtn() {
  document.getElementById("lodingmsg").innerHTML = "데이터를 불러오는 중입니다";
  get100response();
  setTimeout(() => {
    const uniqueResArr = removeRpt(responsedata);
    const countArr = chkRepeatNum(idsInResdata);
    const makeArrInterface = makeArrIn_cnt_id_quote(countArr);
    const resultDataArr = insertQutValue(makeArrInterface, uniqueResArr);
    setTimeout(() => {
      total === 100
        ? printResult(resultDataArr)
        : alert("다시 실행 부탁드립니다.");
    }, 4000);
  }, 3500);
}

function get100response() {
  for (i = 0; i < 100; i++) {
    axios
      .get("/api/5")
      .then((result) => {
        const data = result.data.result;
        const res = { id: data.id, quote: data.quote };
        idsInResdata.push(data.id);
        responsedata.push(res);
      })
      .catch((err) => {
        console.log("서버통신실패");
      });
  }
}

//중복 개수 확인하기
function chkRepeatNum(arr) {
  const result = {};
  arr.forEach((x) => {
    result[x] = (result[x] || 0) + 1;
  });
  return result;
}
//중복 제거 데이터
function removeRpt(ObjArr) {
  const map = new Map();
  for (const character of ObjArr) {
    map.set(JSON.stringify(character), character);
  }
  const arrUnique = [...map.values()];
  console.log(arrUnique);

  return arrUnique;
}

// 결과 객체배열 인터페이스 만들기
function makeArrIn_cnt_id_quote(list) {
  let newArr = [];

  for (i = 0; i < Object.keys(list).length; i++) {
    let key = Object.keys(list)[i];
    let value = Object.values(list)[i];
    newArr.push({ count: value, id: Number(key), quote: "" });
  }

  console.log(newArr);
  return newArr;
}

function insertQutValue(arr, insertArr) {
  for (i = 0; i < arr.length; i++) {
    total += arr[i].count;
    for (j = 0; j < insertArr.length; j++) {
      if (arr[i].id === insertArr[j].id) {
        arr[i].quote = insertArr[j].quote;
      }
    }
  }
  return arr;
}

//정렬은 실패했습니다....
function sortArr(arr) {
  for (i = 0; i < arr.length; i++) {
    for (j = 1; j < arr.length; j++) {
      if (arr[i].count < arr[j].count) {
        let tmp = arr[j];
        arr[i] = arr[j];
        arr[j] = tmp;
      }
    }
  }
  return arr;
}

function printResult(arr) {
  const inputArea = document.getElementById("Q5_resData_input_area");
  document.getElementById("lodingmsg").innerHTML = "";

  for (i = 0; i < arr.length; i++) {
    let row = `<p>count : ${arr[i].count}  { id : ${arr[i].id} , quote : ${arr[i].quote} }`;
    inputArea.innerHTML += row;
  }
  document.getElementById(
    "Q5_resData_total"
  ).innerHTML = `Total Count:${total}`;
}

새로 수정된 코드는 좀더 간결하고 정렬도 성공했다 !!!  줄이 무려 35줄이나 줄었다... 

let responsedata = [];
let idsInResdata = [];
let total = 0;

function onClickActBtn() {
  document.getElementById("lodingmsg").innerHTML = "데이터를 불러오는 중입니다";
  get100response();
  setTimeout(() => {
    const countArr = chkRepeatNum(idsInResdata);
    const resultDataArr = makeResultArr(responsedata, countArr);
    const finArr = sortArr(resultDataArr);
    total === 100 ? printResult(finArr) : alert("다시 실행 부탁드립니다");
  }, 3500);
}

function get100response() {
  for (i = 0; i < 100; i++) {
    axios
      .get("/api/5")
      .then((result) => {
        const data = result.data.result;
        const res = { id: data.id, quote: data.quote };
        idsInResdata.push(data.id);
        responsedata.push(res);
      })
      .catch((err) => {
        console.log("서버통신실패");
      });
  }
}
//중복 개수 확인하기
function chkRepeatNum(arr) {
  const result = {};
  arr.forEach((x) => {
    result[x] = (result[x] || 0) + 1;
  });
  return result;
}

function makeResultArr(arr, list) {
  let newArr = [];
  for (key in list) {
    const findlist = arr.find((list) => list.id == key);
    newArr.push({
      count: list[key],
      id: findlist.id,
      quote: findlist.quote,
    });
    total += list[key];
  }
  return newArr;
}

function sortArr(arr) {
  const newArr = arr.sort((a, b) => {
    return b.count - a.count;
  });

  return newArr;
}

function printResult(arr) {
  const inputArea = document.getElementById("Q5_resData_input_area");
  document.getElementById("lodingmsg").innerHTML = "";

  for (i = 0; i < arr.length; i++) {
    let row = `<p>count : ${arr[i].count} { id : ${arr[i].id} , quote : ${arr[i].quote} }</p>`;
    inputArea.innerHTML += row;
  }
  document.getElementById(
    "Q5_resData_total"
  ).innerHTML = `Total Count:${total}`;
}

비교하자면 전에 작성한 코드는 중복되는 값이 없는 배열의 객체값과 foreach를 통한 중복갯수를 계산한 배열과 합쳐주는 식으로 했다. 수많은 arr[i]가 나와서 굉장히 보기 불편하다 😂ㄱㅏ독성이 아주 떨어짐

 

오늘 작성한 코드는 원리는 비슷하지만 sort,find메소드를 통해 좀더 가독성있게 표현할 수 있었다.

네트워크 속도를 확인해봤지만 비슷했다.. 다만 전의 코드는 정렬을 하지 못했다는 점 ^^ 

 

 

+++추가링크

2022.05.27 - [개발/자바스크립트] - JS/배열 함수 제대로 배우기 indexOf, findIndex,find,filter

JS/배열 함수 제대로 배우기 indexOf, findIndex,find,filter

https://github.com/vv6uos/codingtest_nodejs/commit/1d4d094bc3bb1ac47c71df237c2a8a400886ffa3

Q5코드수정 · vv6uos/codingtest_nodejs@1d4d094