[JS문법 종합반] 2주차_ES6문법 : 일급 객체로서의 함수

타임라인

• 특강 [HTML, CSS 기초]
• 강의 [JS문법 종합반] 2주차
• 특강 알고리즘

---

오늘의 학습내용 :  일급 객체(First-Class Object) 함수

자바스크립트에서는 함수를 일급 객체로 다룬다. 일급 객체란, 다른 객체들에 일반적으로 적용 가능한 모든 연산을 지원하는 객체라는 의미이다. 즉 ① 상수 또는 변수에 할당될 수 있고, ② 다른 함수에 인자로 전달될 수 있으며, ③ 다른 함수의 결과값으로서 반환될 수 있다는 것이다.

 

◆ 변수에 함수를 할당하기

함수는 값으로 취급되고, 변수에 할당될 수 있다. 이렇게 변수에 할당된 함수를 나중에 사용할 수 있다.

const sayHello = function () {
    console.log("Hello!");
};

• 객체의 속성 / 배열의 요소로 할당하기

◆ 다른 함수에 인자로 전달하기

변수에 할당되었을 때처럼, 함수는 값으로 취급되기 때문에 다른 함수에 인자로 전달할 수 있다. 다른 함수에 전달 인자로 전달하는 함수를 콜백 함수(callback function)라고 한다. 콜백을 넘겨받는 코드는 필요할 때 실행할 수 있다.

function callFunction(func) {
  func();
}

const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력

 

◆ 함수를 반환하기

function createAdder(num) {
  return function(x) {
    return x + num;
  }
}

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

 

질문 & 더 알아보기

 

콜백 지옥이 뭐야?

콜백함수와 고차함수의 개념을 공부하다가 콜백지옥을 방지하는 방법에 대한 설명을 읽었다. 콜백 지옥이 뭐지? 콜백 함수는 비동기 작업이 완료되었을 때 호출되는 함수이다. 본래 프로그래밍 방식은 작성된 코드에 따라 순차적으로 작업을 수행하고, 하나의 작업이 끝난 후에 다음 순서 작업을 수행한다. 여기서 지나치게 많은 시간이 소요되고, 비효율성 문제로 이어진다. 반면 비동기 프로그래밍은 작업의 순서를 기다릴 필요 없이 동시에 수행하여 작업시간을 줄일 수 있다. Node.js 또한 콜백 함수를 통해 비동기 작업을 처리할 수 있는데, 콜백의 특성상 비동기 이후에 처리될 작업들을 콜백 내부에 작성해야 한다. 처음부터 코드를 깔끔하게 구성하면 좋겠지만, 많은 작업을 포함하는 코드를 작성하다 보면 함수가 점점 많이 중첩되면서 코드를 읽고 이해하기도, 수정하기도 어렵게 된다. 이것이 콜백 지옥(callback hell)이다. 예를 들면 이렇게...

a(function (value1) {
    b(function (value2) {
        c(function (value3) {
            d(function (value4) {
                e(function (value5) {
                    f(function (value6) {
                    // callback hell
                    });
                });
            });
        });
    });
});

작성하려는 코드가 길지 않다면 간단하게 콜백함수를 이용할 수 있지만, 복잡해질수록 꼬리에 꼬리를 무는 함수 때문에 좋지 않은 코드가 된다. 문제를 방지하기 위한 몇 가지 방법도 알아보았다. 

1. 콜백 함수를 분리한다. 비동기 작업의 결과를 처리하는 콜백 함수를 따로 정의하고, 해당 함수를 콜백으로 사용한다.
2. Promise를 활용하여 함수를 작성한다. 작업이 성공하면 resolve로 결과를 반환하고, then을 통해 데이터를 받는다. 작업이 실패하면 reject로 결과를 반환하고 catch를 통해 에러를 받는다.
3. async/await 문법을 사용한다. async를 사용하여 비동기 함수를 선언하고, await로 작업의 결과를 기다린다.