[JS] 자바스크립트 함수 정리

자바스크립트에서 함수는 일급객체이다.

• 변수에 담을 수 있다.
• 파라미터로 전달 할 수 있다.
• 반환값으로 사용할 수 있다.

1. 함수

기명 함수

// named function
function 함수명() {...}

add(1 + 2);
function add(a, b) {
    return a + b;
}

• 기명함수는 선언 이전에서도 함수를 사용할 수 있다. 즉, 호이스팅(hoisting)이가능하다.
• 자바스크립트는 컴파일을 할 때 선언한 것들을 자동으로 제일 위로 올리기 때문이다.

익명 함수 (함수 표현식 혹은 함수표현 이라고도 한다.)

// anonymous function
function () {...};
             
const print = function () {
	console.log('print');
};
print(); // 함수를 변수에 할당하면 해당 변수를 함수를 사용할 때 처럼 사용할 수 있다.
const printAgain = print; // printAgain은 위에 선언된 anonymous function을 가리킨다.
printAgain();

• 익명함수는 함수가 변수에 할당이 된 이후부터 사용이 가능하다.

하나의 함수는 하나의 동작만하다록 설계하자.

네이밍은 동사로 시작하게한다.

e.g. createCardAndPoint -> createCard, createPoint

2. 파라미터 (Parameters)

premitive parameters: passed by value

object parameter : passed by reference

객체의 메모리 참조

function changeName(obj) {
	obj.name = 'coder';
}
const uno = { name: 'younoah'};
changeName(uno);
console.log(uno);

• 함수의 인자로 premitive 타입을 전달하면 함수에 값 자체가 전달이 된다.

• 함수의 인자로 객체를 전달하면 객체의 레퍼런스가 전달된다.

3. 기본매개변수 (Default parameters)

파라미터에 값이 안들어올 경우를 대비해 디폴트 값을 줄 수 있다.

function showMessage(message, from = 'unknown') {
	console.log(`${message} by ${from}`);
}
showMessage('Hi!');

4. 나머지 매개변수 (Rest Parameters)

나머지 매개변수는 이름을 정해주지 않은 파라미터들을 배열형태로 받는다.

매개변수중에 가장 마지막에 작성한다.

function printAll(a, b, ...args) {
	// 아래 3가지 형태의 loop는 같은 역할을 한다.
// 	for (let i = 0; i < args.length; i++) {
// 		console.log(args[i]);
// 	}
	for (const arg of args) {
		console.log(arg);
	}

	args.forEach((arg) => console.log(arg));
}
printAll('dream', 'coding', 'uno');

5. 지역변수 (Local scope)

함수 안에서 선언된 변수는 함수안에서만 사용할 수 있는 지역변수이다.

let globalMesaage = 'global'; // 전역변수
function printMessage() {
	let message = 'hello'; // 지역변수
	console.log(message);
	console.log(globalMesaage);
}
printMessage();

6. 반환값 (Return a Value)

함수는 반환값을 줄 수 있다.

return 이 없는 함수에는 return undefined가 선언되어 있는거와 같다.

function sum(a, b){
	return a + b;
}
const result = sum(1, 2); // 3
console.log(`result: ${result}`);
console.log(`sum: ${sum(1, 2)}`);

7. Early return, early exit

bad

아래 코드는 조건이 맞을때 긴 로직이 동작하느 코드이다.

이렇게 작성하면 가독성이 좋지 않다.

function upgradeUser(user) {
	if (user.point > 10) {
		// long upgrade logic...
	}
}

good

이번에는 조건이 맞지 않다면 함수를 빨리 리턴해서 빨리 종료하는 방식이다.

이렇게 작성하면 가독성이 훨씬 올라간다.

function upgradeUser(user) {
	if (user.point <= 10) {
		return;
	}
	// long upgrade logic...
}

8. 콜백함수 (Callback function)

콜백함수란 파라미터로 전달하는 함수를 의미한다.
함수에 콜백함수를 전달해서 함수를 사용할 때 내가 원하는 시점에 콜백함수를 사용한다.

인자에 "함수의 정의:만 넘겨주면 된다.

함수 사용 : 함수명();

함수 정의 : 함수명

function randomQuiz(answer, printYes, printNo) {
	if (answer === 'like you') printYes();
	else printNo();
}

const printYes = function () {// anonymous function
	console.log('yes!');
};

const printNo = function print() { // named function
	console.log('no!');
}
randomQuiz('wrong', printYes, printNo);
randomQuiz('like you', printYes, printNo);

9. 화살표 함수 (Arrow function)

함수의 표현을 한줄로 간결하게 작성할 때 사용한다.

function 키워드 지우고

중괄호를 지운다음에 한 줄로 작성한다.

const simplePrint = function () {
	console.log('simplePrint!');
};

이 함수의 표현을

const simplePrint = () => console.log('simplePrint!');

이렇게 한줄로 간결하게 나타낼수 있다.

인자와 리턴값이 있을때

const add = function (a, b) {
    return a + b;
};

const add = (a, b) => a + b;

10. IIFE: Immediately Invoked Function Expression

함수를 선엄하과 동시에 바로 실행해 보고 싶을때 사용하는 표현이다.

잘 사용하지는 않지만 바로바로 함수르 실행시켜 보고싶을 때 유용하다.

(function hello() {
	console.log('IIFE');
})();