[JavaScript] 함수

---

사용자 정의 함수

하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록

필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있음

코드 재활용

자바스크립트에서는 함수도 하나의 타입이다.

 

함수를 정의하는 2가지 방법

1. 함수 선언식

함수 선언식은 선언하기 전에도 사용할 수 있다(호이스팅)

함수 이름 재정의 불가능

function 함수명(매개변수1, 매개변수2 ..){
    함수가 호출되었을 때 실행할 문장
    ..
    return 값;
}

변수 = 함수명(값1, 값2, ..);

---

2. 함수 표현식

함수 표현식은 변수에 함수를 할당하기 전까지는 사용할 수 없다.

함수 표현식은 주로 다른 함수의 인수로 전달되는 콜백 함수로 사용된다.

ex) forEach

 

✓ 익명함수

const 상수명 = function(매개변수1, 매개변수2, ..){
    함수가 호출되었을 때 실행할 문장
    ..
    return 값;
}

변수 = 상수명(값1, 값2, ...);

 

✓ 기명함수

const 상수명 = function 함수이름(매개변수1, 매개변수2, ..){
    함수가 호출되었을 때 실행할 문장
    ..
    return 값;
}

변수 = 상수명(값1, 값2, ...);

---

디폴트 매개변수

매개변수의 값을 설정하는 것

매개변수의 값을 정하지 않으면 기본값을 변수에 저장

 

function 함수명(매개변수1 = 값1, 매개변수2 = 값2 ..){
    함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}

function func(num1=1, num2=2){
    console.log(`num1: ${num1}, num2: ${num2}`);
    return num1 * num2
}

console.log(func())
console.log(func(3))
console.log(func(5, 6))

---

나머지 매개변수

생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정할 수 있음

function 함수명(매개변수1, ...매개변수2){
    함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}

함수명(값1, 값2, 값3, 값4, 값5);

매개변수1 -> 값1

매개변수2 -> 값2 ~ 값5

값이 두 개 이상인 경우는 배열로 들어감

function func(x, ...y){
    console.log(`x: ${x}`);
    console.log(`y: ${y}`);
}
func(1, 4, 5, 6, 7, 8, [1, 4], 10)

---

함수 생성과 동시에 호출(IIFE)

(function(){
    console.log('바로 호출');
})()

---

화살표 함수

function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현

화살표 함수는 항상 익명

 

✓ 매개변수가 없을 경우

const 상수 = () => {
    함수가 호출되었을 때 실행될 문장;
    ...
}

const a = () => {
    console.log('hello');
}

const b = () => console.log('bye');

a()
b()

 

✓ 매개변수가 있을 경우

const 상수 = (매개변수1, 매개변수2, ..) => {
    함수가 호출되었을 때 실행될 문장;
    ...
}

const a = (text) => {
    console.log(`${text}를 출력하는 화살표함수`);
}

const b = (text) => console.log(`${text}를 출력하는 한 줄 화살표함수`);

// const b = text => console.log(`${text}를 출력하는 한 줄 화살표함수`);
// 매개변수가 하나면 소괄호 생략 가능

a('hello')
b('bye')