JavaScript

배열

유사배열 객체

유사배열 객체란? length 프로퍼티를 가지고 index로 아이템에 접근할수 있는 것들
index를 가지기 때문에 for-of 반복문 같은걸 사용할 수 있다.
예시로 Nodelist와 String 이 있음
진짜 배열에만 쓸수 있는 메서드들(대표적으로 splice)이 존재함 이런건 유사배열 객체에 쓸 수 없음

const moreNumbers = Array.from();

()안에 유사배열객체나 이터러블을 받아서 진짜 배열로 만드는 메서드. 배열이 아닌 것에 배열에만 쓸수 있는 메서드를 쓰고 싶을 때 유용하게 활용할 수 있다.

splice

• splice(a,b,c) a번째부터 b개를 지우고 지운 그 자리에 c 를 넣을게

const hobbies = ["sports", "cooking"];
hobbies.splice(0, 0, "good food");

요러면 0번째부터 0개를 지우고 그자리(첫번째자리)에 ‘good food’가 들어감

const hobbies = ["sports", "cooking"];
hobbies.splice(1, 0, "good food");

이러면? 두번째 자리에 good food 가 들어가서 [‘sports’, ’good food’, ‘cooking’] 이 되는거지

splice(0,1) 은 뭐가 될까? 첫번째 item을 지우겠단 소리지
참고) splice(0) 은 배열의 모든 요소를 전부 다 지운다.
splice의 중요한 특징! => 지운 요소를 배열로 반환한다.

const hobbies = ["sports", "cooking"];
hobbies.splice(0, 0, "good food");

const removedElements = hobbies.splice(0, 1);
console.log(removedElements); // 출력: [“good food”]

splice엔 음수도 쓸수 있다
splice(-1,1) 이런식으로 음수가 들어가면 마지막 요소의 위치를 말한다. 마지막 요소에 있는거 하나를 지우게 되겠지.
splice(-2,1) 는 마지막에서 두번째에 있는 요소를 지우란 뜻

slice

const testResults = [1, 5.3, 1.5, 10.99, -5, 10];
console.log(testResults.slice()); // testResults 와 완전 같은 배열이 출력

slice(a,b) 는 범위를 지정하여 새로운 배열을 만든다. a부터 시작하여 b바로 전까지 복제

const testResults = [1, 5.3, 1.5, 10.99, -5, 10];
const storedResults = testResults.slice(0, 2);
console.log(storedResults); // 출력 : [1,5.3] 

2번째 인덱스까지를 지정했지만 마지막인 2번째 인덱스에 해당하는 1.5는 포함되지 x

slice의 시작 범위만 정하면?

const testResults = [1, 5.3, 1.5, 10.99, -5, 10];
const storedResults = testResults.slice(3);
console.log(storedResults); // 출력:  [10.99, -5, 10]

3번 인덱스부터(4번째 요소) 끝까지 복제

concat

.concat() 배열 끝에 요소를 추가해서 연결할 수 있게 한다
concatenate 에서 유래 : “사슬 같이 잇다”
어 그럼 push() 랑 같은거 아님? 아님. concat은 배열을 받아서 여러 요소를 다른 배열의 끝에 추가해줌. 추가할때 nested array로 배열 안에 배열을 집어 넣는게 아니고 요소들을 풀어헤쳐서 넣어줌. 그리고 기존 배열을 변경하는게 아니고 완전히 새로운 배열을 생성한다는 것도 중요.

const testResults = [1, 5.3, 1.5, 10.99, -5, 10];

const storedResults = testResults.concat([3.99, 2]);
console.log(testResults); //출력:  [1, 5.3, 1.5, 10.99, -5, 10]
console.log(storedResults); // 출력: [1, 5.3, 1.5, 10.99, -5, 10, 3.99, 2]

과제

검색 기능 구현

설명

• 검색 기능 구현에 성공!

function processSearchInput(searchTerm) {
        
        console.log("검색어:", searchTerm);
        // console.log(movies[0].title, "검색기능에서도 movies참조가능!");
        if (searchTerm === "") {
          console.log("검색어가 비어있네요");
          dataContainer.innerHTML = "";
          //datacontainer를 비우고 카드재생성
          movies.forEach((mov) => {
            const card = createMovieCard(mov);
            dataContainer.appendChild(card);
          });
          return;
        } else if (searchTerm !== "") {
          console.log("검색어가 비어있지 않아요");
          let searchedMovies = [];
          let searchTermLower = searchTerm.toLowerCase();
          movies.forEach((mov) => {
            if (mov.title.toLowerCase().includes(searchTermLower)) {
              searchedMovies.push(mov);
            }
          });
          searchedMovies.length === 0
            ? [
                alert("일치하는 검색 결과가 없어요. 다른 검색어를 골라보세요"),
                location.reload(),
              ]
            : alert(`검색 결과가 ${searchedMovies.length}개 있어요`);

          dataContainer.innerHTML = "";
          //카드 재생성하되, 검색기능에 걸린 카드로만 재생성
          searchedMovies.forEach((mov) => {
            const card = createMovieCard(mov);
            dataContainer.appendChild(card);
          });
        }
      }

