[JavaScript 8] 함수의 기본 형태

김헤일리·2022년 11월 11일

JavaScript preonboarding 항해99

JavaScript

목록 보기

9/20

함수를 쓰면 좋은 이유:
- 반복되는 코드를 한번만 정의하고 필요할때마다 호출 - 재사용성의 중점을 뒀다
- 프로그램을 기능별로 나눠서 함수에 넣어두면 모듈화가 가능하다.
- 함수별로 수정이 가능하기 때문에 유지보수가 쉽다.

함수의 종류와 사용법

1. 익명 함수

함수는 코드의 집합이기 때문에 필요할때마다 호출한다.
함수 호출 시 해당 함수의 이름을 부르는데, 이때 별다른 이름이 붙어있지 않은 함수를 익명 함수라고 한다.
예시:
```
 const 함수 = function() {
  console.log('함수 내부의  코드 입니다...1')
  console.log('함수 내부의  코드 입니다...2')
  console.log('함수 내부의  코드 입니다...3')
  console.log('함수 내부의  코드 입니다...4')
  console.log('함수 내부의  코드 입니다...5')
  console.log('')
}

함수()
함수()

console.log(typeof 함수)
console.log(함수)
```
- 변수명을 "함수"라고 선언하고, 해당 변수 안에 익명 함수 function() {}을 넣었다.
- 그리고 변수 호출 시, ()를 사용해서 변수 안에 들어있는 함수를 호출했다.
  - ``()```는 함수 호출을 하는 플레이버튼이라고 할 수 있다.
- 변수 "함수"는 익명 함수인 function() {}를 정의하기 때문에, "함수"의 자료형은 function이다.
- 콘솔에 변수를 호출하면, 해당 변수 안에 있는 익명함수의 형태가 표시된다.

2. 선언적 함수

익명 함수와는 다르게, 함수 생성 시 해당 함수에 이름을 부여한 것을 선언적 함수라고 한다.
예시:
```
 function 함수() {
  console.log('함수 내부의  코드 입니다...1')
  console.log('함수 내부의  코드 입니다...2')
  console.log('함수 내부의  코드 입니다...3')
  console.log('함수 내부의  코드 입니다...4')
  console.log('함수 내부의  코드 입니다...5')
  console.log('')
}

함수()
함수()

console.log(typeof 함수)
console.log(함수)
```
- 변수를 선언하지 않고, 함수 자체의 이름을 "함수"라고 선언한 후, 함수의 내용:
  - fconsole.log('함수 내부의 코드 입니다...1')을 넣었다.
- 그리고 함수의 이름을 이용해서 함수를 호출했다.
- "함수"는 이제 변수 안에 있는 function이 아니라, function 그 자체이다.
- 콘솔에 "함수"를 호출하면, 자료형은 function으로 표시되고, 함수의 이름인 "함수"도 표시된다.
  - 익명함수 예시와 결과값은 별다를게 없으나, 콘솔에 "함수" 호출 시, 익명 함수와는 다르게 f 함수()라고 표시되어 있는 것을 확인할 수 있다.

3. 추가 용어

매개변수:

함수 호출 시 ()안에 넣는 input값을 매개변수라고 한다.
변수를 넣을 때, 해당 변수는 배열일 수도, 또 다른 함수일 수도, 단순 값일 수도 있다.

리턴값:

함수의 최종 결과물인 output을 의미한다. return이라는 키워드에 반응하여 출력된다.

함수의 기본 형태:

function 함수이름 (매개변수, 매개변수, 매개변수) {
  statement
  statement
  return 리턴값
}

예시 : 특정 년도는 윤년일까?
```
function leapYear (year) {
  return (year % 4 === 0) || (year % 400 === 0) && (year % 100 !== 0)
}

console.log(`2020년은 윤년일까? === ${leapYear(2020)}`)
console.log(`2000년은 윤년일까? === ${leapYear(2000)}`)
console.log(`2011년은 윤년일까? === ${leapYear(2011)}`)
```
1. 특정 년도가 윤년일지 아닐지를 판단하기 위해 함수 생성 function leapYear(year)
  - 이 함수는 매개변수 year에 어떤 값을 넣는지에 따라 리턴값이 달라진다.
2. year가 4 혹은 400으로 나누어 떨어지고, 100으로는 나눠 떨어지지 않으면 윤년이다.
  - 그렇기 때문에 year % 4 === 0과 year % 400 === 0은 &&연산자로 묶이고,
  - or로 지정되어야 하는 조건 year % 100 !== 0의 경우 ||로 묶인다.
3. 함수를 사용하기 위해 호출하고, 매개변수에 원하는 값을 넣어서 출력하면, 매개변수가 조건에 맞을 경우 (윤년일 경우) true/false를 호출한다!

가변 매개변수 함수:

함수 호출시 매개변수의 개수가 고정적이지 않은 함수가 가변 매개변수 함수이다.
이런 형태의 함수를 구현할 때 JS는 나머지 매개변수라는 특정 형태의 문법을 사용한다.

나머지 매개변수

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

함수의 매개변수 앞에 마침표를 3개 붙이면 매개변수들이 배열로서 들어온다.
- 예시:
```
function sample(...items) {
  console.log(items)
}

