function 함수 종류와 특징, 콜백함수

zin·2023년 8월 4일

함수(function)

자바스크립트에서 중요한 개념중 하나인 함수
객체의 형태로 코드블록을 가진 실행 단위. (함수이름, 매개변수, 실행문으로 구성되있음)

함수의 장점

코드를 구조화해서 읽기 쉽고, 어떤걸 하는지 한 눈에 알수있다.
유지보수 용이하다. 문제가 생기면 그 부분 함수로 가면 된다.
재사용성이 높다. 같은 함수 필요할때 새로 만들지 않고, 언제든 다시 사용할 수 있다.

예시코드

function 함수이름(매개변수) {
	console.log('hello') //실행문
}
함수이름()

함수를 반드시 불러야 실행됨. 안할경우 undefined

function abc("매개변수") {
 	매개변수;
 }
abc("인자", "인자")

파라미터(매개변수)는 선언, 아규먼트(전달인자)는 실제값
기억하자 파선아실.

함수 선언문

function sum(x, y) {
    return x + y;
}

function 키워드, 함수이름, 매개변수, 실행문으로 구성 되며,
함수의 이름이 정의되어야 한다. 실행되면, 함수이름과 동일한 변수를 정의하여 함수객체를 변수에 할당한다. function키워드부터 나오기 때문에 가독성이 좋고, 독립된 구문 형태이다.

함수 표현식

let sum = function (x, y) {
    return x + y;
};
console.log(sum(10, 20));

함수의이름이 선택사항이고, 변수에 함수를 직접 할당한다.
함수선언문을 표현식으로 변경한 예제다.
표현식에서 sum()은 함수이름이 아니라 변수인것이다.
이름이 없는 함수는 익명함수표현식이라고 부른다. 익명함수호출은 함수를 할당한 변수를 사용하여 호출한다.

함수선언문 vs 함수표현식 차이점

함수선언문의 특징은 호이스팅으로 함수가 선언된 위치에서 최상단으로 끌어올려진다. 변수var와 같은 함수스코프를 가지고, 표현식은 블록스코프를 갖는다. 그래서 선언이 되기도 전에 상단에서 호출 될 수 있다.

표현식은 호이스팅 되지않아서 변수에 함수를 할당하기전에 호출할 수 없다.
클로저 로 사용하고, 콜백으로 자주 사용한다.

함수의 호출

자바스크립트의 함수는 다른 함수의 매개변수나 반환값으로도 사용할 수 있다.
함수선언문 또는 함수표현식으로 정의 하였다면 호출로 실행한다.
함수실행문 안에 return문을 사용하고, return이후는 출력 안함.
반환 보다는 종료!

function test() {
    console.log('hello')
    console.log('hello')
    console.log('hello')
    return
    console.log('hello')
    console.log('hello')
    console.log('hello')
}
test() //return이전 3개만 출력 된다.

에러코드가 있어도, js엔진이 보지않는 공간에서는 에러를 출력하지 않는다.
return이 undefined 값을 갖고 있어 명시적으로 호출하지 않으면, 결과값은 undefined가 된다.

콜백함수 (Callback Function)

함수를 먼저 정의만 해놓고, 다른 이벤트가 발생했을 때 호출한다.
해당 함수의 실행이 완료된 후에 호출되는 함수를 말한다.

아래와 같이 다른 함수 finish() 인자로 전달된 start()함수가 콜백함수 이다.
finish() 함수 내부에서 callback()을 호출하면 인자로 전달된 start()가 실행된다.

function start(){
    console.log('hello')
}
function finish(callback){
    callback()
    console.log('world')
}
finish(start)

자바스크립트의 비동기처리 방식을 해결해주기 위해 쓰인다. callback()함수를 위처럼 매개변수로 보내서 콜백 이후 코드를 순차대로 수행하여 속도를 빠르게 할 수 있다.

많이 쓰는 콜백함수로는 DOM에 event를 쓰는 addEventListener()함수가 있다.

콜백함수를 사용하는 이유 :
콜백 함수를 사용하면 비동기적인 작업이나 이벤트 처리, 데이터 요청과 같은 상황에서 함수의 실행을 제어할 수 있고, 가독성, 코드 재사용성이 좋다.

하지만 과도하게 사용하면, 가독성 떨어지고, 에러도 찾기 힘들어 질 수 있다.
이름하여 콜백지옥..

마무리

함수 종류와 특징, 콜백함수에 대해 정리해봤다.
함수선언문이 접근하기 더 유연할 수 있지만, 조건에 따라 함수를 선언해야한다면 함수표현식을 사용하는게 좋다. 표현식은 더 간단한 화살표함수로도 쓸 수 있다.
자바스크립트 함수를 제대로 알려면, 객체,스코프,클로저, this등등 다른 핵심 개념들도 이해가 필요하다.
다음에 더 정리해서 올려야겠다.