JavaScript의 특징
함수가 값으로 취급된다.
함수가 값이기에 가능한 4가지
1. 객체의 값으로 포함될 수 있다.
2. 함수 리턴값이 될 수 있다.
3. 다른 함수의 인자가 될 수 있다.
4. 배열 값으로 사용 될 수 있다.
이러한 기능을 할 수 있는 것을 first-class citizen, first-class object 라고 한다.
1번 2번의 경우 예제
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function cal(mode){
var funcs = {
'a' : function(var1, var2){return var1 + var2 },
'b' : function(var1, var2){return var1 - var2 }
}
//함수는 객체의 값으로 포함될 수 있다.
//객체 안에 정의된 함수는 특별히 method라고 불린다.
return funcs[mode];
//함수는 리턴 값이 될 수 있다.
}
//객체과 리턴 값에 있는 함수 사용법
document.write(cal('a')(2,3)); // 출력 : 5
</script>
</body>
</html>3번 경우 예제
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//함수는 함수의 인자로도 사용할 수 있다.
function cal(func, input){
return func(input)
}
//인자로 쓰이는 함수 1
function increase(input){
return input+1
}
//인자로 쓰이는 함수 2
function decrease(input){
return input-1
}
document.write((cal(increase, 2))); // 출력 : 3
document.write((cal(decrease, 2))); // 출력 : 1
</script>
</body>
</html>4번 경우 예제
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var input = 10;
// 함수는 배열 값으로 사용될 수 있다.
var method = [
function(input){return input + 5},
function(input){return input + input},
function(input){return input / 2}
];
//배열의 값에 있는 함수 사용법
document.write(method[1](input)); // 출력 : 20
</script>
</body>
</html>콜백 함수
어떤 함수의 인자가 함수인 경우
함수가 값으로 취급되기에 가능한 것이다.
콜백 함수 예시
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var numbers = [1,6,5,21,12,20,100,3,7];
numbers.sort();
document.write(numbers);
//문자열로 취급하여 정렬하기 때문에 숫자의 작고 큰것에 따라 정렬되지 않는다.
// 출력 : 1,100,12,20,21,3,5,6,7
var sortfunc = function(a,b){
return a-b;
//return a-b에 포함되어있는 로직
/*
if(a > b){return 1;}
else if(a < b){return -1;}
else{return 0;}
*/
}
numbers.sort(sortfunc);
document.write(numbers);
//sortfunc에 따라서 정렬되어 숫자의 작고 큰것에 따라 정렬된다.
// 출력 : 1,3,5,6,7,12,20,21,100
</script>
</body>
</html>비동기 처리
- 웹페이지에서 웹페이지가 변경 되지 않고 서버와 웹 브라우저가 내부적으로 통신하는 것을 말한다.
- Ajax가 있다.
