<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>function</title>
<script>
// 동기: 둘 다 준비되었을 때(전화 같은 거), 비동기: 타이밍 맞출 필요없을 때(채팅 같은 거)
// 비동기 프로그램: 함수의 위치를 고정할 필요없이 필요할 때 실행 중간에 만들 수 있는 프로그램
// **** call back 함수 ****
// 매개변수로 전달되는 함수 ex. jQuery(function() {})
function func(callback) {
for (let i = 1; i <= 10; i++) {
callback(i);
}
}
function output(index) {
document.write(`${index}번째 호출 <br />`);
}
func(output);
// **** 배열 함수 ****
// forEach(), map(), filter()
// ** forEach() **
// forEach(value, index, array): 단순한 배열 요소를 사용해서 콜백함수를 호출하는 용도로 사용. array는 대부분 생략함.
// 방법1.
const numbers = [23, 5, 42, 67, 92, 16];
numbers.forEach(function (value, index, array) {
document.write(`${index} - ${value} <br />`);
});
// 방법2.
const numbers = [23, 5, 42, 67, 92, 16];
numbers.forEach((number, i) => {
document.write(`${i} - ${number} <br />`);
});
// 배열은 for 대신 forEach 사용하면 되겠다.
// ** map() **
// map(value, index, array): 콜백함수에서 리턴하는 값들을 기반으로 새로운 배열을 만드는 함수.
// 파괴적 메서드 (let)
let numbers = [23, 5, 42, 67, 92, 16];
numbers = numbers.map((number) => {
return number * 2;
});
for (let number of numbers) {
document.write(`${number} <br />`);
}
// 변수를 만들어줘서, 파괴적 메서드 아님. (const)
// 방법1. (for)
const numbers = [23, 5, 42, 67, 92, 16];
const numbers_1 = numbers.map((number) => {
return number * 2;
});
for (let number of numbers_1) {
document.write(`${number} <br />`);
}
// 방법2. (forEach)
const numbers = [23, 5, 42, 67, 92, 16];
const numbers_1 = numbers.map((number) => {
return number * 2;
});
numbers_1.forEach((value) => {
document.write(`${value} <br />`);
});
// 방법3. (forEach 축약)
let numbers = [23, 5, 42, 67, 92, 16];
numbers = numbers
.map((number) => number * 2)
.forEach((number) => {
document.write(`${number} <br />`);
});
// ** filter() **
// 콜백함수에서 리턴되는 값이 true인 것들로 새로운 배열을 만드는 함수.
// 리턴값 중에 true를 찾는 것이므로 조건식은 return문에 작성해야함. (if문에 쓰면 안됨.)
const numbers = [23, 5, 42, 67, 92, 18];
const evenNums = numbers.filter((value) => {
return value % 2 === 0;
});
evenNums.forEach((value) => {
document.write(value, "<br />");
});
// ** 타이머 함수**
// setInterval(함수, 시간): 특정 시간마다 함수를 호출
// clearInterval(변수): setInterval() 함수의 실행을 멈춤
// setTimeout(함수, 시간): 특정 시간이 지난 후에 함수를 호출
// setTimeout()
setTimeout(function () {
document.write(`1초 후에 실행 함수 <br />`);
}, 1000);
// setInterval() → if문으로 종료
let count = 1;
let time = setInterval(() => {
document.write(`1초 마다 실행 함수 → ${count} <br />`);
count++;
if (count == 11) {
clearInterval(time);
}
}, 1000);
// setInterval() → setTimeout 함수로 종료
let count = 1;
let time = setInterval(() => {
document.write(`1초 마다 실행 함수 → ${count} <br />`);
count++;
}, 1000);
setTimeout(() => {
document.write("타이머 종료");
clearInterval(time);
}, 10000);
</script>
</head>
<body></body>
</html>