자바스크립트 - 함수

1. 함수

- 코드의 집합을 나타내는 자료형, 반복적으로 수행되는 일 (로직)이 있을 때 함수 생성

- 어떤 기능을 수행하는 함수를 만들기 위해서 함수 선언 (function) 

- 함수 선언을 위해서 keyword, name, parameter, body가 필요

- 프로시저 형태 함수

// 익명 함수
const f = function (매개변수, 매개변수) {
 return 리턴값
}

// 선언적 함수
funtion f (매개변수, 매개변수) {
 return 리턴값
}

- 수학적 함수

f(x) = x + 5 
const f = function (아무거나) {
return 아무거나 + 5
}

console.log(f(1)) // 6

 

2. 익명 함수

(1) 함수는 코드의 집합을 나타내는 자료형

(2) 함수를 사용할 때 { } 내부에 코드를 작성

(3) 이름이 붙여져 있지 않은 함수

(4) 반복되는 코드를 한 번만 정의 후 필요할 때마다 호출 가능

(5) 기능별로 나누어 여러 함수로 작성하면 모듈화 가능, 전체 가독성 좋아짐

(6) 기능별(함수별)로 수정 가능, 유지보수 쉬움

function() {}

(7) 예시

const 함수 = function() {

console.log('함수 내부의 코드입니다 1')
console.log('함수 내부의 코드입니다 2')
console.log('함수 내부의 코드입니다 3')
console.log('')
}

함수()  // 함수가 시작되면 const 함수 위치로 점프
함수()  // 함수가 끝나면 원래 위치로 리턴

console.log(typeof 함수)
console.log(함수)

 

3. 선언적 함수

(1) 이름이 붙여진 함수

function 함수() {}

let 함수 = function () {} ;

- 예시 (익명함수와 달리 function에 함수라고 이름이 붙여짐)

function 함수() {

console.log('함수 내부의 코드입니다 1')
console.log('함수 내부의 코드입니다 2')
console.log('함수 내부의 코드입니다 3')
console.log('')
}

함수()
함수()

console.log(typeof 함수)
console.log(함수)

 

4. 매개변수 / 리턴값

(1) 매개변수 : 함수를 호출할 대 괄호 안에 적는 것

(2)  모든 함수에 사용할 필요 없고, 필요한 경우에만 매개변수와 리턴값 사용

(3) 리턴값 : 함수의 최종 결과

function 함수 (매개변수, 매개변수, 매개변수) {
문장
문장 
return 리턴값
}

- 예시

- 함수 f(x)를 return해서 console log에 출력

function f(x) {
 return x * x
}

console.log(f(3))

 

5. 예제 (1)

- isLeapYear로 함수 이름을 붙인 다음 윤년에 대한 조건 입력

- 해당연도 나누기 4가 되면 해당 / 해당연도 나누기 100이 되면 해당되지 않음 / 해당연도 나누기 400이 되면 해당

- 위의 조건을 만족했을 때 윤년이므로 조건 입력 후 return하고 console log에 출력

// (year)은 윤년일까?

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

console.log (`${isLeapYear(2016)}`) // false
console.log (`${isLeapYear(2020)}`) // true

// 윤년인 2016년의 (month/date)를 입력하면 무슨 요일일까?

function solution(a, b) {
    let answer = '';
    
    let days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];    
    
    let dayIndex = new Date(2016, a-1, b).getDay();
    
    answer = days[dayIndex];
    
    return answer;
}

 

6. 예제 (2)

 

- A부터 B까지 더하는 함수

- sumAll로 함수 이름을 붙인 다음 a, b의 매개변수 입력

- output = 0으로 선언

- i가 a 이고, b는 i보다 작거나 같을 때 i를 1개씩 더한다면, output은 i가 1씩 증가

- output을 return 하고 console log에 출력

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

console.log (`${sumAll(1,100)}`) // 5050
console.log (`${sumAll(1,500)}`) // 125250

 

7. 예제 (3)

- 두 정수 사이의 합

function solution(a, b) {
    var answer = 0;
    
    if (a <= b) {
        for (let i = a; i <= b; i++) {
            answer += i
        } 
    } else {
        for (let i = b; i <= a; i++) {
             answer += i;              
        } 
    }
    return answer;
}

- 같은 조원분에게 공유받은 사이트에서 관련 내용을 찾아서 덧셈을 곱셈으로 변경했다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition_assignment

Addition assignment (+=) - JavaScript | MDN

 

8. 예제 (4)

- A부터 B까지 곱하는 함수

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

console.log(`1-10의 곱: ${MatAll(1,10)}`)

출력
3628800

- min로 함수 이름을 붙인 다음 array를 매개변수 입력

- array[0]은 0인 length를 가진 array를 의미

- const item of array는 반복되는 array에서 item인 변수 (반복되는 시퀀스에서 값을 받는 것)이 있을 때

- 만약 item 값이 output보다 작으면 (최소값)

- output이 item 값이 되고, output으로 return한다.

- 아래 내용 참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

for...of - JavaScript | MDN

 

9. 예제 (5)

