📅 날짜
2025-02-14
✨ 학습 내용
🟢 1. 콜백 함수 (Callback Function)
📖 콜백 함수란?
- 콜백 함수는 다른 함수의 인자로 전달되어 실행되는 함수다.
- JavaScript에서는 비동기 처리를 할 때 많이 사용되며, 이벤트 처리, API 요청, 타이머 설정 등에 활용된다.
- 대표적인 예로
setTimeout,Array.prototype.map,fetch등이 있다.
📌 콜백 함수 예제
✅ 일반적인 함수 호출 방식
function func(n1, n2) {
return n1 + n2;
}
const result = func(10, 20);
console.log(result); // 30📌 위 코드는 단순히 func()을 호출하여 n1 + n2의 결과를 반환하는 방식이다.
✅ 콜백 함수 활용 방식
function callBackFunc(n1, n2, logic) {
console.log('callBackFunc 실행...');
const v = logic(n1, n2);
console.log("결과:", v);
}
callBackFunc(100, 200, func);📌 callBackFunc()은 세 번째 인자로 함수(func)를 전달받아 실행한다.
즉, logic(n1, n2) 부분에서 func(100, 200)이 실행된다.
📌 map() 메서드 직접 구현하기
✅ map()이란?
map()은 배열의 각 요소를 변환하여 새로운 배열을 반환하는 메서드다.
function customMap(arry, func) {
let tmp = [];
for (let i = 0; i < arry.length; i++) {
const item = arry[i];
const reNewItem = func(item);
tmp.push(reNewItem);
}
return tmp;
}📌 위 코드는 배열의 요소를 하나씩 꺼내어 func()를 실행하고, 결과를 tmp 배열에 추가하는 과정이다.
let numbers = [1, 2, 3, 4];
let squared = customMap(numbers, (num) => num * num);
console.log(squared); // [1, 4, 9, 16]📌 customMap()을 통해 배열 [1, 2, 3, 4]의 각 요소를 제곱하는 과정이다.
🟢 2. 콜백 함수 + 클로저 (Callback + Closure)
📖 클로저(Closure)란?
- 클로저는 내부 함수가 외부 함수의 변수를 참조하여 유지하는 개념이다.
- 함수가 생성될 때 해당 환경(렉시컬 스코프)을 기억하기 때문에 외부 변수에 접근 가능하다.
📌 클로저를 활용한 데이터 변환
function casllBackFunc3(array) {
let tmp = []; // 상태 저장 (state)
function map(func) {
for (let i = 0; i < array.length; i++) {
const item = array[i];
const reNewItem = func(item);
tmp.push(reNewItem);
}
return tmp;
}
return { map: map };
}
// 클로저를 활용한 데이터 변환
const r_val3 = casllBackFunc3(arr).map((item) => {
return { '아이디': item.id, '나이': item.age };
});
console.log('r_val3', r_val3);📌 casllBackFunc3(arr).map(...)을 통해 객체 배열에서 특정 값만 추출하는 과정이다.
🟢 3. 선택 정렬 (Selection Sort)
📖 선택 정렬이란?
- 배열에서 가장 작은 값을 찾아 앞으로 이동하는 방식으로 정렬하는 알고리즘이다.
- 시간 복잡도는 O(n²)이며, 작은 데이터셋에서 사용된다.
📌 선택 정렬 구현
function callback3(array, func) {
let tmp = 0; // 임시 저장
for (let i = 0; i < array.length - 1; i++) {
for (let j = i + 1; j < array.length; j++) {
if (func(array[j], array[i]) <= 0) {
tmp = array[i];
array[i] = array[j];
array[j] = tmp;
}
}
}
}
arr2 = [10, 2, 4, 5, 1, 3, 7, 6];
callback3(arr2, (a, b) => a - b);
console.log(arr2);📌 배열을 오름차순 정렬하는 과정이다.
🟢 4. 이벤트 리스너 및 상태 관리 (Event Listener & State Management)
📖 이벤트 리스너(Event Listener)란?
- 이벤트 리스너는 특정 이벤트가 발생했을 때 실행되는 함수를 의미한다.
addEventListener(event, function)을 사용하여 HTML 요소에 다양한 이벤트를 적용할 수 있다.
📌 다양한 이벤트 리스너 구현
const d1El = document.querySelector('.d1');
var cnt = 0;
d1El.addEventListener('click', (e) => {
console.log('clicked...', e.target);
d1El.innerHTML = `<h1>${++cnt}</h1>`;
});
// 클로저를 이용한 상태 관리
function ClickHandler() {
let cnt = 0;
function addCnt(node) {
cnt++;
node.innerHTML = `<h2>클로저내 CNT : ${cnt}</h2>`;
console.log("clicked....", cnt);
}
return addCnt;
}
const addCnt = ClickHandler();
const d2El = document.querySelector('.d2');
d2El.addEventListener('click', () => {
addCnt(d2El);
});
// 다양한 마우스 이벤트 리스너 적용
const d3El = document.querySelector('.d3');
d3El.addEventListener('mouseenter', () => { d3El.innerHTML = `<h1>MOUSE_ENTER</h1>`; });
d3El.addEventListener('mouseover', () => { d3El.innerHTML = `<h1>MOUSE_OVER</h1>`; });
d3El.addEventListener('mouseleave', () => { d3El.innerHTML = `<h1>MOUSE_LEAVE</h1>`; });
d3El.addEventListener('click', () => { d3El.innerHTML = `<h1>MOUSE_CLICK</h1>`; });
d3El.addEventListener('dblclick', () => { d3El.innerHTML = `<h1>MOUSE_DBLCLICK</h1>`; });
d3El.addEventListener('contextmenu', (e) => {
e.preventDefault();
d3El.innerHTML = `<h1>MOUSE_우클릭</h1>`;
});
document.addEventListener('contextmenu', e => {
e.preventDefault();
});📝 요약
| 개념 | 설명 |
|---|---|
| 콜백 함수 | 함수를 다른 함수의 인자로 전달하여 실행하는 방식 |
| 클로저 | 내부 함수가 외부 함수의 변수를 참조하여 유지하는 개념 |
| 선택 정렬 | 배열의 요소를 정렬하는 기본적인 정렬 알고리즘 |
| 이벤트 리스너 | 사용자의 입력(클릭, 마우스 이벤트 등)에 반응하는 기능 |
📌 태그: JavaScript 콜백함수 클로저 이벤트 리스너 정렬 알고리즘 프론트엔드
Here, My Pale Blue.🌏