함수란?
함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. - 생활코딩
일반적으로 다른 언어에서는 함수를 선언할 때 해당 함수를 임의의 변수에 할당할 수 없다. 하지만 JavaScript(이하 JS)에서의 함수는 변수에 할당할 수 있다.
1) function a( ){ }
2) var a = function( ){ }
당연한 얘기지만, 위 코드들은 같은 듯 다른 코드다. 각각 1)함수선언식과 2)함수표현식으로 불리우며, 명칭이 다른만큼 각각의 특징들도 다르지만, 해당 내용은 현재 서술한 내용에서 크게 중요한 부분을 차지하지 않기 때문에 넘어가려고 한다.
- 값으로서의 함수
2)함수표현식의 내용을 보면, 변수 a(var a)에 익명 함수(function( ){ })를 할당한다. 이는 곳 함수가 값이라는 내용이며 값이 가는 특성들을 공유한다.
- 함수의 인자로 전달될 수 있다.
- 객체 또는 배열의 값으로 사용 될 수 있다.
- 함수의 리턴 값으로 사용 될 수 있다.
<!DOCTYPE html>
<html>
<body>
<div class="outterBox">
<div class="innerBox">
<h1 id="p1"></h1>
<h1 id="p2"></h1>
</div>
</div>
<script>
function calc(func, num) { return func(num); }
function increase(num) { return num + 1; }
function decrease(num) { return num - 1; }
document.getElementById('p1').innerHTML = "calc(increase,1) => " + calc(increase, 1);
document.getElementById('p2').innerHTML = "calc(decrease,1) => " + calc(decrease, 1);
</script>
</body>
</html>처음에 선언된 calc 라는 함수는 각각 func, num 이라는 인자를 가지고 결과값은 인자값인 func에 num을 인자값으로 담아 반환하는 함수고, 다음 함수들은 각각 1이 증가된 값, 1이 감소된 값을 결과값으로 반환한다.
<!DOCTYPE html>
<html>
<body>
<div class="outterBox">
<div class="innerBox">
<h1 id="p1">1</h1>
<h1 id="p2">2</h1>
</div>
</div>
<script>
// ArrowFunction으로 표기 / explorer에서는 작동 안함
const calc = (mode) => {
// 객체형 자료형
const functions = {
// ArrowFunction으로 표기 / explorer에서는 작동 안함
"plus" : (left, right) => { return left + right },
"minus" : (left, right) => { return left - right },
}
return functions[mode];
}
document.getElementById('p1').innerHTML = "calc('plus')(2,1) => " + calc('plus')(2,1);
document.getElementById('p2').innerHTML = "calc('minus')(2,1) => " + calc('minus')(2,1);
</script>
</body>
</html>calc 함수 내의 functions라는 객체를 만들고, 각각 plus라는 키 값에는 인자값 2개를 각각 더하는 결과값을 반환하는 익명 함수를 할당하고, minus에는 인자값을 빼는 결과값을 반환하는 익명 함수를 할당하였다. 그리고 calc 함수는 functions의 키값을 인자값으로 가지는 결과를 반환한다.
<!DOCTYPE html>
<html>
<body>
<div class="outterBox">
<div class="innerBox">
<h1 id="p1">1</h1>
<h1 id="p2">2</h1>
<h1 id="p3">3</h1>
</div>
</div>
<script>
// 객체형 자료형
const process = {
1: (input)=>{ return input + 10 },
2: (input)=>{ return input * input },
3: (input)=>{ return input / 2 },
}
let input = 1;
for(i in process) {
let tmp_input = input;
input = process[i](input);
document.getElementById('p'+i).innerHTML = "process["+i+"]("+tmp_input+") =>" + input;
}
</script>
</body>
</html>process 함수는 각각 1,2,3이라는 키 값에 인자값을 계산하는 수식을 반환하는 익명함수가 할당된 객체형 자료형이다.(점점 복잡해진다.) 아래 쪽엔 가변변수 input이 있고, process 함수를 반복하여 각각 결과값을 input에 할당하는 방식으로 작동한다.
<!DOCTYPE html>
<html>
<body>
<div class="outterBox">
<div class="innerBox">
<h1 id="p1">1</h1>
<h1 id="p2">2</h1>
<h1 id="p3">3</h1>
<h1 id="p4">4</h1>
</div>
</div>
<script>
const calc = (a, b, type, callback) => {
let result = '';
switch(type) {
case "plus" : result = a + b; break;
case "minus" : result = a - b; break;
case "multiply" : result = a * b; break;
case "divide" : result = a / b; break;
}
callback(result); //!!!!!!
}
calc(10, 5, "plus", function(result){
document.getElementById('p1').innerHTML = "callback plus => " + result;
});
calc(10, 5, "minus", function(result){
document.getElementById('p2').innerHTML = "callback minus => " + result;
});
calc(10, 5, "multiply", function(result){
document.getElementById('p3').innerHTML = "callback multiply => " + result;
});
calc(10, 5, "divide", function(result){
document.getElementById('p4').innerHTML = "callback divide => " + result;
});
</script>
</body>
</html>콜백 함수다. 가장 처음에 기입된 코드블럭에서도 같은 식으로 작동하는 함수다. callback 인자값에 각각 함수를 담아서 실행하게끔 짜여진 코드다.
시간 관계 상 일단 여기까지..!
