[JavaScript] 함수 정리
1. 함수
반복 사용되는 코드를 구조화하거나 재활용을 목적
자주 사용하는 코드실행문을 담아두고 언제든지 꺼내쓰는 방식 코드 재사용 , 코드줄이기 , 코드간소화
let function 함수명(){ /* 실행코드 */
}
함수명() - 함수호출
=>
function app(){
console.log('함수 호출');
};
app(); //함수호출
{
function fx(num){
//num:number
let x = num+10
// 100+10=110
console.log(`${x}\n--------------------`)
}
fx(100); //fx의 매개변수 num값이 100
console.log(`두수의합은?`)
sum(10,30);
function sum(num1,num2){
//num1:number,num2:number
let num3 =num1+num2
console.log(`합=${num3}\n--------------------`);
}
console.log("네수의차")
sub(100,20,30,10)
function sub(num1,num2,num3,num4){
// num1:number,num2:number,num3:number num4:number
let numsub = num1-num2-num3-num4
console.log(`차=${numsub}\n--------------------`);
}
console.log("두수의곱")
mul(5,3,2)
function mul(num1,num2,num3){
// num1:number,num2:number,num3:number
let nummul = num1*num2*num3
console.log(`곱=${nummul}\n--------------------`)
}
console.log("두수의몫")
div(100,15)
function div(num1,num2){
// num1:number,num2:number
let numdiv = num1/num2
console.log(`몫=${numdiv}\n--------------------`)
}
console.log("두수의 나머지")
mod(20,6)
function mod(num1,num2){
// num1:number,num2:number
let nummod = num1%num2
console.log(`나머지=${nummod}\n--------------------`)
}
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
110
--------------------
두수의합은?
합=40
--------------------
네수의차
차=40
--------------------
두수의곱
곱=30
--------------------
두수의몫
몫=6.666666666666667
--------------------
두수의 나머지
나머지=2
--------------------
[Done] exited with code=0 in 0.046 seconds
2. 콜백함수
함수를 변수에 저장할 수 있는 함수를 매개변수로 전달된 함수
{
function make(callback){
for(let i=0; i<=10; i++){
//매개변수로 전달된 함수 호출 => 0번째부터 10번째 인덱스까지 실행
callback()
}
}
make(function(){
console.log("함수호출 완료")
})
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
함수호출 완료
함수호출 완료
함수호출 완료
함수호출 완료
함수호출 완료
함수호출 완료
함수호출 완료
함수호출 완료
함수호출 완료
함수호출 완료
함수호출 완료
[Done] exited with code=0 in 0.051 seconds
3. 재귀함수
함수를 반복문 처럼 여러번 호출하기 위해 사용. 최초함수를 호출하면 함수 정의문 내에서 실행문으로 함수를 다시 호출하는것
{
function gugu(level,depth=1){
if(depth>9){
//밖으로 빠져나감
return;
}else{
console.log(`${level}X${depth}=${(level*depth)}`);
//재귀 함수 : 자기 자신의 함수를 호출
gugu(level,depth+1);
}
}
let dan = 6; // 구구단 6단 실행
gugu(dan);
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
6X1=6
6X2=12
6X3=18
6X4=24
6X5=30
6X6=36
6X7=42
6X8=48
6X9=54
[Done] exited with code=0 in 0.048 seconds
4. 즉시함수
{
//기명 즉시실행함수
const init =()=>{
console.log('화살표 즉시함수')
}
(()=>{
init();
})();
//익명 즉시실행함수
(function() {
console.log('화살표 즉시함수'); // "함수 호출" 출력
}());
}
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
화살표 즉시함수
[Done] exited with code=0 in 0.046 seconds
5. 시간차함수
//콜백함수
1. setTimeout(()=>{ // 한번만 실행
실행문
},시간차)
2: setInterval(함수,시간차)=>//매시간마다 계속 ex)배너,롤링
해지: clearInterval(변수)
변수=setInterval(함수명,시간차)
해지:clearInterval(변수)
예제 테스트 활용
let timeID = null,
count = 0,
interval = 1000;
let start = document.querySelector(".start");
let stop = document.querySelector(".stop");
const make = () => {
count++;
document.querySelector(".box").innerHTML = count;
};
start.addEventListener("click", () => {
timeID = setInterval(make, interval);
});
stop.addEventListener("click", () => {
clearInterval(timeID);
});
