######################## 함수(function) ########################
하나의 로직을 재실행 할 수 있도록 해, 코드의 재사용성 / 유지보수의 효율 / 가독성을 높여준다.
function 함수명( [인자...[,인자]] ){
코드
return 반환값
}
######################## 반복문과 함수의 차이 ########################
반복문은 일정한 반복을 '그 자리' 에서 실행할 때 의미가 있고,
함수는 일정한 반복을 '여러곳' 에서 실행할 때 의미가 있다.
######################## 함수의 출력 ########################
함수안에서 제일 먼저 나오는 return을 보면, 값을 출력하고 함수를 빠져나간다.
######################## 매개변수와 인자(parameter & argument) ########################
함수정의 function good ( a, b ) { ~ }
함수불러오기 good(1, 2);
위의 함수불러오는 코드에서, 괄호안에 들어가는 1과 2는 인자(argument)
그 인자가 들어가는 a와 b는 매개변수(parameter)라고 한다.
- 여러개의 매개변수를 지정할 수 있다(매개변수가 많으면 인자도 많아 지겠죠?).
- 함수를 정의하는 방법은 여러가지가 있다.
######################## 유효범위 ########################
전역변수/지역변수 : 함수 바깥에서 선언된 변수(전역적으로 영향을 미침)/함수 내에서 선언된 변수(함수 내에서만
영향을 미침)
- 전역변수는 거의 쓰이지 않음(프로그램이 커질수록 변수의 이름이 서로 헷갈릴 수 있기 때문. 이런 개념도 그러
한 문제때문에 고안된 것)
- 함수 밖에서 var를 쓰면 전역변수, 함수 안에서 var를 쓰면 지역변수
- 전역변수를 딱 하나만 쓰려면 전역변수 하나를 객체로 만들고 그 소속 아래 나머지 변수를 선언한다.
- 전역변수를 쓰지 않으려면 만든 로직을 익명함수화한다(모듈화의 기초)
- 자바스크립트의 지역변수는 {}가 아니라 함수!에서만 유효하다.
- 자바스크립트는 정적 유효범위를 채택한다(함수 호출시점이 아니라 선언 시점을 기준으로 한다)
var i = 5;
function a(){
var i = 10;
b();
}
function b(){
document.write(i);
}
a(); // 실행결과는 5이다.(사용될때가 아니라 정의될때가 기준임!)######################## 값으로서의 함수 ########################
JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.
function a(){} // 함수 a는 변수 a에 담겨진 값이다.
a = {
b:function(){
}
}; // 또한 함수는 객체의 값으로 포함될 수 있다.
// 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다.
function cal(mode){
var funcs = {
'plus' : function(left, right){return left + right},
'minus' : function(left, right){return left - right}
}
return funcs[mode];
}
// 함수는 함수의 리턴 값으로도 사용할 수 있다.
var process = [
function(input){ return input + 10;},
function(input){ return input * input;},
function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
input = process[i](input);
}// 당연히 배열의 값으로도 사용할 수 있다.######################## 콜백 ########################
콜백 : 어떠한 함수가 수신하는 인자가 함수인 경우. 함수가 다른 함수의 인자로 사용됨으로써 그 함수의 내용을 완전히 바꿀 수 있는것.
비동기(Asynchronous) - 요청에 처리 완료와 관계없이 응답한다. 이후 운영체제에서 응답할 준비가 되면 응답한다.
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
numbers.sort(); // [1, 10, 20, 3, 4,5,6,7,8,9];
function sortNumber(a,b){
// 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
return b-a;
}
numbers.sort(sortNumber); // array, [20,10,9,8,7,6,5,4,3,2,1]
function sortfunc(a,b){
if(a>b){
return 1;
} else if(a<b){
return -1;
} else {
return 0;
}
numbers.sort(sortfunc); // array, [1,2,3,4,5,6,7,8,9,10,20]콜백은 비동기처리에서도 유용하게 사용된다. 시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다. 다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작한다. 동영상을 참고한다.
// datasource.json.js
{"title":"JavaScript","author":"egoing"}
// demo1.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.get('./datasource.json.js', function(result){
console.log(result);
}, 'json');
</script>
</body>
</html>비동기적인 처리 => 인터페이스와 사용자가 소통할 범위와 시간을 늘리기위해 시간이 많이 걸리는 작업을 뒤로 미루는 처리
순차적 절차적으로 코드를 일직선으로 쭉 실행하는것을 동기적인 처리, 우선도에 따라 다르게 처리하는것을 비동기적인 처리라고 부름.
'JavaScript' 카테고리의 다른 글
| jQuery - input 쓰기, 읽기, 활성화, 비활성화 - readonly, disabled (0) | 2019.08.30 |
|---|---|
| 배열 (0) | 2019.08.13 |
| 반복문 (0) | 2019.07.25 |
| 비교와 조건문 (0) | 2019.07.23 |
| 변수, 주석, 줄바꿈과 여백 (0) | 2019.07.23 |
