#7. To Do List

자식 요소를 가진 HTML Element 만들기

const li = document.createElement("li");
const span = document.createElement("span");
li.appendChild(span);

이후 li를 document 문서 내에 넣으면 span element까지 같이 들어가게 된다

 

event.target.parentElement

// event를 받은 target의 부모 element를 제거
function 함수명(event) {
    const li = event.target.parentElement;
    li.remove();
}

혹은 parentNode(부모가 element가 아닌 경우도 받아올 수 있다)를 사용해도 된다

 

JSON

const player = {name : "nico"};

// object 형식이었던 player를 문자열 형태로 변환
const string = JSON.stringify(player);

// 문자열 형식이었던 json을 object 형태로 변환
const object = JSON.parse(string);

json은 자바스크립트의 object를 string 형태로 바꾸거나, string 형태를 다시 object 형태로 바꿔준다(object 외에 array 등... 다 가능함)

* object 내에 숫자 형태로 저장되었던 정보여도 json stringify -> parse 과정을 거치면 무조건 문자열로 반환되기 때문에, 본래 목적으로 사용할 때에는 parseInt 등을 사용하여 타입을 가공해주어야 한다

 

ForEach

// 방법 1
array.forEach(element => {
    // 반복 실행할 코드
});

// 방법 2
function 함수명(item) {
    // 반복 실행할 코드
}
array.forEach(함수명);

EventListener와 비슷하게, forEach문에서 실행한 함수에는 각 item(array[i]) 값이 같이 전달된다

* 방법 1의 element와 방법 2의 item은 같은 것을 의미함(위 코드에서 이름만 다르게 타이핑 한 것)

* JS의 화살표 함수(arrow function)에서 파라미터가 하나라면 소괄호를 생략해도 된다

* JS의 화살표 함수(arrow function)에서 중괄호 안 문장이 한 줄이라면 중괄호를 생략해도 된다(return 한 줄 뿐이라면 return까지 생략해도 된다)

 

Filter

function 함수명(item) {
    // true를 반환할 경우, 해당 item은 유지
    // false를 반환할 경우, 해당 item은 삭제
}

const newArray = array.filter(함수명);