함수
크게 2가지로 나눈다. (사용자 정의 함수, 자바스크립트 코어 함수)
사용방법에 따른 함수 종류
1. 일반 함수
2. 중첩 함수(내부 함수=inner 함수)
함수 내부에서만 사용하는 기능을 중첩함수로 만들어 사용하는것 (일반적으로 중첩함수는 이름이 없는 이벤트 리스너로 많이 활용된다.) 중복 코드를 내부 함수로 만들어 재사용할 시에도 사용, 외부함수와 내부 함수의 아주 밀접한 관계일때 사용하는 것이 좋음 (이벤트 처리~)
- 중첩함수에서 중첩함수를 포함하고 있는 함수의 지역변수에 접근해서 사용할 수 있다는 점을 알고있어야 한다.
3. 콜백 함수
함수 실행 결과 값을 리턴이 아닌 매개변수로 넘어온 함수를 호출해서 넘겨주는 방식을 콜백이라고 하며 이때 매개변수로 넘어온 함수를 콜백함수라고 한다.
function name(callback){
로직 구현 부분
callback(결과);( 로직 처리 부분 )
}
4. 클로저 함수
일반 함수의 경우 함수의 호출에 의해 함수 내부 실행구분을 모두 실행하게 되면 함수 내부에서 만든 지역변수가 자동으로 사라지지만 어떤 경우에는 사라지지 않고 남은 경우가 존재하는데, 이 현상을 클로저라고 하며 이 현상을 일으키는 함수를 클로저 함수라고 한다.
5. 함수 리터럴
리터럴이란 그 자체로서의 값을 의미
var a=function(){} 이런게 함수 리터럴
- 객체 방법으로 함수 정의 (실무에서는 잘 사용되지 않는다..)
- 익명함수 확장으로 함수 정의
콜백 함수란
함수 실행 결과 값을 리턴이 아닌 매개변수로 넘어온 함수를 호출해서 넘겨주는 방식을 콜백이라고 하며 이때 매개변수로 넘어온 함수를 콜백함수라고 한다.
문법
function name(callback){
로직 구현 부분
callback(결과);( 로직 처리 부분 ) //결과값을 또다른 함수 호출~
}- 일종의 return문과 비슷한 기능
- 함수 결과값을 가지고서 처리 부분을 분리하여 구현하면서 원하는 로직 처리 부분을 호출하면 된다 (유지보수할 때 로직 처리 부분만 수정하면 되므로 큰 장점! => 동기,비동기 때문)
단순처리는 return문이 효율적이다.
동기와 비동기(Sync, Async)
- 동기 : 일반적으로 함수가 호출된 후 끝날 때까지 다음 구문을 실행하지 않고 대기하는 것을 동기라고 칭한다.
- 비동기 : 함수가 호출된 후 끝날 때까지 기다리지 않고 다음 구문을 바로 실행하는 것을 비동기라고 칭한다.
var count=1:
setInterval(function(){
document.write("2. count= "+count);
}, 2000);
document.write("동작이 모두 끝나지 않았어도 바로 실행");콜백함수가 주로 비동기 함수의 결과값을 처리하기 위한 방법으로 주로 사용되어지기 때문이다.
실무에서 콜백함수가 사용되는 경우
- 이벤트 리스너로 사용 (버튼클릭)
- 타이머 실행 함수로 사용 (특정시간마다 실행하는 경우
- 서버와 데이터를 주고받을 때 사용하는 JQuery Ajax 기능들에서 결과물을 받을 때 (서버 접속 db 접속)
- Jquery 애니메이션 기능에서 애니메이션이 모두 끝났을때 다음 동작~
구현, 처리 부분으로 나눠서
클로저 함수란
먼저 클로저란 함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태를 의미하며 내부에 있는 함수를 클로저 함수라 부른다.
function start(){
var count=0;
setInterval(function(){ //익명함수->클로저함수
count++;
document.write(count);
}, 1000);
}
start();함수 내부에 데이터가 만들어지기 때문에 함수 외부에서 수정할 수 없는 보호된 데이터를 만들 수 있다는 것 (이런 형태의 데이터를 객체지향 프로그래밍에선 private 데이터, 캡슐화 된 데이터라고 부른다)
this = 객체지향프로그램에서는 그 객체의 주소를 들고 있는 하나의 지역변수 형태로 숨어있는.. (간단하게 말하자면 내가 선택한 것)
ex) 클로저를 사용하여 메뉴(탭메뉴) 선택하기
