<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수</title>
<style>
.area {
border: 1px solid;
padding: 5px;
}
</style>
</head>
<body>
<h1>함수</h1>
<h2>함수 선언하는 방법</h2>
<ol>
<li>선언적 함수(Function Declaration) : function키워드, 함수명</li>
<li>익명 함수(Function Expression) : 변수에 익명함수를 대입하는 방식</li>
<li>화살표 함수(Arrow Function) : 익명함수를 간단히 작성하는 방법(ES6(ES2015)에 추가)</li>
<li>즉시 실행 함수 iife(Immediately Invoked Function Expression)
<ul>
<li>선언과 호출</li>
<li>변수를 캡슐화처리해서 유용하게 쓸 수 있음</li>
</ul>
</li>
</ol>
<hr>
<h3>1) 선언적 함수</h3>
<pre>
function 함수명([매개변수, 매개변수, ...]) {
해당 함수 호출시 실행할 코드;
[return 결과값;]
}
</pre>
<button onclick="test1();">실행확인</button>
<div class="area" id="area1"></div>
<script>
function test1() {
document.getElementById('area1').innerHTML = 'test1() 함수 실행 됨<br>';
}
</script>
<hr>
<h3>2) 익명 함수</h3>
<pre>
변수|속성 = function([매개변수, 매개변수, ...]) {
해당 함수 호출시 실행할 코드;
[return 결과값;]
}
* 주로 이벤트 핸들러 작성시 사용
</pre>
<button id="btn">실행확인</button>
<div class="area" id="area2"></div>
<script>
let btn = document.getElementById('btn');
// 이벤트 속성(click)에 대입되는 function => 이벤트 핸들러
btn.onclick = function() {
document.getElementById('area2').innerHTML = '이벤트 핸들러를 통해 실행 됨';
}
</script>
<hr>
<h3>3) 화살표 함수</h3>
<pre>
- 본문에 리턴만 있을 때
변수 = ([매개변수, 매개변수, ...]) => 리턴값
- 본문이 여러줄 일 때
변수 = ([매개변수, 매개변수, ...]) => {
해당 함수 호출시 실행할 코드;
[return 결과값;]
}
</pre>
<button id="btn3">실행확인</button>
<div class="area" id="area3"></div>
<script>
const area3 = document.getElementById('area3');
const btn3 = document.getElementById('btn3');
// btn3.onclick = function() {
// return area3.innerHTML = '매개변수가 없는 화살표 함수 실행';
// }
// 위에 익명함수를 화살표 함수로 변환
btn3.onclick = () => area3.innerHTML = '매개변수가 없는 화살표 함수 실행';
</script>
<hr>
<h3>4) 즉시실행 함수</h3>
<pre>
- 정의하면서 즉시 실행되는 함수
- 단 한번만 호출됨
([변수] = function([매개변수, 매개변수, ...]) {
해당 함수 호출시 실행할 코드;
})(인자, 인자, ...);
</pre>
<script>
// 문서가 로딩된 직후 마지막 1개만 실행
// window.onload = function() { // 문서가 다 로딩이 되면 맨 마지막것 하나만 실행된다.
// console.log('onload');
// }
// window.onload = function() {
// console.log('onload2');
// }
// 즉시실행 함수는 함수의 갯수만큼 실행
(function(){
console.log('iife');
})();
(function(name){
console.log(`HI, ${name}`);
const k = 999;
console.log(k);
})('철수');
(() => console.log('iife - arrow'))();
(name => console.log(`HI, ${name}`))('영희');
</script>
<hr>
<h2>함수의 매개변수</h2>
<!-- 함수에서의 매개변수는 모든 자료형 가능 -->
<button onclick="test2('안녕하세요');">문자매개변수</button>
<button onclick="test2('2');">숫자매개변수</button>
<button onclick="test2([1,2,3]);">배열매개변수</button>
<button onclick="test2(true);">논리매개변수</button>
<br>
<!-- 매개변수의 갯수가 맞지 않아도 오류나지 않음(많으면 뒤에것 무시, 적으면 undefined) -->
<button onclick="test2(prompt('이름 입력'));">prompt매개변수</button>
<button onclick="test2('안녕하세요', '반갑습니다');">문자2개매개변수</button> <!-- 맨 앞에꺼 하나만 나옴 -->
<button onclick="test2();">매개변수없음</button> <!-- 없어도 오류 안남 -->
<div class="area" id="area4"></div>
<script>
function test2(value) { // 매개변수는 자료형을 지정하지 x, 선언구문 x => 변수명만 써줌
document.getElementById('area4').innerHTML = value;
}
</script>
<hr>
<h3>* 매개변수 관련 arguments배열</h3>
<p>
함수 호출 시 전달되는 값은 내부적으로 arguments 배열에 담김<br>
* arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열 형식의 객체
</p>
<button onclick="test3(11, 12, 1, 5, 7);">실행확인</button>
<div class="area" id="area5"></div>
<script>
function test3() {
console.log(arguments);
console.log(arguments[1]);
let area5 = document.getElementById('area5');
let sum = 0;
for(let ele of arguments) {
sum += ele;
}
area5.innerHTML = `합계 : ${sum}<br>`;
area5.innerHTML += `평균 : ${sum/arguments.length}<br>`;
// for in으로 arguments에 값들을 하나씩 출력
var args = Array.from(arguments);
}
</script>
<hr>
<h3>매개변수에 this관련 전달하기</h3>
<p>this : 현재 이벤트가 발생한 요소 객체</p>
<button onclick="test4(this);">this버튼</button>
<input type="button" value="input버튼" onclick="test4(this.value);"> <!-- .value : 인풋 속성에 들어있는 값 -->
<button onclick="test4(this.id);" id="btn4">id버튼</button> <!-- id에 해당하는 값 출력 됨 -->
<button onclick="test4(this.innerHTML);"><b>this버튼</b></button>
<script>
function test4(ele) {
console.log(ele); // 나 자신의 버튼객체
}
</script>
<button onclick="test5(this);">동적효과버튼</button>
<script>
function test5(ele) {
ele.style.color = 'red';
ele.innerHTML = `빨간색으로 변경`;
}
</script>
<hr>
<h2>함수의 리턴</h2>
<h3>* 일반적인 값</h3>
<button onclick="test6()">랜덤값</button>
<div class="area" id="area6"></div>
<script>
// 1~100사이의 랜덤값을 구해서 반환하는 함수
function ran() {
let random = parseInt(Math.random() * 100 + 1);
return random;
}
function test6() {
document.getElementById('area6').innerHTML = `랜덤값 : ${ran()}`;
}
</script>
<button onclick="console.log(ran());">랜덤값콘솔출력</button>
<h3>* 익명함수를 리턴</h3>
이름 : <input type="text" id="userName">
<button onclick="test7()();">익명함수 리턴</button>
<!-- ()매개변수가 들어가는 괄호 ()function이 들어가는 괄호 -->
<script>
function test7() {
let inputE1 = document.getElementById('userName');
return function() {
alert(inputE1.value)
}
}
</script>
<hr>
<h2>화살표 함수의 매개변수와 리턴</h2>
<h4>* 함수의 body 지정방법</h4>
<pre>
* single line block
x => { return 리턴값; }
x => 리턴값 (중괄호 생략)
* multi line block
x => {
실행구문;
return 값;
}
</pre>
<button onclick="test8()">실행확인</button>
<div class="area" id="area8"></div>
<script>
function test8() {
let area = document.getElementById('area8');
area.innerHTML += `일반함수(매개변수 없음) 실행 : ${fun1()}<br>`;
area.innerHTML += `화살표함수(매개변수 없음) 실행 : ${aFun1()}<br><br>`;
area.innerHTML += `일반함수(매개변수 1개) 실행 : ${fun2(3)}<br>`;
area.innerHTML += `화살표함수(매개변수 1개) 실행 : ${aFun2(3)}<br><br>`;
area.innerHTML += `일반함수(매개변수 2개 이상) 실행 : ${fun3(3, 5)}<br>`;
area.innerHTML += `화살표함수(매개변수 2개 이상) 실행 : ${aFun3(3, 5)}<br><br>`;
area.innerHTML += `일반함수(본문이 여러줄) 실행 : ${fun4(3)}<br>`;
area.innerHTML += `화살표함수(본문이 여러줄) 실행 : ${aFun4(3)}<br><br>`;
}
// 매개변수 없을 때
let fun1 = function() {
return '매개변수가 없는 일반함수';
}
let aFun1 = () => '매개변수가 없는 일반함수';
// 매개변수가 1개 일때
let fun2 = function(num1) {
return num1 * 2;
}
let aFun2 = num1 => num1 * 2;
// 매개변수가 2개 이상일 때
let fun3 = function(num1, num2) {
return num1 + num2;
}
let aFun3 = (num1, num2) => num1 + num2;
// 실행 본문이 여러줄 일 때
let fun4 = function(num1) {
let result = num1 * 5;
return result;
}
let aFun4 = num1 => { // 실행본문에 중괄호{}를 넣으면 반드시 return이라는 키워드를 써줘야 됨
let result = num1 * 5;
return result; // 리턴만 있고 리턴값이 없으면 undefined로 결과값이 나옴
}
</script>
</body>
</html>