관리 메뉴

웹개발 블로그

[JS] 함수, 함수 표현식, 화살표 함수, 콜백함수 본문

◆React.js & Next.js & Node.js/JavaScript

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

쿠키린 2025. 1. 20. 01:04

#함수
- 함수를 호출하면서 전달하는 값 : 인수
- 매개체 역할을 하는 변수 : 매개변수
ㄴ '함수의 매개변수'라고 부른다.


함수 안에서 return을 사용하게되면
ㄴ '반환값' 이라 부른다.
ㄴ 함수의 return문 아래에는 작성해도 작동하지 않는다.

함수안에 내부함수를 작성할 수 있다.
ㄴ '중첩함수'라 부른다.

function a(){
  function aa(){} //중첩함수
  
  aa();//호출
}



선언이 이루어진 함수를 호출하면 오류를 내지만
 ⭐자바스크립트의 특징 중 호이스팅(끌어올리다) 특징 때문에 오류를 내지 않는다.
ㄴ함수를 호출 문 보다 아래 두어도 문제가 일어나지 않는다.
ㄴㄴ 프로그램에 유연성을 준다는 특징이 있다

자바스크립트에서는 함수도 문자열이나 숫자 같은 값으로 취급된다.
ㄴ 그래서 함수자체를 인수로 사용할 수 있는거다. 아래 함수를 살펴보자.

1. 함수 표현식
값으로서 함수를 표현하는 방식 
ㄴ 콜백함수에 유용하게 사용된다.

let varB = function () {
  console.log("funcB")
}
varB(); // 함수 표현식으로 만든 함수는 호이스팅이 이뤄지지 않는다.(값으로 취급되지 때문에)


2. 화살표 함수

let varC = () => { return 1;}
=
단, 반환값만 있을경우(추가적인 작업이 있다면, 중괄호{}를 사용하자)
let varC = () => 1;
let varC = (value) => value + 1;

varC();



3. 콜백함수
ㄴ 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미 함.
ㄴ 쉽게말하면 매개변수인 함수의 순서를 나중에 호출시키게 하려는거야.
함수를 인자로 넣어준다.

function main(value){
 console.log("start"); //순서1 
  value();                    //순서2
 console.log("end"); //순서3
}

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

main(sub);//함수를 main함수의 인자값으로
ㄴ이걸 callback 함수라 부른다.
=
main( () => { console.log("i am sub"); });



콜백?
= 뒷전에 실행되는, 나중에 실행되는

콜백함수 활용 예제

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

repeat(5, (idx) => {
  console.log(idx)
});

=

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