[JS] All about Function

function

sub-program이라고도 불리며, 같은 기능을 여러번 재사용하기 위해 태어났다.

JavaScript에서 함수는 다음과 같은 기본형을 가진다.

function add(a,b){ //a,b 매개변수(parameter)
	return a+b
}
add(2,5); //2,5 인수(argument)

함수 이름

- 한 가지 함수는 한 가지 일을 하도록 만드는 것이 좋다.

- 함수의 이름은 함수가 어떤 일을 하는지 나타내는 동사나 명령어 형태로 짓는다.

 

first-class function(일급 함수)

JS에서 function은 first-class function(일급 함수)으로

- 변수에 값으로 함수를 할당할 수 있고(값으로서의 함수)

- 매개변수(parameter)로서 함수를 전달할 수 있고

- 함수의 반환값으로 사용될 수 있다.(return될 수 있다)

Default parameters(매개변수 기본값)

함수를 호출하게 되면 매개변수의 개수만큼 인수가 전달되는 것이 바람직하지만, JS에서는 자바스크립트 엔진이 매개변수의 개수와 인수의 개수를 확인하지 않기 때문에 실행시 에러가 발생하지 않는다.

그러나 인수가 전달되지 않은 매개변수의 값은 undefined가 되고, 이 때문에 에러가 발생할 수 있다. 

따라서 우리는 방어코드를 작성해야 한다.

function showMessage(message,from = 'unknown'){ 
// from값이 들어오지 않으면 unknown으로 자동으로 처리해줌!
	console.log(`${message} by ${from}`);	
}
showMessage('Hi!'); // Hi by unknown
// default parameters 처리를 하지 않으면 Hi by undefined로 출력된다.

Rest 파라미터

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

인수를 배열로 받아서 처리할 때 유용하다.

function printAll(...args){ //매개변수 앞에 ...을 붙이면 Rest parameter가 된다.
    for(let i=0;i<args.length;i++){ //1.
        console.log(arg[i])
    }
	for(const arg of args){ // 2. python의 for in문 처럼 for of 가 존재
		console.log(arg)
	}
	args.forEach((arg) => console.log(arg)) // 3. forEach도 가능
}
printAll('oh','happy','day');
//oh
//happy
//day

return

return값을 설정해주지 않은 함수들은 return undefined가 존재하는 것과 같다.

Early return

조건들마다 어떤 Logic을 작성하게 되면 블록들이 많아져서 가독성이 떨어지게 된다. (if-else가 많아질 경우 가독성이 떨어짐)

현업에서는 가독성을 위해 early return을 사용한다고 한다.

function upgrade(user){
	if(user.point>10){
	//long upgrade logic...	
	}
}//이렇게 작성하지 말고

function upgrade(user){
	if(user.point<=10){
		return //Early return을 사용해라! (else를 사용하지 않는다.)
	}
	//long upgrade logic...
}

함수 정의

함수를 정의하는 방법은 4가지가 존재한다.

1. 함수 선언문

function add(x,y){
	return x+y;
}

2. 함수 표현식

const add = function add1(x,y){
	return x+y;
};

3. Function 생성자 함수

const add = new Function('x','y','return x+y');

4. Arrow function(화살표 함수)

const add = (x,y) => x+y;

함수 hoisting과 함수 표현식을 쓸 때 알아야 할 것

함수를 정의하면 hoisting이 되기 때문에 함수로 선언된 것은 선언하기 전에도 사용이 가능하다. 그러나 2.함수 표현식 형태로 값으로서 할당될 때에는 hoisting이 되지 않는다! 

또한 함수 표현식에서 설정한 함수의 이름 add1는 함수 몸체 내부에서만 유효하고 바깥에서는 add1으로 함수를 불러올수 없다.

Callback 함수

callback 함수란 다른 함수에 매개변수로 넘겨준 함수를 뜻한다.

이렇게 되면 함수가 실행될 때, 매개변수의 함수를 call back해서 그 함수를 불러온다.

function randomQuiz(answer, printYes, printNo){
	if(answer === 'love you'){
		printYes();
	}
	else{
		printNo();
	}
}
const printYes = function(){
	console.log('Yes!');
}
const printNo = function print(){ //named function
//debugging 할때 stack trace에 함수의 이름이 나오도록,
// 혹은 재귀함수 사용하기 위해서 named function을 사용한다.
	console.log('No!');
}
randomQuiz('wrong',printYes,printNo);
randomQuiz('love you',printYes,printNo);