Built-in Function 오브젝트
function 오브젝트
function 인스턴스
var book = function(){...}
엔진이 function 키워드를 만나면
생성한 오브젝트를 book 변수에 할당
book() 형태로 호출
함수를 호출하려면
function 오브젝트 저장 형태
함수를 호출하면
함수가 호출되면 엔진은
{name: value} 형태로 생각을 전환해야
function(){} 코드를 보면
function sports(){...} 형태에서 function 키워드를 만나면
오브젝트를 생성하고 저장
sports 오브젝트에 prototype 오브젝트 첨부
prototype에 constructor 프로퍼티 첨부
prototype에 __proto__
오브젝트 첨부
__proto__
가 기술되어 있지 않으며 ES6 스펙에 기술sports = {
prototype: {
constructor: sports
__proto__: {}
}
}
빌트인 Object.prototype의 메소드로
prototype.__proto__
에 첨부sports 오브젝트에 __proto__
오브젝트 첨부
sports.__proto__
구조가 됨빌트인 Function.prototype의 메소드로
sports.__proto__
에 첨부sports 오브젝트 프로퍼티에 초기값 설정
sports = {
arguments: {},
caller: {},
length: 0,
name: "sports",
prototype: {
constructor: sports,
__proto__: Object.prototype
},
__proto__: Function.prototype
}
__proto__
가 연결되어 있음__proto__
가 있으며sports = {
arguments: {},
caller: {},
length: 0,
name: "sports",
prototype: {
constructor: sports,
__proto__: Object.prototype
},
__proto__: Function.prototype
}
함수 실행 환경 인식이 필요한 이유는?
실행 환경 설정 시점
설정하는 것
function 오브젝트를 생성하고 바로 실행되지 않으므로 함수가 호출되었을 때 사용할 수 있도록 환경을 저장해야
어디에 저장?
인식한 환경을 function 오브젝트의 내부 프로퍼티에 설정
내부 프로퍼티 분류
- 공통 프로퍼티
- 모든 오브젝트에 공통으로 설정되는 프로퍼티
- 선택적 프로퍼티
- 오브젝트에 따라 선택적으로 설정되는 프로퍼티
- 해당되는 오브젝트에만 실행
function book(one, two){
return one + ", " + two;
};
log(book("JS", "DOM"));
// JS, DOM
var getBook = function (title){
return title;
};
getBook("JS책");
//
var getBook = function inside(value){
if (value === 102){
return value;
};
log(value);
return inside(value + 1);
};
getBook(100);
//
자바스크립트는 스크립팅 언어
- 스크립팅 언어
: 작성된 코드를 위에서부터 한 줄씩 해석(환경 설정)하고 실행
➡️ 하지만 자바스크립트는 다름
중간에 있는 코드가 먼저 해석될 수도 있음
첫 번째, 함수 선언문을 순서대로 해석
두 번째, 표현식을 순서대로 해석
마지막 줄에서 book 함수 호출
title 변수 선언
함수 선언문 작성
함수 표현식 작성
// 브라우저의 개발자 도구 창에서 위의 설명 한 줄씩 따라가면서 실행해보기
function book(){
debugger;
var title = "JS책";
function getBook(){
return title;
};
var readBook = function(){};
getBook();
};
book();
2. title, readBook 값은 undefined
3. getBook은 function 오브젝트
getBook이 function 오브젝트라는 것은
title, readBook에 설정된 undefined도 값이며, 값이 있다는 것은 엔진이 해석한 것을 뜻함
function book(){
log(title);
log(readBook);
log(getBook);
debugger;
var title = "JS책";
function getBook(){
return title;
};
var readBook = function(){};
getBook();
};
book();
// undefined
// undefined
// function getBook(){return title;}
함수 선언문 해석
변수 초기화
코드 실행
function book(){
debugger;
var title = "JS책";
function getBook(){
return title;
};
var readBook = function(){};
getBook();
};
book();
엔진 제어가 book 함수의 첫 번째 줄로 이동
함수 안에서 함수 선언문을 찾음
function getBook(){}이 함수 선언문이므로 function 오브젝트를 생성함
더 이상 함수 선언문이 없으므로 다시 함수의 첫 번째 줄로 이동
debugger 실행하지 않음
var title = "JS책";
function getBook(){}은 초기화를 했으므로 초기화하지 않음
var readBook = function(){};
여기까지가 초기화 단계이며 다시 함수의 첫 번째 줄로 이동
debugger를 실행하며, 실행이 멈춤
var title = "JS책";
function getBook(){return title};
var readBook = function(){};
function 오브젝트를 생성하여 readBook 변수에 할당
readBook이 function 오브젝트가 되므로 이제 readBook 함수를 호출할 수 있음
getBook() 함수 호출
함수 선언문은 초기화 단계에서
함수 앞에서 호출 가능
호이스팅(Hoisting)
이라고 함var result = book();
log(result);
function book(){
return "호이스팅";
};
// 호이스팅
var result = book();
log(result);
function book(){
return "호이스팅";
};
book function(){
return "함수 표현식";
};
// 호이스팅
코딩 시간
목적
4가지 코드로 실행하고 결과가 나오는 이유를 설명하기
함수 이름은 같으며 가운데에서 함수 호출
function book(){
function getBook(){
return "책1";
};
// 여기서 함수 호출
log(getBook());
function getBook(){
return "책2";
};
};
book();
// 책2
함수 표현식, 함수 호출(), 함수 표현식
함수 선언문, 함수 호출(), 함수 표현식
함수 표현식, 함수 호출(), 함수 선언문
function book(one){};
function book(one, two){};
function book(one, two, three){};
book(one, two);
마지막 줄에서 book() 함수를 호출하면
function getBook(){return "책1";}을 만나 getBook 오브젝트를 생성
getBook()을 호출하지 않고 아래로 내려감
function getBook(){return "책2";}를 만나 getBook 오브젝트를 생성
{name: value}
형태에서 name이 같으므로 value이 변경됨
function book(){
function getBook(){
return "책1";
};
getBook();
function getBook(){
return "책2";
};
};
book();
book 함수의 첫 번째 줄로 이동
함수 표현식과 변수에 undefined를 설정하지만 설정할 대상이 없음
다시 book 함수의 첫 번째 줄로 이동
function getBook(){return "책1";};
getBook() 함수 호출
return "책2";의 getBook 함수가 실행됨
호출한 함수로 돌아와 다음 코드를 수행
function getBook(){return "책2";};
function book(){
function getBook(){
return "책1";
};
// 여기서 호출
getBook();
function getBook(){
return "책2";
};
};
book();
// 책2