2 분 소요


1. 함수 호출


함수는 함수를 가르키는 식별자와 소괄호(())인 함수 호출 연산자로 호출

함수 호출 연산자(()) 내에는 0개 이상의 인수를 쉼표로 구분해서 나열


매개변수와 인수

함수를 실행하기 위해 필요한 값이 있는 경우, 매개변수(인자)를 통해 인수를 전달
인수는 개수와 타입에 제한이 없음

image

인수 확인

자바스크립트는 인수와 매개변수의 갯수를 체크하지 않음

  • 순서대로 전달
  • 인수가 부족하면 매개변수로 undefined값을 전달
  • 인수가 매개변수의 갯수 초과시 무시(arguments객체의 프로퍼티로 보관)
  • 자바스크립트 언어는 동적 타입 언어로 사전에 타입을 지정할 수 없음


1) 만약 인수가 전달되지 않는 경우를 대비해 단축평가 사용가능!

function add (a, b) {
  a = a || 0;   // 단축평가
  b = b || 0;
  return a + b; 
}

2) 또는 기본값을 사용 가능(ES6)

function add (a=0, b=0) {
  return a + b; 
}


매개변수의 최대 개수

ECMAScript 사양에서는 매개변수의 최대 개수를 명시적으로 제한하지 않음.
하지만 물리적 한계는 존재!

* 권장사항

  • 이상적인 매개변수는 0개
  • 함수는 한 가지 일만 해야하며 가급적 작게
  • 매개변수는 최대 3개 이상을 넘지 않는 것이 좋음


반환문

함수는 return 키워드와 표현식(반환문)으로 실행 결과를 함수 외부로 반환할 수 있디.

* 반환문의 역할

  • 함수의 실행을 중단하고 함수 몸체를 빠져나감
  • return 키워드 뒤에 오는 표현식을 형가해 반환(명시하지 않으면 undefined 반환)

반환문은 생략이 가능 → 함수 마지막 문까지 실행후 암묵적으로 undefined 반환


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


let num = 0;
let obj = {name: "jongbin"};

function jongbin(num, obj) {
  num += 1;
  obj.name = "won";
}

console.log(num)  // 0
console.log(obj)  // {name: "won"}
  • 원시값은 값에 의한 전달 방식으로 값이 변하지 않음
  • 객체는 참조에 의한 전달 방식으로 변경 가능하므로 값이 변함

→ 방어적 복사, 깊은 복사를 통해 새로운 객체를 생성하고 재할당을 통해 교체

* 순수함수 : 외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수


3. 다양한 함수의 형태


즉시 실행 함수

함수의 정의와 공시에 즉시 호출되는 함수이며, 단 한 번만 호출되며 다시 호출할 수 없다

(function () {
  const x = 10;
  const y = 5;
  return x * y;
}());
  • 즉시 실행 함수는 반드시 ()로 감싸야 한다
  • 값을 반환할 수 있다
  • 인수를 전달할 수 있다.


재귀 함수

자기 자신은 호출하는 것을 재귀 호출이라고 하는데, 재귀함수는 자기 자신을 호출(재귀 후출)하는 함수

// 자기 자신을 호출하는 피보나치 함수
function pibonaci(n) {
    if (n >= 2) {   // 탈출 조건
        return pibonaci(n-2) + pibonaci(n-1)
    } else {
        return n
    }
}

재귀함수는 무한하게 자기 자신을 호출하므로 탈출 조건이 있어야 함.


중첩 함수

함수 내부에 정의된 함수를 중첩함수라고 한다

  • 중첩함수를 내부함수
  • 중첩함수를 포함하는 함수를 외부함수
  • 외부 함수의 변수를 참조할 수 있다


콜백 함수

  1. 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수라고 한다.
  2. 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수라고 한다.


function jongbin(n, f) {
  for (let i = 0; i < n; i++) {
    f(i)
  }
}

const output = function (i) {
  console.log(i)
}

jongbin(5, output);   // 0 1 2 3 4
  • 콜백함수는 고차 함수 내부로 주입하기 때문에 자유롭게 교체할 수 있다는 장점이 있다(고차함수는 콜백함수를 자신의 일부분으로 합성)
  • 고차함수는 매개변수를 통해 전달받은 콜백함수의 호출 시점을 결정해서 호출
  • 비동기 처리(이벤트, Ajax통신, 타이머 함수등), 배열 고차 함수 등 중요하게 사용된다
function jongbin(n, f) {
  for (let i = 0; i < n; i++) {
    f(i)
  }
}

// 익명 함수 리터럴로 곧바로 전달
jongbin(3, function (i) {
  console.log(i)
})    // 0 1 2 


순수 함수, 비순수 함수

순수 함수는 외부 상태를 변경시키지 않는 함수

let count = 0;

// 순수 함수
function increase(n) {
  return ++n;   // count를 인자로 전달해도 count가 변하지 않음
}

// 비순수 함수
function increase2() {
  return ++count;
}   // count를 1 증가시킨다.

순수함수를 지향해 불변성을 지키고, 복잡성이나 상태변경 문제를 억제하자!



이웅모 선생님의 모던 자바스크립트 Deep Dive를 공부하기 위해 정리한 글입니다.
혹시나 보시다가 고칠 부분이나 마음에 안드시는 부분이 있다면 말씀해주시면 감사하겠습니다!