본 정리글은 인프런 김영보 강사님의 자바스크립트 중고급 : 근본 핵심 논리 강의를 수강하고 정리한 글입니다.

📖 Function 오브젝트 - 2

📌 함수 정의

함수 정의 : 함수 코드가 실행될 수 있도록 JS 문법에 맞게 함수를 작성하는 것
함수 정의 형태
1> 함수 선언문
2> 함수 표현식
3> new Function(param, body) 문자열로 작성

📌 함수 선언문

function book(one, two){
	return one + ", " + two; 
};
log(book("JS", "DOM"));

[실행 결과] JS, DOM

엔진이 function 키워드를 만나면 function 오브젝트를 생성하고 함수 이름을 function 오브젝트 이름으로 사용

📌 함수 표현식

: 값이 function 오브젝트인 변수

var getBook = function(title){
	return title;
};
getBook("JS책");

[실행결과]

function 오브젝트를 생성하여 변수에 할당
변수 이름이 function 오브젝트 이용

var getBook = function inside(value){
 	if(value === 102)
      	return value;
  
  	log(value);
  	return inside(value + 1);
};
getBook(100);

식별자 위치의 함수 이름 생략 가능
var getBook = function(value){...} 가능

-- inside : 식별자 위치, return inside(value + 1) : 무한반복 (재귀함수)
-- inside()는 밖에서 호출 불가능
getBook() 호출하여 함수 안으로 이동한 후에 inside() 호출 가능

📌 엔진 해석 순서

JS : 스크립팅 언어 - 작성된 코드를 위에서부터 한줄 씩 해석 및 실행
-- but, JS는 다른 점이 있다.
-- 중간에 있는 코드가 먼저 해석될 수 있다.
순서
1> 함수 선언문 해석 ex) function sports(){}
2> 함수 표현식 해석 ex) var book = 123, var value = function(){}

📌 함수 코드 작성 형태

마지막 줄 book 함수 호출
title 변수 선언
함수 선언문 작성
함수 표현식 작성

function book(){
 	debugger;
  	var title = "JS책"; // 2
  	function getBook(){ // 3
      	return title;
    };
  	var readBook = function(){}; // 4
  	getBook();
};
book(); // 1

📌 엔진 처리 상태

function book(){
 	log(title); // 2
  	log(readBook); // 2
  	log(getBook); // 3
  	debugger;
  	var title = "JS책";
  	function getBook(){
      	return title;
    };
  	var readBook = function(){};
  	getBook(); // 4
};
book();

[실행결과] undefined
undefined -- 이름은 등록, 값은 등록 X
function getBook(){return title} 함수 선언문은 이름, 값이 전체 등록

마지막 줄에서 book()함수 호출 시 앞의 log 출력하고 debugger에서 실행 멈춤
title, readBook 값은 undefined
getBook은 function 오브젝트
undefined도 값이며, 값이 있따는 것은 엔진이 해석했다는 뜻 (해석 안하면 값이 표시되지 않는다)
getBook이 function 오브젝트라는 것은 function getBook(){}를 뜻한다.

-- 해석했다 : 스코프에 식별자 해결을 위해서 등록을 했다.

📌 함수 코드 해석 순서

function book(){
 	debugger;
  	/* 2 */ var title = "JS책"; // 3
  	/* 1 */function getBook(){
     	return title; 
    };
  	/* 2 */ var readBook = function(){}; // 3
  	getBook(); // 3
}
book();

함수 선언문 해석
-- function getBook(){}
변수 초기화
-- var title = undefined
-- var readBook = undefined
코드 실행
-- var title = "JS책"
-- var readBook = function(){}
-- getBook()

📌 함수 선언문 해석

function book(){
 	debugger;
  	var title = "JS책";
  	function getBook(){
     	return title; 
    };
  	var readBook = function(){};
  	getBook(); 
}
book();

마지막 줄에서 book() 함수 호출
엔진 제어가 book 함수의 첫번째 줄로 이동
-- debugger 실행 X
함수 안에서 함수 선언문을 찾는다
-- 위에서 아래로 내려가면서 하나씩 검색
function getBook(){}이 함수 선언문이므로 function 오브젝트 생성
더 이상 함수 선언문이 없으므로 다시 함수의 첫번째 줄로 이동
debugger 실행 X
var title = "JS책"
-- title 변수에 undefined 할당 "JS책" 할당 x
function getBook(){}은 초기화 했으므로 초기화 X
var readBook = function(){}
-- readBook 변수에 undefined 할당, 함수표현식은 변수만 선언
여기까지가 초기화 단계, 다시 함수의 첫 줄로 이동

📌 코드 실행

function book(){
 	debugger;
  	var title = "JS책";
  	function getBook(){
     	return title; 
    };
  	var readBook = function(){};
  	getBook(); 
}
book();

debugger 실행하며, 실행이 멈춘다
var title = "JS책"
-- title 변수에 "JS책" 할당
function getBook(){return title}
-- 실행이 아닌 선언이므로 다음 줄로 이동
var readBook = function(){}
-- function 오브젝트를 생성하여 readBook 변수에 할당
-- readBook이 function 오브젝트가 되므로 이제 readBook 함수를 호출할 수 있다.
getBook() 함수 호출
-- 지금까지 과정과 같은 방법으로 getBook() 함수의 함수와 변수를 초기화하고 코드 실행

📌 함수 앞에서 함수 호출 : 호이스팅

함수 선언문은 초기화 단계에서 function 오브젝트를 생성하므로 어디에서도 함수를 호출할 수 있다
함수 앞에서 호출이 가능하다 :: 호이스팅 (Hoisting)

var result = book();
log(result);
function book(){
 	return "호이스팅"; 
};

[실행결과]호이스팅

순서상 에러 날 것 같지만 에러 안남. 호이스팅 때문에!

var result = book();
log(result);
function book(){
 	return "호이스팅"; 
};
book = function(){ // 이미 이전에 book이 undefined 상태가 아님 -> 할당 X, 기존 유지
 	return "함수 표현식"; 
};

[실행결과] 호이스팅

초기화 단계에서 값이 있으면 초기화하지 않는다

📌 오버로딩

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

book(one, two);

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

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

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

[실행결과] 책2

마지막 줄에서 book()함수 호출
function getBook(){return "책1"}을 만나 getBook 오브젝트 생성
getBook()을 호출하지 않고 내려감
function getBook(){return "책2"}를 만나 getBook 오브젝트 생성
-- 2번과 오브젝트 이름이 같으므로 여기서 생성된 getBook 오브젝트로 대체됨
{name : value} 형태에서 이름(name)이 같으므로 값(value)가 변경됨

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

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

📌 오버로딩 미지원 : 코드 실행

function getBook(){return "책1"}
-- 함수 선언문 이므로 아래로 내려줌
getBook() 함수 호출
return "책2"의 getBook 함수가 실행됨
-- 함수 이름이 같으므로 위의 함수가 아래 함수로 대체되었기 때문
-- "책2"가 실행결과에 출력됨
호출한 함수로 돌아와 다음 코드를 수행한다
function getBook(){return "책2"}
-- 함수 선언문이므로 처리 X

Author And Source

이 문제에 관하여([JavaScript] Function 오브젝트 2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yun12343/JavaScript-Function-오브젝트-2

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[JavaScript] Function 오브젝트 2