1. 익명 함수
- 이름이 없는 함수
- 익명함수는 함수 자체가 식(expression)이므로 함수를 변수에 할당할 수 있으며,
또한 다른 함수의 매개변수로 사용 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>익명함수 실행하기</title>
</head>
<body>
<script>
var sum = function(a,b)
{
//익명함수를 선언한 후 변수 sum에 할당
return a+b;
}
document.write("함수 실행 결과:"+sum(10,20));
</script>
</body>
</html>
2. 즉시 실행 함수
- 한번만 실행하는 함수라면 함수를 정의하면서 동시에 실행 가능
- 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>즉시 실행 함수 만들기 </title>
<style>
body {
padding-top: 20px;
text-align:center;
}
.accent {
font-weight:bold;
font-size:1.2em;
color:blue;
}
</style>
</head>
<body>
<script>
(function() {
var userName = prompt("이름을 입력하세요.");
document.write("안녕하세요? <span class='accent'>" + userName + "</span>님!");
}());
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>매개변수가 있는 즉시 실행 함수 만들기 </title>
</head>
<body>
<script>
(function(a,b) { //매개변수
sum = a+b;
}(100,200)); //인수
document.write("함수 실행 결과:" +sum);
</script>
</body>
</html>
3. 화살표 함수
- 익명함수에서만 사용가능
- (매개변수) => {함수 내용}
- 매개변수가 없는 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>매개변수가 없는 화살표 함수 </title>
</head>
<body>
<script>
const hi= () => {return "안녕하세요?"};
/*const hi= function() {
return "안녕하세요?";
}*/
/* 중괄호 생략
const hi= () =>"안녕하세요?";
*/
alert(hi());
</script>
</body>
</html>
- 매개변수가 1개인 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>매개변수가 1개인 화살표 함수 </title>
</head>
<body>
<script>
const hi= user => {document.write(user +"님 안녕하세요!")};
var user1=prompt("이름을 입력하시오:");
hi(user1);
</script>
</body>
</html>
- 매개변수가 2개인 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>매개변수가 2개인 화살표 함수</title>
</head>
<body>
<script>
let sum = (a,b) => a + b;
/*
let sum= function(a,b) {
return a+b;
} */
var num1 = parseInt(prompt("첫번째 숫자를 입력하시오"));
var num2 = parseInt(prompt("두번째 숫자를 입력하시오"));
document.write(num1+"과"+num2+"를 더한 값은" + sum(num1,num2) + "이다.");
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 15장 실습 2 (0) | 2023.04.07 |
|---|---|
| 15장 - 이벤트와 이벤트 처리기 (0) | 2023.04.07 |
| 15장 실습 (0) | 2023.04.07 |
| 15장 - 재사용할 수 있는 함수 만들기 (0) | 2023.04.07 |
| 15장 - let과 const (0) | 2023.04.07 |
