본문 바로가기

기술

[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)

Chapter 5. 자바스크립트의 호이스팅(Hoisting) Hoist란? hoist 라는 단어의 사전적 정의는 끌어올리기 라는 뜻이다. 자바스크립트에서 끌어올려지는 것은 변수이다. 모든 변수 선언은 호이스트된다. 호이스트란..

asfirstalways.tistory.com

화살표 함수(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;
};