[ONEBITE-REACT] JS 기본 - 함수 표현식(Function Expression)과 화살표 함수(Arrow Function)

• 의미

• 함수 표현식 (Function Expression)

• 화살표 함수(Arrow Function)

• 익명함수 (Anonymous Function)

목차

• 의미
  • 함수 표현식 (Function Expression)
  • 화살표 함수(Arrow Function)
  • 익명함수 (Anonymous Function)

의미

함수 표현식 (Function Expression)

함수 선언식을 선언하는 것이 아니라 함수를 변수에 할당하는 것을 의미한다. 함수를 변수에 할당하면 변수의 값을 계속 바꾸면서 사용하듯 함수도 값으로 취급할 수 있다.

아래는 일반적으로 함수를 선언하는 방법이다.

function myFunction () {
    console.log("hello");
}

myFunction();

다시 아래는 함수를 변수에 담는 함수 표현식으로 같은 함수를 작성한 것이다.

let myFunction = function myFunction() {
    console.log("hello");
}

myFunction();

function으로 함수를 선언하면 호이스팅이 발생하지만, 함수 표현식으로 작성한 함수는 호이스팅이 발생하지 않는다.

// 함수 선언식 호이스팅 발생하여 정상 작동
myFunction();

function myFunction () {
    console.log("hello");
}

/// 함수 표현식 에러 발생
myFunction();

let myFunction = function myFunction() {
    console.log("hello");
}

함수 표현식으로 함수를 선언하면 다른 변수에 이 함수 값을 담아 초기화 할 수 있다.

let myFunction = function myFunction() {
    console.log("hello");
}
myFunction(); // hello 출력

let yourFunction = myFunction;
yourFunction(); // hello 출력

만약 이것을 function을 또 만들어서 같은 값으로 담으려면 아래와 같이 function 안에 또 function을 담아야 하는데,
함수 표현식에서는 let yourFuction = myFuction;이라는 것처럼 별도의 함수를 다시 만들 필요 없이 변수의 값으로만 담으면 된다는 의미이다.

function myFunction() {
    console.log("hello");
}

myFunction(); // hello 출력

function yourFunction() {
    myFunction();
}

yourFunction(); // hello 출력

화살표 함수(Arrow Function)

function을 통한 함수 선언에서 사용되는 것이 아니라, 위와 같이 함수 표현식을 통해 함수를 변수의 값으로 초기화할 때 사용하는 함수이다.
=> 기호를 통해서 변수 선언 뒤 함수를 값으로 초기화 하는 과정을 더 간결하게 바꾸어 준다.
그 순서는 아래와 같다.

// 함수 표현식의 원래 형태

const myFunction = function(value) {
    return value + 1
}

console.log(myFunction(5)); // 6이 출력됨.

// 화살표 함수 1단계 : function을 없애고 소괄호와 중괄호 사이에 =>를 넣는다.
const myFunction = (value) => {
    return value + 1
};

console.log(myFunction(5)); // 6이 출력됨.

// 화살표 함수 2단계 : myFucntion이라는 함수가 단순히 return만 하는 함수라면, 중괄호와 return도 생략 가능하다.
const myFunction = (value) => value + 1;

console.log(myFunction(5)); // 6이 출력됨.

// 만약 단순 return이 아니라 다른 작업이 추가된다면 중괄호와 마지막에 return을 생략하지 않고 그대로 입력하면 된다.
const myFunction = (value) => {
    console.log(value);
    return value + 1;
}

console.log(myFunction(5)); // 5, 6이 출력됨.

익명함수 (Anonymous Function)

위 함수에서 const myFunction = myFunction(value) {} 형태로 함수표현식이 사용되지 않은 이유는 함수 표현식은 함수를 변수에 선언하는 것이기 때문에 변수명에 이미 그 이름이 있기 때문이다. 함수 선언식으로 함수를 선언할 때는 function 함수명() 형태로 함수를 선언해야 하지만, 함수 표현식에서는 함수의 이름을 생략하여야 한다. 이를 익명 함수(Anonymous Function)이라고 한다.