[JavaScript] : 함수

먹보·2022년 12월 26일

MUK_BO's JavaScript

목록 보기

11/18

✍️ 함수란..

함수는 객체 타입의 값이며 특정한 데이터가 입력되었을 때(INPUT) 내부에 있는 일련의 과정이 문으로 구성 되어 있는 코드의 집합이 코드 블록으로 감싸서 하나의 실행 단위로 구성되어 결과 값을 도출(OUTPUT)하는 것

//함수 정의 
function multiply(n1, n2) {
	return n1 * n2
}

⇒ return 은 함수의 결과 값을 출력함과 동시에 함수를 종료 시킨다.

📝 함수를 사용하는 이유

유지보수의 편의성 증가
코드의 재사용
코드의 신뢰성 증가
높은 가독성 (반복 되는 코드를 함수로 정의하여 가독성을 높일 수 있음)

✍️ 매개변수 [Parameters]

function multiply(n1, n2) {
	return n1 * n2
}

n1과 n2 는 multiply 함수에서 매개변수의 역할을 하고 있으며, 함수를 실행 시 매개변수 설정을 해주지 않을 경우, 자동으로 undefined 가 할당이 되며 이럴 경우 Default Parameter 은 undefined 가 된다.

Default Parameter설정하는 법은 다음과 같다.

function multiply(n1=1, n2=2) {
	return n1 * n2
}

⇒ 한 가지, 헷갈릴 수 있는 것이, 함수를 정의 할 때 설정하는 변수 값을 매개변수라고 하며, 함수를 실행 할 때 입력하는 값을 인수(Argument)라고 한다.

✍️ 함수 정의

함수를 정의하는 법에는 총 4가지가 존재하는데, 각 각 알아보도록 하자.

📝 함수 선언문

function multiply(n1, n2) {
	return n1 * n2
}

함수 선언문은 함수 리터럴과 표현 방식이 동일하다.

📝 함수 표현식

// 익명 함수 표현식
let multiply = function (x,y) {
	return x * y
}

multiply(5,2) // 10

// 기명 함수 표현식
const divide = function division (x,y) {
	return x / y
}

divide(10,2) // 5
division(10,2) // division is not defined

위에서 언급했듯이 함수는 객체 타입의 값이므로 변수에 할당 될 수 있기에 함수 이름을 생략하고 식별자를 따로 선언해서 할당 정의 할 수 있다.

→ 주의해야 할 것이 함수에 식별자를 따로 붙여 할당할 경우, 함수를 호출 할 때 함수 이름으로 호출하는 것이 아닌 식별자로 호출해야 한다.

📝 Function 생성자 함수

함수가 객체이기에 객체를 생성하는 함수인 생성자 함수를 이용해 함수를 정의할 수 있고 JavaScript 내에는 이미 기본적으로 제공하는 빌트인 Function 생성자 함수가 존재한다.

const multiply = new Function('x','y', 'return x * y');

multiply(5,2) // 10

많이 쓰이지 않는 방식으로 존재만 기억하도록 하자.

📝 화살표 함수

ES6에 도입된 함수 정의 법 중 하나로 익명의 함수 표현식이 변형된 것 과 비슷하다.

const multiply = (x,y) => x*y;

multiply(5,2) // 10

화살표 함수에 대한 더욱 자세한 내용은 다음에 알아보자

✍️ 함수의 종류

📝 재귀 함수 [Recursive Function]

재귀 함수는 자기 자신을 호출 하는 함수를 뜻한다.

const factorial = (n) => {
	if (n <= 1) return 1;

	return n * factorial(n-1);
}

일반적으로 for 문을 사용해서 만들 수 있는 팩토리얼도 상기와 같이 재귀 함수를 만들어 구현 할 수 있다.

→ 재귀 함수는 자기 자신을 반복하는 함수 이므로 조건을 만들어 중간에 탈출 시켜 주지 않는 이상 무한으로 자기 자신을 호출 한다.

📝 중첩 함수

쉽게 말해, 함수 내부에서 정의된 함수를 뜻한다. 즉, 함수 내에서만 선언된 함수 이기에 호출 역시 선언되어진 그 함수 내에서만 호출이 가능하다.

function add (n1, n2) {
	const m = n1 + n2;

	function multiply (m) {
		 return m*2
	}

	const answer = multiply(m)
	
	return answer
}

📝 콜백 함수[CALL BACK FUNCTION]

콜백 함수는 함수를 배움에 있어 가장 중요한 요소 중 하나 이기에, 꼭 이해하고 넘어가자.

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.

→ 쉽게 설명하자면 Call Back을 생각해보면 된다. Back(뒤에서) Call(부른다) 다른 곳에서 정의된 함수를 매개변수로 불러와 새로 정의 될 함수 내에서 쓰일 때 불러진 함수를 콜백 함수라고 한다.

function sayNTMY(){
	console.log("Nice To Meet You");
};

function sayWU(){
	console.log("What's Up");
};

function greeting (name, sayNTMY, sayWU) {
	const myFriend = ["OH","KIM","LEE"]
	for (let i of myFriend){
		if (name == i) {
			sayWU()
		} else {sayNTMY()}
	}
}