Javscript - 함수

함수

자바스크립트에서 함수는 기본적인 구성 블럭 중 하나
함수 사용을 위해서는 함수를 호출하고자 하는 범위 내에서 정의해야함

선언

선언문

function 함수명(매개변수) {
    함수 식
    return 반환값
}

표현식

let myFucn = function(매개변수) {
    함수 식
    return 반환값
}

화살표 함수 표현식

let myFunc = (매개변수) => {
    함수 식
    return 반환값
}

let myFunc = 변수 => 결과 // 인자가 하나라면 괄호 생략 가능

함수 선언문은 호이스팅되지만, 표현식은 인터프리터가 해당 줄에 도달해야 로드됨
이 외에도 표현식이 선언문에 비해 표현이 간단하고 직관적이며 클로져, 콜백 함수 사용 등의 이유로 표현식이 권장됨
화살표 함수 표현식은 일반 표현식의 더 간결한 표현임
모든 함수를 화살표 함수로 선언할 수 있는 것은 아니며, prototype 프로퍼티가 필요한 생성자 함수, 객체 내에서 메소드로 활용되는 함수는 화살표 함수로 표현이 불가능하다.

인자 전달

디폴트

const sum = (a = 1, b = 2) => {
    return a + b 
}

sum() // 3

함수를 정의할 때 명시된 인수가 전달되지 않을 경우를 위해서 디폴트 값을 정할 수 있음
기본은 undefined 값으로 설정되어 있으며 함수 선언 시에 변경 가능

나머지 인수

const sum = (a, ...rest) => {
    for (let i = 0; i < rest.length; i++) {
        a += rest[i]
    }
    return a
}

sum(1,2,3,4) // 10

정해진 인수의 개수보다 많은 인수가 입력될 경우 나머지 매개변수에 저장할 수 있음
나머지 매개변수는 배열의 형태로 모이기 때문에 반복 가능한 객체임

즉시 시행 함수

(function () {
    ...do something 
})(); // 선언문을 통한 IIFE

(() => {
    ...do something 
})(); // 화살표 함수를 통한 IIFE

즉시 시행 함수(IIFE)란 정의되자마자 즉시 시행되는 함수 표현식
함수 내에서 선언된 let, const 변수는 전역 스코프에서 접근이 불가능하기 떄문에 서로 영향을 방지하기 위해 사용

재귀함수

const counting = (num) => {
    if (num != 0 ) {
        console.log(num)
        num--
        counting(num)
    }
    return
} // num부터 1까지 console 카운팅

함수가 자기자신을 호출하는 것을 재귀라고 함
재귀를 사용한 코드는 일반적으로 보다 간결하게 표현 가능