모던 자바스크립트 딥다이브, 면접과 함께 공부하기 - 12장 함수

💡 아래 내용은 모던 자바스크립트 딥다이브를 공부하며 이해했던 내용을 다루고 있습니다. 혹시 틀렸거나 잘못된 정보가 있다면 알려주세요!

📌 12장 함수

12.1 함수란?

함수란 특정 작업을 수행하는 코드 블록입니다. 매개변수를 받아 결과를 반환할 수 있습니다.

12.2 함수를 사용하는 이유

함수를 한 번 정의하면, 동일한 작업을 여러 번 수행해야할 때, 그 함수를 여러 번 호출하는 것만으로 처리할 수 있습니다. 코드 재사용, 모듈화와 코드 구조화, 코드 가독성, 추상화와 같은 장점이 있습니다.

12.3 함수 리터럴

함수를 정의하는 방법 중 하나입니다. function키워드를 사용하여 정의하는 함수를 함수 리터럴이라고 합니다.

let greet = function(name) {
  return "Hello, " + name;
};

12.4 함수 정의

함수를 정의하는 방법에는 함수 리터럴을 이용한 함수 선언문, 함수 표현식, 화살표 함수, 생성자 함수 등의 방법이 있습니다.

12.4.1 함수 선언문

함수 선언문은 함수 리터럴과 생김새가 동일합니다. 다만, 함수 리터럴은 함수 이름을 생략할 수 있으나, 함수 선언문은 함수 이름을 생략할 수 없습니다.

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

그렇다면, 함수 선언문과 함수 리터럴의 가장 큰 차이점은 뭔가요?

호이스팅에 있습니다. 함수 선언문은 JS 엔진에 의해 호이스팅되어 스크립트 전체에서 사용할 수 있지만, 함수 표현식은 호이스팅 되지 않기때문에 함수가 할당되기 전에는 호출할 수 없습니다.

console.log(add(1, 2)); // 출력: 3
console.log(add(1, 2)); // TypeError: add is not a function

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

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

12.4.2 함수 표현식

함수 리터럴의 일종으로, 익명 함수를 생성하거나, 이름이 있는 함수를 생성할 수 있습니다. 또한 그룹 연산자()로 묶은 경우 즉시 실행 함수를 만들 수 있습니다.

(function a(){console.log('a')})() // a

12.4.3 함수 생성 시점과 함수 호이스팅

JS에서 함수는 주로 함수 선언문과 함수 표현식으로 생성되는데, 함수 선언문은 호이스팅이 되는 반면, 함수 표현식은 호이스팅되지 않는다.

12.4.4 Function 생성자 함수

아래 예시와 같이 사용할 수 있는 Function 생성자는 함수의 프로토타입인 Function.prototype을 상속하는 객체를 생성하는 생성자 함수입니다.

일반적으로 Function 생성자는 JavaScript에서 함수를 생성하는 주요 방법이 아닙니다. 이는 코드를 문자열로 전달해야 하기 때문에 코드를 작성하거나 이해하기 어렵고, 스코프 체인을 통한 변수 접근이 제한되며, 특히 보안 측면에서도 문제가 될 수 있기 때문입니다. 대부분의 경우, 함수 선언이나 함수 표현식을 사용하는 것이 더 좋습니다.

const sum = new Function('a', 'b', 'return a + b');

console.log(sum(2, 6));  // 출력: 8

function.prototype이 뭔가요?

JS의 모든 함수는 사실 function 생성자 함수를 통해 만들어지는데, function.prototype은 이 function 생성자 함수의 원형(프로토타입)입니다. js 내에서 모든 함수는 function.prototype의 속성과 메서드를 공유합니다.

그렇다면, function.prototype의 주요 메서드를 알려주세요

Function.prototype.call(thisArg, arg1, arg2, ...) : 함수를 호출하고, 함수의 this를 thisArg로 설정하고, 인자를 전달합니다.

Function.prototype.apply(thisArg, [argsArray]) : 함수를 호출하고, 함수의 this를 thisArg로 설정하고, 배열 또는 배열과 유사한 객체를 인자로 전달합니다.

Function.prototype.bind(thisArg, arg1, arg2, ...) : 새로운 함수를 생성하고, 그 함수의 this를 thisArg로 설정하고, 일부 인자를 기본값으로 설정합니다.

Function.prototype.toString() : 함수의 코드를 문자열로 반환합니다.

Function.prototype.name : 함수의 이름을 반환합니다. 익명 함수의 경우 빈 문자열을 반환하고, 함수 표현식의 경우 변수 이름을 반환합니다.

