HTML과 CSS를 학습했다.
id와 class를 잘 나누어야 CSS를 사용하기 편하다는 것을 알게되었다.
그에 앞서 HTML을 보기좋게 최대한 간단하게 구성하는 것이 중요하다.
DOM reference :https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C
map, filter, reduce를 학습하며 callback 함수에 대해 이해했다.
위 고차함수들은 반복문의 심화라고 보면 된다. 일단 주어지는 배열의 요소 하나 하나를 다 순회해가며 주어진 일을 수행한다.
arr.map(function(element){~})
배열의 요소마다 주어진 함수를 적용시켜 새로운 배열을 리턴한다.
기존 배열과 리턴된 새로운 배열의 길이는 동일하다.
arr.filter(function(element){~})
주어진 함수를 통과하는 배열의 요소만 모아 새로운 배열을 리턴한다.
기존 배열과 리턴된 새로운 배열의 길이는 달라질 수 있다.
arr. reduce(function(accumulator, currentIndex){~}, initialValue)
배열의 각 요소를 순회하며 함수를 적용한 결과값을 accumulator
에 저장하여 계산하도록 한다. initalValue
는 accumulator
의 초기값을 뜻하며, 따로 설정하지 않으면 배열의 첫번째 인덱스 값이 자동으로 배정된다. 본 함수의 리턴되는 값은 accumulator
이다.
세 함수의 차이점을 쉽게 잘 나타낸 그림을 첨부한다😎
함수내에서 자기 자신의 함수를 또 불러내는 알고리즘이다. 이 재귀함수를 통해서 기존 내장 함수 구현을 시도해보았다.
function stringifyJSON(obj) {
if(typeof(obj) === 'boolean' || typeof(obj) === 'number' || obj === null ) {
return String(obj);
}
else if(typeof(obj) === 'string') {
return `"${obj}"`
}
else if(typeof(obj) === 'undefined' || typeof(obj) === 'function') {
return undefined;
}
else if(Array.isArray(obj)) {
return `[${obj.map(stringifyJSON).join(',')}]` ;
}
else if(typeof obj === 'object') {
return `{${Object.entries(obj)
.filter(function([key, value]) {
if(stringifyJSON(value) !== undefined) {
return [key, value];
}
})
.map(function([key, value]) {
return `"${key}":${stringifyJSON(value)}`})
.join(",")}}`;
}
};
reference : https://wani.kr/posts/2020/02/11/make-parser-1/
function getElementsByClassName(className) {
let parents = document.body;
let result = [];
function check(parents) {
if (parents.classList && parents.classList.contains(className)) {
result.push(parents);
}
if (parents.hasChildNodes()) {
for (let i = 0; i < parents.childNodes.length; i++) {
check(parents.childNodes[i]);
}
}
}
check(parents);
return result;
};