함수

함수는 JavaScript에서 기본 구성 요소 중 하나입니다. JavaScript의 함수는 작업을 수행하거나 값을 계산하는 명령문의 집합인 프로시저(procedure)와 비슷하지만, 프로시저가 함수로 쓰이려면 입력을 반드시 받아야 하고 입력과 명확한 관계가 있는 출력을 반환해야 합니다. 함수를 사용하려면 함수를 호출할 스코프 내에서 함수를 정의해야 합니다.

자세한 내용은 JavaScript 함수에 대한 문서를 참조하세요.

함수 정의

함수 선언

함수 정의(또는 함수 선언)는 다음과 같은 함수 키워드로 구성되어 있습니다.

함수의 이름
함수의 매개변수들, 괄호로 묶고 쉼표로 구분합니다.
함수를 정의하는 JavaScript 문으로 중괄호로 묶습니다. { /* ... */ }

예를 들어, 아래의 코드는 square라는 간단한 함수를 정의합니다.

function square(number) {
  return number * number;
}

함수 square은 number라는 하나의 매개변수를 가집니다. 이 함수는 함수의 매개변수(number)를 곱한 값을 반환하는 간단한 구문을 가지고 있습니다. return 문은 함수가 반환하는 값을 지정합니다.

return number * number;

기본적으로 number와 같은 매개변수는 값으로 함수에 전달됩니다. 따라서 함수 내의 코드가 함수에 전달된 매개 변수에 완전히 새로운 값을 할당하는 경우에도 변경 사항은 전역적으로 또는 해당 함수를 호출한 코드에 반영되지 않습니다.

객체를 매개 변수로 전달할 때 함수가 객체의 속성을 변경한다면 다음 예제와 같이 함수 외부에서 해당 변경 사항을 볼 수 있습니다.

function myFunc(theObject) {
  theObject.make = "Toyota";
}

const mycar = {
  make: "Honda",
  model: "Accord",
  year: 1998,
};

// `x`의 값은 "Honda"입니다.
const x = mycar.make;

// `make` 속성은 함수에 의해 `Toyota`로 변경됩니다.
myFunc(mycar);

// `y`의 값은 "Toyota"입니다.
const y = mycar.make;

배열(Array)을 매개 변수로 전달할 때 함수가 배열의 값을 변경한다면 다음 예제와 같이 함수 외부에서 해당 변경 사항을 볼 수 있습니다.

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

함수 표현식

위의 함수 선언은 구문상 명령문이지만 함수는 함수 표현식(function expression)으로도 만들 수 있습니다.

이러한 함수를 익명 함수라 하며. 함수가 이름을 가질 필요는 없음을 의미합니다. 예를 들어, 제곱 함수 square은 다음과 같이 정의 할 수 있습니다.

const square = function (number) {
  return number * number;
};
const x = square(4); // `x` 의 값은 16 입니다.

하지만 함수 표현식에서도 함수의 이름을 지정할 수 있습니다. 함수가 자신을 참조할 수 있고, 디버거의 스택 추적에서 함수를 보다 쉽게 식별할 수 있습니다.

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};

console.log(factorial(3));

함수 표현식은 함수를 다른 함수의 매개변수로 전달할 때 편리합니다. 다음 예제에서는 첫 번째 매개변수로 함수, 두 번째 매개변수로 배열을 전달받는 map 함수를 보여줍니다.

function map(fn, arr) {
  const result = new Array(arr.length);
  for (let i = 0; i < arr.length; i++) {
    result[i] = fn(arr[i]);
  }
  return result;
}

계속해서 아래의 코드에서 함수는 함수 표현식으로 정의된 함수를 받고 두 번째 인수로 전달된 배열의 각 요소에 대해 함수를 호출합니다.

function map(fn, arr) {
  const result = new Array(arr.length);
  for (let i = 0; i < arr.length; i++) {
    result[i] = fn(arr[i]);
  }
  return result;
}

const fn = function (x) {
  return x * x * x;
};

const numbers = [0, 1, 2, 5, 10];
const cube = map(fn, numbers);
console.log(cube);

함수는 [0, 1, 8, 125, 1000]을 반환합니다.

JavaScript에서는 조건에 따라 함수를 정의할 수 있습니다. 예를 들어, 아래 함수는 num이 0인 경우에만 myFunc를 정의합니다.

let myFunc;

if (num === 0) {
  myFunc = function (theObject) {
    theObject.make = "Toyota";
  };
}

여기에 설명된 것 이외에도 eval() 처럼