Week3 - JavaScript (15)

27강) 나머지 매개변수와 전개 연산자(함수 호출)

• 가변 매개변수 함수 : 매개변수의 개수가 고정적이지 않은 함수(나머지 매개변수(...)를 활용해서 만든다)

• 나머지 매개변수 (배열이 들어온다)

function 함수 이름(... 나머지 매개변수) { }

• 나머지 매개변수와 일반 매개변수 조합

function 함수 이름(매개변수, 매개변수, ...나머지 매개변수) { }

• 전개 연산자 : 배열을 함수의 매개변수로써 전개하고 싶을 때 시용

함수 이름(...배열)

28강) 기본 매개변수와 가독성

• 기본 매개변수 : 매개변수에 기본값이 들어가게 하고 싶을 때 사용하는 매개변수

함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값)

const isLeapYear = function (연도 = new Date().getFullYear()) {
 if (typeof(연도) === 'undefined') {
   연도 = new Date().getFullYear()
 }

  연도 = typeof(연도) === 'undefined' ? new Date().getFullYear() : 연도
  연도 = typeof(연도) !== 'undefined' ? 연도 : new Date().getFullYear() 

  연도 = 연도 || new Date().getFullYear()

  console.log(`연도: ${연도}`)
  return (연도 % 4 === 0)
    && (연도 % 100 !== 0)
    || (연도 % 400 === 0)
}

console.log(isLeapYear())

29강) 5.1절 확인 문제

arguments를 사용한 가변 매개변수 함수

function sample() {
  console.log(arguments)
  for(let i = 0; i < arguments.length; i++){
    console.log(`${i}번째 요소: ${arguments[i]}`)
  }
}

전개 연산자가 없던 구 버전에서 apply()함수 사용하기

function sample(...items) {
  console.log(items)
}

const array = [1, 2, 3, 4]
console.log(sample.apply(null, array))

구 버전 자바스크립트에서 기본 매개변수 구현하기

function earnings (wage, hours) {
  wage = typeof(wage) != undefined ? wage : 8590
  hours = typeof(hours) != undefined ? hours : 52
  return wage * hours
}

function earning (wage, hours) {
  wage = wage || 8590
  hours = hours || 52
  return wage * hours
}

A부터 B까지 범위를 지정했을 때 범위 안의 숫자를 모두 곱하는 함수

const multiplyAll = function(a, b){
  let output = 0
  for(let i = 1; i <= 100; i++){
    output *= i
  }
  return output
}

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

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

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

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

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

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

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

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

console.log(`max(배열): ${max([1, 2, 3, 4])}`)
console.log(`max(숫자, ...): ${max([1, 2, 3, 4])}`)

30강) 콜백함수

• 콜백함수 : 매개변수로 전달하는 함수

function callThreeTimes(callback){
  for(let i = 0; i < 3; i++){
    callback(i)
  }
}

callThreeTimes(function (i){
  console.log(`${i}번째 함수 호출`)
})

• forEach()
  : 배열이 갖고 있는 함수로써 단순하게 배열 내부의 요소를 사용해서 콜백함수 호출

function (value, index, array) { }

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

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

• map()
  : 배열이 갖고 있는 함수, 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수

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

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

numbers.forEach(console.log)

• filter()
  : 배열이 갖고 있는 함수, 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열 만드는 함수

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

console.log(`원래 배열: ${numbers}`)
console.log(`짝수만 추출: $evenNumbers}`)

• 화살표 함수
  : 익명함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성문법
  • function 키워드 대신 화살표(=>)

(매개변수) => {

}불 표현식 || 불 표현식이 거짓일 때 실행할 문장

(매개변수) => 리턴값

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

31강) 타이머 함수, 즉시호출 함수(IIFE), 엄격 모드

• 타이머 함수
  : 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수
  • setTimeout(함수, 시간) -> 특정 시간 후에 함수를 한 번 호출
  • setInterval(함수, 시간) -> 특정 시간마다 함수 호출

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

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

• • clearTimeout(타이머_ID) -> setTimeout()함수로 설정한 타이머 제거
• • clearInterval(타이머_ID) -> setInterval()함수로 설정한 타이머 제거

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

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

• 즉시호출 함수
  : 변수의 이름 충돌을 막기 위해서 코드를 안전하게 사용하는 방법

  (function () { })()

• 엄격모드
  : 실수를 줄일 수 있는 방법

  'use strict'
  문장
  문장

32강) 선언적 함수와 익명함수의 차이, 확인문제

• 익명함수
  : 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성

• 선언적함수
  : 순차적인 코드 실행이 일어나기 전에 생성
  (같은 블록이라면 어디에서 함수 호출해도 상관X)

let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]
// 홀수만 추출
numbers = numbers.filter((x) => x % 2 === 1)
// 100이하의 수만 추출
numbers = numbers.filter((x) => x <= 100)
// 5로 나눈 나머지가 0인 수만 추출
numbers = numbers.filter((x) => x % 5 === 0)

const array = ['사과', '배', '귤', '바나나']

<!--console.log('# for in 반복문')
for (const i in array) {
  console.log(i)
} -->
console.log('# for in 반복문')
array.forEach((item, i) => {
  console.log(i)
}) 
// for in은 인덱스만(0, 1, 2, 3)

<!--console.log('# for of 반복문')
for (const i of array) {
  console.log(i)
} -->
console.log('# for of 반복문')
array.forEach((item, i) => {
  console.log(item)
})
// for of는 요소만 추출(사과, 배, 귤, 바나나)