● 이론0_비동기_자바스크립트를 배우기 전, Argument, Parameter의 차이
○ 이론적 정의 차이 :
- Argument : 함수 호출을 할 때, 호출한 함수의 매개변수에 대입한 값들
- Parameter : 함수 구현 시, 변수들 입력한 매개인자 값
○ 예시로 파악하기 :
function add(x, y) { // x, y : Parameter
return x + y;
}
add(1, 2); // 1, 2 : Argument● 이론1 : CallBack 메소드
○ 정의 : 함수의 파라미터(함수 구현 작성 시) 안에 메소드가 들어가있는 형식으로, 함수 호출시에는 Argument에 다른 함수를 대입하는 함수형식을 CallBack method라 한다.
○ 간단 예시
function SayHello()
{
console.log('안녕 시발아?');
}
function PrintHello(func)//콜백함수 구현 : Parameter는 그냥 변수로
{
console.log('인사를 할 것이다.');
func(); //Parameter를 함수만 넣아야 작동됨
}
PrintHello(SayHello);//Argument로 함수 대입 시, 이름만 적고 ()는 생략한다.
○ 방법은 2가지 형식이 있다.
▶ 방법1_ 위의 예시 처럼, 콜백함수의 Parameter에 외부 다른 메소드 삽입 방법
function SayHello(name){
console.log(`안녕 시발아? 나는 ${name}인데?`);
}
//순서1_Parameter에 매개 함수안에 넣을 매개변수를 같이 넣기
function PrintHello(func, name)
{
console.log('인사를 할 것이다.');
func(name);//Parameter 호출
}
PrintHello(SayHello,'티나핑');//순서2
▶ 방법2_ 콜백 함수의 Parameter Argument에 Arrow Function으로 직접 구현 (함수 구현시, 함수 호출 시)
//함수 구현부, Parameter는 위의 방법과 같다.
function PrintHello(func)
{
console.log('인사를 할 것이다.');
func();//Parameter 호출
}
//Argument에 직접 구현
PrintHello(()=>{
console.log("안녕 시발아?");
});
● 이론2_ CallBack 함수 + 파라미터 전달
○ 순서 :
- 순서1_ CallBack함수의 Parameter에 매개인자함수에 넣을 Parameter를 같이 넣기., 구현
- 순서2_ 호출시, Argument에 추가해서, 호출
Ex_
function SayHello(name){
console.log(`안녕 시발아? 나는 ${name}인데?`);
}
//순서1_Parameter에 매개 함수안에 넣을 매개변수를 같이 넣기
function PrintHello(func, name)
{
console.log('인사를 할 것이다.');
func(name);//Parameter 호출
}
PrintHello(SayHello,'티나핑');//순서2
○ Arrow Function으로 CallBack함수 전달하기
- 구현부는 방법1과 같다는 점 기억!
function PrintHello(func,name)//구현부
{
console.log('인사를 할 것이다.');
func(name);
}
PrintHello((name)=>{
console.log(`안녕 시발아? 나는 ${name}인데?`);
},'티나핑');//Arrow Function◎ 연습문제 :
forEach() 함수는 배열 array와 콜백 callback을 파라미터로 받아서 array의 모든 요소에 대해 callback을 실행합니다.
- 배열의 요소를 출력하는 콜백을 전달해 주세요. Arrow Function을 사용하세요.
- 배열의 요소를 대문자로 출력하는 콜백을 전달해 주세요. function 키워드로 함수를 선언한 뒤에 콜백으로 전달하세요.
※참고_Array객체 파라미터 메소드 forEach(배열,(word)=>{console.log(word)}); //배열에 인덱스 왼쪽부터 하나씩 출력하는 메소드
- 답 :
function forEach(Array, func) //CallBack함수인, forEach 구현부
{
for(let str of Array)
{
func(str);
}
}
const words = ['JavaScript', 'Java', 'Python'];
//배열의 하나씩 출력
forEach(words,(word)=>{
console.log(word);
});
//대문자로 변환 출력
forEach(words,(word)=>{
console.log(word.toUpperCase());
});● 이론3_ CallBack함수의 활용의 대표적 예시 => setTimeOut() 메소드
○ setTimeout(매개인자1 : CallBack메소드 , 매개인자2: 몇밀리초 후에 callBack함수를 호출할지의 값);
○ 사용 예시
console.log('1');
setTimeout(()=>{console.log('2')},3000);//3초후에 callback함수 호출
console.log('3');
● 이론4_ setTimeout()와 callBack함수가 비동기 실행의 대표적 예시다.
: 아래의 사진은 setTimout()메소드가 비동기 실행함수일 경우와 동기 실행함수일 경우의 코드 수행 과정을 시간 그래프로 나타낸 것이다.
◎ 연습문제 :
setTimeout() 함수는 사실 2개 이상의 아규먼트를 받을 수 있습니다.
setTimeout(callback, delay, arg0, arg1, ...);첫 번째 아규먼트 callback은 실행할 콜백, 두 번째 아규먼트 delay는 타임아웃 시간(밀리초 단위)이었죠? 그 이후의 아규먼트들은 callback의 아규먼트로 전달됩니다.
setTimeout(callback, delay, foo);예를 들어 위와 같은 코드를 실행하면 delay 만큼의 시간이 지나고 callback(foo) 함수가 실행되는 거죠.
템플릿 파일에는 이전에 사용했던 sayHello() 함수가 있는데요. 이 함수를 이용해서 아래와 같은 출력 결과를 만들어 보세요. delay는 2초로 설정해 주세요.
보너스 실습
이미 선언된 sayHello() 함수 대신 Arrow Function 문법을 사용해서 똑같은 결과를 만들어 보세요.
실습 결과
시작
끝
Hello Codeit!- 답 :
function sayHello(name) {
console.log(`Hello ${name}!`);
}
console.log("시작");
setTimeout((name)=>{
sayHello(name);
},2000,'Codeit!')
console.log("끝");
