9/28

확인문제 1

a부터 b까지 범위 안의 숫자를 모두 곱하는 함수

function multiplyAll (a, b) {
  return [...Array(b-a+1)].map((el,i) => a+i).reduce((a,b) => a*b)
}

console.log(multiplyAll(1,2));
console.log(multiplyAll(1,3));

확인문제 2-1

매개변수로 max([1,2,3,4]) 와 같은 배열을 받는 max() 함수

const max = function (array) {
  let output = array[0];
  for (item of array) {
    if (output < item) output = item
  }
  return output;
}

console.log(max([1,2,3,4]));

확인문제 2-2

매개변수로 max(1,2,3,4) 와 같은 숫자를 받는 max() 함수

const max = function (...array) {
  let output = array[0];
  for (item of array) {
    if (output < item) output = item
  }
  return output;
}

console.log(max(1,2,3,4));

확인문제 2-3

max([1,2,3,4]) 형태와 max(1,2,3,4) 형태를 모두 입력할 수 있는 함수

const max = function (first, ...array) {
  let output
  let items
  
  if (typeof(first) === 'number') {
    output = first
    items = array
  } else if (Array.isArray(first)) {
    output = first[0]
    items = first
  }
  
  for (const item of items) {
    if (output < item) output = item
  }
  return output;
}

console.log(max([1,2,3,4]));
console.log(max(1,2,3,4));

---

콜백 함수

: 매개변수로 전달하는 함수
: 자바스크립트의 함수도 하나의 자료형이므로, 매개변수로 전달할 수 있다!

(1) forEach()

: 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출한다.
: for 문과 같다고 보면 되나(?)
: 어쨌든 forEach()는 return 값을 줄 수 없다!

배열이 갖고 있는 메소드가 활용하는 콜백 함수 형태

function (value, index, array) {}

const numbers = [273, 52, 103, 32, 57]

numbers.forEach(function (value, index, array) {
  console.log(`${index}번째 요소 : ${value}`)
})

0번째 요소 : 273
1번째 요소 : 52
2번째 요소 : 103
3번째 요소 : 32
4번째 요소 : 57

(2) map()

: 콜백 함수에서 리턴한 값을을 기반으로 새로운 배열을 만든다.

numbers = numbers.map(function (value, index, array) {
  return value * value
})

numbers.forEach(console.log)

//출력결과
74529 0 [ 74529, 2704, 10609, 1024, 3249 ]
2704 1 [ 74529, 2704, 10609, 1024, 3249 ]
10609 2 [ 74529, 2704, 10609, 1024, 3249 ]
1024 3 [ 74529, 2704, 10609, 1024, 3249 ]
3249 4 [ 74529, 2704, 10609, 1024, 3249 ]

아니 이거 뭔데... 왜 이렇게 출력되는거..?

(3) filter()

: 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

const numbers = [0, 1, 2, 3, 4, 5]
const evenNumbers = numbers.filter(function (value) {
  return value % 2 === 0
})

화살표 함수

형태

(매개변수) => {
//
}

(매개변수) => 리턴값

let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// 배열의 메소드를 연속적으로 사용합니다. 메소드 체이닝
numbers
  .filter((value) => value % 2 === 0)
  .map((value) => value * value)
  .forEach((value) => {
    console.log(value)
  })

출력결과

0
4
16
36
64

타이머 함수

: 특정 시간 마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수

📌 타이머 시작

setTimeout(함수, 시간) : 특정 시간 이후에 함수를 한 번 호출
setInteval(함수, 시간) : 특정 시간마다 함수를 호출

setTimeout(() => {
 console.log(`1초 후에 실행됩니다.`)
}, 1 * 1000)    // 1000 밀리 초 = 1초

let count = 0
setInterval(() => {
 console.log(`1초마다 실행됩니다.(${count}번째)`)
 count++
}, 1 * 1000)

📌 타이머 종료

clearTimeout(함수, 시간) : setTimeout() 함수로 설정한 타이머 종료
clearInteval(함수, 시간) : setInteval() 함수로 설정한 타이머 제거

• 타이머 종료 함수들은 매개변수에 타이머 ID를 넣는다.
  타이머ID : setTimeout() / setInteval() 함수를 호출할 때 리턴값으로 나오는 숫자

let id
let count = 0
id = setInterval(() => {
  console.log(`1초마다 실행됩니다(${count}번째)`)
  count++
}, 1 * 1000)

setTimeout(() => {
  console.log('타이머를 종료합니다.')
  clearInterval(id)
}, 5 * 1000)

음... 왜 id 값에 함수를 할당한 것 뿐 아님?
왜 함수가 실행되는데...?