함수
- 자바스크립트에서 함수는 클래스역할과 메소드 역할을 둘 다 함.
익명함수
- function에 이름이 없음
frm.btn.onclick = function() { ... }
callback함수
frm.btn.onclick = abc; // function abc( ) { ... } 를 의미함.
// "btn을 클릭하면 abc라는 함수를 실행하라."
// 여기서는 abc() 로 쓸 수 없다. 이름만 써야함
- h4.onmouseover = abc;
⇒ h4에 마우스를 올리면 abc 함수가 실행됨
선언적 함수 (+ 함수적 선언)
function abc ( 매개변수 ) { ... }
※ 국비지원으로 학원에서 배울 때 강사님이 hoisting -> hoising으로 가르쳐주셔서 계속 "hoising" 으로 나오지만 "hoisiting"이 맞습니다 🙄
즉시 실행 함수
(function abc(){...}());
// 소괄호 안에 function을 만들면 즉시 실행 (누군가가 호출하지 않아도)
화살표 함수
()=>{ ... }
// 자바에서 람다식과 가장 유사함
예제
음식이름을 checkbox로 여러 개 만들고, 선택된 항목을 div에 출력하도록 각종 함수 선언 방식을 사용하여 처리하시오. (function_declare_2.jsp)
- 익명형
- callback 함수식
- 함수식 function a( ) { ... }
- 선언적 함수 let a = function( ) { ... }
- 화살표 함수
소스코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function_declare_2</title>
<style>
#result{
border : 2px solid black;
margin-top : 20px;
padding : 30px;
}
</style>
</head>
<body>
<h2>function_declare_2</h2>
<p id='info'>
음식이름을 checkbox로 여러 개 만들고, 선택된 항목을 div에 출력하도록 각종 함수 선언 방식을 사용하여 처리하시오.
</p>
<div id='result'></div>
<form id='frm'>
<label><input type='checkbox' checked name='chk' value='짜장면'>짜장면</label>
<label><input type='checkbox' name='chk' value='짬뽕'>짬뽕</label>
<label><input type='checkbox' checked name='chk' value='탕수육'>탕수육</label>
<label><input type='checkbox' name='chk' value='볶음밥'>볶음밥</label>
<br/>
<br/>
<input type='button' name='btn1' value='익명함수'/>
<input type='button' name='btn2' value='callback'/>
<input type='button' name='btn3' value='함수식'/>
<input type='button' name='btn4' value='선언적함수'/>
<input type='button' name='btn5' value='화살표함수'/>
</form>
<script>
let r = document.getElementById('result');
let array = [];
// 익명함수
frm.btn1.onclick = function(){
r.innerHTML = '<li> 익명함수 : ';
array.length = 0;
for(x of frm.chk){
if(x.checked){
array.push(x.value);
}
}
r.innerHTML += array;
}
// callback
frm.btn2.onclick = func;
function func(){
r.innerHTML = '<li> callback 함수 : ';
array.length = 0;
for(x of frm.chk){
if(x.checked)
array.push(x.value);
}
r.innerHTML += array;
}
// 함수식
let ff = function a(){
r.innerHTML = '<li> 함수식 : ';
array.length = 0;
for(x of frm.chk){
if(x.checked)
array.push(x.value);
}
r.innerHTML += array;
}
frm.btn3.onclick = ff;
// 선언적 함수
let f = function(){
r.innerHTML = '<li> 선언적 함수 : ';
array.length = 0;
for(x of frm.chk){
if(x.checked)
array.push(x.value);
}
r.innerHTML += array;
}
frm.btn4.onclick = f;
//화살표 함수
let arrow = () => {
r.innerHTML = '<li> 화살표 함수 : ';
array.length = 0;
for(x of frm.chk){
if(x.checked)
array.push(x.value);
}
r.innerHTML += array;
};
frm.btn5.onclick = arrow;
</script>
</body>
</html>
( function{}() ) // 즉시 실행 함수 기본골격
'Web 기초' 카테고리의 다른 글
| [Web] 웹 기초 (16) - JavaScript #9 객체 (생성자함수) (0) | 2022.06.13 |
|---|---|
| [Web] 웹 기초 (15) - JavaScript #8 JSON (0) | 2022.06.13 |
| [Web] 웹 기초 (13) - JavaScript #6 switch, for in / for of (0) | 2022.05.30 |
| [Web] 웹 기초 (12) - JavaScript #5 var, let (0) | 2022.05.30 |
| [Web] 웹 기초 (11) - JavaScript #4 alert, comfirm, prompt 입력상자, backtic (0) | 2022.05.25 |
