온보딩 커리큘럼[함수의 기본 형태]

함수 - 코드의 집합

필요할때마다 호출하여 반복적으로 사용할 수도 있다.

 

 

익명함수 - 이름이 붙어있지 않는 함수

let 함수 = function( ) { }

선언적 함수  - 이름이 있는 함수

function 함수( ) { }

 

리턴값 - 함수의 최종 결과를 리턴값이다.

function f(x){
  return x * x
}

console.log(f(3))

 

기본적인 함수 예제

1. 윤년을 확인하는 함수 만들기

(윤년: 2월에 29일까지도 있는 년도)

• 4로 나누어 떨어지는 해는 윤년이다.
• 하지만 100으로 나누어 떨어지는 해는 윤년이 아니다.
• 하지만 400으로 나누어 떨어지는 해는 윤년이다.

윤년이 있는 달력

function isLeapYear(year) {
  return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0
}

console.log(isLeapYear(2020)) //true

함수에 true나 false를 리턴하는 함수는 is로 시작하는 이름으로 많이 만든다. 

 

2. A부터 B까지 더하는 함수 만들기



function sumAll(a,b){
  let output = 0
  for (let i = a; i <= b; i++){
    output += i
  }
  return output
}

console.log(1, 100) // 5050

function 함수(매개변수){
  let output = 초깃값
  //처리한다
  return output
}

---

나머지 매개변수 

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

함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 배열로 들어온다.

<예제>

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

sample(1,2)
//[1,2]

 

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

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

function sample(a,b,...c){
  console.log(a,b,c)
}

sample(1,2) // 1,2,[]
sample(1,2,3,4) // 1,2,[3,4]

실행결과 : 함수를 호출할 떄 매개변수 a, b가 먼저 들어가고 남은 것들은 모두 c에 배열 형태로 들어간다.

 

---

전개 연산자

함수의 매개변수로 전달해주는 전개연산자를 제공한다.
함수이름(...배열)

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

const array = [1, 2, 3, 4]

console.log(`# 전개 연산자를 사용하지 않은 경우`)
sample(array)
console.log(`# 전개 연산자를 사용한 경우`)
sample(...array)

// # 전개 연산자를 사용하지 않은 경우
// [ [ 1, 2, 3, 4 ] ]
// # 전개 연산자를 사용한 경우
// [ 1, 2, 3, 4 ]

실행한 결과를 보면 전개연산자를 사용하지 않은 경우에는 배열이 매개변수로 들어오고 전개 연산자를 사용한 경우에는 숫자가 하나하나 전개되어 매개변수로 들어오는것을 볼 수 있다.

 

---

기본 매개변수 

매개변수에 기본값을 지정한다.

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

function earnings(name, wage = 8590, hours = 40) {
  console.log(`# ${name} 님의 급여 정보`)
  console.log(`-시급: ${wage}`)
  console.log(`-근무 시간 : ${hours}시간`)
  console.log(`-급여: ${wage * hours}원`)
  console.log('')
}

earnings('구름')
// # 구름 님의 급여 정보
// -시급: 8590
// -근무 시간 : 40시간
// -급여: 343600원
earnings('별', 10000)
// # 별 님의 급여 정보
// -시급: 10000
// -근무 시간 : 40시간
// -급여: 400000원
earnings('인성', 10000, 52)
// # 인성 님의 급여 정보
// -시급: 10000
// -근무 시간 : 52시간
// -급여: 520000원

기본 매개변수는 값이라면 무엇이든지 넣을 수 있다.

 

---

함수고급

콜백 함수 

콜백 함수(callback function)란 다른 함수의 인수(parameter)로서 전달되어, 필요한 시점에 호출되는 함수를 말한다.

예를 들어, 자바스크립트에서는 콜백 함수를 이용하여 비동기적으로 처리되는 작업이 끝난 후 결과를 처리할 수 있습니다. 이때, 콜백 함수는 비동기 작업이 끝난 후 자동으로 호출되어 결과를 처리한다.

또한, 콜백 함수는 이벤트 처리에도 자주 사용됩니다. 예를 들어, HTML 문서에서 버튼을 클릭하면 해당 버튼에 대한 이벤트를 처리하는 콜백 함수가 실행된다.

콜백 함수는 함수형 프로그래밍 패러다임에서 매우 중요한 개념으로, 고차 함수(higher-order function)와 함께 사용되는 경우가 많다.

 

// 콜백 함수를 인자로 받는 함수 예제
function processData(data, callback) {
  console.log("Processing data...");
  setTimeout(function() {
    callback(data);
  }, 2000);
}

// 콜백 함수 예제
function displayData(data) {
  console.log("Data:", data);
}

위 코드에서 processData 함수는 데이터를 처리한 후, 2초 후에 전달된 콜백 함수를 호출한다. 이때 displayData 함수가 콜백 함수로 전달되어 데이터가 출력된다.

이 예제에서는 setTimeout 함수를 사용하여 비동기적으로 작업을 수행하고 있다. 이 함수는 지정된 시간(ms)이 지난 후에 콜백 함수를 실행한다. 따라서 processData 함수는 비동기적으로 작업을 수행하며, 작업이 완료되면 콜백 함수를 호출한다.

 

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

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

callThreeTimes(print)
// 0번째 함수 호출
// 1번째 함수 호출
// 2번째 함수 호출

<확인문제>

1. A부터 B까지 범위를 지정했을 때 범위 안에 숫자를 모두 곱하는 함수를 만들어보세요.

function multiplyAll(a, b) {
  let c = 1
  for (i = a; i <= b; i++) {
    c *= i
  }
  return c
}

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

2. 다음 과정에 따라 최대값을 찾는 max()함수를 만들어 보세요.

• 매개변수로 max([1,2,3,4])와 같은 배열을 받는 max()함수를 만들어 보세요.

const max = function (array) {
  let output = array[1]
  for (const i of array) {
    if (output < i) {
      output = i
    }
  }
  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 i of array) {
    if (output < i) {
      output = i
    }
  }
  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 i of items) {
    if (output < i) {
      output = i
    }
  }
  return output
}


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

숫자 자료형은 typeof연산자를 사용해서 쉽게 확인 할 수 있다. 다만 배열에 typeof연산자를 사용하면 object(객체)라는 결과가 나온다.

배열인지 정확하게 확인하기 위해서는 Array.isArray( )메소드를 활용하면 된다.

 

1. filter 함수의 콜백 함수 부분을 채워서
   1. 홀수만추출
   2. 100이하의 숫자만 추출
   3. 5로 나눈 나머지가 0인 수만 추출해주세요.

        그리고 코드의 실행 결과를 적어보세요.

let number = [273, 25, 75, 52, 103, 32, 57, 24, 76]

number = number.filter((e) => e % 2 !== 0 && e < 100 && e % 5 === 0)


console.log(number)
//[ 25, 75 ]

2. 이전에 반복문 부분에서 살펴보았던 다음과 같은 코드를 배열의 forrEach 메소드를 사용하는 형태로 변경해주세요.

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

console.log('# for in 반복문')
for(const i in array){
  console.log(i)
}

console.log('# for of 반복문')
for(const i of array){
  console.log(i)
}

 <결과값>

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

console.log('# for in 반복문')
array.forEach((i, e) => {
  console.log(e)
})

console.log('# for of 반복문')
array.forEach((i) => {
  console.log(i)
})

 

 

아..오늘도 역시나 너무 어려웠다.. 

반복문을 알아야 함수도 할수있겠구나 싶었다.. 

혼자 공부하는 자바 스크립트.. 아자아자 화이팅!!