4/ 참조타입_Function 타입 (1)

‘프론트엔드 개발자를 위한 자바스크립트 프로그래밍’ 책을 참고하여 정리합니다. 오류가 있다면 언제든지 댓글 남겨주세요.

목차
0. Function 타입
1. 함수 선언 vs 함수 표현식
2. 값처럼 쓰는 함수(일급객체)
3. 함수의 내부 구조
3. 함수 프로퍼티와 메서드
4,5번은 Function 2편에서

1. Function 타입

함수는 객체이다. 모든 함수는 Function타입의 인스턴스이며, 프로퍼티와 메서드가 있다.
함수란 어떤 특정 작업을 수행하기 위해 필요한 일련의 구문들을 그룹화하기 위한 개념이다.

함수 정의

1. 함수 선언식

   function sum (num1, num2) {
     return num1 + num2
   }

2. 함수 표현식 Function expression

   const sum = function(num1, num2){
     return num1 + num2
   }

• 일급객체라는 함수의 특징 때문에 함수 리터럴 방식으로 선언 후 변수에 할당할 수 있다.
• 할당된 함수를 가리키는 참조값을 저장하게 된다.
• 이렇게 생성된 함수는 function 키워드 다음에 함수 이름이 없으므로 익명 함수로 간주한다.
  • 익명함수(anonymous function) = 람다함수(lambda)
  • name 프로퍼티는 빈 문자열이다.
  • 함수표현식으로 재귀, 클로저, 고유변수 등을 설명할 수 있다.
    

3. Function 생성자 사용

   const sum = new Function('num1','num2','return num1 + num2')

• 함수 리터럴 방식
• 당연히 권장하지 않는다.
• ECMAScript 생성자에 전달할 문자열을 다시 평가해야 하므로 성능에 영향이 있다.

괄호를 쓰지않는 sum
괄호를 쓰지 않고 함수 이름만 쓰면 함수를 실행하지 않고 함수를 가리키는 포인터에 접근(만)하는 것이다.

---

2. 함수 선언 vs 함수 표현식

자바스크립트 엔진이 실행 컨텍스트에 데이터를 불러올 때 중요한 차이가 하나 있다.
함수 선언은 어떤 코드도 실행하기 전에 이미 모든 실행 컨텍스트에서 접근하고 실행할 수 있지만
함수 표현식은 코드 실행이 해당 줄까지 진행하기 전에는 사용할 수 없다.

실행 컨텍스트와 같이 생각해보자!
자바스크립트 엔진은 코드를 평가할 때 제일 먼저 함수 선언을 찾은 다음 이들을 맨 위로 올린다 (함수 호이스팅). 함수 표현식은 변수에 함수가 할당된 개념이기 때문에, 해당 변수에 값(함수)이 들어오기 전까지는 undefined로만 선언되어있는 상태이다.(변수 호이스팅)

alert(sum(10,10));
const sum = function(num1, num2){
  return num1 + num2;
}

즉, 위 코드를 보면 에러가 나는데, sum은 컨텍스트에 있지만 매개변수를 넘길 수 있는 형태가 아니기 때문에(2번째 줄 오기 전까지는 undefined) 해당 코드까지 실행하기 전에는 unexpected identifier 에러를 낸다.
(예기치 못한 식별자 = sum(10,10)을 보고 함수형태의 식별자 sum을 기대하고 찾았는데, 함수형태가 아니라서)

함수 표현식만 사용하자고 권고한다 : 참고

JavaScript : The Good Parts의 저자이며 자바스크립트의 권위자인 더글러스 크락포드(Douglas Crockford)는 이와 같은 문제 때문에 함수표현식만을 사용할 것을 권고하고 있다. 함수 호이스팅이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하므로 1. 코드의 구조를 엉성하게 만들 수 있다고 지적한다.

또한 함수선언식으로 함수를 정의하면 사용하기에 쉽지만 대규모 애플리케이션을 개발하는 경우 2. 인터프리터가 너무 많은 코드를 변수 객체(VO)에 저장하므로 애플리케이션의 응답속도는 현저히 떨어질 수 있으므로 주의해야 할 필요가 있다.

---

3. 값처럼 쓰는 함수 (일급객체)

자바스크립트 함수는 일급 객체이다.

일급객체란

1. 생성(인스턴스 생성가능),
2. 대입,
3. 연산,
4. 인자 또는 반환값으로서의 전달 등

프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상을 의미한다.
일급객체일 경우 아래와 같은 특징을 갖는다.

1. 무명의 [리터럴](https://feel5ny.github.io/2017/11/17/Typescript_04/#literal)로 표현이 가능하다. 2. 변수나 자료구조 (객체, 배열...)에 저장할 수 있다. 3. 함수의 파라미터로 전달할 수 있다. 4. 반환값(return value)으로 사용할 수 있다. (내부함수)

함수와 다른 객체를 구분 짓는 특징은 호출할 수 있다는 것이다.

4. 함수가 다른 함수를 반환하는 상황
   예시1_callSomeFunction

   // sample example
   // callSomeFuncion은 범용함수이다. 범용함수란 더 많은 상황에서 더 잘 적용할 수 있는 함수를 말한다.
   function callSomeFunction(someFunction, someArgument){
     return someFunction(someArgument) // 반환값으로 사용됨
   }
   
   function add10(num){
     return num + 10;
   }
   
   const result1 = callSomeFunction(add10, 19);
   alert(result); //20

예시2_sort의 createComparisonFunction함수

• 해당 객체의 프로퍼티 이름을 확인하여 순서를 배치하는 함수를 반환하는 비교함수이다.
• 개체는 해당 속성 중 하나의 값을 기준으로 정렬 할 수 있습니다.

  // sort
  function createComparisonFunction(propertyName){
    return function (object1, object2){ // return 연산자 뒤에 내부함수
      let value1 = object1[propertyName]
      let value2 = object2[propertyName]
  
      if (value1 < value2){
        return -1; // value1이 앞에 옴
      } else if (value1 > value2){
        return 1; // value1이 뒤에 옴
      } else {
        return 0;
      }
    }
  }
  
  const data = [{name: 'Joy', age: 27}, {name:'Clara', age:28}]
  data.sort(createComparisonFunction('name'))
  console.log(data[0].name) // Clara
  data.sort(createComparisonFunction('age'))
  console.log(data[0].age) // 27

sort(compareFunction)

compareFunction이 제공되지 않으면 요소를 문자열(toString)로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬됩니다. 예를 들어 “바나나”는 “체리”앞에옵니다. 숫자 정렬에서는 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 “80”은 유니 코드 순서에서 “9”앞에옵니다.

문자열 대신 숫자일 경우 value1과 value2를 빼는방법으로 색인을 반환한다.

const numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]

---

참고링크

1. http://poiemaweb.com/js-function