[JavaScript] 함수

ㅁ함수

  • 코드의 집합을 나타내는 자료형

  • 익명함수

const 함수 = function() {
  console.log("Hello");
}
함수();
함수();
  • 선언적 함수
  • 선언적 함수는 이름을 붙여 생성
let 함수 = function(){
  console.log("Hello");
}
  • 매개변수와 리턴값을 갖는 함수
function 함수(매개변수, 매개변수, 매개변수) {
문장
문장
return 리턴값
}
  • 나머지 매개변수
    • 가변 매개변수 함수: 호출할 때 매개변수의 개수가 고정적이지 않은 함수
    • 자바스크립트에서 이러한 함수를 구현할 때는 나머지 매개변수(rest parameter)라는 특이한 형태의 문법을 사용
function sample(a,b,...c){
  console.log(a,b,c)
}

> sample(1,2)
> sample(1,2,3)
> sample(1,2,3,4)
  • Array.isArray() 메소드
    • 매개변수로 들어온 자료형이 배열인지 숫자인지 확인
function min(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 item of items) {
    if (output > item) {
      output = item
    }
  }
  return output
}

console.log(`min(배열): ${min([52, 273, 32, 103, 275, 24, 57])}`)
console.log(`min(숫자, ...): ${min(52, 273, 32, 103, 275, 24, 57)}`)
  • 기본 매개변수
    • 여러번 반복 입력되는 매개변수에 기본값을 지정해 사용
function earn (name, wage=9000, hours = 42){
  console.log(`${name}님의 급여정보`)
  console.log(`- 시급 : ${wage}원)`
  console.log(`- 근무 시간 : ${hours}시간`)
  console.log(`- 급여 : ${wage*hours}원`)
}

함수 고급

### 콜백 함수

  • 함수도 하나의 자료형이므로 매개변수로 전달 할 수 있음 : 매개변수로 전달하는 함수

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

  function (value, index, array){
  }
  const numbers=[273,52,103,25,384]

  numbers.forEach(function (value, index, array){
    consoel.log(`${index}번째 요소 : ${value})
  })
  • map() : 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수
let numbers=[273,52,103,25,384]

numbers=numbers.map(function (value, index, array){
  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) => {
    consoel.log(value)
  })
  • 타이머 함수 : 특정 시간마다 or 특정 시간 이후에 콜백함수를 호출
함수 이름 설명
setTimeout(함수, 시간) 특정 시간 후에 함수를 한 번 호출
setInterval(함수, 시간) 특정 시간마다 함수를 호출
clearTimeout(타이머_ID) setTimeout() 함수로 설정한 타이머를 제거
clearInterval(타이머_ID) setInterval() 함수로 설정한 타이머를 제거
setTimeout(()=>{
  console.log('1초후에 실행')
},1*1000)

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

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

댓글남기기