함수, 함수표현식, 화살표함수[JavaScript | 학습을 위한 자료 | 한입만 REACT]

함수

// 함수
// 중복되는 코드를 묶어서 반복을 줄임

// 1. 함수선언

function greetig() {
    console.log("안녕하세요");
}

console.log("호출 전");
greetig(); // 함수는 호출해야 실행된다.
console.log("호출 후");

// 직사각형 넓이를 구하는 함수

function getArea(width, height) { // 매개변수: 함수 정의 시 괄호 안에 전달받을 값을 정의
    let area = width * height;

    console.log(area);
    return area; // 함수는 종료되며 반환된 값을 호출한 곳에서 사용 가능
}

getArea(10,20); // 인수: 함수 호출 시 전달하는 실제 값
getArea(30,20);
getArea(120,200);

let area1 = getArea(10,20);
console.log(area1);

// 중첩함수
// 함수 안에 정의된 또 다른 함수
// 중첩 함수는 부모 함수 내부에서만 호출 가능

function getArea2(width, height) { 
    function another() { // 중첩함수
        console.log("another");
    }

    another();
    let area = width * height;

    return area; // 반환값 리턴 시 바로 함수 종료
}

let area2 = getArea2(42, 30);
console.log(area2);

// 호이스팅
// ->끌어올리다 선언문을 호출문보다 밑에 두어도 실행 가능
// 함수 선언문은 자바스크립트 엔진에 의해 코드 실행 전에 메모리에 끌어올려짐

---

함수표현식, 화살표함수

// 함수표현식, 화살표함수

// 1. 함수표현식 - 익명함수, 호이스팅이 되지 않음
// 함수 선언문과 달리 함수 정의 전에 호출할 수 없다
function funcA() {
    console.log("funcA");
}

let varA = funcA; // 함수 자체를 변수에 저장가능
console.log(varA); // varA 변수에 funcA 함수를 참조로 할당
varA(); // varA()는 funcA()와 동일하게 호출 가능

let varB = function () { // 익명함수 함수값으로서 생성과 저장, 선언식은 아님
    console.log("funcB"); 
}

varB(); // 변수에 익명 함수를 할당

// 2. 화살표함수
// 리액트에서 상태 업데이트나 props 전달을 위해 콜백 함수를 자주 사용한다.
// 화살표 함수는 콜백 함수로 간단히 작성할 수 있어 코드의 효율성이 높아진다.
// 간단한 렌더링 함수나 이벤트 핸들러를 직접 작성할 때도 화살표 함수는 유용 
// 리액트의 함수형 컴포넌트에서 상태 관리(Hooks)와 함께 사용
// 클래스 컴포넌트에서 bind 작업 없이 this 문제를 해결
let varC = () => {
    return 1;
}
console.log(varC());

let varD = (value) => value + 1;
console.log(varD(10));

---