◆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)
});