- 최소값 구하는 함수

function min(array) {
  let output = array[0]
  for (const item of array) {
    if (output > item) {
      output = item
    }
  }
  return output
}

const testarray = [52, 273, 32, 103, 275, 24, 57]

console.log(`최소값 = ${min(testarray)}`)

출력
24

 

10. 예제 (6)

- 최대값 구하는 함수

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

const testarray = [52, 273, 32, 103, 275, 24, 57]

console.log(`최대값 = ${max(testarray)}`)

 

11. 기본 매개변수

(1) 항상 같은 매개변수를 여러번 반복해서 입력하는 것이 번거로운 경우

(2) 매개변수에 기본값을 지정하는 기본 매개변수를 사용

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

- 예시

function sample (a=기본값, b) {}

- 매개변수로 시급 / 시간을 입력 받아 급여를 계산하는 함수

// 함수 이름 : earning
// 매개 변수 : name(이름), wage(시급), hours(시간)
// 함수 역할 : 이름, 시급, 시간 출력하고, 시급과 시간을 총한 최종 급여 출력

function earning (name, wage=8590, hours=40) {

console.log(`# ${name} 님의 급여정보`)
console.log(`시급 : ${wage}원`)
console.log(`시간 : ${hours}시간`)
console.log(`급여 : ${wage * hours}원`)
console.log('')
}

earning('별')
earning('달', 10000)
earning('해', 10000, 52)

- 기본 매개변수를 추가한 윤년 함수

function isLeapYear(year = new Date().getFullYear()) {
 console.log(`매개변수 year: ${year}`)
 return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)
}

console.log(`윤년일까? === ${isLeapYear(2020)}`)

 

12. API (Application Programming Interface)

- 애플리케이션 프로그램을 만들 때의 약속

- 종류가 다양 ex. WebAPI / WinAPI / Javascript API / Node API 등등

- 우리가 사용하는 alert 혹은 console.log와 같은 것들이 API에 해당

- API를 개발하는 사람들이 API설계자 / 사용하는 사람들이 API사용자

- 아래 내용부터는 API설계자가 주로 사용하는 내용

 

11. 나머지 매개변수

(1) 가변 매개변수 함수 : 호출할 대 매개변수의 개수가 고정적이지 않은 함수

(2) 나머지 매개변수 : 자바스크립트에서 매개 변수 함수를 구현할 때 사용하는 문법

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

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

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

- 나머지 매개변수를 이용해서 최소값 찾는 함수

function min(...items) {
 let output = items[0]
 for (const item of itmes) {
  if (output > item) {
   output = item
  }
 }
 return output
}


console.log('min(52,273,32,103,275,24,57)')       // min(52,273,32,103,275,24,57)
console.log(`= ${min(52,273,32,103,275,24,57)}`)  // = 24

- 매개변수의 자료형에 따라 다르게 작동하는 min() 함수

- 이 부분은 한번 더 봐야할 것 같다.

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)}`)
  
  
출력
instrument.js:109 min(배열): 24
instrument.js:109 min(숫자, ...): 24

 

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

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

- 예시

- 나머지 매개변수와 일반 매개변수를 갖는 함수

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

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

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 (cost item of items) {
   if (output > item) {
   output = item
   }
  }
  return output
}

console.log(`min(배열): ${min([52, 273, 32, 103, 275, 24, 57])}`)        // min(배열): 24
console.logo(`min(숫자, ...): ${min([52, 273, 32, 103, 275, 24, 57])}`)  // min(숫자, ...): 24

 

13. 전개 연산자

- 매개변수로 배열을 입력할 수 없고 숫자를 입력해야 하는 함수가 있을 때

min (52, 273, 32, 103)
min (52, 273, 32, 103, 275, 24, 57)

- 배열 자료형으로 읽어들였다면 위와 같은 형태의 min() 함수를 호출하는 방법은?

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

- 기본적으로 배열 요소를 하나하나 전개해서 읽는 방법이 있음

min(array[0], array[1], array[2], array[3])

- 이런 상황에서 배열을 전개해서 함수의 매개변수로 전달해주는 전개연산자 사용

함수 이름(...배열)

- 즉

const 함수 = function (a,b,c) {
 console.log(a,b,c)
}

const a = [1,2,3]
 함수 (a[0], a[1], a[2])   // 1 2 3
 함수 (...a)               // 1 2 3
 
 // 두가지가 같은 형태로 나머지 매개변수를 이용하여 간략하게 작성 가능

- 전개 연산자 활용

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

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

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

// [Array(4)]

console.log('#전개 연산자를 사용한 경우')
sample (...array)

// [1,2,3,4]

 

14. 요약

- 익명 함수 : 이름 없는 함수, funtion () {} 

- 선언적 함수 : 이름 있는 함수, function 함수이름 () {}

- 리턴값 : 함수의 최종적인 결과

- 매개변수 : 괄호 안에 넣는 변수

- 가변 매개 변수 : 매개변수의 개수가 고정되어 있지 않은 함수, 나머지 매개변수 활용해서 만듬

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

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