How to filter an array and extract the values which are equal to another array in javascript?

See also questions close to this topic

• How to devise this solution to Non-Constructible Change challenge from Algoexpert.io

  I'm working through algoexpert.io coding challenges and I'm having trouble undersatnding the suggested solution to one of the questions titled Non-Constructible Change

  Here's the challenge question:

  Given an array of positive integers representing the values of coins in your possession, write a function that returns the minimum amount of change (the minimum sum of money) that you cannot create. The given coins can have any positive integer value and aren't necessarily unique (i.e., you can have multiple coins of the same value).

  For example, if you're given coins = [1, 2, 5], the minimum amount of change that you can't create is 4. If you're given no coins, the minimum amount of change that you can't create is 1.

  // O(nlogn) time, O(n) size.
  function nonConstructibleChange(coins) {
    coins = coins.sort((a, b) => a - b); // O(nlogn) time operation
    let change = 0;
  
    for (coin of coins) {
      if (coin > change + 1) return change + 1;
      change += coin;
    }
  
    return change + 1;
  }
  

  My problem

  I am not completely sure how did the author of the solution come up with the intuition that

  if the current coin is greater than `change + 1`, the smallest impossible change is equal to `change + 1`.
  

  I can see how it tracks, and indeed the algorithm passes all tests, but I'd like to know more about a process I could use to devise this rule.

  Thank you for taking the time to read the question!
• My document is not defined because of lost context

  Working with vanilla.js and my code looks like this:

  class Restaurant {
    constructor() {
      this.menu = [];
      this.categories = ['all'];
    }
    handleSearch(event) {
      const searchInput = document.querySelector('.search-input');
      const minPriceInput = document.querySelector('.min-price');
      const maxPriceInput = document.querySelector('.max-price');
      if (event.target.matches('.search-btn')) {
        event.preventDefault();
        const keyword = searchInput.value.toLowerCase();
        const minPrice = minPriceInput.value || 0;
        const maxPrice = maxPriceInput || Infinity;
        let category = docuemnt.querySelector(".filter-active").dataset.id;
        let filteredMenu = [];
        if (category === this.categories[0]) { // categories[0] is "all";
          filteredMenu = menu.filter(item => {
            return item.title.includes(keyword) && item.price >= minPrice && item.price <= maxPrice;
          })
          this.renderMenu(filteredMenu);
        } else {
          filteredMenu = menu.filter(item => {
            return item.category === selectedCategory && item.title.includes(keyword) && item.price >= minPrice && item.price <= maxPrice;
          })
          this.renderMenu(filteredMenu);
        }
      }
    }
    render() {
      const buttonsContainer = document.querySelector('.btn-container');
      const searchButton = document.querySelector('.search-btn');
      buttonsContainer.addEventListener('click', this.handleFilter.bind(this));
      searchButton.addEventListener('click', this.handleSearch.bind(this));
      this.setCategories();
      this.renderButtons();
      this.renderMenu(this.menu);
    }
  }
  

  my document object is undefined inside the handleSearch method. Is it possible to solve this problem without placing all element variables outside the method? Even if I do so I have another variable "categories" which is using document object.
• React-dnd multiple elements

  I can make react-dnd drag easily having a single element to drag over however I have array of 4 fields I'd like to make draggable. In my example code down below it creates four boxes from mapping the array and each box has a className of 'element'. Which should make them all draggable however they won't move.

  Here is my drag code:

   const ELEMENT = 'element';
      const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
        type: ELEMENT,
        collect: (monitor) => ({
          isDragging: monitor.isDragging()
        })
      }))
  

  Here is my draggable element:

   {FieldDetail.map((e,i) =>  
     <div key={i} ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
          <div className='element' ref={drag}></div>            
      </div>          
    )} 
  

  Any ideas? Do I need to do something more within the type or className?