Function.prototype.length : 함수가 정의된 매개변수의 수를 반환합니다.

JS에서 function 생성자 함수를 사용하면 스코프 체인을 통한 변수 접근이 제한되며, 특히 보안 측면에서도 문제가 될 수 있다고 했는데, 그 이유를 알려주세요

Function 생성자 함수를 사용하여 함수를 생성할 때는, 그 함수는 항상 전역 스코프를 참조합니다. 이는 Function 생성자 함수를 사용하여 생성된 함수가 자신이 생성된 환경(lexical environment)을 기억하지 않기 때문입니다.

12.4.5 화살표 함수

ES6에서 도입된 새로운 함수 표현 방식입니다. 기존의 함수 표현식보다 더 간결한 문법을 제공합니다. 단, 화살표 함수는 생성자로 사용될 수 없으며, 제너레이터 함수로도 사용할 수 없습니다.

const myFunction = (arg1, ...rest) => {
  // 함수 본문
}

12.5 함수 호출

함수 호출이란 매개변수를 함수에 전달하며 함수의 실행을 지시하는 것을 뜻합니다. 실행결과를 반환합니다.

12.5.1 매개변수와 인수

매개변수란, 함수 내부로 입력을 전달받는 변수를 매개변수라 하고, 함수를 호출할 때, 전달하는 값을 인수라 합니다.

function add(a, b) { // 여기서 a와 b는 매개변수입니다.
  return a + b;
}

add(3, 5); // 여기서 3과 5는 인수입니다.

12.5.2 인수 확인

함수가 올바른 수의 인수를 맏았는지, 인수의 타입이 올바른지 확인하는 프로세스를 인수 확인이라 합니다. JS에서는 기본적으로 확인하지 않기 때문에, 필요한 경우 함수 내에서 수동으로 수행해야합니다.

function add(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw new Error('Both arguments should be numbers');
  }
  return a + b;
}

12.5.3 매개변수의 최대 개수

최대 약 21억개를 가질 수 있습니다.

12.5.4 반환문

return 키워드를 통해 값을 반환합니다.

12.6 참조에 의한 전달과 외부 상태의 변경

12.7 다양한 함수의 형태

12.7.1 즉시 실행 함수

선언과 동시에 즉시 실행되는 함수를 말합니다. 즉시 실행 함수의 목적은 변수의 스코프를 제한하여 전역 스코프를 오염시키지 않는 것입니다.

(function () {
  console.log('즉시 실행 함수입니다.');
  
  (() => {
  console.log('화살표 함수로도 사용할 수 있습니다.');
})();
})();

12.7.2 재귀 함수

함수가 자기 자신을 호출하는 함수를 의미합니다. 트리나 그래프 같은 데이터 구조를 탐색할 때 자주 사용됩니다. 재귀 함수를 사용할 때는, 종료 조건이 반드시 필요합니다.

function countdown(n) {
  if (n < 0) { // 종료 조건
    return;
  }
  console.log(n);
  countdown(n - 1); // 함수 자신을 호출
}

countdown(5); // 5, 4, 3, 2, 1, 0을 출력

12.7.3 중첩 함수

함수 내부에 정의된 함수를 의미합니다. 중첩 함수는 해당 함수가 선언된 부모 함수의 범위에 있는 변수에 접근할 수 있습니다. 이러한 특성은 클로저에 사용됩니다.

function outerFunction() {
  let outerVariable = 'I am outside!';

  function innerFunction() {
    console.log(outerVariable); // I am outside!
  }

  innerFunction();
}

outerFunction();

12.7.4 콜백 함수

한 함수가 다른 함수에 인자로 전달되는 함수를 말합니다. 콜백 함수는 그 함수가 전달된 함수 내부에서 호출되며, 비동기 처리, 이벤트 핸들링, 타이머 등 다양한 상황에서 특정 코드의 실행 시점을 유연하게 조절하기 위해 사용됩니다.

function greet(name, callback) {
  console.log('Hello ' + name);
  callback();
}

greet('Alice', function() {
  console.log('The callback was invoked!');
});

greet('Bob', function() {
  console.log('A different callback was invoked!');
});

12.7.5 순수 함수와 비순수 함수

같은 입력에 대해 같은 출력을 반환하며, 외부의 어떠한 상태도 변경하지 않는 함수를 순수함수라고 합니다.
외부 상태를 변경하거나, 외부 상태에 의존적인 함수를 비순수 함수라고 합니다.