[7주차] Function 오브젝트, Argument

7주차에는 <중고급 과정: 근본 핵심 논리>의 Function 오브젝트와 Argument의 개념을 공부했습니다. 😎

 

주차진도강의시간(분)기간

7주차

0. 중고급 강좌 소개 범위 1. Function 오브젝트, 2. Argument

115

21년 12월 24일~21년 12월 30일

---

Function 형태

• 빌트인 Function 오브젝트
  • Function.prototype.call()
• function 오브젝트
  • 인스턴스이지만, new 연산자로 생성한 인스턴스와 구분하기 위해 강좌에서는 function 오브젝트로 표기
• function 인스턴스
  • new 연산자를 사용하여 연결된 메소드로 생성

 

function 오브젝트 생성

• 엔진이 function 키워드를 만나면 빌트인 Function 오브젝트의 prototype에 연결된 메소드로 function 오브젝트 생성
• 생성한 오브젝트를 변수에 할당

 

오브젝트 저장

• 함수를 호출하려면 생성한 function 오브젝트를 저장해야 함
• function 오브젝트 저장 형태
  • {name: value} 저장 형태
  • {book: 생성한 function 오브젝트} 형태
• 함수를 호출하면
  1. 저장된 오브젝트에서 함수 이름(book)으로 검색
  2. value값을 구하고
  3. value가 function오브젝트이면 호출

 

function 오브젝트 생성 과정

1. function sports() {...} 형태 과정에서 function 키워드를 만나면
2. 오브젝트를 생성하고 저장한다.
   • {sports: {...}}
   • sports는 function 오브젝트 이름
   • 오브젝트 {...}에 프로퍼티가 없는 상태
3. 이제부터 빈 오브젝트를 채운다.
4. sports 오브젝트에 prototype 오브젝트 첨부
5. prototype에 constructor 프로퍼티 첨부
   • prototype.constructor가 sports 오브젝트 참조
6. prototype에 proto 오브젝트 첨부
   • ES5 스펙에 proto가 기술되어 있지 않으며 ES6 스펙에 기술되어 있다.
   • 엔진이 사용한다는 뉘앙스
7. sports 오브젝트에 proto 오브젝트 첨부
   • sports.proto 구조가 된다.
8. 빌트인 Function.prototype의 메소드로 function 인스턴스를 생성하여 sports.proto에 첨부
9. sports 오브젝트 프로퍼티에 초기값 설정
   • arguments, caller, length, name 프로퍼티

sports = {
    arguments: {}.
    caller: {},
    length: {},
    name: "sports",
    prototype: {
        constructor: sports
        __proto__: Object.prototype
    },
    __proto__: Function.prototype
}

---

function 오브젝트 구조

• function 오브젝트에 prototype이 있으며
  • constructor가 연결된다.
  • proto가 연결되어 있으며 Object 인스턴스가 연결된다.
• function 오브젝트에 proto가 있으며
  • Function 인스턴스가 연결된다.
  • Array이면 Array 인스턴스가 연결되고, String이면 String 인스턴스가 연결된다. 즉, 오브젝트 타입에 따라 바뀔 수 있다.

---

function 실행 환경 저장

함수 실행 환경 인식

• 함수 실행 환경 인식이 필요한 이유?
  • 함수가 호출되었을 때 실행될 환경을 알아야 실행 환경에 맞추어 실행할 수 있기 때문이다.
• 실행 환경 설정 시점
  • function 키워드를 만나 function 오브젝트를 생성할 때
• 설정하는 것
  • 실행 영역(함수가 속한 스코프)
  • 파라미터, 함수 코드 등

함수 실행 환경 저장

• function 오브젝트를 생성하고 바로 실행하지 않으므로 함수가 호출되었을 때 사용할 수 있도록 환경을 저장해야 한다.
  • 생성한 function 오브젝트에 저장된다.
• 인식한 환경을 function 오브젝트의 내부 프로퍼티에 설정한다.
  • {name: value} 형태

---

내부 프로퍼티

• 엔진이 내부 처리에 사용하는 프로퍼티
• 스펙 표기로 외부에서 사용할 수 없다.
• 스펙 표기: [[]] 형태 (예: [[Scope]])

 

내부 프로퍼티 분류

• 공통 프로퍼티
  • 모든 오브젝트에 공통으로 설정되는 프로퍼티
  • 모든 오브젝트란 빌트인 오브젝트로 만드는 오브젝트를 뜻한다.
• 선택적 오브젝트
  • 오브젝트에 따라 선택적으로 설정되는 프로퍼티
  • 해당되는 오브젝트에만 설정된다.

---

엔진 해석 방법

엔진 해석 순서

• 자바스크립트는 스크립팅 언어이다.
• 스크립팅 언어는 작성된 코드를 위에서부터 한 줄씩 해석하고 실행한다.
  • 그러나 자바스크립트는 중간에 있는 코드가 먼저 해석될 수도 있다.

1. 함수 선언문을 순서대로 해석
   • function sports(){};
2. 표현식을 순서대로 해석
   • var value = 123;
   • var book = function(){}; // 함수 표현식

---

호이스팅

함수 앞에서 호출

• 함수 선언문은 초기화 단계에서 function 오브젝트를 생성하므로 어디에서도 함수를 호출할 수 있다.
• 함수 앞에서 호출 가능하다는 것을 호이스팅(Hoisting)이라고 한다.
  • 용어보다 개념으로 접근하기!
• 초기화 단계에서 값이 있으면 초기화하지 않는다.

var result = book();
console.log(result); // 호이스팅
function book() {
    return "호이스팅";
};
// 에러가 발생하지 않는다!

var result = book();
console.log(result); // 호이스팅
function book() {
    return "호이스팅";
};
book = function() {
    return "함수 표현식";
};
// book에 이미 값이 할당되어 있기 때문에 초기화가 되지 않는다.

---

오버로딩(Overloading)

오버로딩 형태

function book(one){};
function book(one, two){};
function book(one, two, three){};

book(one, two);

• 함수 이름이 같더라도 파라미터 수 또는 값 타입이 다르면 각각 존재한다.
• 함수를 호출하면 파라미터 수와 값 타입이 같은 함수가 호출된다.
• JS는 오버로딩을 지원하지 않는다.
  • 파라미터 수와 값 타입을 구분하지 않고 {name: value} 형태로 저장하기 때문이다.

 

오버로딩 미지원: 함수 선언문 초기화

function book() {
    function getBook(){
        return "책1";
    };
    getBook();
    function getBook(){
        return "책2";
    };
};
book();

1. 마지막 줄에서 book() 함수를 호출하면
2. function getBook(){return “책1”;}을 만나 getBook 오브젝트를 생성한다.
3. getBook()을 호출하지 않고 아래로 내려간다.
4. function getBook(){return “책2”;}를 만나 getBook 오브젝트를 생성한다.
   • 2번의 오브젝트와 이름이 같으므로 여기서 생성한 getBook 오브젝트로 대체된다.
5. {name: value} 형태에서 이름이 같으므로 값이 변경된다.

 

오버로딩 미지원: 변수 초기화

1. book 함수의 첫 번째 줄로 이동한다.
2. 함수 표현식과 변수에 undefined를 설정하지만 설정할 대상이 없다.
3. 다시 book 함수의 첫 번째 줄로 이동한다.