React에서 자주 사용하는 자바스크립트 배열 API

 

자바스크립트에서 자주 쓰는 배열 API를 정리해보자

 

const initialArray = ["banana", "apple", "cherry", "date", "elderberry"];

  const [array, setArray] = useState(initialArray);
  const [result, setResult] = useState("");
  const [query, setQuery] = useState("");


  /** 함수들 */
  
  const handleForEach = () => {
    let tempResult = "";
    array.forEach((fruit, i) => {
      tempResult += `${i}:${fruit} ,`;
    });

    setResult(tempResult);
  };
  
  //배열을 순회하며 재가공한 값을 저장한다.
  

  const handleFilter = () => {
    const filteredList = array.filter((fruit) => fruit.includes(query));
    setResult(filteredList.join(", "));
  };
  
  //배열 중 input에 입력한 값을 포함한 요소들만 저장한다.

  const handleMap = () => {
    const upperList = array.map((fruit) => fruit.toUpperCase());
    setResult(upperList.join(","));
  };
  
  //모든 배열을 재가공(대문자로 바꿔서)하여 저장한다.

  const handleReduce = () => {
    const reducedList = array.reduce((acc, cur) => {
      return `${acc} + ${cur}`;
    });
    setResult(reducedList);
  };
  
  //첫번째 값에 배열 요소들을 모두 더한 값을 저장한다.

  const handlePush = () => {
    setResult([...array, query].join(", "));
  };
  
  //기존 배열에 입력된 값을 추가하여 저장한다.

  const handlePop = () => {
    const newArr = [...array];
    newArr.pop();
    setArray(newArr);
    setResult(newArr.join(","));
  };
  
  //배열의 마지막 요소를 삭제한다.

  const handleSlice = () => {
    const newArr = [...array];
    const slicedArray = newArr.slice(0, -2);
    setArray(slicedArray);
    setResult(slicedArray.join(","));
  };
  
  //0부터 -2까지의 요소를 삭제한 값을 저장한다.

  const handleSplice = () => {
    const newArr = [...array];
    newArr.splice(2, 2, "kiwi", "lime");
    setArray(newArr);
    setResult(newArr.join(", "));
  };
  
  //2번째 인덱스부터 2개 요소의 명칭을 "kiwi", "lime"으로 바꿔서 저장한다.
  
  const handleIndexOf = () => {
    setResult(array.indexOf(query));
  };
  
  //배열에서 query의 인덱스 값을 저장한다.
  
  const handleIncludes = () => {
    setResult(array.includes(query).toString());
  };
  
  //배열에서 query값을 포함했는지의 여부에 따라 boolean값을 리턴하는데, 이를 string으로 변경해 저장한다.
  
  const handleFind = () => {
    const foundElement = array.find((fruit) => fruit.includes(query));

    if (foundElement) {
      setResult(foundElement);
    } else {
      setResult("Not found");
    }
  };
  
  //배열의 요소 중 query의 값을 포함하는 게 있으면 그 값을 저장하고, 없으면 "Not found"를 띄운다.

  const handleSome = () => {
    setResult(array.some((fruit) => fruit.includes(query)).toString());
  };
  
  //배열의 요소 중 query의 값을 포함하면 boolean값을 리턴하는데, 이를 문자열로 바꿔서 저장한다.

  const handleEvery = () => {
    setResult(array.every((fruit) => fruit.length >= 5).toString());
  };
  
  //모든 배열 요소의 길이가 5가 넘으면 boolean값을 리턴하는데 이를 문자열로 바꿔서 저장한다.

  const handleSort = () => {
    setResult(array.sort().join(","));
  };
  
  //배열 요소를 오름차순으로 정렬하여 저장한다.