자바스크립트 학습 18일차

# 자바스크립트 학습

# 함수의 형태

• 함수 선언문

Function Declaration

Function getBook(book) {코드}

• 함수 표현식

Function Expression

var getBook = function(book) {코드}

## 함수 선언문

구분	데이터(값)
function	function 키워드
식별자	함수 이름
파라미터	파라미터 리스트opt
함수 블록	(실행 가능한 코드opt)
반환	생성한 function 오브젝트

• 함수 선언문의 형태

function getBook(title) {
	return title;	// 함수 코드
};

var result = getBook("JS책");
log(result);

=>
JS책

function 키워드, 함수 이름, 블록{} 은 필수!!!
(파라미터, 함수 코드는 선택이다.)

함수 이름을생성한 function 오브젝트의 이름으로 사용한다.

## 함수 표현식

구분	데이터(값)
function	function 키워드
식별자	함수 이름opt
파라미터	파라미터 리스트opt
함수 블록	(실행 가능한 코드opt)
반환	생성한 function 오브젝트

• 함수 표현식 형태

var getBook = function(title) {
	return title;
};

var result = getBook("JS첵");
log(result);

=>
JS책

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

getBook(100);

 

# 함수 호출

## call()

구분	데이터(값)
object	호출할 함수 이름
파라미터	this로 참조할 오브젝트
	호출된 함수로 넘겨줄 파라미터opt
반화	호출된 함수에서 반환한 값

• 호출할 함수.call(파라미터);

function getTotal(one, two) {
	return one + two;
};

var result = getTotal.call(this, 10, 20);
log(result);

=>
30

call() 시 첫번째 파라미터는 파라미터 값으로 넘어가지 않음
첫번째 파라미터는 호출된 함수에서 this로 참조할 오브젝트이다.
one에 10, two에 20 담겨져 30 출력


var value = {one: 10, two: 20};
function getTotal() {
	return this.one + this.two;
};

var result = getTotal.call(value);
log(result);

=>
30

일반적으로 this사용 하나 다른 오브젝트도 작성 가능하다.

## apply()

구분	데이터(값)
object	호출할 함수 이름
파라미터	this로 참조할 오브젝트
	[호출된 함수로 넘겨줄 파라미터opt]
반환	호출된 함수에서 반환한 값

• 호출할 함수.call(파라미터, [파라미터]);

function getTotal(one, two) {
	return one + two;
};

var result = getTotal.apply(this, [10, 20]);
log(result);

=>
30

apply() 의 경우 두번째 파라미터를 배열로 작성

• 파라미터 수가 유동적일 때 사용한다. 
• 두 번째 파라미터에 배열을 사용한다.
• call(), apply()의 부가적인 목적은, 첫 번째 파라미터에 호출된 함수에서 this로 참조할 오브젝트를 사용하는 것이다. 

## toString()

구분	데이터(값)
object	function
파라미터	사용하지 않음
반환	변환한 값

• 모든 빌트인 오브젝트에 toString()이 있지만, 오브젝트마다 반환되는 형태가 다르다.
• function 오브젝트의 toString()은 함수 코드를 문자열로 반환한다.

var getBook = function() {
	return 100 + 23;
};

var result = getBook.toString();
log(result);

=>
function(){ return 100 + 23; }

 

# Argument 오브젝트

## 아큐먼트 오브젝트

• 함수가 호출되어 자바스크립트 엔진이 함수 안으로 이동했을 때 arguments 이름으로 생성되는 오브젝트이다.
• 함수를 호출한 곳에서 넘겨 준 값을 순서대로 저장한다.
• 호출된 함수에 파라미터를 작성한 경우 호출된 함수의 파라미터에도 값을 설정하고, 아규먼트 오브젝트에도 저장한다.

function getTotal(one) {
	return one + arguments[1] + arguments[2];
};

var result = getTotal(10, 20, 30);
log(result);

=>
60

• apply()와 아규먼트 오브젝트

function getTotal(one) {
	return one + arguments[1] + arguments[2];
};

var result = getTotal.apply(this, [10, 20, 30]);
log(retult);

=>
60

apply()의 두 번째 파라미터가 배열, 파라미터 값이 유동적이다.
이때 arguments를 사용, 유동적인 파라미터 수에 대응할 수 있다.