• 카드 생성 함수가 어떤 주어진 배열을 두고 ForEach를 돌리게 되어있는데, 검색 값에 따라서 카드 생성 함수에 주는 배열을 다르게 했다.

• if 문을 사용해 검색어가 있을때와 없을때 다르게 동작하도록 했다

• 카드 생성 div를 비워주지 않으면 검색할때마다 점점 카드 수가 늘어나는 문제점 발생
  =>dataContainer.innerHTML = "";로 내용물 비워주기로 해결

• 삼항 연산자를 이용해 검색어가 유효할때와 유효하지 않을때 각각 다른 alert 을 띄워주는 기능 구현

• console에 띄우는 로그들은 그냥 내가 작업할때 편하려고 넣은건데 이 부분들은 나중에 다 지워줘야 하는것이 관례에 맞는지 모르겠다. 진짜 모르겠어서 기회 되면 물어봐야겠다.

• 삼항 연산자에서 true일때나 false일때나 한가지 코드만 실행 가능한 것이라고 잘못 알고있었는데, 이번에 팀원의 도움으로 그것이 아니란 사실을 알게 되었다. 삼항 연산자에서 수행할 복수의 코드를 [ ] 로 감싸주면 문제없이 수행된다.

문제점 및 개선점

• 애초에 검색 기능을 저렇게 구현하는게 맞나 의문이 든다. 페이지가 로드 될때 카드 생성 한번 하고, 그 이후에 검색어가 submit 될때마다 새로 카드를 만들어서 뿌려주는 방식인데 리소스 낭비 아닌가 하는 걱정이 있다.

  다른 사람들이 구현한 검색 기능은 보통 카드 생성을 한번 해두고 검색어에 따라서 카드를 display:block 이나 display:none 으로 숨겼다 보였다 하는 방식을 취했는데 아무리 생각해도 그게 더 효율적인 것 같다.

• 외부에서 받아온 자료를 활용하는데 계속 애먹었다. 배열의 형태로 영화 목록과 정보를 받아왔는데 이걸 fetch가 있는 this 밖에서 쓸수가 없었다. 그래서 검색 기능과 관련된 코드들을 전부 해당 this 안으로 밀어 넣을 수 밖에 없었다. 당연히 최선은 아니라고 생각되지만 일단 다른 방법이 떠오르지 않아서 택한 방법이다.

새로 배운점

• 삼항연산자의 활용에 대한 이해가 깊어졌다.

• 스코프가 뭔지 (고생하다보니) 이제 약간은 알것 같다.

• return 키워드로 원하는 지점에서 코드 끊는것을 처음 시도해봤는데 잘 된다.

• toLowerCase 메서드의 활용을 배웠다. 대문자/소문자 상관없이 검색이 가능하게 했다.

• 빈 배열을 선언해두고 나중에 그 배열을 채우는 식의 활용을 배웠다. 이렇게 하면 그 배열을 나중에 여기저기서 써먹기 더 편해진다.

• .includes 메서드 처음 써봤다

• location.reload() 처음 배웠고 사용해보았다. 원하는 시점에 새로고침을 강제할수 있다니 앞으로도 종종 쓸것 같다.

personal remark

어제까지만 해도 검색기능 절대 못만들것 같았는데 오늘 우여곡절 끝에 결국 만들어냈다.
더 꾸미거나 기능 추가해보는것보다 일단 빨리 제출해서 내 코드에 대한 피드백을 받는게 보다 도움이 될듯 해서 제출까지 완료했다.

과제의 요구사항들을 전부 다 구현하는데 성공해서 기분이 정말 좋다. 내 실력으로 가능한 범위를 한~참 넘은 과제였는데 그걸 억지로 하려다 보니까 정말 정말 많이 배우고 알게 된것 같다.

역시 어림도 없는걸 억지로 할때가 가장 빠르게 배우는것 같다.

아직 해결하지 못한 부분도 잔뜩 있다. this, promise, await, async 이런 부분을 제대로 이해하지 못한채로 과제를 하려니 너무 힘든 부분이 많았고 시행착오도 많이 겪었다. 그리고 아직도 이것들을 잘 모른다. 주말을 갈아 넣어서라도 꼭 이 부분에 대한 보충 공부를 하는 것이 내가 해야할 일이다.