Links

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 해당하는 내용 빼고 모두 출력