[TIL] Day 22 배열 API 사이트 만들기2

2023.11.03 금

 

메서드를 더 추가하여 배열 API 사이트를 완성했다.

 

• IndexOf
• Includes
• Find
• Some
• Every
• Sort
• Join

 

 

 

IndexOf

"배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환합니다."

배열 요소를 돌며 해당하는 값과 일치하는 요소의 index를 반환한다.

  const handleIndexOf = () => {
    const IndexOf = newArr.indexOf(query);
    return (IndexOf === -1) ? alert("확인하려는 값을 정확히 입력해주세요.") : setResult(IndexOf);
  }

원본 배열 ▶ apple, banana, cherry, date, elderberry

입력 값 ▶ banana

결과 ▶ 1

 

 

Includes

"배열의 항목에 특정 값이 포함되어 있는지를 판단하여 적절히 true 또는 false를 반환합니다."

배열 요소를 돌며 해당하는 값이 포함되어 있으면 true를 반환한다.

  const handleIncludes = () => {
    const Includes = newArr.includes(query);
    if (query === "") {
      alert("확인하려는 값을 정확히 입력해주세요.");
    }
    console.log(query)
    return Includes ? setResult("True") : setResult("False");
  }

원본 배열 ▶ apple, banana, cherry, date, elderberry

입력 값 ▶ banana

결과 ▶ True

 

 

Find

"제공된 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환합니다. 테스트 함수를 만족하는 값이 없으면 undefined가 반환됩니다."

배열 요소를 돌며 해당하는 값이 포함되어 있으면 첫 번째를 요소를 반환한다.

  const handleFind = () => {
    const found = newArr.find(item => item.includes(query));
    return (found !== undefined) ? setResult(found) : setResult("Not Found");
  }

원본 배열 ▶ apple, banana, cherry, date, elderberry

입력 값 ▶ bana

결과 ▶ banana

 

 

Some

"배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트합니다. 만약 배열에서 주어진 함수가 true을 반환하면 true를 반환합니다. 그렇지 않으면 false를 반환합니다. 이 메서드는 배열을 변경하지 않습니다."

배열 요소를 돌며 해당하는 값이 하나라도 포함되어 있으면 true를 반환한다.

  // + some의 경우 각 요소가 input의 value(query)를 포함하고 있는 경우 true를 반환하도록 구현합니다.
  const handleSome = () => {
    const some = newArr.some(item => item.includes(query))
    if (query === "") {
      alert("확인하려는 값을 입력해주세요.");
    }
    return some ? setResult("True") : setResult("False");
  }

원본 배열 ▶ apple, banana, cherry, date, elderberry

입력 값 ▶ a

결과 ▶ True

 

 

Every

"열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트합니다. 이 메서드는 불리언 값을 반환합니다."

배열 요소를 돌며 모든 요소들이 조건에 해당하면 true를 반환한다.

  // + every의 경우 각 요소가 모두 2글자 이상의 길이를 가진 경우 true를 반환하도록 구현합니다.
  const handleEvery = () => {
    const every = newArr.every(item => item.length >= 2);
    return every ? setResult("True") : setResult("False");
  }

원본 배열 ▶ apple, banana, cherry, date, elderberry

결과 ▶ True

 

 

Sort

"배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다."

배열을 돌며 배열의 요소를 순서대로 정렬한다.

  const handleSort = () => {
    const sorted = array.sort();
    setResult(sorted.join(", "))
  }

원본 배열 ▶ apple, banana, cherry, date, elderberry

결과 ▶ apple, banana, cherry, date, elderberry

 

 

Join

"배열의 모든 요소를 연결해 하나의 문자열로 만듭니다."

배열 요소 사이에 해당하는 입력값을 배치시켜서 문자열로 반환한다.

  const handleJoin = () => {
    return (query === "") ? alert("단어 사이에 넣을 값을 입력해 주세요.") : setResult(newArr.join(query));
  }

원본 배열 ▶ apple, banana, cherry, date, elderberry

입력 값 ▶ /

결과 ▶ apple/banana/cherry/date/elderberry

 

 

 

Pro Tips

불변성 X → mutable하다(변하기 쉬운)
push 메서드는 원본 배열을 변경시킨다

불변성 O → immutable 하다(불변의, 변경되지 않는)
map 메서드는 원본 배열을 변경시키지 않는다. 새로운 배열이 리턴되기 때문

 

Does it mutate 정리 사이트

Does it mutate?

 

 

Method

메소드? 메서드? 
프로그래밍 언어 공부하면서 정리를 할 때 메소드, 메서드 쓸 때마다 헷갈린다.

정답 : 메서드

 

 

---

하루를 마치며

추가적으로 배열 메서드 버튼을 만들어보면서 익혀보지 못한 부분들을 다뤄볼 수 있었다. CSS파일을 불러오지 않고 jsx 파일 내부에 작성하는 방법을 연습하면서 어려움이 조금 있었다. CSS에선 align-items: center; 으로 작성했다면, jsx에선 alignItems: "center",  로 작성해야했다.작성 방법이 궁금해서 해봤는데, 정말 간단한 설정이 아닌 이상 CSS 파일을 이용하자!

 

 

오늘의 한 줄
다음 프로젝트로 바통터치