[JS] 함수 (function)

함수(function)란?

함수란 특정한 명령을 수행하는 하나의 독립된 블록을 말한다.

어떠한 기능을 함수로 구현하면 원하는 시점에 해당 함수를 호출하여 기능을 사용 할 수 있게 된다.

---

 

함수 선언

function 함수이름(매개변수1, 매개변수2,...) {
    함수가 호출되었을 때 작업하는 명령문;
    return 값;
}

함수이름 : 함수끼리 구별하는 식벽자 역할을 하고 규칙은 변수 선언 규칙과 동일 

매개변수 : 함수를 호출할 때 인수로 초기값을 저장할 변수를기재한다.

                 매개변수의 개수는 여러 개가 될 수 있으며 , 로 구분해서 기재한다.
                 매개변수는 함수가 받아올 초기값이 되며 해당 값이 함수에 올바르게 넘어오지 않으면 함수가 실행되지 않는다.

 

return      : 함수의 실행이 종료된 이후 함수의 실행 결과로 나올 값의 표기하면 됩니다.
                 반환문은 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환합니다.
                 반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있습니다.

 

함수 호출

function Add(a,b) {
    return a+b;
}

let Temp = Add(3,4); // 함수 호출

 

익명함수

익명 함수는 재사용 하지 않는, 한번만 사용할 함수를 위한 개념으로, 따로 함수의 이름을 갖지 않는다. 리터럴(Literal) 방식으로 변수에 담겨 사용하는 함수

익명 함수는 호출 시 구현하는 형태

var apple = function(a,b) {
  return a+b;
};

 

화살표함수

ES6부터는 화살표 함수(arrow function)라는 새로운 문법 방식의 함수

사용법

 

화살표 함수 형식

function func() {} 

const func = () => { };

예시

function sum(a, b) {
  return a + b;
}

let sum = (a,b) => a+b;

화살표 함수 매개변수 표현

// 매개변수가 없는 경우
() => { }

// 매개변수가 1개인 경우
(x) => { }
 x => { }
 
 // 매개변수 1개 초과인 경우 
 (x,y) => { }

화살표 함수 return 생략

// 실행문장이 1줄일 경수 생략이 가능하다
 a=> { return a + a}
 a=> a + a

객체 리터럴 반환

화살표함수로 객체 리터럴을 반환할 수 있다.

// 반환 방법
( ) => { return { a : 1 } }
// () 를 이용해서 동일하가 구현 가능
( ) => ({ a : 1 })

추가 방법

// 매개변수를 초기화 하면서 전달
( a = 1 , b = 2 ) => a + b;

// 나머지 매개변수
( ...args ) => args;

// 예시
foo(...one, ...wrong, ...wrong); // X 
foo(...wrong, arg2, arg3);		 // X 
foo(arg1, arg2, ...correct);	 // O

// 구조 분해 할당
( [a,b] = [1,2] ) => a + b;

※주의 사항

화살표 함수에서는 내부 지정자 this가 없음

this사용 시 외부 값이 호출 됨

 

콜백함수 

매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. 

매개변수로 함수를 표시하고 호출 시 구현하는 형태

콜백함수는 익명함수를 이용해서 작성을 하거나 화살표 함수를 이용해서 작성할 수 있다.

 

 

주로 사용되는 이유

비동기 요청이 여러개가 있을 때  동시에 요청이 되었을때 앞에 비동기 처리가 끝난 값을 뒤에서 사용한다면 이전 값이 생성되기 전에 요청을 보내게 된다.  이럴 때 순서를 맞추기 위해서 사용 한다.

// 첫 번째 호출
cosnt res1 = request('http://test.com');
// 두 번째 호출
cosnt res2 = request('http://test.com',res1);

// 문제 발생

// callback 
function FirstCall(parameters, callback){
	const res1 = request('http://test.com');
    callback(res1);
}
function SecondCall(res1, callback){
	const res2 = request('http://test.com',res1);
    callback();
}

FirstCall(temp, function(res1){
	SecondCall(res1,function() {
    	// 
    }
}

콜백을 이용해서 순서 조절을 하는 식으로 사용