[Javascript] 함수 기초: 함수 선언식, 표현식, 호이스팅, 화살표 함수

 

함수 선언식(Function Declarations)

함수는 기본적으로 다음과 같이 선언하고 실행합니다.

// 함수 선언
function hello (name) {
    console.log(`Hello, ${name}!`);
}

// 함수 실행
hello('Seonkyu');    // Output: Hello, Seonkyu!

Default Parameters

함수에 Parameter가 지정되지 않을 경우 사용할 디폴트 값을 정할 수 있습니다.

// 함수 선언
function hello (name = 'stranger') {
    console.log(`Hello, ${name}!`);
}

// 함수 실행
hello('Seonkyu');    // Output: Hello, Seonkyu!
hello();    // Output: Hello, stranger!

함수 표현식(Function Expressions)

변수 값에 함수를 할당합니다. 이때 다음과 같이 이름이 없는 함수를 anonymous function이라 합니다.

// 함수 표현식
const hello = function (name = 'stranger') {
    console.log(`Hello, ${name}!`);
}

 

주의할 점은 변수처럼 다뤄지기 때문에 코드 내에서 선언한 이후에만 함수를 호출할 수 있습니다. 이를 호이스팅 되지 않는다고 합니다. 반면 함수 선언식으로 함수를 만든 경우 함수의 위치와 상관없이 어디서든 호출 할 수 있습니다.

// hello();    -> 함수의 선언보다 일찍 호출하므로 에러 유발
const hello = function (name = 'stranger') {
    console.log(`Hello, ${name}!`);
}

🤘Note

https://asfirstalways.tistory.com/197

5. 자바스크립트 호이스팅(Hoisting)

화살표 함수(Arrow Functions)

ES6에 ``() =>`` 표기를 사용한 화살표 함수가 도입되었습니다. 익명 함수에서 ``function`` 키워드를 사용하지 않아도 되므로 편리합니다. ``()`안에 파라미터가 들어가게 됩니다.

const hello = (name) => {
    console.log(`Hello, ${name}!`);
}

매개변수의 수에 따른 화살표 함수

// ZERO parameters
const functionName = () => {};

// ONE parameters
const functionName = paramOne => {};

// TWO or MORE parameters
const functionName = (paramOne, paramTwo) => {};

함수 줄 수에 따른 화살표 함수

중괄호를 안 쓸 경우 `return`을 생략 할 수 있습니다.

// SINGLE-LINE block
const sumNumbers = number => number + number;

// MULTI-LINE block
const sumNumbers = number => {
    const sum = number + number;
    return sum;
};