사용자 정의 함수 Function

함수는 Function / Method (기능) 이라고도 한다.

함수에는 두가지가 있다.

1. 내장함수 - 이미 자바스크립트에 만들어져 있는 함수 (); 괄호를 가지고 있음. (호출문)

2. 사용자 정의 함수 - 프로그래머가 함수를 직접 만들어서 사용한다.

 

---

 

사용자 정의 함수

＊ 쉽게 말해 함수란 어떤 문법 덩어리를 그룹으로 만들어놓는 것이다. (그룹화)

＊ 프로그래머가 필요에 의해 직접 만들어서 사용하는 함수

＊ 4가지 형식의 함수를 선언해서 사용할 수 있다. (아래 이미지 참조)

＊ 코드의 중복을 최소화 할 수 있다.

＊ 함수를 선언했다고 해서 자동으로 계산되지 않는다.

　└ 필요 시에 함수를 호출하여 사용한다. 

 

Function (함수의 종류)

 

---

 

1. 기본 함수 함수명();

＊동일한 코드의 중복을 가장 최소화 할 수 있다. (호출하는 만큼 실행한다.)

function 함수명(){
     // 처리할 코드;
}
함수명();  // call문, 호출문

function calc(){
	var num1=100;
	var num2=10;

	console.log('두 수의 합: ' + (num1+num2));
	console.log('두 수의 차: ' + (num1-num2));
	console.log('두 수의 곱: ' + (num1*num2));
	console.log('두 수의 나눈 몫: ' + (num1/num2));
}
calc(); //함수의 호출 - 호출하는 만큼 실행된다.

<a href="#" onclick="calc();">계산</a>  // event handler로도 호출할 수도 있다.

 

 

 

2. 매개변수를 갖는 함수 함수명(파라미터);

＊함수이름을 호출하고, 매개변수 값을 넣어줘야 실행된다.
＊대표적으로 alert(), promt() 함수.
＊매개변수의 값에 따라 수많은 결과값을 얻을 수 있다.
＊call문에 값을 넣어줘야 한다. → 함수명(값1, 값2, ...);       ＊값 : 전달인자, 파라미터

function 함수명(매개변수1, 매개변수2, ...){   // var 생략, var 선언 한 변수와 같은 역할
     // 처리할 코드;
}
함수명(매개변수1, 매개변수2, ...);   // call문, 호출문 (함수의 값을 넣어준다) 인자, 파라미터

function calc(num1, num2){    // num1 = 100, num2 = 10
	console.log('두 수의 합: ' + (num1+num2));
	console.log('두 수의 차: ' + (num1-num2));
	console.log('두 수의 곱: ' + (num1*num2));
	console.log('두 수의 나눈 몫: ' + (num1/num2));
}
calc(100,10);  // call문, 호출문, 함수에 들어갈 값을 넣어준다.

<a href="#" onclick="calc(100,10);">계산</a>  // event handler로도 호출할 수도 있다.

 

＊ 값을 넣어주지 않은 경우 : NaN (계산할 수 없는 값), 에러가 나진 않는다.

 

 

 

3. 리턴값을 갖는 함수 return

＊return 값을 함수에 담아온다.

function calc(){
     // 처리할 코드;
     return 리턴값;    // 리턴 뒤에는 무조건 '값 하나'가 있어야 한다. 값을 함수로 보냄.
}
var sum = calc();  // 값을 sum에 담는다. 함수 자체가 값을 의미한다.
console.log('두 수의 합: ' + sum);

＊ var sum = calc() + calc() - 377 / 2;   // 값이기 때문에 연산이 가능하다

 

function calc(){
	var num1 = prompt('정수를 입력하세요', '');
	var num2 = prompt('정수를 입력하세요', '');
	return Number(num1)+Number(num2);
}
var sum = calc();  // return 값을 함수(calc)에 담아 sum에 넣어 준다
console.log('두 수의 합: ' + sum);

function eat(){
	var kname = prompt('이름을 입력하세요', '');
	var food = prompt('음식을 입력하세요', '');

	return kname + '씨는 아침으로 ' + food + '를 먹고있다.';
}
console.log(eat());

 

 

 

4. 매개변수와 리턴값을 갖는 함수

＊매개변수와 리턴값을 갖는 함수

function calc(매개변수1, 매개변수2, ...){
     // 처리할 코드
     return 리턴값;
}
sum = calc(매개변수1, 매개변수2, ...);     // call문
console.log(sum);

＊ var sum = calc() + calc() - 377 / 2;   // 값이기 때문에 연산이 가능하다

 

function calc(num1, num2){
	return Number(num1)+Number(num2);
}
var sum=calc(100,10);
console.log('두 수의 합: '+sum);

 

---

 

익명함수

＊ 형식의 변화

1) 기본함수

var 함수 = function (){
     //처리할 코드;
}

 

2) 매개변수

var 함수 = function (매개변수1, 매개변수2, ...){
     // 처리할 코드;
}

 

3) 리턴값

var 함수 = function(){
     // 처리할 코드;
     return 값;
}

 

4) 매개변수, 리턴값

var 함수 = function(매개변수1, 매개변수2, ...){
     // 처리할 코드;
     return 값;
}

 

var person = function(name, height, weight){
	return name+'님의 키는 '+height+'cm 이고, 체중은 '+weight+ 'kg 입니다';
}

var man1 = person('이수근', 180, 70);
var woman1 = person('홍순심', 150, 80);
console.log(man1);
console.log(woman1);

 

---

 

 

화살표함수

＊ 익스 구버전에서 안먹는다.

var 함수명 = (매개변수1, 매개변수2, ...) => {
     // 처리할 코드;
     return 값;
}