9/27

나머지 매개변수

: 호출할 때 매개변수의 개수가 고정적이지 않은 가변 매개변수 함수를 구현할 때 사용
: 함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 배열로 들어온다.

📌가변 매개변수 함수 사용 방법

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

array = [52, 273, 32, 103]
function 함수(...array) {}
여기서 (...array) = (52, 273, 32, 103)

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

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)			// 1, 2, [3]
sample(1, 2, 3, 4)		// 1, 2, [3, 4]

(연습) 입력된 자료형에(배열 or 숫자형) 따라 다르게 작동하는 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)}`)

출력결과

min(배열): 24
min(숫자, ...): 24

전개 연산자

: 배열을 매개변수로 전달할 때 배열을 전개해서 전달해주는 기능!!
: 배열 앞에 마침표 3개(...)를 붙이는 형태로 사용

📌 비교

• 나머지 매개변수 : 함수를 구현할 때 사용되는 개념
• 전개 연산자 : 함수를 호출할 때 사용되는 개념

(참고 용어)

- 파라미터(Parameter) : 매개변수. 
- 아규먼트(Argument) : 함수를 호출할 때 파라미터(=매개변수)로 전달하는 값

전개연산자 사용했을 때와 사용하지 않았을 때

// 단순하게 매개변수를 모두 출력하는 함수
function sample(...items) {
  console.log(items)
}

// 전개 연산자 사용 여부 비교하기
const array = [1, 2, 3, 4]

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

const array2 = ['사과', '배']

sample(array2)
sample(...array2)
sample('사과', '배')

출력 결과

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

[ [ '사과', '배' ] ] 		// 전개 연산자 미사용   
[ '사과', '배' ]			// 전개 연산자 사용
[ '사과', '배' ]			// 단순 string의 나열로 직접 입력(= 전개연산자)

• 함수 구현할 때 나머지 매개변수를 사용하게 되면 그냥 단순히 숫자형,문자열로만 입력해도 배열로 반환된다.
• 근데 배열을 입력했으니 배열이 중첩되는 것!
  • 나머지 매개변수 사용하면,
  • 입력 : a // 리턴 : [a]
  • 여기서 a가 [1,2,3,4] 이므로, a 대신 넣게 되면 >> [[1,2,3,4]] 의 형태가 되는 것!

---

기본 매개변수

• 함수에 항상 비슷한 값을 입력하는 경우, 매개변수에 기본값을 지정하는 것
  (반복입력 작업을 피하기 위해)

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

❗️ 기본 매개변수는 반드시 오른쪽에!!

(참고)

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

이렇게 기본 매개변수의 순서를 앞에 두면, b를 입력하기 위해 결국 a의 값을 입력해야 하므로 의미가 없다.

Example 1

• 

• 

Example 2

• 

• 

Example 3

• 

• 

(연습) 기본 매개변수를 추가한 윤년 함수

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

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

출력 결과

매개변수 year: 2022
올해는 윤년일까? === false

function isLeapYear(year=new Date().getFullYear()) {}

기본값을 이렇게 함수로 넣을 수도 있다.
.getFullYear() 는 new Date() 값에서 Year값만 숫자형으로 가져온다.
console.log(new Date())  				 // 2022-09-26T15:45:31.604Z
console.log(new Date().getFullYear())	 // 2022

그 밖의 날짜/시간 메소드들

• 

구버전 자바스크립트

🙋🏼‍♀️ 구버전 자바스크립트에서 가변 매개변수 구현하기

arguments

함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체

함수를 호출할 때 전달되는 아규먼트의 개수가 불규칙적일 때 유용하게 활용될 수 있다.
나머지 매개변수 ...Array 와 비슷하게 쓰이는 것 같지만,
실행 결과를 보면 arguments는 내부에 특이한 값이 있다.
일반적인 배열처럼 활용하면 여러 위험을 내포하므로 나머지 매개변수가 추가된 것.

arguments객체는 유사 배열이기 때문에 배열의 메소드를 활용할 수 없다.

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

sample(1, 2, 3 ,4)

출력 결과

[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }
0번째 요소: 1
1번째 요소: 2
2번째 요소: 3
3번째 요소: 4

function printArguments() {
  // arguments 객체의 요소들을 하나씩 출력
  for (const arg of arguments) {
    console.log(arg); 
  }
}

printArguments('Young', 'Mark', 'Koby');

🙋🏼‍♀️ 구버전 자바스크립트에서 전개 연산자 구현하기

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

// 전개 연산자 사용 여부 비교하기
const array = [1, 2, 3, 4]
console.log(sample.apply(null, array))
console.log('================')
sample(...array)

출력 결과

[ 1, 2, 3, 4 ]
undefined
================
[ 1, 2, 3, 4 ]

- 이상하게 apply를 사용하면 undefined가 같이 출력된다.. 

🙋🏼‍♀️ 구버전 자바스크립트에서 기본 매개변수 구현하기

• 함수의 매개변수에 바로 값을 입력하는 기본 매개변수는 최신 자바스크립트(ES 2015)에서 추가된 기능

구 버전에서 기본 매개변수 구현하기

1.

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

• 매개변수에 undefined 가 아닌 값이 들어오면 → wage = wage (입력값 사용)
  (값을 넣지 않거나, undefined 값을 넣었을 때)
• 매개변수가 undefined 값이 들어오면 → wage = 8590 로 셋팅됨

2. 매개변수로 들어오는 값이 (false 또는 false로 변환되는 값) 이 아니라는 게 확실할 때

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

• 일반적으로 불린값으로 변환시 true로 변환됨
• false 또는 false로 변환되는 값(falsy 값) : 빈문자(''), 숫자 0, NaN, undefined, null
  
  
• wage = wage || 8590
  • 왼쪽 부분(회색 영역 wage) 가 true 이면 || 에 의해 왼쪽 값 그대로 사용하므로 wage = wage
  • 왼쪽 부분(회색 영역 wage) 가 false 이면 || 에 의해 오른쪽 값을 사용하므로 wage = 8590