[JS] 함수

함수란?

• 함수는 this, 메서드, 프로토타입, 모듈화, 스코프, 실행 컨택스트, 콜로저 등의 자바스크립트 핵심개념과 깊은 관련이 있음
• 자바스크립트를 이해하려면 함수에 대한 이해가 필수적으로 필요함
• 함수를 사용하는 것이 코드의 재사용성, 유지 보수의 편의성, 코드의 가독성을 향상시킴
• 함수는 객체임(일급 객체)
• 객체와 다른 점은 callable 하다는 것 => 내부 메서드 [[ Call ]]과 관련
• 생성자 함수는 callable하면서 동시에 constructor임 => 내부 메서드 [[ Construct ]]과 관련
  -> 프로퍼티 어트리뷰트 확인하기1: console.dir(함수이름)
  -> 프로퍼티 어트리뷰트 확인하기2: 객체의 모든 속성들의 설명자를 반환하는 함수 사용해서 찍어보기
• ES6이전의 함수들은 모두 callable하면서 동시에 constructor이었으나 ES6부터 구분하기 시작함

함수의 정의 방식

• 함수를 정의한다고 표현하는 이유
  • 선언과 정의의 가장 큰 차이: 메모리의 할당 여부
  • 함수 정의 과정
    1. 평가과정에서 함수 선언문의 식별자가 암묵적으로 생성됨
    2. 함수 객체가 할당됨(메모리에 로드)
    • 따라서 함수는 선언한다고 표현하지 않고 정의한다고 표현함
    • ECMAScript에서도 변수에는 선언한다, 함수에는 정의한다는 표현을 씀

함수 표현식과 함수 선언문

• 함수리터럴로 정의한 경우, 자바스크립트 엔진이 이를 경우에 따라 함수 선언문/ 함수 표현식으로 해석한다.

• 값으로 평가되느냐 아니냐에 따라 달라짐

• 함수 선언문: 함수 호이스팅
  예: function b(){};

  • 평가과정에서 b라는 함수객체가 생성됨(엔진이 b를 식별자로 사용함, b는 원래 함수 내부에서 사용하는 식별자임)
  • 선언문 이전에 호출을 해도 문제가 없음 => 로직에 문제가 있으므로 권장x

• 함수 표현식: 변수 호이스팅
  예: var c = function d(){};

  • 평가과정에서 c라는 변수가 생성됨(var이기 때문에 메모리 할당 후 undefined로 초기화)
  • 선언문 이전에 호출하면 TypeError 발생(undefined 상태)
  • 할당문이 실행되는 시점에 (런타임) function d가 c에 할당 됨

화살표 함수(ES6) arrow function

예: let func = (arg1, arg2, ...argN) => expression => 항상 익명 함수

• 기존 함수와 다른 점
  constructor가 될 수 없음 => 내부 메서드에 [[ Construct ]]를 가지고 있지 않음
  

1. 간략화된 표현(=> fat arrow)
2. this 바인딩

• 원래 함수는 호출 방식에 따라 this 바인딩이 결정됨(동적)

  • 일반함수로 호출하는 경우: 전역객체에 바인딩(strict mode에서는 undefined가 바인딩 됨)
  • 메서드로 호출하는 경우: 메서드를 호출한 객체(abc.print()의 경우 print메소드의 this는 abc객체에 바인딩)
  • 생성자 함수로서 호출: 생성자 함수가 미래에 생성할 인스턴스(const add = new Func()의 경우 add)

• 콜백함수에서의 this 바인딩 문제

class Person { // 클래스 내부는 strict mode로 실행됨
  constructor(name) {
    this.name = name;
  }

  announce(arr) {
    console.log(this); // 여기서 this는 jueun 객체를 가리킴
    const that = this; // this를 회피시킴
    // map에 콜백함수로 일반 함수를 전달한 경우
    return arr.map(function (item) {
      // return `Hi ${item}, my name is ${that.name}.`; // 회피시키는 방법
      // return `Hi ${item}, my name is ${this.name}.`; // Q: 결과는?
    });
  }
}
this.name = "error"; // 전역에 등록
const jueun = new Person("jueun");
const greeting = jueun.announce(["a", "b", "c", "d"]);
console.log(greeting);

• 이것을 화살표 함수로 해결할 수 있음(의도적으로 설계된 것)

    // map에 화살표 함수를 전달한 경우
    // return arr.map((item) => {
    //   return `Hi ${item}, my name is ${this.name}.`;
    // });

3. prototype 프로퍼티가 없음. 즉, non-constructor임
   func : 화살표함수
   add : 함수선언문
   

   • 이 prototype 프로퍼티는 생성자 함수로 호출 할 수 있는 함수만 가짐
   • 이 프로퍼티는 함수가 객체를 생성하는 생성자 함수의 동작과 관련있는 객체임(상속에 사용됨)

4. arguments 객체 생성 x
   arguments 객체 mdn

function func1(a, a, a) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

const arrow1 = (a,a,a) => {}; // Error: Duplicate parameter name not allowed in this context

const arrow2 = (a) => {
 console.log(arguments[0]);
};

func1(1, 2, 3);
arrow2(1);

⇒ 좀 더 간략히 함수를 선언할 수 있으나 기존의 함수 표현식을 대체하기 위한 문법은 아님(다른 방법)

---

[참고]

일급객체

일급객체의 의미

• 다른 객체들에게 적용 가능한 연산을 모두 지원하는 객체를 말함
• 프로그래밍 언어에서 type을 전달/반환/할당 할 수 있는 경우 => 해당 type을 일급객체로 간주

일급객체의 조건

1. 할당 가능(변수나 자료구조에 저장할 수 있음)
2. 전달 가능(함수의 매개변수에 전달할 수 있음)
3. 반환 가능(함수의 반환값으로 사용할 수 있음)

"함수가 일급객체라서 좋은 점은?" => flexibility! 다양한 프로그래밍 패러다임을 적용할 수 있음

• 함수를 변수에 할당하여 호출하지 않고 전달하거나 객체의 메소드로 할당하는 등 flexible 하게 사용할 수 있음
• 함수를 매개변수로 전달할 수 있으므로 반복되는 부분을 줄일 수 있음(이벤트에 콜백함수 전달 등)

function showText(e) {
    //show specific text
}
$('form').on('submit',showText);
$('a').on('click',showText);

• 함수를 반환할 수 있기 때문에 고차 함수의 사용이 가능해짐
  • Higher-order function: 다른 함수를 전달인자로 받거나 함수실행의 결과를 함수로 반환하는 함수
• 일급객체 속성과 클로저 때문에 커링과 메모이제이션이 가능해짐

---

• 이어서 공부하면 좋을 주제: currying, 메모이제이션, 프로토타입
• 개인적으로 궁금한 주제: 자바스크립트의 Loose Typing
• 메커니즘? how it works? 개발자영어