Javascript method practice

JS-Practice.js

import axios from "axios";
// ====================================================
// https://codeburst.io/all-about-javascript-arrays-in-1-article-39da12170b1c
// DONT USE DELETE ON ARRAYS - use proper methods

export const myAsyncFunc = async url => {
  // const payload = await window.fetch(url);
  // const payloadJSON = await payload.json();
  const payload = await axios(url);
  const data = payload.data
  // ====================================================

  // Return a decending numerically sorted array of objects
  const numericallySorted = (data) => { 
    const newData = data
    console.log('**** numericallySorted ****')
    return newData.sort((a, b) => a.userId - b.userId);
  }
  

  // Return an alphabetically sorted array of objects
  const alphabeticallySorted = data => {
    console.log("**** alphabeticallySorted ****");
    return data.sort(function(a, b){
      const titleA = a.title.toLowerCase(),
            titleB = b.title.toLowerCase();
      if (titleA < titleB)
        //sort string A-Z
        return -1;
      if (titleA > titleB) return 1;
      return 0; //default return value (no sorting)
    });
  };
  

  // Return a reversed array of objects
  const reversedOrderNumerical = (data) => {
    console.log('**** reversedOrderNumerical ****')
    return data.reverse()
  }
  

  // Use reduce to categorize some data
  const reducedData = (data) => {
  console.log('**** const ****')
    const reducedArray = data.reduce((accumulator, currentValue) => {
      return Number(accumulator + currentValue.id);
    }, 0);

    return reducedArray
  }

  // Return a shifted/unshifted/pushed/popped array
  const manipulatedContents = (data, typeOfChange) => {
    let scopeData = Object.create(data)
    console.log('**** manipulatedContents ****')
    switch (typeOfChange) {
      case 'shift':
        scopeData.shift()
        break;
      case 'unshift':
        scopeData.unshift('newElement')
        break;
      case 'pop':
        scopeData.pop()
        break;
      case 'push':
        scopeData.push('newElement')
        break;
      default:
        break;
    }
    return scopeData
  }
  
  // Use spread operator to add items to array
  const addUsingSpread = (data) => {
    console.log('**** addUsingSpread ****')
    return ['newElement', ...data]
  }
  

  // Use spread operator to merge 2 objects
  const mergeObjectsUsingSpread = (data) => {
    // Skip using "data" here as its an array
    const tempObj = {
      someKey: "someVal",
      someOtherKey: "someOtherVal"
    };
    const tempObj2 = {
      someKey2: "someVal2",
      someOtherKey2: "someOtherVal2"
    };
    console.log('**** mergeObjectsUsingSpread ****')
    return {...tempObj, ...tempObj2}
  }
  

  // Use spread operator to merge 2 array
  const mergeArraysUsingSpread = (data) => {
    const newArray = ['hi','hello','yolo']
    console.log('**** mergeArraysUsingSpread ****')
    return [...newArray, data]
  }
  

  // Add an element to an array with splice
  const addUsingSplice = (data) => {
    console.log("**** addUsingSplice ****");
    // index 0, how many 0, val
    data.splice(0, 0, "newElement");
    return data;
  }
  

  // Add a portion to an array with slice
  const getSubArrayWithSlice = (data) => {
    console.log('**** getSubArrayWithSlice ****')
    return data.slice(30,35)
  }
  

  // Join all elements of an array to a dash seperated string
  const joinWithDashes = (data) => {
    const ids = data.map((item,index) => item.id)
    console.log('**** joinWithDashes ****')
    return ids.join('-')
  }
  

  // Use map and/or forEach and/or for-in to loop through an array
  const logWithMap = (data) => {
    console.log('**** logWithMap ****')
    return data.map((item, index) => item.id);
  }
  

  // Use .find to get the first result of a match in an array
  const getFirstMatchWithFind = (data) => {
    console.log('**** getFirstMatchWithFind ****')
    const foundItem = data.find(element => {
      return element.title.includes('fugit');
    });
    return foundItem;
  }
  

  // Use .filter to return a new array of only some elements
  const filterItemsInArray = (data) => {
    console.log('**** filterItemsInArray ****')
    return data.filter(item => item.body.length > 200);
  }
  

  // RANGE FUNCTION!!!!!!!
  // range function takes 3 parameters
  // start value, stop value, and the step
  const rangeFunc = (start, stop, step = 1) => {
    console.log('**** rangeFunc ****')
    return Array(stop - start)
      .fill(start)
      .map((x, y) => x + y * step);
  }
  

  // Traverse through the depth of some data using recursion
  function buildTree(data, isChild = false) {
    let html = document.createElement('ul');
    data.forEach(element => {
      let li = document.createElement('li');
      let text = document.createTextNode(element.title);
      li.appendChild(text)
      html.appendChild(li)
      // If the current data element
      // has children then call the
      // buildTree again passing in
      // the children and isChild = true
      if (element.children) {
        html.appendChild(buildTree(element.children, true));
      }
    });
    return html;
  }

  // Perform a binary search ✅

  // console.table(numericallySorted(data));
  // console.table(alphabeticallySorted(data));
  // console.table(reversedOrderNumerical(data));
  // console.table(reducedData(data))
  // console.log(
  //   manipulatedContents(data, "shift").length,
  //   manipulatedContents(data, "unshift")[0],
  //   manipulatedContents(data, "pop").length,
  //   manipulatedContents(data, "push")[100]
  // );
  // console.table(addUsingSpread(data));
  // console.table(mergeObjectsUsingSpread(data));
  // console.table(mergeArraysUsingSpread(data));
  // console.table(addUsingSplice(data));
  // console.table(getSubArrayWithSlice(data));
  // console.table(joinWithDashes(data));
  // console.table(logWithMap(data));
  // console.table(getFirstMatchWithFind(data));
  // console.table(filterItemsInArray(data));
  // console.log(rangeFunc(0,10,2));
//   console.log(
//     buildTree([
//       {
//         title: "menu 1",
//         children: [
//           { title: "menu 1.1" },
//           {
//             title: "menu 1.2",
//             children: [{ title: "menu 1.2.1" }, { title: "menu 1.2.2" }]
//           }
//         ]
//       },
//       {
//         title: "menu 2",
//         children: [{ title: "menu 2.1" }, { title: "menu 2.2" }]
//       }
//     ])
//   );
};