Front/js

화살표 함수 ( + 콜백 함수, 재귀함수 )

읽히는 블로그 2024. 7. 1. 10:48

▤ 목차

     

     

     

    ✔ 화살표 함수

    ⌨ 형식

    const sum = (a,b) =>a+b;

     

    자바의 람다와 비슷하다. 화살표는 =>이런 형식을 사용한다.

    함수 표현식보다 단순하고 간결한 문법(use strict)으로 함수를 만들 수 있다.

     

    💻 코드로 보기

    const sum1= function(a,b){
	return a+b;
}
console.log(`두 수의 합은 ${sum1(3,4)}`);

     

    위의 코드를 화살표 함수로 사용하면 아래와 같은 코드가 된다.

     

    const sum2 = (a,b) =>a+b;
console.log(`두 수의 합은 ${sum2(3,4)}`);

     

     

    👏 파라미터가 1개인 경우

    함수를 따로 정의하지 않아도 실행문을 만들 수 있다.

    만약 아래와 같이 파라미터가 1개인 경우에

    let double1 = (n) =>n * 2;
console.log(`곱 ${double1(3)}`);

     

    위와 같이 사용할 수 있지만 파라미터에 소괄호를 제거하고 사용할 수 있다.

    let double1 = n =>n * 2;
console.log(`곱 ${double1(3)}`);

     

     

    👏 파라미터가 없는 경우

    let sayHi = () => '안녕하세요';
console.log(`${sayHi()}`);

     

    파라미터가 없는 경우에는 소괄호()를 생략할 수 없다.

     

     

     

     

    ✏️ 반복문 처리(배열)

    function func(...para){ //분해되어 배열처리가 된다.
	console.log(para.length +' '+para);
	for(let i =0; i < para.length; i++){
		console.log(para[i]);
	}	
	(para.forEach((obj) => console.log(obj)));
}

func('a','b','c');

     

    이렇게 축약해서 사용할 수 있다.

    여기서 Array 함수에 있는 매서드를 사용했다.

    바로 forEach 메서드이다.

    forEach를 확인해보자.

     

     

     

     

     

     

     

     

    ✔콜백 함수

    https://hi-hahahoho.tistory.com/61

    지난번 콜백함수에 대해 정리했다. forEach문은 콜백함수의 개념을 사용한다.

     

    ⌨ 개념

    다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다.

    넘겨 받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수 있고, 아니면 나중에 실행할 수 있는 코드를 말한다.

     

     

    💻 setTimeout()

    특정 코드를 바로 실행하지 않고 일정 시간을 기다린 후 실행해야하는 경우 사용할 수 있는 함수이다.

     

    setTimeout(() => console.log("2초 후에 실행됨"), 2000);

     

    console.log('처리 1');
setTimeout(function(){
	console.log('처리2');
},3000);
console.log('처리3');

    처리2는 예약되어 있는 것이다.

     

     

    setTimeout()함수는 세번째 인자부터 가변인자를 받는다.

    function add(x, y) {
  console.log(x + y);
}
setTimeout(add, 2000, 2, 3); //5

     

    함수를 호출할 때마다 내부적으로 생성되는 타이머 객체를 가리키고 있다.

    setTimeout()함수의 반환값은 타임아웃 아이디인데, 이 값을 인자로 받아 clearTimeout() 함수를 호출시키면

    기다렸다가 실행될 코드를 취소시킨다.

     

    const timeoutId = setTimeout(() => console.log("3초 후에 실행됨"), 3000);
clearTimeout(timeoutId); //출력 X

     

     

    💻 setInterval()

    일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다.

    • 웹페이지의 일정 부분을 주기적으로 업데이트 하는 경우
    • 특정 API로부터 수정된 데이터를 주기적으로 받아와야하는 경우
    setInterval(() => console.log(new Date()), 2000);

    위의 코드는 2초마다 현재 시간을 출력한다.

     

    let count = 0;
setInterval(() => console.log(count+2), 2000);

    이렇게 2초마다 숫자를 2씩 증가시킬 수 도 있다.

     

    setInterval()은 인터벌 아이디(int)를 반환한다.

    인터벌 아이디는  setInterval()함수를 호출할 때마다 내부적으로 생성되는 타이머 객체를 가리키고 있다.

    clearInterval() 함수를 호출하면 코드가 주기적으로 실행되는 것을 중단시킬 수 있다.

     

     

    👏 중요

    clear를 하지 않는 경우 메모리 누수가 발생할 수 있다.

     

     

     

     

    ✔ 재귀함수

    함수가 자신을 다시 호출하는 구조로 만들어진 함수이다.

    재귀함수에는 "종료조건"이 있어야한다.

    종료 조건이 없다면 무한 반복을 하게된다.

    ⌨ 내장함수 사용

    function powF1(x,n){
	let res =1;
	for(let i=0; i<n;i++){
		res *= x;
	}
	return res;
}
console.log('거듭제곱 사용자 정의 함수 :' , powF1(2,3)); //8

     

     

     

    🔦거듭제곱 함수 직접 작성 : 재귀함수

     

    function powF2(x,n){
	if(n === 1) return x; else return x * powF2(x,n-1); //자신을 호출
}

console.log('거듭제곱 사용자 정의 재귀함수 :' , powF2(2,3)); //8

     

     

    🔦삼항 연산자에 재귀함수

    function powF3(x,n){
	return (n===1)? x : x * powF2(x,n-1);
}
console.log('거듭제곱 재귀함수 삼항 연산:' , powF3(2,3));

     

     

    🔦삼항 연산자에 재귀함수(화살표)

     

    const powF4 = (x,n) => (n===1)? x : x * powF2(x,n-1);

console.log('거듭제곱 재귀함수 삼항연산 (화살표):' , powF3(2,3)); //8