[Javascript] ReferenceError 오류 해결 / find와 filter의 사용법 및 차이점

팀프로젝트 진행 중, 메인페이지에서 상세페이지로 넘어갈 때

객체를 불러오는 것까지는 구현했다(물론 튜터님의 도움을 받아서 ^^)

하지만 화면에 정보가 뜨지 않고 콘솔창에 오류가 발생했다고 떠서

역시나 도움을 청했다 

 

 

작성된 코드 ▼

    const selectedMoive = results.filter((item) => {
      if (item.id == clickId) {
        return true;
      } else {
        return false;
      }

      console.log(item.id);
    });

    console.log(selectedMoive);

    const card = document.createElement("div");
    card.classList.add("movieBox");

    card.innerHTML = `
  <img class = "backImage" src="https://image.tmdb.org/t/p/original/${backdrop_path}">
  <div  id= "movieInfo">
  <img class = "posterImage" src="https://image.tmdb.org/t/p/original/${poster_path}">
  <div class = "content">
  <h3 class = "movieTitle">${title}</h3>
  <p class = "movieOverView">${overview}</p>
  <p class = "movieRate">Rating: ${vote_average}</p>
  </div>
  </div>
  `;

 

 

발생한 오류▼

 

검색을 해보니까 스코프가 잘못됐거나 변수가 정의되지 않았다고 했다

혼자 해결은 어려워서 튜터님께 여쭤보았다

 

 

 

해결된 코드▼

    const selectedMoive = results.filter((item) => {
      if (item.id == clickId) {
        return true;
      } else {
        return false;
      }

      console.log(item.id);
    });

    console.log(selectedMoive);

    const card = document.createElement("div");
    card.classList.add("movieBox");

    card.innerHTML = `
  <img class = "backImage" src="https://image.tmdb.org/t/p/original/${selectedMoive[0].backdrop_path}">
  <div  id= "movieInfo">
  <img class = "posterImage" src="https://image.tmdb.org/t/p/original/${selectedMoive[0].poster_path}">
  <div class = "content">
  <h3 class = "movieTitle">${selectedMoive[0].title}</h3>
  <p class = "movieOverView">${selectedMoive[0].overview}</p>
  <p class = "movieRate">Rating: ${selectedMoive[0].vote_average}</p>
  </div>
  </div>
  `;

selectedMoive[0] <--을 쓰지 않아 오류가 발생되었다

selectedMoive 변수의 0번째 요소 출력!

그리고 [0] 인 이유는 이미 한 개의 객체가 들어가 있기 때문에 첫번째 인덱스 값인 [0]이 되는 것이다

너무나도 가뿐하게 문제를 해결해주셨고 더군다나 예를 들어 잘 설명해주신 덕분에

많은 것을 알아 가는 것 같아 기분 좋았다

 

또 다른 문제점? 이라긴 보단 제안을 해주셨는데 filter 함수보다 find 함수를 사용하는 게

더 알맞은 방법이라고 하셨다

그 이유는 filter 함수는 만약, 20개의 요소가 들어있는 배열이 있다면 다 순회해서 조건에 해당하는 값이 여러 개 있다면

모두 다 출력한다

반면, find 함수는 차례대로 순회하다가 맞는 값이 있으면 그 값만 출력하고 중단하는 차이점이 있다

 

그래서 find 함수가 맞는 이유는

메인페이지 20개 요소에서 각각의 영화가 가진 고유의 id 값이 있을 것이다

단 하나의 값이 있기 때문에 어차피 filter함수를 써도 하나밖에 출력이 안될테고 특성상 다 순회하기 때문에

비효율적인 것! 그래서 찾아야 하는 값이 하나일 경우 find 함수를 써서 더욱 효율적인 코드를 짜야 하는 것이다.

이젠 아래에서 예제를 통한 차이점을 살펴볼 것이다

 

 

---

 

.filter() 함수

배열의 요소를 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수이다

필터링된 배열을 반환한다

 

 

예제 1.

// 필터링할 배열
const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function filterFunc(value) {
  return value % 2 === 0; // 짝수인 경우만 반환
}

// 필터링된 배열로 반환
const result = num.filter(filterFunc);
console.log(result);


//출력값 : [ 2, 4, 6, 8, 10 ]

 

 

예제 2. 

// 다중 조건으로 필터링

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const filterNumbers = numbers.filter((ele) => {
  return ele % 2 === 0 && ele < 5;
});

console.log(filterNumbers);


// 출력값 : [ 2, 4 ]

 

 

예제 3.

// 2차원 배열 필터링
const students = [
  ["희원", 24],
  ["블랙", 12],
  ["의성", 48],
  ["현지", 54],
  ["몽구", 10],
];

// 나이가 30 이상인 학생들만 필터링

const filterStudents = students.filter((stu) => {
  return stu[1] >= 30;
});

console.log(filterStudents);


// 출력값 : [ [ '의성', 48 ], [ '현지', 54 ] ]

 

 

예제 4.

// 문자열 배열에서 길이가 5 이상인 문자열 필터링하기

const words = ["apple", "banana", "cherry", "date", "fig"];

const longwords = words.filter((word) => word.length >= 5);
console.log(longwords);

 

 

 

---

 

 

.find() 함수

배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소를 반환하는 함수이다.

배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾는다.

이 함수는 배열에서 특정 요소를 찾는 데 유용하다.

함수는 조건을 만족하는 첫 번째 요소를 찾으면 배열 순회를 중단하고 해당 요소를 반환한다. 그러면 코드 실행이 멈춘다.

 

 

콜백 함수가 찾아낸 첫 번째 조건을 만족하는 배열 요소이다.
만약 조건을 만족하는 요소를 찾지 못했다면 undefined를 반환한다.

 

 

예제1.

const colors = ["red", "green", "blue"];

function findRed(color) {
  return color === "red";
}

const result = colors.find(findRed);
console.log(result);

// 출력값 : red

 

 

예제 2.

// 특정 요소 찾기
const numbers = [1, 2, 3, 4, 5];
const target = 5;
const found = numbers.find((ele) => ele === target);

console.log(found);

// 출력값 : 5

 

 

예제 3.

// 객체 속성 기반 검색
const people = [
  { name: "희원", age: 23 },
  { name: "의성", age: 45 },
  { name: "현지", age: 51 },
];

const targerName = "현지";
const person = people.find((obj) => obj.name === targerName);

console.log(person);

//출력값 : { name: '현지', age: 51 }

 

 

예제 4.

// 사용자 지정 조건에 따른 검색
const products = [
  { name: "Laptop", price: 1000 },
  { name: "Phone", price: 500 },
  { name: "Tablet", price: 300 },
];

const productInfo = (product) => product.price < 600;
const affordableProduct = products.find(productInfo);

console.log(affordableProduct);

 

 

 

---