나의 React 여정: 16일차

함수형 프로그래밍
함수형 프로그래밍은 공유 상태, 변경 가능한 데이터 및 부작용을 피하는 함수를 사용하는 데 중점을 둡니다. 깔끔하고 간결하며 예측 가능한 코드를 위해 맵, 필터, 축소와 같은 순수한 기능과 작업을 강조합니다.

함수형 프로그래밍의 핵심 기능
1.지도()

• 콜백 함수를 사용하여 배열의 각 요소를 변환하고 새 배열을 반환합니다.
• 구문: array.map(콜백) 예:

사각형과 큐브

const numbers = [1, 2, 3, 4, 5];

function square(element) {
    return Math.pow(element, 2);
}

function cube(element) {
    return Math.pow(element, 3);
}

const squares = numbers.map(square);
const cubes = numbers.map(cube);

console.log(squares); // [1, 4, 9, 16, 25]
console.log(cubes);   // [1, 8, 27, 64, 125]

날짜 형식 지정

const dates = ["2024-1-10", "2025-2-20", "2026-3-30"];

function formatDate(element) {
    const parts = element.split("-");
    return `${parts[1]}/${parts[2]}/${parts[0]}`;
}

const formattedDates = dates.map(formatDate);
console.log(formattedDates); // ['1/10/2024', '2/20/2025', '3/30/2026']

2.필터()

• 주어진 조건을 만족하지 않는 요소를 필터링하여 새 배열을 만듭니다(콜백).
• 구문: array.filter(콜백) 예:

짝수와 홀수

const numbers = [1, 2, 3, 4, 5, 6, 7];

function isEven(element) {
    return element % 2 === 0;
}

function isOdd(element) {
    return element % 2 !== 0;
}

const evenNums = numbers.filter(isEven);
const oddNums = numbers.filter(isOdd);

console.log(evenNums); // [2, 4, 6]
console.log(oddNums);  // [1, 3, 5, 7]

성인 필터링(나이 >= 18)

const ages = [16, 17, 18, 18, 19, 20, 60];

function isAdult(element) {
    return element >= 18;
}

const adults = ages.filter(isAdult);
console.log(adults); // [18, 18, 19, 20, 60]

3.reduce()

• 콜백 함수를 반복적으로 적용하여 배열을 단일 값으로 줄입니다.
• 구문: array.reduce(콜백, 초기값) 예:

가격합

const prices = [5, 30, 10, 25, 15, 20];

function sum(previous, next) {
    return previous + next;
}

const total = prices.reduce(sum);
console.log(`$${total.toFixed(2)}`); // 5.00

최대 등급 찾기

const grades = [75, 50, 90, 80, 65, 95];

function getMax(accumulator, element) {
    return Math.max(accumulator, element);
}

const maximum = grades.reduce(getMax);
console.log(maximum); // 95

반성
내가 배운 것:

• 맵을 사용하여 배열을 변환하는 방법
• 필터를 사용하여 조건에 따라 배열을 필터링합니다.
• reduce를 사용하여 배열을 단일 값(합계, 최대값)으로 줄입니다.

이런 성장이 너무 좋아요

위 내용은 나의 React 여정: 16일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!