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

▤ 목차

 

 

 

✔ 화살표 함수

⌨ 형식

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