TO DO List

TO DO List 만들기

<div>
    <form class="js-to-do to-do">
        <input class="js-add-to-do to-do__add-to-do" placeholder="Write a To Do here" type="text" />
    </form>
    <ul class="js-list list"></ul>
</div>

const form = document.querySelector(".js-to-do"),
  input = document.querySelector(".js-add-to-do"),
  list = document.querySelector(".js-list");

let toDos = [];

function persistToDos() {
  const stringToDo = JSON.stringify(toDos);
  localStorage.setItem("toDos", stringToDo);
}

function saveToDo(text) {
  const toDoObject = {
    id: toDos.length + 1,
    value: text
  };
  toDos.push(toDoObject);
  persistToDos();
}

function handleDelete(event) {
  const target = event.target;
  const li = target.parentElement;
  const ul = li.parentElement;
  const toDoId = li.id;
  ul.removeChild(li);
  toDos = toDos.filter(function(toDo) { // filter 모든 아이템을 통해 함수를 실행하고 ture인 아이템만 가지고 새로운 array를 만듬
    return toDo.id !== parseInt(toDoId); // 모든 toDos가 li 의 id 와 같지 않을때 
  });
  persistToDos();
}

function addToDo(text) {
  const toDo = document.createElement("li");
  toDo.className = "toDo";
  toDo.id = toDos.length + 1;
  const deleteBtn = document.createElement("span");
  deleteBtn.innerHTML = "❌";
  deleteBtn.className = "toDo__button";
  deleteBtn.addEventListener("click", handleDelete);
  const label = document.createElement("label");
  label.innerHTML = text;
  toDo.appendChild(deleteBtn);
  toDo.appendChild(label);
  list.appendChild(toDo);
  saveToDo(text);
}

function onSubmit(event) {
  event.preventDefault();
  const value = input.value;
  input.value = "";
  addToDo(value);
}

function loadToDos() {
  const loadedToDos = localStorage.getItem("toDos");
  if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos);
    parsedToDos.forEach(function(toDo) { // list에 있는 모든 ltem을 위한 함수를 실행시킴 
      addToDo(toDo.value);
    });
  }
  return;
}

function init() {
  loadToDos();
}

form.addEventListener("submit", onSubmit);

init();

filter

배열을 순회하며 요소마다 조건 확인 후 👉 조건을 만족하는 원소들로 구성된 새로운 배열 리턴

기본선언 방식

let newArray = arr.filter(callbackFunction(element, index, array), thisArg);

예제

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6); // 단어가 6개 이상인 element를 찾아줌

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

function isBigEnough(value) {
  return value >= 10; // value 값이 10보다 큰것 
}

let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]


// 정수 배열에서 5의 배수인 정수만 모으기
var arr = [4, 15, 377, 395, 400, 1024, 3000];
var arr2 = arr.filter(function (n) {
    return n % 5 == 0; // 5로 나눴을때 나머지가 0 이되는값 
});
console.log(arr2); // [15, 395, 400, 3000]

forEach

배열의 모든 요소를 반복하며 콜백 함수를 실행

기본선언 방식

arr.forEach(callback(item, index, array)

예제

const arr = [1,3,5,7,9]; 
// e는 element i는 index의 i,a는 array
// 콜백함수의 매개변수 이름은 수정해도 되지만 순서는 변하지 않습니다.
 arr.forEach(function(e, i, a) { 
 console.log('인덱스 '+i+ ': ' +e+', 배열의 전체는: '+a);
 })


//결과값 
인덱스 0: 1, 배열의 전체는: 1,3,5,7,9 
인덱스 1: 3, 배열의 전체는: 1,3,5,7,9 
인덱스 2: 5, 배열의 전체는: 1,3,5,7,9 
인덱스 3: 7, 배열의 전체는: 1,3,5,7,9 
인덱스 4: 9, 배열의 전체는: 1,3,5,7,9


const arr = [1,3,5,7,9]; 
arr.forEach((e, i, a)=>{
 if (e === 5) return; // return true, false 든 그냥 continue 
console.log('인덱스 '+i+ ': ' +e+', 배열의 전체는: '+a); 
})

//결과값 
// 인덱스 5 해당하는 내용 빼고 모두 출력