[JS] 04-4 전개 구문 ~ 04-5 타이머 함수

• 전개 구문 spread syntax
  • 말 그대로 '값을 펼쳐주는' 구문
  • 배열처럼 값이 다양한 자료를 한꺼번에 인수로 넘겨주거나 배열과 배열을 합할 때처럼 배열을 하나의 덩어리로 처리해야 할 때 유용함
  • 3개의 마침표를 이용한 '...' 기호 사용
  • 문자열이나 배열, 객체처럼 여러 개의 값을 담고 있는 자료형에서 다른 정보는 필요 없고 그 안의 값만 꺼내 사용하려고 할 때 유용함
• 나머지 매개변수
  • 전개 구문은 함수를 선언할 때 사용할 수도 있음
  • 함수를 선언하면서 나중에 몇 개의 인수를 받게 될지 알 수 없는 경우 전개 구문을 사용해서 매개변수를 만드는데, 이것을 '나머지 매개변수'라고 함

function addNum(...numbers) {
	let sum = 0;
    
    for (let number of numbers)
    	sum += number;
        
    return sum;
}

console.log(addNum(1, 3));	// 4
console.log(addNum(1, 3, 5, 7))	// 16

• 나머지 매개변수를 이용해 인수의 개수와 상관없이 넘겨주는 값을 모두 더할 수 있음

 

function displayFavorites(first, ...favs) {
	let str = `가장 좋아하는 과일은 "${first}"군요`;
    return str;
}

console.log(displayFavorites("사과", "포도", "토마토"));

( 첫 번째 인수만 first로 받고, 나머지는 변수 favs로 받아서 화면에 표시하는 예제 )

• 함수를 실행하면서 넘겨주는 인수의 일부분은 변수로 받고, 그 외에는 나머지 매개변수로 받을 수 있음
• 나머지 매개변수는 마지막에 써야 함

 

---

 

• 타이머 함수 timer function
  • 특정 시간이 되었을 때 함수를 실행하거나 특정 시간 동안 함수를 반복하기 위해서 시간을 재는 함수
  • 타이머 함수는 실행할 함수와 시간을 지정하는 함수로, 타이머 함수에 실행할 함수를 인수로 받기 때문에 콜백 함수를 매개변수로 사용

 

• 일정 시간마다 반복하기 - setInterval()
  • 일정한 시간마다 함수를 반복해서 실행하는 함수
  • 밀리초 단위로 사용 (1,000밀리초 = 1초)
  • 한 번 실행하면 웹 브라우저를 종료하기 전까지는 문서를 새로 고침하거나 다른 페이지로 이동해도 계속 실행됨

function greeting() {
	console.log("안녕하세요?");
}

setInterval(greeting, 2000);

setInterval(() => {
	console.log("안녕하세요?")
}, 2000);

( 2초마다 인사말 표시하는 예제 )

 

 

• 반복 실행 멈추기 - clearInterval()
  • setInterval() 함수가 특정 조건이 되었을 경우 반복 실행을 멈추도록 함
  • setInterval() 함수로 시작한 타이머를 종료하는 함수

let counter = 0;

let timer = serInterval(() => {	// 타이머에 이름을 지정. 타이머 시작.
	console.log("안녕하세요?")
    counter++;				// 인사말 표시 횟수 1증가.
    if (counter === 5)
    	clearInterval(timer);	// counter = 5이면 타이머 종료.
}, 2000);

 

 

• 특정 시간 이후에 실행하기 - setTimeout()
  • 지정한 시간이 지난후에 콜백 함수를 실행

setTimeout(콜백함수, 시간)

setTimeout(() => {
	console.log("안녕하세요?")
}, 3000);

  ( 3초 후에 인사말을 표시하는 예시 )