1. 재귀 함수
🐰 함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것
<script>
let num = 0;
function testFnc() {
// 재귀 함수 호출을 적용하여 1부터 10까지의 값을 출력
num++;
document.write(num, '<br>');
if(num === 10) return; // num 값이 10이면 종료
console.log(`${num} 번째 호출`); // 10번째는 출력 안됨
testFnc(); // 재귀 함수 호출
}
testFnc();
</script>
2. 콜백 함수 callback function
🐰 매개 변수로 전달하는 함수. 자바 스크립트는 함수도 하나의 자료형이므로 매개변수로 전달 할 수 있음
🐰 매개변수를 통해 함수를 받고, 그 함수를 통해 결과값을 호출함
<script>
function callThreeTimes (callback) { // 함수를 선언
for (let i = 0; i < 3; i++) {
callback(i);
}
}
function print(i) {
console.log(`${i}번째 함수 호출`);
}
// 함수를 호출.
callThreeTimes(print); // 매개변수로 함수를 전달. 함수를 매개변수로 사용할 경우 ()는 제외
/* 0번째 함수 호출
1번째 함수 호출
2번째 함수 호출
*/
</script>
콜백함수와 익명함수
<script>
function callThreeTimes (callback) { // 함수를 선언
for (let i = 0; i < 3; i++) {
callback(i);
}
}
// 함수를 호출. 다른 언어에서는 낯선 방법이나 자바 스크립트나 코틀린 같은 이벤트 기반을 프로그래밍에서는 자주 사용.
callThreeTimes(function (i) {
console.log(`${i}번째 함수 호출`);
});
</script>
콜백함수를 활용하는 함수 : forEach() 메서드
🥕 배열이 갖고 있는 함수(메서드)로써 단순하게 배열 내부 요소를 사용해서 콜백함수를 호출
/* 콜백함수 기본형 */
function (value, index, array) { } // 매개 변수가 다 필요하지 않음.<script>
const numbers = [273, 52, 103, 32, 57];
numbers.forEach(function (value, index, array) {
// 매개변수로 value, index, array를 갖는 콜백함수를 사용
console.log(`${index}번째 요소 : ${value}`);
});
// 함수 선언한 후에 매개 변수로 넘겨도 됨
const call = function (value, index, array) {
// 매개변수로 value, index, array를 갖는 콜백함수를 사용
console.log(`${index}번째 요소 : ${value}`);
}
numbers.forEach(call);
numbers.forEach(function (v, i) { // 매개변수로 v, i만 사용
console.log(`${i}번째 요소 : ${v}`);
})
numbers.forEach(function(item) { // 매개변수로 v만 사용
console.log(`${item}`)
})
</script>
콜백함수를 활용하는 함수 : map() 메서드
🥕 콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만들고 리턴
<script>
// 배열을 선언
let numbers = [273, 52, 103, 32, 57];
// 배열의 모든 값을 제곱
let numbers2 = numbers.map(function (value, index, array) {
return value * value;
});
console.log(numbers2); // (5) [74529, 2704, 10609, 1024, 3249]
// 출력
numbers2.forEach(console.log); // value, index, array 순서대로 출력
/*
74529 0 (5) [74529, 2704, 10609, 1024, 3249]
2704 1 (5) [74529, 2704, 10609, 1024, 3249]
10609 2 (5) [74529, 2704, 10609, 1024, 3249]
1024 3 (5) [74529, 2704, 10609, 1024, 3249]
3249 4 (5) [74529, 2704, 10609, 1024, 3249]
*/
// for문을 이용해서 제곱 배열 생성
let numbers3 = [];
for (const item of numbers) {
numbers3.push(item * item);
}
console.log(numbers3); // (5) [74529, 2704, 10609, 1024, 3249]
</script>
콜백함수를 활용하는 함수: filter()
🥕 콜백함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만듦
➡️ 콜백함수의 리턴 타입이 불 형 이어야 함
<script>
const numbers = [11, 12, 13, 14, 15, 16];
// 짝수만 추출
const evenNumbers = numbers.filter(function (value) {
return value % 2 === 0;
});
// 인덱스가 짝수만 추출
const evenIndexs = numbers.filter(function (value, index) {
return index % 2 === 0;
});
console.log(`원래 배열: ${numbers}`); // 원래 배열: 11,12,13,14,15,16
console.log(`값이 짝수만 추출: ${evenNumbers}`); // 값이 짝수만 추출: 12,14,16
console.log(`인덱스가 짝수만 추출: ${evenIndexs}`); // 인덱스가 짝수만 추출: 11,13,15
// 1의 자리가 3의 배수인 경우만 추출
const evenNumbers2 = numbers.filter(function (value) {
return (value % 10) % 3 === 0;
});
console.log(`1의 자리가 3의 배수: ${evenNumbers2}`); // 1의 자리가 3의 배수: 13,16
</script>
3. 화살표 함수 Arrow function
🐰 ES6에 추가된 내용으로 '=>'를 이용하여 함수를 간결하게 표현할 때 사용
1) function 키워드를 생략
2) 부등호 '='과 '>'를 합쳐서 코딩
3) 항상 익명함수 형식으로 표현
4) 단일 명령문일 경우 함수의 중괄호 {}와 return을 생략
Arrow function expressions - JavaScript | MDN
An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:
developer.mozilla.org
<script>
const doAddition1 = function (s1, s2) {
return (s1 + s2) / 2;
}
console.log(doAddition1(2, 5)); // 3.5
const doAddition2 = (s1, s2) => {
return (s1 + s2) / 2;
}
console.log(doAddition2(2, 5)); // 3.5
const doAddition3 = (s1, s2) => (s1 + s2) / 2;
console.log(doAddition3(2, 5)); // 3.5
</script>
🐰 map(), filter() 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력
🐰 function 키워드 대신 화살표(=>)를 사용
/* 기본형 */
(매개변수) => { }
💡 메소드 체이닝 : 메소드가 리턴하는 값을 기반으로 해서 메서드를 줄줄이 사용하는 것
<script>
// 배열 선언
let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// numbers에서 2의 배수만 추출한 후, 제곱을 한 후에 로그에 출력.
// 배열의 메소드를 연속적으로 사용. 메소드 체이닝.
numbers.filter((value) => value % 2 === 0) // 2의 배수만 추출 / [0, 2, 4, 6, 8]
.map((value) => value * value) // 제곱 추출 / [0 , 4, 6, 16, 36, 64]
.forEach((value) => console.log(value)); // [0, 4, 16, 36, 64]
</script>
[ 내용 참고 : IT 학원 강의 ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 문서객체모델 - DOMContentLoaded, 문서 객체 가져오기 (0) | 2024.04.02 |
|---|---|
| [JavaScript] 타이머 함수, 기본 매개변수, 즉시 호출 함수, 엄격모드 (0) | 2024.03.31 |
| [JavaScript] 나머지 매개변수와 전개 연산자 (0) | 2024.03.29 |
| [JavaScript] 사용자 정의 함수 예제 (0) | 2024.03.28 |
| [JavaScript] 함수란, 익명 함수, 선언적 함수, 호이스팅 (0) | 2024.03.28 |
