Глупый JS. Делаем фильтры «по красоте»

Эхх, о времена, о нравы… Начинали мы не с console.log(), а с document.write("Hello world!") :)

~i.indexOf(val)

function filter(val,list){
console.time('test')
  return list.filter(i=>(~i.indexOf(val)))
};

На вкус и цвет, конечно.

const list = ['JavaScript', 'Kotlin', 'Rust', 'PHP', 'Ruby', 'Java', 'MarkDown', 'Python', 'C++', 'Fortran', 'Assembler'];

const result = document.getElementById('results');

renderList(list, result);

function filter(val, _list) {
  return _list.filter(it => it.indexOf(val) !== -1);
}

function renderList(_list = [], el = document.body) {
  el.innerHTML = _list.map(item => `<li>${item}/li>`);
}

document.getElementById('search').addEventListener('input', e => {
  console.time('test');
  renderList(filter(e.target.value, list), result);
  console.timeEnd('test');
});

Покопавшись в документации, я нашел, что можно юзать побитовое отрицание

Не надо использовать битовые операторы вместо логических. Просто не надо.

Рабочий пример можете найти по ссылке

document.getElementById

// list дальше по коду не меняется, должен быть const
let list = ['JavaScript','Kotlin','Rust','PHP','Ruby','Java','MarkDown','Python','C++','Fortran','Assembler']

// красивиое и понятное название переменной, да
const result = document.getElementById('results')

// вызывать функцию до объявления конечно можно, но не нужно
renderList(list,result)

// зачем фильтр два раза объявлен?
function filter(val,list){
let result;
  list.forEach(i=>{
    if(i.indexOf(val)!=-1)
      result.push(i)
  })
return result;
}

// вообще сама конструкция array.filter подразумевает что у вас будет не обертка над ней
// а где-то в коде list.filter(predicate);
// а тут этот самый предикат объявлен
function filter(val,list){
console.time('test')
  return list.filter(i=>(~i.indexOf(val)))
};

function renderList(_list=[],el=document.body){

    // Удаляйте элементы правильно, раз на то пошло.
   // https://jsperf.com/innerhtml-vs-removechild
   // В идеале даже делать дифф и не удалять не удалившиеся
  el.innerHTML=''; // то есть, то нет точки с запятой, уж определитесь

  _list.forEach(i=>{
    // const опять же
    let new_el = document.createElement('li')
    new_el.innerHTML=i // а погуглить правильный путь не пробовали?
    el.appendChild(new_el)
  })
  console.timeEnd('test')
}

// Как отписываться от этого события будете?
// Бизнес-логика в хандлере. +1, мне нравится
document.getElementById('search').addEventListener('input',e=>renderList(filter(e.target.value,list),result))

А еще почему используете стрелочные функции и let, но игнорируете классы?
Смешена логика и отображение, да вообще, "по красоте" как-то некрасиво получилось.

сжатия через babel

Ничего бейбель не жмет, он не для этого предназначен.

const list = ['JavaScript', 'Kotlin', 'Rust', 'PHP', 'Ruby', 'Java', 'MarkDown', 'Python', 'C++', 'Fortran', 'Assembler'];
const result = document.getElementById('results');
const renderResult = list => renderList(list, result);
const renderFilteredResult = val => renderResult(list.filter(i => (~i.indexOf(e.target.value))));
const searchHandler = ({target: {value}}) => renderFilteredResult(value);

renderResult(list);

function renderList(list = [], el = document.body) {
    el.innerHTML = '';
    list.forEach(i => {
        let new_el = document.createElement('li');
        new_el.innerHTML = i;
        el.appendChild(new_el);
    })
}

document.getElementById('search').addEventListener('input', searchHandler);

Молодой человек, почитайте что-нибудь на тему соглашений о оформлении кода, ваши будущие коллеги будут вам благодарны.

new_el.innerHTML=i

Такое приложение получилось очень шустрым

Не буду углубляться в подробности, но в большинстве случаев при грамотном построении приложения на фреймворке вы выиграете в скорости, поддерживаемости и читаемости.