이력

  • 2021.11.17 포스팅
  • 2021.11.26 사소한 수정

모든 내용을 상세히 담으려 하지 않았습니다.
제가 모르는 부분이나, “이런 것도 있었어?” 하는 부분, 중요하다고 생각되는 부분,
다시 한번 되새기고 싶은 부분만 기록했습니다.
읽어주셔서 감사합니다.

16.1 프로퍼티 리스트

16.2 함수 개요

  • 함수는 실행할 수 있는 자바스크립트 코드(문장)의 묶음이다.
  • 함수 이름이 없어도 함수를 정의할 수 있지만 임시 사용이며 특별한 형태이다.
  • 함수 기능을 나타내도록 함수는 이름을 정한다. 함수는 값을 계산하는 것과 같이 동적 처리를 동반하므로 명사보다는 동사를 사용한다. 동사로 의미 전달이 부족하면 같이 사용한다.
  • 자바스크립트가 함수를 인식하는 기준은 “function” 키워드이다.

16.3 new Function()

  • 파라미터를 하나만 작성하면, 함수에서 실행되는 자바스크립트 코드로 인식하며 함수에 파라미터 이름을 작성하지 않은 것으로 간주합니다.
  • 함수에 파라미터 이름을 아래와 같이 분리하거나 하나로 작성할 수 있습니다.
1
2
3
4

// 아래의 3개 선언 모두 파라미터를 동일하게 인식한다.
var obj1 = new Function("book", "audio", "video", "return book + audio + video;");
var obj2 = new Function("book, audio, video", "return book + audio + video;");
var obj3 = new Function("book, audio", "video", "return book + audio + video;");

16.4 Function()

  • length 프로퍼티는 파라미터의 개수를 나타낸다.​
  • 자바스크립트에서 함수와 메소드를 확연하게 구분해야 한다. 왜냐하면 호출하는 형태가 다르기 떄문이다.
  • 글로벌 오브젝트는 new 연산자를 사용하여 인스턴스를 생성할 수 없으며 isNaN()과 같이 오브젝트를 지정하지 않고 호출한다. new 연산자를 사용할 수 없는 오브젝트의 function은 메소드가 아닌 함수이다. 따라서 글로벌 오브젝트의 모든 function은 함수이다.​
  • 예시로, Array 오브젝트는 new 연산자로 인스턴스를 생성할 수 있으며 인스턴스.push() 또는 Array.prototype.push() 형태로 메소드를 호출할 수 있다. new 연산자로 인스턴스를 생성했을 때 function이 인스턴스에 존재하면 메소드이다. Array.isArray는 인스턴스에 할당되지 않으므로 함수이다.

16.5 함수 생명주기

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

function getBook(book) {
  return book;
}

var result = getBook("책");
js.log(result)

1. 자바스크립트 엔진이 function 키워드를 만나면 함수로 인식한다.
2. 인스턴스 이름이 getBook인 Function 인스턴스를 생성한다.
3. 글로벌 오브젝트에 설정한다.
- 생성한 인스턴스를 설정할 오브젝트를 지정하지 않았기 때문에 글로벌에 설정된다.
- 여기까지가 Function 인스턴스의 생성 단계이다.
4. getBook 함수를 호ㅜㄹ한다.
5. "책"을 파라미터 값으로 호출받는 함수에 넘겨준다.
- 여기까지가 함수 호출 단계이다.
6. 자바스크립트 엔진이 호출된 함수로 이동한다.
7. 파라미터로 받은 값을 함수의 파라미터에 설정한다.
8. 함수안의 자바스크립트 코드를 실행한다.
9. 반환 값을 갖고 함수를 호출한 곳으로 돌아간다.
- 여기까지가 함수 실행 단계이다.

16.6 함수 선언문

1
2
3

function myHome(book, video, audio) {
  return book + video + audio;
}
  • function 키워드와 함수 이름을 반드시 작성해야 한다.
  • 자바스크립트 엔진이 function 키워드를 만나면 new Function()을 실행하는 것과 같이 Function 인스턴스를 생성하여 myHome이 인스턴스 이름이 된다. 다시 한번 강조합니다. 자바스크립트 엔진이 function 키워드를 만나면 Function 인스터스를 생성한다.

16.7 함수 표현식

  • var name = function(){} 과 같이 함수를 변수에 할당하는 형태를 의미한다.
  • 특징은 이름이 선택이므로 지정하지 않을 수 있다는 점이다. 이름을 지정하지 않으면 함수를 할당한 왼쪽의 변수 이름이 함수 이름이 된다.
  • 아래와 같이 함수의 이름을 지정하되 다른 변수에 할당하게 되면 변수로 접근해야 정상적으로 동작한다.
1
2
3
4
5
6
7
8
9

var yourHome = function myHome(param) {
  if (param === 101) {
    return param;
  }
  return myHome(param + 1);
};

var result = yourHome(100);
js.log(result)

16.8 문자열로 변환, toString()

  • 기능적으로 큰 의미는 없지만, Function 오브젝트에 없으면 Object.prototype에 연결된 프로퍼티로 인스턴스를 생성하여 상속받으므로 “[object Object]” 형태가 되어 목적과 다른 결과가 출력되기 때문에 필요하다.

16.9 함수 호출, call()

16.10 함수 호출: 배열 사용, apply()

  • 배열로 파라미터를 넘겨준다.
  • 함수가 호출되면 파라미터에 작성에 관계없이 넘겨받은 파라미터 값을 arguments 오브젝트에 설정한다. arguments를 읽으면 파라미터로 받은 모든 값을 구할 수 있습니다.
  • 파라미터를 작성하여 배열의 값을 순서대로 파라미터에 할당받을 수는 있으나 apply 메소드의 특징을 활용하는 것이 아니다.
1
2
3
4
5
6
7
8

var getValue = function() {
  var list = arguments, total = 0;
  for (var k = 0; k < list.length; k++) {
    total += list[k];
  }
  return total;
};
js.log(getValue.apply(this, [10,20,30]);

16.11 call()과 apply() 차이

  • 파라미터 고정: 파라미터를 설정하여 파라미터의 이름을 통해 가독성이 향상된다. call()
  • 파라미터가 가변적: 가변적인 파라미터를 처리할 때 apply() 메소드는 자연스럽게 처리할 수 있다.
  • 혼합 사용: 파라미터를 지정하되 apply() 호출을 통해 배열로 넘겨받아서 처리할 수 있다.
  • bind 메소드는 27장에서 다룬다.