1. 이벤트 리스너로 사용로 사용
|
let button = document.querySelector("#btn1");
button.addEventListener('click', ()=>{
alert('눌렀냐!!!')
});
document.querySelector("#btn2").addEventListener("click", function(){
alert(`${this.innerText}!!!` );
});
|
2. 고차함수에 사용
고차 함수(Higher-Order Function) 라는 용어를 얼핏 들어본 적이 있을 것입니다.
고차 함수란, 함수를 파라미터로 전달받거나 함수를 리턴하는 함수를 말합니다.
요즘 자주 거론되는 함수형 프로그래밍의 핵심이기도 하며, 자바스크립트를 함수형 프로그래밍에 알맞은 언어로 만들어주는 특성이기도 합니다.
|
// 배열 요소의 반복
ar.forEach((n)=>{ document.querySelector("#result").innerHTML += (n+"").padStart(2, '0') + " ";
});
// 배열요소의 가공 ar.map((n)=>ar2.push(n*2-1));
// Ajax처리 결과의 가공 .then(function (response) {
return response.json(); // response 객체의 json 메서드를 호출하여 JSON 데이터를 반환
})
.then(function (data) {
document.querySelector("#result2").innerHTML += '<ul>';
for(let key in data){
if(key=='address' || key=='company')
document.querySelector("#result2").innerHTML += `<li> ${key} <br/> ${JSON.stringify(data[key])}</li>`;
else
document.querySelector("#result2").innerHTML += `<li> ${key} : ${data[key]}</li>`;
}
document.querySelector("#result2").innerHTML += "</ul>";
});
|
ex04.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 콜백 함수 란?</title>
<script>
window.onload = function () {
// 1. 콜백 함수 활용 사례 : 이벤트 리스너로 사용
let button = document.querySelector("#btn1");
button.addEventListener('click', ()=>{
alert('눌렀냐!!!')
});
document.querySelector("#btn2").addEventListener("click", function(){
alert(`${this.innerText}!!!` );
});
// 2. 콜백 함수 활용 사례 : 고차함수에 사용
let ar = [1,2,3,4,5,6,7,8,9,10];
let ar2 = [];
ar.forEach((n)=>{
document.querySelector("#result").innerHTML += (n+"").padStart(2, '0') + " ";
});
ar.map((n)=>ar2.push(n*2-1));
document.querySelector("#result").innerHTML += "<br>";
ar2.forEach((n)=>{
document.querySelector("#result").innerHTML += (n+"").padStart(2, '0') + " ";
});
// 3. 콜백 함수 활용 사례 : 고차함수에 사용
// fetch 메서드를 사용하여 서버로부터 JSON 데이터를 받아오고 콜백 함수로 화면에 출력
fetch("https://jsonplaceholder.typicode.com/users/2")
.then(function (response) {
return response.json(); // response 객체의 json 메서드를 호출하여 JSON 데이터를 반환
})
.then(function (data) {
document.querySelector("#result2").innerHTML += '<ul>';
for(let key in data){
if(key=='address' || key=='company')
document.querySelector("#result2").innerHTML += `<li> ${key} <br/> ${JSON.stringify(data[key])}</li>`;
else
document.querySelector("#result2").innerHTML += `<li> ${key} : ${data[key]}</li>`;
}
document.querySelector("#result2").innerHTML += "</ul>";
});
}
</script>
</head>
<body>
<button id="btn1">눌러줘1</button>
<button id="btn2">눌러줘2</button>
<hr>
<div id="result"></div>
<hr>
<div id="result2"></div>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] call() & apply() & bind()의 사용 (0) | 2024.10.24 |
|---|---|
| [JavaScript] 콜백(Callback) 함수 5(this 문제점) (1) | 2024.10.24 |
| [JavaScript] 콜백(Callback) 함수 3(인사하기) (0) | 2024.10.24 |
| [JavaScript] 콜백(Callback) 함수 2(계산기) (0) | 2024.10.24 |
| [JavaScript] 콜백(Callback) 함수 1 (0) | 2024.10.24 |
