###########################################################
6. 함수 ( function )(*)
1> 개요
- 용도: 기능처리 담당 (자바의 메서드 역할)
2> 종류1
- 일반함수: 일반적으로 사용되는 함수 의미.
- generator 함수: Generator 객체를 반환하는 함수.
- 비동기 함수: Promise 를 객체를 반환하는 함수.
3> 함수 작성방법 2가지
가. 함수 선언식 (이름있는 함수)
function 함수명([파라미터, ..]) {
문장;
[return 값;]
}
나. 함수 표현식 (이름없는 함수,익명함수)
function ([파라미터, ..]) {
문장;
[return 값;]
}
변수가 함수명으로 사용됨.
<!DOCTYPE html>
<html lang="en">
<head>
<title>js09_함수1_생성방법2가지</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 함수 생성 방법 2가지
// 1. 함수 선언식 (이름있는 함수)
function fun() {
console.log("fun");
}
// 2. 함수 표현식 (익명함수)(*)
var fun2 = function () {
console.log("fun2");
};
// 호출
fun(); // 함수 선언식 호출
fun2(); // 함수 표현식 호출
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>js09_함수2_인자값갯수달라도가능</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 함수 생성 방법 2가지
// 1. 함수 선언식 (이름있는 함수)
function fun() {
console.log("fun");
}
function fun3(n, n2, n3) {
console.log("fun", n, n2, n3);
}
// 2. 함수 표현식 (익명함수)(*)
var fun2 = function () {
console.log("fun2");
};
// 호출
fun(); // 함수 선언식 호출
fun(10);
fun(20, 30);
fun2(); // 함수 표현식 호출
fun2("aaa");
fun2(10, "aaa");
fun3();
fun3(10);
fun3(20, 30);
fun3(20, 30, 40);
fun3(20, 30, 40, 50);
</script>
</head>
<body>
</body>
</html>
4> 함수특징
- 반드시 호출해야 된다. (함수명을 이용)
- 호출후 반드시 호출한 곳으로 돌아온다.
- 호출할 때 인자값을 설정할 수 있고
돌아올때 리턴값이 존재할 수 있다.
- JS 함수는 함수호출시 인자값의 갯수가 달라도 된다. (*)
- 파라미터에 갯수 > 인자값 갯수 경우에 인자값이 저장되고 남은
파라미터에는 undefined 가 저장되는데 undefined 대신에 임의의 초기값을 설정할 수 있다.
==> 함수의 default 파라미터라고 부른다.
==> function fun(n=초기값, n2=초기값) {}
<!DOCTYPE html>
<html lang="en">
<head>
<title>js09_함수3_default파라미터</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// default 파라미터
function fun(n = 10, n2 = "홍길동", n3 = 10) {
console.log("fun", n, n2, n3);
}
// 호출
fun();
fun(10);
fun(20, 30);
fun(20, 30, 40);
</script>
</head>
<body>
</body>
</html>
- 파라미터 갯수 < 인자값 갯수 경우에 파라미터에 저장되고 남은
인자값은 소실된다. 이 경우에 소실되는 인자값을 배열로 가져올 수 있다.
==> 함수의 rest 파라미터라고 부른다.
주의할 점은 파라미터 가장 마지막에만 사용된다.
==> function fun(n,...n2){}
function fun(n,n2,...n3){}
fun(10,20,30);
<!DOCTYPE html>
<html lang="en">
<head>
<title>js09_함수4_rest파라미터</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// default + rest 혼합사용 가능
function fun(n = 10, n2 = 30, ...n3) {
console.log("fun", n, n2, n3);
}
// rest 파라미터
function fun(n, n2, ...n3) {
console.log("fun", n, n2, n3);
}
// 호출
fun(20, 30, 40);
fun(20, 30, 40, 50);
fun(20, 30, 40, 60, 70);
fun(20, 30, 40, 8, 5, 6, 7, 8);
</script>
</head>
<body>
</body>
</html>
- 함수 호출시 spread 연산자 이용한 방식으로 인자값을 전달 할 수 있다.
ex>
function fun(n,n2) {}
var x = [10,20];
fun(x[0], x[1]); // 기본
fun(...x); //spread
<!DOCTYPE html>
<html lang="en">
<head>
<title>js09_함수5_spread연산자를이용한인자값전달</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// spread 연산자 이용한 인자값 전달
function fun(n, n2) {
console.log("fun", n, n2);
}
var arr = [10, 20];
// ↓
// fun(arr[0], arr[1]);
fun(...arr); // spread 연산자
</script>
</head>
<body>
</body>
</html>
- 기본형 데이터와 참조형 데이터 인자값 사용
<!DOCTYPE html>
<html lang="en">
<head>
<title>js09_함수6_기본형및참조형인자값전달_callByvalue_callByValueReference</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 기본형 및 참조형 인자값전달(callByvalue & callByValueReference)
// 기본형 전달 ==> 전달받은 함수에서 값변경 해도 원본에는 영향이 없다.
function fun(n) {
n = 20; // 값 변경안됨.
}
var x = 10;
fun(x);
console.log(x);
// 참조형 전달 ==> 전달받은 함수에서 값변경 해도 원본에는 영향이 있다.
function fun2(n) {
n[0] = 100; // 값 변경됨.
}
var x2 = [10, 20, 30];
fun2(x2);
console.log(x2);
</script>
</head>
<body>
</body>
</html>
- 기능에 따라 4가지 형태
가. 파라미터 없고 리턴값 없는 형태
나. 파라미터 있는 리턴값 없는 형태
다. 파라미터 없고 리턴값 있는 형태
라. 파라미터 있고 리턴값 있는 형태
<!DOCTYPE html>
<html lang="en">
<head>
<title>js09_함수7_기능에따른4가지함수형태</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 가.파라미터 없고 리턴값 없는 형태
function fun() { }
var fun2 = function () { };
fun();
fun2();
// 나.파라미터 있는 리턴값 없는 형태
function fun3(n, n2) { }
var fun4 = function (n, n2) { };
fun3(10, 20);
fun4(30, 40);
// 다.파라미터 없고 리턴값 있는 형태
function fun5() {
return 100;
}
var fun6 = function () {
return 100;
}
var result = fun5();
var result = fun6();
// 라.파라미터 있고 리턴값 있는 형태
function fun7(n, n2) {
return n + n2;
}
var fun8 = function (n, n2) {
return n + n2;
}
var result = fun7(10, 20);
var result = fun8(10, 20);
</script>
</head>
<body>
</body>
</html>
- JS함수는 일급객체(first-class) 이다.
일급객체의 핵심개념은 함수를 데이터로 처리하는 것이다.
함수이용해서 할수 있는 작업은 다음과 같다.
가. 함수를 변수에 저장할 수 있다.
나. 함수호출시 인자값으로 함수를 사용할 수 있다.
ex>
arr.forEach(인자값);
personList.forEach(function(data,idx){});
다. 함수호출후 리턴값으로 함수를 사용할 수 있다.
ex>
var x = function(){};
function fun() {
// return 값;
return x;
}
- 콜백함수(callback)
==> 개념: 사용자가 명시적으로 호출하지 않고 시스템이 특정상황에 호출하는
함수를 의미한다.
==> 주로 이벤트 처리시 사용된다.
자바의 swing 이벤트
Button btnOk = new Button("OK");
// 사용자호출 - addActionListener()
// 시스템호출 - actionPerformed()
btnOk.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>js09_함수8_일급객체</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 일급객체
// 1. 변수에 저장
function fun() { }
var fun = function () {
console.log("fun");
};
/*
fun 이용하는 2가지 형태
1. fun 자체값 이용 (100번지) ==> fun 변수만 사용
2. 100 번지에 저장된 함수 이용 ==> fun() 함수호출형식으로 사용
*/
// 1. fun 자체값 이용(100번지) ==> 콜백함수(callback)
var fun2 = fun; // fun->함수, fun2->함수
// 2. 100 번지에 저장된 함수 이용(일반적인 함수를 상요하는 형태이다.)
fun();
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js09_함수8_일급객체2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 일급객체
// 1. 변수에 저장
function fun() { }
var fun = function () {
console.log("fun");
};
var fun2 = fun;
fun2();
// 2. 함수호출시 인자값으로 사용 ==> 콜백함수(callback)(*)
function yyy() {
console.log("yyy");
}
function zzz() {
console.log("zzz");
}
function xxx(f) {
f();
}
// xxx 호출할때 시스템이 호출해야 되는 함수정보(yyy) 를
// 인자값으로 전달해야 된다.
xxx(yyy);
xxx(zzz);
// 3. 함수호출후 리턴값으로 함수사용
// function kkk() {
// console.log("kkk");
// }
// var kkk = function () { console.log("kkk"); }
function kkk2() {
// return kkk;
return function () { console.log("kkk"); }
}
var result = kkk2();
result();
</script>
</head>
<body>
</body>
</html>'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글
| js 4일차 - 함수(2)(arrow, generator, 즉시실행함수) (0) | 2024.05.08 |
|---|---|
| js 3일차 - 객체정리 (0) | 2024.05.07 |
| js 3일차 - 2일차 정리 (0) | 2024.05.07 |
| js 3일차 - 객체(3) JSON (0) | 2024.05.07 |
| js 3일차 - 객체(3) Window객체 (0) | 2024.05.07 |
