12장 함수

Boseong Choi·2023년 6월 20일

목록 보기

9/29

12.1 함수란?

수학에서의 함수는 입력받아 출력을 내보내는 과정이다. 예를 들어 온도 변화. 섭씨 온도를 입력 받으면 정의해 둔 수식에 의해서 화씨로 변하고, 그 반대도 마찬가지.

함수 내부로 입력을 전달받는 변수를 파라미터, 입력을 아규먼트, 출력을 리턴값이라고 한다. 함수는 함수 정의를 통해 생성한다. 함수를 정의만 해서 실행되는건 아니며 아규먼트를 파라미터를 통해 함수에 전달하면서 실행을 명시적으로 지시해야 한다. 이를 함수 호출이라 한다.

12.2 함수를 사용하는 이유

JS에서 함수는 왜 쓸까? 자바스크립트에서 함수를 쓰는 이유는 긴 코드를 단어 하나로 축약해서 재사용하기 위함. 일종의 기계.

12.3 함수 리터럴

var f = function add(x,y) {
	return x + y;
};

함수 리터럴은 function 키워드 함수 이름 파라미터 목록 함수 몸체 로 구성된다.

12.4 함수 정의

함수 정의 방법에는 3가지가 있다.

함수 선언문

function add(x, y) {
    return x + y;
}

함수 선언문은 함수 이름을 생략할 수 없다. 함수 선언문은 표현식이 아닌 문. 콘솔에 찍어보면 undefined가 출력됨.

함수 표현식

var add = function (x, y) {
    return x + y;
}

함수 표현식이 변수에 저장되면, 변수는 함수처럼 사용 가능해진다. 변수에 저장된 함수는 함수명이 필요 없으며, 변수 이름을 통하여 호출된다.

화살표 함수

var add = (x, y) => x + y;

호이스팅

선언문으로 정의한 함수는 선언문 이전에 호출할 수 있다. 그러나 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다. 두 개의 생성 시점이 다르기 때문이다.

함수 선언문도 런타임 이전에 엔진에 의해 먼저 해석하고, 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다.

런타임에는 이미 함수 객체가 생성되어 있고 식별자에 할당까지 완료된 상태다. 그래서 함수 선언문 이전에 함수를 호출할 수도 있다. 이를 함수 호이스팅이라고 한다.

함수 표현식은 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

12.5 함수 호출

매개변수와 인수

함수를 실행하기 위해 필요한 값을 함수 외부에서 내부로 전달할 필요가 있는 경우, 파라미터를 통해 아규먼트로 전달한다. 아규먼트는 값으로 해석될 수 있는 표현식이어야 한다.

콜백 함수

함수에 파라미터로 들어가는 함수. 자바스크립트에서 순차적으로 실행하고 싶을 때 쓴다. 파라미터를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.

고차 함수

콜백 함수를 전달받은 함수.
콜백 함수를 자신의 일부분으로 합성한다.
전달받은 콜백함수의 호출 시점을 결정해서 호출한다.
콜백 함수에 인수를 전달할 수 있다.

// 비동기 작업을 수행하는 함수
function asyncFunction(callback) {
  // 비동기 작업이 완료되면 콜백 함수를 호출
  setTimeout(function() {
    callback("비동기 작업 완료");
  }, 2000);
}

// 콜백 함수 정의
function callbackFunction(result) {
  console.log("콜백 함수 호출됨: " + result);
}

// 비동기 함수 호출
console.log("비동기 작업 시작");
asyncFunction(callbackFunction);
console.log("비동기 작업 진행 중");