sample(1,2)
sample(1,2,3)
sample(1,2,'셋')
```
  - sample이라는 함수에 입력되었던 매개변수들이 console에 호출되었을 때 배열 형태를 하고 있는 것을 확인할 수 있다.
  - sample(1,2) = [1, 2]
  - sample(1,2,3) = [1, 2, 3]
  - sample(1,2,'셋') = [1, 2, '셋']
나머지 매개변수는 일반 매개변수와 조합해서 사용할 수 있다.
```
 function 함수이름 (매개변수, 매개변수, ...나머지 매개변수) { }
```
- 예시:
```
function sample(a,b,...c) {
  console.log(a,b,c)
}

sample(1,2)
sample(1,2,3)
sample(1,2,3,4)
```
  - 함수 sample 호출 시, 매개변수의 위치가 (...c)에 해당하는 (3,4)의 경우, 배열 형태로 콘솔에 찍힌다.
  - sample(1,2) = 1, 2
  - sample(1,2,3,4) = 1, 2, [3, 4]

나머지 매개변수와 일반 매개변수를 조합할 때, 매개변수의 자료형에 따라 구분하고 맞는 조건의 원하는 결과값을 리턴해주는 함수를 구현하기 위해선 매개변수가 배열인지 정확하게 확인할 수 있는 Array.isArray()라는 메소드를 활용해야 한다.

예시: 매개변수가 배열인 형태와 일반인 형태를 모두 입력할 수 있는 함수 만들기

const max = function(a,...array) //일반 매개변수와 나머지 매개변수를 조합해서 매개변수의 자료형이 다양할 수 있도록 설정
  let output // 함수의 결과값으로 리턴될 변수를 선언
  let items // 매개변수로 들어온 값이 배열일 경우, 배열의 값을 대표할 변수

  if (Array.isArray(a)){ //만약 "a"로 들어온 매개변수의 자료형이 "배열"일 경우,
    output = a[0] // "a"라는 배열의 첫번째 요소를 대입
    items = a // "a"라는 배열 자체의 값을 의미 >> 이미 배열
  } else if (typeof(a)==='number'){ // 만약 "a"로 들어온 매개변수의 자료형이 "숫자"일 경우, 
    output = a // 들어온 숫자의 첫번째 값으로 대입됨
    items = array // 숫자로 들어온 매개변수들의 나머지 숫자들로 대입 (첫번째 숫자를 제외한)
    //***...나머지 매개변수***로 인해 숫자로 들어온 숫자들도 배열로 변한다. >> 이제 배열
  }

  for (const i of items){ // 반복 변수 "i"에 배열"items"의 요소 값이 들어간다. (호출 시 인덱스가 아닌 인덱스가 가진 "값"이 표시된다)
    if (output < i){ // output의 값이 i보다 작을 경우, 
      output = i // output에 i가 대입된다.
    }
  }
  return output // 해당 반복문이 실행되면 items라는 배열에 있는 모든 요소들이 1번요소로 지정된 output의 크기와 비교된다. 그래서 결과를 출력했을 때 배열 안에 있는 최댓값이 출력될 수 있다.
}

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

전개 연산자

배열을 전개해서 함수의 매개변수로 만들어주는 연산자다. (spread operator)
매개변수로 배열을 입력할 수 없는 상화에 배열을 해당 함수의 매개변수로 사용하고자 할 때 사용한다.
```
  function 함수이름 (...배열) { }
```
- 예시:
```
function sample (...items){
  console.log(items)
}

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

console.log(sample(array)+`전개 연산자가 없는 경우`)
console.log(sample(...array) + `전개 연산자 사용`)
```
  - 전개 연산자를 사용하지 않았을 때 출력값은 "4개의 요소를 가진 배열" 이었다. [Array(4)]
  - 전개 연산자를 사용한 경우 배열 내부의 요소가 1개씩 전개되어 출력되었다. (4) [1, 2, 3, 4]

기본 매개변수

같은 매새변수를 여러 번 반복해서 입력하는 비효율성을 보안하기 위한 방식.
매개변수에 기본값을 미리 지정해두는 방식이다.
기본 매개변수의 경우, 일반 매개변수의 오른쪽에 사용한다.
```
  function 함수이름 (매개변수, 매개변수 = 기본값, 매개변수 = 기본값) { }
```
- 예시:
```
function income (name, wage = 8590, hours = 40){
    console.log(`# ${name}님의 급여정보`)
    console.log(`- 시급: ${wage}원`)
    console.log(`- 근무시간: ${hours}시간`)
    console.log(`- 급여: ${wage * hours}원`)
    console.log(``)
}

income ('철수')

income ('영희', 10000)

income ('민수', 10000, 52)
```
  - income('철수')의 경우, 매개변수에 wage와 hours에 해당하는 매개변수를 넣지 않았기 때문에 기본 매개변수가 적용되어 income ('철수', 8590, 40)으로 기입한 것과 다름 없이 출력된다.
    - 철수님의 급여정보
    - 시급: 8590원
    - 근무시간: 40시간
    - 급여: 343600원
  - income('영희', 10000)의 경우, 매개변수 hours에 해당하는 매개변수를 넣지 않았기 때문에 hours의 경우, 기본 매개변수인 40이 적용된다.
    - 영희님의 급여정보
    - 시급: 10000원
    - 근무시간: 40시간
    - 급여: 400000
  - income('민수', 10000, 52)의 경우, 모든 매개변수에 특정 값을 넣었기 때문에 변수값에 맞춰서 출력된다.
    - 민수님의 급여정보
    - 시급: 10000원
    - 근무시간: 52시간
    - 급여: 520000원