이 포스팅은 Javascript 기초 시리즈 7 편 중 4 번째 글 입니다.

  • Part 1 - 01: Introduction
  • Part 2 - 02: async, defer
  • Part 3 - 03. 변수, ES5 문제
  • Part 4 - This Post
  • Part 5 - 05. Class
  • Part 6 - 06. Object
  • Part 7 - 07. Array
▼ 목록 보기

목차

▼ 내리기

자바스크립트를 공부하면서 함수 중 헷갈렸던 부분만 정리한다.

First-class function

자바스크립트에서 함수는 객체이다.

이러한 특징을 단적으로 보여주는 예시를 몇개 보자.

const print = function (){
    console.log("print");
}

함수에 이름이 없는 것을 “익명 함수”라 한다. 그리고 보면 이 함수 자체를 변수에 할당한 것을 알 수 있다.

const print = function print(){
    console.log("print");
}

굳이 익명함수로 작성하지 않아도 같은 결과이다.

print();

이렇게 변수에 함수를 할당하게되면 위와 같이 파라미터를 넘겨서 바로 호출이 가능하다.

const printAgain = print;
printAgain();

다른 변수에 해당 변수를 다시 할당하면, 같은 ref를 가리키고 있기 때문에 두 변수는 같은 함수의 시작점을 가리키게되어 같은 방식으로 사용이 가능하다.

Function Declaration, Function Expression

여기서 중요한 포인트가 하나 있다.

function sum(a, b){ // Hoisting O
    return a + b;
}

const sumation = function (a, b){ // Hoisting X
    return a + b;
}

이 둘의 차이점이 있을까? 있다. 위에 적어둔 표현은 Function Declaration이라 불리고, 아래는 Function Expression이라 불린다. 이 둘의 가장 큰 차이점은, Function Declaration이 hoisting이 된다는 것에 있다. 자바스크립트는 변수를 선언하는 것에 대해서 가장 위로 올려서 코드를 실행시키기 때문에 Function Declaration을 사용하면 함수를 정의하기도 이전에 호출했을 때 작동한다.

Callback function

파라미터로 함수를 전달하고, 작업이 끝나면 해당 함수를 Call 하도록 사용하는 함수

const printTrue(){
    console.log("True");
}

const printFalse(){
    console.log("False");
}

function quiz(answer, printTrue, printFalse) {
    if (answer === "100") {
        printTrue();
    } else {
        printFalse();
    }
}

이 경우 printTrue, printFalse가 Callback function이 된다.

Arrow Function

키워드 다 없애고 필요한 거만 쓰자.

const simpleFunction = () => console.log("YEEEEES!");
const add = (a, b) = > a + b;

IIFE(Immediately Invoked Function Expression)

함수를 선언함과 동시에 실행한다!

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