[React] JS 함수 정의 & 배열 메소드 (filter, map)

✅ 함수 정의하는 방법

// 방법 1: 일반 함수 선언
function plus1(a, b) {
  const c = a + b;
  return c;
}

// 방법 2: return 생략한 일반 함수
function plus2(a, b) {
  return a + b;
}

// 방법 3: 함수 표현식 (익명함수)
const plus3 = function (a, b) {
  return a + b;
};

// 방법 4: 화살표 함수
const plus4 = (a, b) => {
  return a + b;
};

// 방법 5: 화살표 함수 (한 줄일 땐 return, 중괄호 생략 가능)
const plus5 = (a, b) => a + b;

실행 예시

console.log("plus1", plus1(10, 20)); // 30
console.log("plus2", plus2(10, 20)); // 30
console.log("plus3", plus3(10, 20)); // 30
console.log("plus4", plus4(10, 20)); // 30
console.log("plus5", plus5(10, 20)); // 30

---

✅ 화살표 함수와 매개변수

• 매개변수가 1개일 때는 괄호도 생략 가능

function twice1(num) {
  return num * 2;
}

const twice2 = (num) => num * 2;

const twice3 = num => num * 2; // 괄호 생략

실행 예시

console.log("twice1", twice1(10)); // 20
console.log("twice2", twice2(10)); // 20
console.log("twice3", twice3(10)); // 20

---

🔍 filter()란?

• 배열에서 조건에 맞는 요소만 추출해 새로운 배열을 만드는 메서드
• true를 반환하는 요소만 남김

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);

console.log(even); // [2, 4]

---

🔍 map()이란?

• 배열의 각 요소를 원하는 방식으로 변형하여 새로운 배열을 만드는 메서드
• 기존 배열의 길이는 유지되며, 값만 바뀜

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

---

💻 예제: fiter와 map을 사용해 배열 출력하기

HTML

<div id="root"></div>

JSX

console.clear();

import React, { useState } from "https://esm.sh/react@rc?dev";
import ReactDOMClient from "https://esm.sh/react-dom@rc/client/?dev";

const rootElement = ReactDOMClient.createRoot(document.getElementById("root"));

function App() {
  const ages = [10, 20, 30];

  return (
    <>
      {ages
        .filter((age) => age >= 20)
        .map((age, index) => (
          <div key={index}>
            <span style={{ color: "red" }}>{age}</span>살
          </div>
        ))}
    </>
  );
}

rootElement.render(<App />);

결과 화면