[JS] every & some

---

알고있으면 좋은 Javascript Tip✨

---

every & some 이란 무엇인가?

• every
  1. 배열의 모든 요소가 조건을 충족하는지 확인 한다. (AND, &&)
  2. callback 함수를 인자로 주면 각 요소들 중 하나라도 false를 리턴할 경우 false가 된다.
• some
  1. 배열의 1개 요소라도 특정 조건을 충족하는지 확인 한다. (OR, ||)
  2. callback 함수를 인자로 주면 각 요소들 중 하나라도 true를 리턴하면 값은 true이다.

const array = [1, 2, 3, 4];

let result = array.some(num => num > 2);
console.log(result)   // true

result = array.every(num => num > 2);
console.log(result)   // false

 

(1) 예제로 알아보기

<ul className="search-type-ul">
  {homePokemonTypes.map(data => (
    <li key={data.type_id}
      onClick={() => handleTypeSelection(data.type_id, data.type_name)}
      className={selectedTypes.some(type => type.type_id === data.type_id)
          ? 'typeOn'
          : 'search-type-li'
      }
    >

      {/* 타입 이미지를 표시 */}
      <img className="search-type-img"
        src={selectedTypes.some(type => type.type_id === data.type_id)
            ? data.type_image
            : data.type_color_image
        }
      />
      
      {/* 현재 타입이 선택되지 않았을 때에만 타입 이름을 표시 */}
      {selectedTypes.every(type => type.type_id !== data.type_id) && (
        <p className="search-type-text">{data.type_name}</p>
      )}
    </li>
  ))}
</ul>

• selectedTypes.some(...)
  1. 배열 selectedTypes에 대해 조건을 만족하는 요소가 하나라도 있는지 확인한다.
  2. data.type_id가 selectedTypes 배열에 있는 어떤 요소의 type_id와 일치하는지를 확인하고, 일치하는 경우에는 typeOn 클래스를 할당하고 그렇지 않은 경우에는 search-type-li 클래스를 할당한다.
• selectedTypes.every(...)
  1. 배열 selectedTypes의 모든 요소가 조건을 만족하는지 확인한다.
  2. data.type_id가 selectedTypes 배열의 모든 요소의 type_id와 일치하지 않는지를 확인하고, 일치하지 않는 경우에만 해당 타입의 이름을 표시한다.