[JavaScript] 자바 스크립트 함수

 

 

 

 

 

💡 자바스크립트 함수 알아보기

1. 내부함수

2. 콜백함수

3. 리턴함수

4. 클로즈함수

5. 람다

6. 동기와 비동기 함수

 

 

 

 

 

1. 내부 함수

let f1 = function(){
    console.log('1');

    let f2 = function(){
        console.log('2');
    }
    f2();
}
f1();


f1 = function(){
    console.log('3');

    let f2 = function(){
        console.log('4');
    }
    f2();
}
f1();
// 1
// 2
// 3
// 4

 

• 함수 내에서 또 다른 함수를 선언하고 호출하는 형태

 

2. 콜백함수

// 콜백함수
// fc = 
let f1 = function(fc){
    console.log('1');
    fc();   // f1 함수의 인자 fc가 실행된다는 의미
}

let f2 = function(){
    console.log('2');
}

// 방법 1
f1(f2);   // 1 , 2

// 방법 2
f1(function(){
    console.log('3');
}); // 1 , 3

// 방법 3
f1(() => {
    console.log('4');
}); // 1 , 4

 

• 함수의 매개변수(인자)가 함수인 형태
• 부모 함수가 호출되면 자식 함수도 불러지는 형태

 

 

3. 리턴함수

// 리턴함수
let f1 = function(){
    console.log('1');
    let f2 = function(){
        console.log('2');
    }
    return f2;  // return f2();
}
f1()();


let f3 = function(){
    console.log('3');

    return function(){
        console.log('4');
    };
}
f3()();

 

• 리턴 값이 함수인 형태
• 리턴되는 함수가 부모 함수 내에 선언되어 있거나 리턴되는 동시에 즉시 실행되는 함수 형태
• 함수가 리턴되는 함수를 호출할 때 f1()() 이런 방식으로 호출해야 한다.

 

자기 자신을 호출해서 리턴하는 함수

(function(){
    console.log('1');
    return function(){
        console.log('2');
    }
})()();

 

 

 

4. 클로저함수

// 클로즈 함수
let f1 = function(){
    let a = 100;
    return function(){
        console.log(a);
    }
};

f1()();

 

• 지역변수가 사라지지 않고 계속 사용할 수 있는 상태로 남아 있다.
• f1() 이 호출되면 f1()은 function()을 리턴하고 소멸하기 때문에 지역변수 a 를 더이상 사용할 수 없게 된다.
• 그러나, f1() 내에서 리턴되는 function() 함수 내에서 a를 사용하고 있고, function() 함수는 상위 스코프인 f1() 함수가 소멸하더라도 자신이 선언된 환경을 기억하기 때문에 (=> 클로저 함수 특징) f1() 밖에서 function()을 호출하더라도 그 환경에 접근할 수 있고 지역변수 a를 사용할 수 있게 된다.
• 최신 상태를 유지하는데 유용하다.

 

 

 

5. 람다

// 예제 1
let f1 = function(a){
    console.log(a);
}
f1(1);

f1 = (a) => {
    console.log(a);
}
f1(2);

// (a) => { (b) => {} }

let f2 = (a) => {
    console.log(a);
    let f2 = (b) => {
        console.log(b);
    }
    f1(a+3);
}
f2(3);

// 1
// 2
// 3
// 6

 

// 예제 2
((a) => {
    console.log(a);
    let f2 = (b) => {
        console.log(b);
    };
    return f2(a + 3);
})(3);

// 3
// 6

(function (a) {
    console.log(1);
    (function (b) {
        console.log(b);
    })(a);
})(4);

// 1
// 4

 

람다 형태

// 기본형
((a) => {
    ((b) => {
    });
})();


// 방법 1
(function (a) {
    (function (b) {
    });
})();


// 방법 2
let f1 = function(fc){
    fc(10);
}

f1((( a ) => { 
    (( b ) => { 
        console.log(a+b);
    })(20)
}));


// 방법 3
let f1 = () => {
    return 100;
}
let f2 = () => 100;
let f3 = () => {
    return console.log('1');
}
let f4 = () => console.log('1');
f4();  // 1

 

이중애로우함수

// 이중 애로우 기본형
let t = () => () => 100;

// 변형 1
t = () => () => {
    return 100;
}

// 변형 2
t = () => {
    return () => {
        return 100
    }
}
console.log(t()());                // 100

// 변형 3
t = (a) => {
    return () => {
        return 100 + a;
    }
}
console.log(t(10)());              // 110

// 변형 4
t = (a) => {
    return (b) => {
        return a + b;
    }
}
console.log(t(10)(20));            // 30

// 변형 5
t = (a) => {
    return (b) => a + b;
}

// 변형 6
t = (a) => {
    return (b) => a + b;
}
t = (a) => (b) => a + b;
t = a => b => a + b;  // 인수가 1개일 때는 괄호 생략 가능

// 변형 7
t = (a, c) => (b, d) => a * b + c * d;
console.log(t(1, 2)(3, 4));        // 11

 

 

 

6. 동기와 비동기

 

💡 동기 방식 (Synchronous)

• 요청을 보내고 실행이 끝나면 다음 동작을 순차적으로 처리하는 방식
• 여러 요청을 동시에 처리할 수 없기 때문에 효율성이 떨어진다.
• 대표적인 예로 콜센터의 일처리 방식이 있다. 콜센터의 직원은 한 손님의 응대를 마친 후에 다른 손님을 응대할 수 있다.

 

💡 비동기 방식 (Asynchronous)

• 요청을 보내고 해당 동작의 처리 여부와 상관없이 다음 요청이 동작하는 방식
• 작업이 완료되는 시간을 기다릴 필요가 없기 때문에 자원을 효율적으로 사용할 수 있다.
• 대표적인 예로 이메일이 있다. 한 사람에게 메일을 보냈을 때 답변을 받지 않고도 다른 사람에게 메일을 보낼 수 있다.

 

setTimeout

// 비동기 함수
console.log('1');
setTimeout(
    function () {
        console.log('3');
    },
    2000
)
console.log('2');

// 1 -> 2 -> 3

 

• setTimeout 으로 2초 뒤에 함수를 콜한다.
• 실행 시 1이 먼저 출력되고 setTimeout 함수가 실행되어 2초를 기다림과 동시에 2가 출력된 다음 2초가 다 흐르면 3이 출력된다.

 

 

 

setInterval

let id = setInterval(
    () => {
        console.log('3');
        
    },
    2000 
 );
console.log('2');

// 2 -> 3 -> 3 -> 3 -> 3 ....

 

• setInterval 은 n 초마다 함수를 콜한다.
• setTimeout 으로 함수를 종료해야 한다.

 

 

 

setTimeout & setInterval

let id = setInterval(
    () => {
        console.log('3');
        
    },
    2000 
 );
console.log('2');

setTimeout(
    () => {
        clearInterval(id);
        console.log('exit');
    },
    2000
)
console.log('2');

// 2 -> 2 -> 2-> 3 -> exit

 

• setInterval 함수를 실행하고 setTimeout 으로 setInterval 함수를 종료한다.

 

 

 

즉시 실행 함수

// 즉시 실행 함수
for(let i=0; i<3; i++){
    (function(x){
        setTimeout(
            ()=>{ console.log(i); },
            1000
        )
    })(i)
}

// 0 -> 1 -> 2

 

• 즉시 실행 함수로 1초마다 실행된다.