일급 객체
함수: 일급 객체
- 변수에 할당할 수 있음
- 다른 함수의 전달인자로 전달될 수 있음
- 다른 함수의 결과로 리턴될 수 있음
고차함수
고차 함수: 함수를 전달인자로 받는 함수, 함수를 리턴하는 함수
- 콜백 함수: 다른 함수의 전달인자로 전달되는 함수
- 커링 함수: 함수를 리턴하는 함수
내장 고차 함수
예제)
/ 단행본 모음
const cartoons = [
{
id: 1,
bookType: 'cartoon',
title: '식객',
subtitle: '어머니의 쌀',
createdAt: '2003-09-09',
genre: '요리',
artist: '허영만',
averageScore: 9.66,
},
{
id: 2,
// .. 이하 생략
},
// ... 이하 생략
]; filter
filter 메서드: 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드 / 배열의 각 요소가 특정 함수가 사실일 때 따로 분류
// 단행본 한 권의 출판 연도가 2003인지 확인하는 함수
const isCreatedAt2003 = function (cartoon) {
const fullYear = new Date(cartoon.createdAt).getFullYear()
return fullYear === 2003;
};
// 출판 연도가 2003년인 책의 모음
const filteredCartoons = cartoons.filter(isCreatedAt2003); map
map: 배열의 각 요소가 특정 함수에 의해 다른 요소로 지정
// 만화책 한 권의 부제를 리턴하는 로직(함수)
const findSubtitle = function (cartoon) {
return cartoon.subtitle;
};
// 각 책의 부제 모음
const subtitles = cartoons.map(findSubtitle); // ['어머니의 쌀', ...]reduce
reduce: 배열의 각 요소를 특정 함수에 따라 원하는 하나의 형태로 응축
// 단행본 한 권의 평점을 누적값에 더한다.
const scoreReducer = function (sum, cartoon) {
return sum + cartoon.averageScore;
};
// 초기값에 0을 주고, 숫자의 형태로 평점을 누적한다.
let initialValue = 0
// 모든 책의 평점을 누적한 평균을 구한다.
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;추상화
추상화: 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것
함수: 값 수준의 추상화
고차 함수: 사고 수준의 추상화
DOM
DOM(Document Object Model): HTML 요소를 Object처럼 조작할 수 있는 model
HTML에 JS 적용
웹 브라우저는 <script>요소 만나면 HTML 해석 정지 후 <script>요소 먼저 실행
<script> 요소 추가 위치
- <head> 안쪽
- <body> 끝나기 전
console.dir: DOM을 객체의 모습으로 출력
CRUD
CRUD(Create, Read, Update, Delete)
- create: 생성
// 변수 tweetDiv에 새로운 <div>요소 할당
const tweetDiv = document.createElement('div')- append: 추가
// 변수 tweetDiv에 담긴 새로운 <div>요소를 <body>요소에 append
document.body.append(tweetDiv)- read: 조회
// tweetDiv를 container의 마지막 자식 요소로 추가
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)querySelector: 선택자 - HTML 요소("div"), id("#tweetList"), class(.tweet)
// 클래스 이름이 tweet인 HTML 요소 중 첫 번째 요소 조회
const oneTweet = document.querySelector('.tweet')// 클래스 이름이 tweet인 HTML 요소를 유사 배열(Array-like Object)로 조회
const tweets = document.querySelectorAll('.tweet')- update: 업데이트
// 문자열 입력
oneDiv.textContent = 'dev';
// tweet 클래스 추가
oneDiv.classList.add('tweet')- delete: 삭제
// append 했던 요소 삭제
const container = document.querySelector('#container')
const oneDiv = document.createElement('div')
container.append(oneDiv)
oneDiv.remove()
// id가 container인 모든 아래 요소 지우기
document.querySelector('#container').innerHTML = '';이벤트 객체
이벤트 객체: 사용자 입력을 트리거로 발생한 이벤트 정보를 담은 객체
이벤트 발생 시 작동하는 함수 할당 방법
- DOM 객체에 onclick 지정
function displayAlert() { alert('click') } document.querySelector('#apply').onclick = displayAlert
- addEventListener 메서드 사용
document.querySelector('#apply').addEventListener('click', function(){ alert("click") })
