[JavaScript] 기초 문법(2) - 함수

# 다양한 형태의 function

// 함수 1 : function name 방식
f1();
function f1(){ console.log('1'); }

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

// 함수 3 (빈도수 90%)
let f3 = ()=>{ // (=> : arrow), 람다로 대체
    console.log('3');
}
f3();

// 함수 4
// IIFE : 즉시 실행 함수
(function(){ 
    console.log('4');
})(); // 이 함수는 곧 호출하겠다. --> 즉석떡볶이, 만들고 바로 실행

// 함수 5
(()=>{ 
    console.log('5');
})(); // 즉석떡볶이

# 함수 인수 전달

function f1(num){console.log(num);}
f1(100);

(function(num){console.log(num);})(200);

(function(dt){
    let start = new Date().getTime();
    while(new Date().getTime()<start+dt); // delay 1s
})(2000);
console.log('test');

 

# 클래스

//함수 첫자가 대문자라면, 생성자 함수로 암묵적으로 클래스로 동격 처리
function Fff555(){ 
    this.num1 = 10 // 멤버 변수 선언
    this.num2 = 20 // ,가 없음
    this.m1 = function(){ // 멤버 함수
        console.log(this.num1);
    }
    this.m2 = ()=>{ // 멤버 함수
        console.log(this.num2);
    }
}

let ins= new Fff555() // 객체 생성 완료
ins.m1();
ins.m2();

new Fff555().m1();

 

# 함수 활용

 

 

# 내부 함수

let f1 = function(){
    console.log(1);
    // 내부 함수 : 함수 안에 함수를 만드는 것(함수 내에서만 사용 가능)
    let f2 = function(){ console.log(2);}
    f2();
}
f1();

 

# 콜백함수

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

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

// 방법 1
f1(f2);
// 방법 2
f1(function(){
    console.log(3);
})
// 방법 3
f1(()=>{
    console.log(4);
})

 

# 내부 함수 호출

let f1 = function(fc){
    console.log(1);
    let f2 = function(){
        console.log(2);
    }
    return f2; // return f2(); 
    // return f2 : 함수 호출
    // return f2() : 함수 내부의 return 결과를 return
}
f1()();

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

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

 

# 내부 함수를 포함한 즉시 실행 함수 호출

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

 

# closure 함수

let f1 = function(){ // 상위
    let a = 100;
    return function(){ // 하위
        console.log(a);
    }
}

f1()();

 

# 람다 함수

// 28-1.
let t = () => () => 100;

t= () => () => {
    return 100;
}

t = () => { return () => { return 100 } };

console.log(t()());


// 28-2.
let t = (a) => () => 100+a;

t= (a) => () => {
    return 100+a;
}

t = (a) => { return () => { return 100+a } };

console.log(t(10)());


// 28-3.
let t = (a) => (b) => a+b;

t= (a) => (b) => {
    return a+b;
}

t = (a) => { return (b) => { return a+b } };

console.log(t(10)(20));

 

 

# 비동기 함수(setTimeout)

console.log(1);

// setTimeout은 함수를 인수로 전달한다.
setTimeout(
    function(){
        console.log(3);
    }, 2000
) // 실행 순서를 지키지 않는 함수를 비동기 함수라고 한다.
console.log(2);