[모던 자바스크립트 입문] 8. 함수

8.1 함수 정의하기

1. 함수 선언문

    function sum(a, b) { return a + b; }

2. 함수 리터럴

    const sum = function(a, b) { return a + b; };

3. Function 생성자

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

4. 화살표 함수

    const sum = (a, b) => a + b;

중첩 함수(nested function)

• 특정 함수의 내부에 선언된 함수
• if, while 등 문장 블록 안에서 작성 불가
• 외부 함수의 바깔에서 사용 불가

8.2 함수 호출하기

1. 함수 호출

    const s = sum(1, 3);

2. 메서드 호출

    obj.sum(1, 3);

3. 생성자 호출

    const obj = new Object();

4. call, apply를 사용한 간접 호출

즉시 실행 함수

• IIFE: Immediately Invoked Function Expression

    (function hello() {
        console.log("Hi");
    })();
    // Hi

  • 함수 바로 실행

8.3 함수의 인수

• 인수 생략 시 undefined

    const print = a => console.log(`Hi ${a}`);
    print();
    // Hi undefined

• Arguments 객체

  • 인수들은 Arguments 객체인 arguments에 저장되어있다.

  • 화살표 함수에선 존재하지 않음

  • 화살표 함수에선 ...args사용

    const a = function (x, y) {
    arguments[1] = "hi";
    console.log(x, arguments[1], arguments[4]);
    }
    
    a(1, 2, 3, 4, 5, 6);
    // 1 'hi' 5
    
    const b = (...args) => {
    args[1] = "hi";
    console.log(args[0], args[1], args[4]);
    }
    
    b(1, 2, 3, 4, 5, 6);
    // 1 'hi' 5

8.4 재귀함수

• 함수가 자기 자신을 호출하는 행위
• 재귀 호출은 반드시 멈춰야 한다.
• 재귀 호출로 문제를 간단하게 해결할 수 있을 때만 사용한다.
  • while문이나 for문으로 작성하는 편이 이해하기 쉽고, 메모리도 적게 차지

8.5 프로그램의 평가와 실행 과정

• 프로그램 평가 후 프로그램 실행
• 평가 과정에서 hoisting
• 실행 context는 스택 구조로 관리
• 자바스크립트는 싱글스레드

this

• 함수가 호출 되었을 때 그 함수가 속해 있던 객체의 참조
• 실행 문맥의 디스 바인딩 컴포넌트가 참조하는 객체

const tom = {
    name: "Tom",
    sayHello: () => console.log(`Hello ${this.name}`)
}

tom.sayHello();
// Hello Tom
const sam = { name: "Sam" };
sam.sayHello = tom.sayHello;
sam.sayHello();
// Hello Sam

가비지 컬렉션

• 사용하지 않는 객체의 메모리 영역을 가비지 컬렉터가 자동으로 해제
• 그래도 메모리 누수 주의

8.6 클로저

• 객체의 프로퍼티를 외부로부터 은폐

const makeCounter = () => {
    let count = 0;
  return countUp = () => count++; // makeCounter의 count를 참조
};

const counter = makeCounter(); // countUp 객체를 참조
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

8.7 이름 공간

• 전역 이름 공간을 오염시키면 프로그램 오류가 나기 쉬움

• 객체를 name space로 사용

    var myApp = myApp || {}; // const, let 안 됨
    myApp.name = "Tom";
    myApp.sayHi = () => console.log("Hi");

• 함수를 name space로 사용 (모듈 패턴, 즉시 실행 함수 이용)

    const Module = {};
    ((_Module) => {
        let name = "unknown";
      const getName = () => name;
      _Module.setName = (newName) => {
        name = newName;
      }
      _Module.showName = () => {
        console.log(getName());
      }
    })(Module);
  
    Module.showName();
    Module.setName("soo");
    Module.showName();

8.8 객체로서의 함수

• 자바스크립트에서 함수는 객체
  • 함수를 변수나 프로퍼티, 배열 요소로 대입할 수 있다
  • 함수의 인수로 사용할 수 있다
  • 함수의 반환값으로 사용할 수 있다.
  • 프로퍼티와 메서드를 가질 수 있다.
  • 익명 함수 가능하다
  • 동적으로 생성할 수 있다.

apply와 call 메서드

• this값과 인수를 사용하여 함수를 실행하는 메서드 (화살표 함수에선 안됨)

function say(greetings, honorifics) {
  console.log(`${greetings} ${honorifics} ${this.name}`);
}

const tom = { name: 'Tom' };
const jerry = { name: 'Jerry' };

// 배열 이용
say.apply(tom, ['Hello', 'Mr.']);
say.apply(jerry, ['Hello', 'Ms.']);
// Hello Mr. Tom
// Hello Ms. Jerry

// 쉼표로 구분
say.call(tom, 'Hello', 'Mr.');
say.call(jerry, 'Hello', 'Ms.');
// Hello Mr. Tom
// Hello Ms. Jerry

bind 메서드

• 객체에 함수를 묶어줌

function say(greetings, honorifics) {
  console.log(`${greetings} ${honorifics} ${this.name}`);
}

const tom = { name: 'Tom' };
const sayHello = say.bind(tom);
sayHello('Hello', 'Mr.');
// Hello Mr. Tom

8.9 고차 함수

• 함수를 인수로 받는 함수 또는 함수를 반환하는 함수
• 메모이제이션, 함수의 합성, 부분 적용, 커링 등등

8.10 콜백함수

• 다른 함수에 인수로 넘겨지는 함수
• 이벤트 처리기, 타이머 등

8.11 ES6부터 추가된 기능

• 화살표 함수
  • this의 값이 함수를 정의할 때 결정 된다.
  • arguments 변수가 없다
  • 생성자로 사용할 수 없다.
  • yield 키워드를 사용할 수 없다.
• ...args 나머지 매개변수
• 인수의 기본 값
• 이터레이터(배열에 있는 Symbol.iterator 메서드)
• for ... of
• 제너레이터
  • 반복 가능한 이터레이터를 값으로 반환
  • 작업의 일시정지와 재시작이 가능, 자신의 상태를 관리
• 템플릿 리터럴의 태그함수
  • 태그함수의 첫 번째 인수는 문자열을 요소로 담은 배열
  • 두 번째 이후 인수로는 각 ${...} 안에 지정된 표현식을 평가한 값
  • 태그함수의 첫 번째 인수는 callSite 객체
    • 읽기만 가능
    • 캐시된다.
    • raw 프로퍼티가 있다.