[javaScript] 함수, 함수 표현식, 화살표 함수 , 콜백함수

1. 함수

- 아래에 함수가 선언되어도 호이스팅으로 인해 호출이 정상적으로 됨 

// 함수
let area1 = getArea(10, 20);
console.log(area1);

let area2 = getArea(30, 20);
console.log(area2);

getArea(120, 200);


function getArea(width, height) {
  function another() {
    // 중첩 함수
    console.log("another");
  }

  another();
  let area = width * height;

  return area;
}

 

 

2. 함수 표현식

- 함수를 만들어서 바로 변수에 담는것도 가능 

- 단 funcB()로는 호출이 불가능함 

let varB = function funcB () {
     console.log("funcB");
};


let varB = function () { // 이름 생략해도 문제 없음 (익명 함수)
     console.log("funcB");
};

 

 

3. 화살표 함수 

- function을 지우고 소괄호와 중괄호 사이에 화살표를 넣어준다.

let varB = function () { 
     console.log("funcB");
};

let varB = () => {
     console.log("funcB");
};

//값을 반환하기만 한다면 아래와 같이 사용 가능 
let varB = () => 1;


//매개변수가 필요하다면 괄호 안에 
let varB = (value) => value+1;

//값을 바로 반환하지 않는다면 

let varB = (value) => {
 console.log("추가작업");
 return value+1;
};

 

4. 콜백 함수

- 원하는 타이밍에 사용도 가능 

function main(value){
	value();   //매개변수에 sub 함수가 있기 때문에 콘솔에 sub 출력 
}

function sub() {
	console.log("sub");
}

main(sub); //main함수에 sub 함수 넣어서 보냄 (콜백함수)

 

function main(value) {
    console.log("1");
    console.log("2");
    sub();  //원하는 순서에 실행 가능 
    console.log("3");
  }

 

function main(value) {
    sub();
  }

  main(function sub(){  //함수 표현식처럼도 사용 가능 
    console.log("sub");
  });
  
  
  main(() => { //화살표 함수도 사용 가능  
    console.log("sub");
  });

 

5. 콜백함수의 활용

 function repeat(count) {
    console.log("repeat");
    for(let idx =1; idx <=count; idx++ ){
        console.log(idx);
    }
  }


  function repeatDouble(count) {
    console.log("repeatDouble");
    for(let idx =1; idx <=count; idx++ ){
        console.log(idx * 2);
    }
  }
  

  repeat(5);
  repeatDouble(5);

 

위와 같이 구조가 흡사한 함수를 만들 때 중복코드 발생을 방지 가능

  function repeat(count, callback) {
    for(let idx =1; idx <=count; idx++ ){
        callback(idx);
    }
  }


  //repeat
  repeat(5, function(idx){
    console.log(idx);
  });


  //repeatDouble
  repeat(5, function(idx){
    console.log(idx*2);
  });

 

//화살표 함수도 사용 가능 
  repeat(5, (idx) => {
    console.log(idx);
  });